केवल तत्व के लिए CSS शैलियों को रीसेट / निकालें

Question

मुझे यकीन है कि यह उल्लेख किया गया है / पहले पूछा जाना चाहिए, लेकिन कोई भाग्य के साथ एक उम्र के लिए खोज रहा है, मेरी शब्दावली गलत होनी चाहिए!

मुझे अस्पष्ट रूप से एक ट्वीट याद है जो मैंने थोड़ी देर पहले देखा था कि सुझाव दिया था कि एक सीएसएस नियम उपलब्ध था जो किसी विशेष तत्व के लिए पहले से स्टाइल स्टाइलशीट में स्थापित किसी भी शैली को हटा देगा।

एक अच्छा उपयोग उदाहरण एक मोबाइल-पहली RWD साइट में हो सकता है जहां छोटे-स्क्रीन के विचारों में किसी विशेष तत्व के लिए उपयोग की जाने वाली बहुत सारी स्टाइलिंग को डेस्कटॉप दृश्य में समान तत्व के लिए 'रीसेट' या हटाने की आवश्यकता होती है।

एक सीएसएस नियम जो कुछ हासिल कर सकता है जैसे:

.element {
  all: none;
}

उदाहरण उपयोग:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

इसलिए हम हर संपत्ति की घोषणा किए बिना स्टाइल को जल्दी से हटा सकते हैं या फिर से सेट कर सकते हैं।

समझ में आता है?

Comments

नहीं, ऐसी कोई बात नहीं है। एक बार एक तत्व को एक नियम के माध्यम से एक निश्चित सीएसएस शैली प्राप्त हुई है, यह सिर्फ "वापस ले लिया" नहीं हो सकता है - एक ही तरीका है कि स्पष्ट रूप से वांछित मूल्य के साथ हर सीएसएस संपत्ति को अधिलेखित किया जाए।

— CBroe

इसे करने का तरीका मीडिया प्रश्नों के साथ पहले स्थान पर इसे प्रतिबंधित करना है

— केविन लिंच

— संबं धत लं क

वहाँ है एक संपत्ति कहा जाता allहै कि पुन: सेट करने का प्रस्ताव किया जा रहा है सब कुछ सीएसएस चौड़ा मूल्यों के लिए एक दिया तत्व के लिए सीएसएस गुण - मूल्य का उपयोग करना चाहते हो सकता है unset, जो या तो अपनी विरासत में मिला मूल्य के लिए किसी प्रॉपर्टी को रीसेट करता है कि क्या यह सामान्य से इनहेरिट करती है, या अन्यथा, इसका प्रारंभिक मूल्य। कार्यान्वयन पर कोई शब्द नहीं है, लेकिन किसी को इसके बारे में सोचना अच्छा है।

— BoltClock

all: revertकरूँगा। मेरा जवाब देखिए। @CBroe हाँ अब ऐसी बात मौजूद है।

— असीम केटी

Answer 1

CSS3 कीवर्ड सीएसएस 3 संपत्ति को प्रारंभिक मान मेंinitial सेट करता है जैसा कि कल्पना में परिभाषित किया गया है । initialकीवर्ड व्यापक ब्राउज़र समर्थन IE और ओपेरा मिनी परिवारों के लिए छोड़कर।

चूंकि IE के समर्थन की कमी के कारण समस्या हो सकती है, इसलिए कुछ तरीके हैं जिनसे आप कुछ CSS गुणों को अपने प्रारंभिक मानों में रीसेट कर सकते हैं:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• रीटवेंट गीथब रेपो को एक डीईट 2017 और अधिक शानदार सूची के साथ
• सम्बंधित
• एमडीएन से संबंधित
• संबंधित W3C चश्मा

जैसा कि @ user566245 द्वारा एक टिप्पणी में उल्लेख किया गया है:

यह सिद्धांत रूप में सही है, लेकिन अलग-अलग लाभ भिन्न हो सकते हैं। उदाहरण के लिए, डिफ़ॉल्ट रूप से टेक्सारिया जैसे कुछ तत्वों की सीमा होती है, इस रीसेट को लागू करने से उन टेक्सारिया की सीमा कम हो जाएगी।

[POST EDIT FEB 4, '17] एक आधुनिक आदर्श, उपयोगकर्ता जोस्ट बनने के लिए तैयार

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

W3 से उदाहरण दें

उदाहरण के लिए, यदि कोई लेखक सभी को निर्दिष्ट करता है: एक तत्व पर प्रारंभिक यह सभी उत्तराधिकार को अवरुद्ध करेगा और सभी गुणों को रीसेट करेगा, जैसे कि लेखक, उपयोगकर्ता, या कैस्केड के उपयोगकर्ता-एजेंट के स्तर में कोई नियम नहीं दिखाई देते हैं।

यह एक पृष्ठ में शामिल "विजेट" के मूल तत्व के लिए उपयोगी हो सकता है, जो बाहरी पृष्ठ की शैलियों को विरासत में लेने की इच्छा नहीं रखता है। ध्यान दें, हालांकि, उस तत्व पर लागू किसी भी "डिफ़ॉल्ट" शैली (जैसे, उदाहरण के लिए प्रदर्शन: ब्लॉक तत्वों पर यूए शैली शीट से ब्लॉक जैसे) को भी उड़ा दिया जाएगा।

---

JAVASCRIPT?

सीएसएस को रीसेट करने के लिए सीएसएस के अलावा किसी ने भी नहीं सोचा? हाँ?

वहाँ है कि स्निप पूरी तरह से प्रासंगिक: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") DOM से सभी तत्वों को लौटाएगा। तब आप संग्रह में प्रत्येक तत्व के लिए शैलियाँ सेट कर सकते हैं:

VisioN द्वारा 20:15 पर 9 फरवरी को उत्तर दिया गया

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

---

इस सब के साथ कहा; मुझे नहीं लगता कि एक सीएसएस रीसेट तब तक संभव है जब तक कि हम केवल एक वेब ब्राउज़र के साथ समाप्त न हों .. अगर ब्राउज़र में अंत में 'डिफ़ॉल्ट' सेट है।

तुलना के लिए, यहां एक फ़ायरफ़ॉक्स 40.0 वैल्यू लिस्ट है <blockquote style="all: unset;font-style: oblique">जहाँ एक font-style: obliqueट्रिगर्स DOM ऑपरेशन है।

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Comments

मुझे लगता है कि यह सिद्धांत रूप में सही है, लेकिन अलग-अलग लाभ भिन्न हो सकते हैं। उदाहरण के लिए, डिफ़ॉल्ट रूप से टेक्सारिया जैसे कुछ तत्वों की सीमा होती है, इस रीसेट को लागू करने से उन टेक्सारिया की सीमा कम हो जाएगी। तो यह एक सही रीसेट नहीं है। मैंने इसका उपयोग केवल कुछ संपत्तियों के लिए किया, जिनकी मुझे परवाह थी। आप सभी तत्वों को रीसेट करने या किसी विशिष्ट तत्व के अंदर सभी तत्वों को रीसेट करने के लिए इसे * चयनकर्ता के साथ जोड़ सकते हैं।

— user566245

@ user566245 * चयनकर्ता के साथ इसे लागू करने से आपका ब्राउज़र और बिल्ली का बच्चा मर जाएगा। यह एक सही रीसेट नहीं है। सही रीसेट अभी मौजूद नहीं है

— मिल्के पैटर

@Milkywayspatterns योग्य, आप शायद सही हैं। मेरे लिए मैंने केवल उन विशेषताओं को लिया जो मैं रीसेट करना चाहता था और "div # theid *" पर लागू किया। उम्मीद है कि यह किसी को भी नहीं मारता बिल्ली का बच्चा :)

— user566245

@ जेरेमी: आप ब्राउज़र डिफॉल्ट के बारे में सोच रहे हैं, जो विभिन्न तत्वों के लिए अलग-अलग है। प्रदर्शन का प्रारंभिक मूल्य हमेशा इनलाइन होता है, चाहे जिस तत्व पर इसे लागू किया जा रहा हो।

— BoltClock

@mmmshuddup टिप के लिए धन्यवाद। यदि आप मूल उत्तर पर एक नज़र डालते हैं, तो मैंने इसे सीएसएस की तरह सुधार दिया। संपीड़न के लिए, ठीक है, यह एक उत्तर है, कॉपी-पेस्ट पैच नहीं। है ना?

— Milche Patern

Answer 2

भविष्य के पाठकों के लिए। मुझे लगता है कि इसका मतलब था, लेकिन वर्तमान में वास्तव में व्यापक समर्थन नहीं है (नीचे देखें):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• ( स्रोत ) में समर्थित : क्रोम 37, फ़ायरफ़ॉक्स 27, IE 11, ओपेरा 24
• समर्थित नहीं: सफारी

Comments

स्रोत दावा है कि इंटरनेट एक्सप्लोरर का समर्थन नहीं करता all।

— दान डैस्कलेस्क्यू

आखिर कार। यह नया स्वीकृत उत्तर होना चाहिए।

— JS_Riddler

Microsoft विचाराधीन सूचीबद्ध allकरता है । एज का एक भावी संस्करण अच्छी तरह से इसका समर्थन कर सकता है।

— केविन

मैं अभी पढ़ता हूं "विरासत में मिली संपत्तियों पर, प्रारंभिक मूल्य आश्चर्यचकित कर सकता है और आपको इसके बजाय इनहेरिट, अनसेट, या कीवर्ड का उपयोग करने पर विचार करना चाहिए। इसके अलावा, क्या यह ब्राउज़र-विशिष्ट पर वापस आता है? जहां यह प्रारंभिक प्रारंभिक है ... द्वारा सेट किया गया ...? डीडीटी?

— मिल्के पैटर

एक ही जगह मैं नेस्टेड सीएसएस की तरह देखा #someselector { ... * { all: unset; } ... }है सास में है। आपने यहां सैस का उल्लेख नहीं किया है - क्या यह कुछ नया CSS3 है? "नेस्टेड सीएसएस" के लिए खोज करने से मुझे केवल प्रवेश-स्तर के ट्यूटोरियल और सास की जानकारी मिलती है। ... * { ... } ...मेरे सीएसएस (HTML5 में) के लिए नेस्टेड भाग को जोड़ने से मेरा दस्तावेज़ टूट जाता है (मेरे बच्चे तत्व व्यक्तिगत रूप से उस शैली को लेते हैं जिसे मैं सिर्फ माता-पिता पर लागू करना चाहता था)।

— ०३६__ १६'१६

Answer 3

इस समस्या का एक नया समाधान पाया गया है।

का प्रयोग करें all: revertया all: unset।

MDN से:

रिवर्ट कीवर्ड ठीक उसी तरह काम करता है जैसे कई मामलों में परेशान होता है। अंतर केवल उन संपत्तियों के लिए है जिनमें ब्राउज़र द्वारा निर्धारित मान हैं या उपयोगकर्ताओं द्वारा बनाई गई कस्टम स्टाइलशीट (ब्राउज़र साइड पर सेट) हैं।

आपको "एक सीएसएस नियम उपलब्ध है जो किसी विशेष तत्व के लिए पहले से सेट की गई शैलियों को हटा देगा।"

इसलिए, यदि तत्व का एक वर्ग नाम है जैसे remove-all-styles:

उदाहरण के लिए:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

सीएसएस के साथ:

  .remove-all-styles {
    all: revert;
  }

द्वारा लागू की गई सभी शैलियों को रीसेट कर देगा other-class, another-classऔर अन्य सभी विरासत में मिली और लागू की गई शैलियाँ div।

या आपके मामले में:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

करूँगा।

यहां हमने एक शांत सीएसएस संपत्ति का उपयोग दूसरे शांत सीएसएस मूल्य के साथ किया।

1. revert

दरअसल revert, जैसा कि नाम कहता है, उस संपत्ति को अपने उपयोगकर्ता या उपयोगकर्ता-एजेंट शैली में बदल देता है।

2. all

और जब हम संपत्ति के revertसाथ उपयोग करते allहैं, तो उस तत्व पर लागू सभी सीएसएस गुण उपयोगकर्ता / उपयोगकर्ता-एजेंट शैलियों में वापस आ जाएंगे।

लेखक, उपयोगकर्ता, उपयोगकर्ता-एजेंट शैलियों के बीच अंतर जानने के लिए यहां क्लिक करें।

पूर्व के लिए: यदि हम उस पृष्ठ की शैलियों से एम्बेड किए गए विजेट / घटकों को अलग करना चाहते हैं , जिसमें वे हैं , तो हम लिख सकते हैं:

.isolated-component {
 all: revert;
}

जो सभी author styles(यानी डेवलपर सीएसएस) user styles(शैलियों जो हमारी वेबसाइट के एक उपयोगकर्ता सेट - कम संभावना परिदृश्य) या user-agentखुद शैलियों के लिए यदि कोई उपयोगकर्ता शैली सेट नहीं करता है।

अधिक विवरण यहां: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

और केवल मुद्दा समर्थन है : केवल सफारी 9.1 और आईओएस सफारी 9.3 revertमें लेखन के समय मूल्य के लिए समर्थन है ।

इसलिए मैं कहूंगा कि इस शैली का उपयोग करें और किसी अन्य उत्तर के लिए कमबैक करें।

Comments

अच्छा होगा, लेकिन दुर्भाग्य से ब्राउज़र समर्थन में अभी भी छेद हैं: caniuse.com/#feat=css-all (हालांकि कैनीयूज़ शो से छोटा है, उदाहरण के लिए all: initialऔर all: unsetएमएस एज 16 पर मेरे लिए काम किया)।

— रॉबर्ट कुज़्नियर

Answer 4

मुझे इस सवाल का पूरी तरह से जवाब देने दें, क्योंकि यह मेरे लिए कई सालों से दर्द का स्रोत है और बहुत कम लोग वास्तव में समस्या को समझते हैं और इसे हल करना क्यों महत्वपूर्ण है। अगर मैं पिछले दशक में इसे संबोधित नहीं करने के लिए सीएसएस कल्पना के लिए जिम्मेदार था, तो मैं शर्मिंदा हूँ, स्पष्ट रूप से।

समस्या

आपको HTML दस्तावेज़ में मार्कअप सम्मिलित करने की आवश्यकता है, और इसे एक विशिष्ट तरीके से देखने की आवश्यकता है। इसके अलावा, आप इस दस्तावेज़ के स्वामी नहीं हैं, इसलिए आप मौजूदा शैली नियमों को नहीं बदल सकते। आपको पता नहीं है कि स्टाइल शीट क्या हो सकती है, या वे क्या बदल सकते हैं।

इसके लिए ऐसे मामलों का उपयोग करें जब आप अज्ञात 3rd पार्टी वेबसाइटों के उपयोग के लिए प्रदर्शन योग्य घटक प्रदान कर रहे हों। इसके उदाहरण निम्न होंगे:

1. एक विज्ञापन टैग
2. एक ब्राउज़र एक्सटेंशन का निर्माण जो सामग्री सम्मिलित करता है
3. किसी भी प्रकार का विजेट

सबसे सरल फिक्स

सब कुछ एक iframe में रखें। इसकी अपनी सीमाएँ हैं:

1. क्रॉस डोमेन सीमाएँ: आपकी सामग्री को मूल दस्तावेज़ तक पहुँच नहीं होगी। आप सामग्री को ओवरले नहीं कर सकते, DOM को संशोधित कर सकते हैं, आदि।
2. प्रदर्शन सीमाएँ: आपकी सामग्री एक आयत के अंदर बंद है।

यदि आपकी सामग्री एक बॉक्स में फिट हो सकती है, तो आप अपनी सामग्री को iframe लिखकर समस्या # 1 के आसपास प्राप्त कर सकते हैं और सामग्री को स्पष्ट रूप से सेट कर सकते हैं, इस प्रकार समस्या को हल कर सकते हैं, क्योंकि iframe और दस्तावेज़ समान डोमेन साझा करेंगे।

सीएसएस समाधान

मैंने इसके समाधान के लिए दूर-दूर तक खोज की है, लेकिन दुर्भाग्य से कोई भी नहीं है। आप जो सबसे अच्छा कर सकते हैं वह स्पष्ट रूप से सभी संभावित गुणों को ओवरराइड कर सकता है जो ओवरराइड हो सकते हैं, और उन्हें ओवरराइड कर सकते हैं कि आपको क्या लगता है कि उनका डिफ़ॉल्ट मान क्या होना चाहिए।

जब आप ओवरराइड करते हैं, तब भी यह सुनिश्चित करने का कोई तरीका नहीं है कि अधिक लक्षित सीएसएस नियम आपका ओवरराइड नहीं करेगा । आप यहां जो सबसे अच्छा कर सकते हैं, वह यह है कि अपने ओवरराइड नियमों को विशेष रूप से लक्षित करें और उम्मीद करें कि मूल दस्तावेज गलती से भी यह सबसे अच्छा नहीं है: अपनी सामग्री के मूल तत्व पर अस्पष्ट या यादृच्छिक आईडी का उपयोग करें, और सभी संपत्ति मूल्य परिभाषाओं पर महत्वपूर्ण! ।

Comments

आप सभी संपत्ति का उपयोग कर सकते हैं, जो सभी आधुनिक ब्राउज़रों द्वारा समर्थित है ।

— Dan Dascalescu

इस सामान्य समस्या का उचित समाधान वेब घटकों

— GetFree

यह एक बहुत ही वास्तविक मुद्दा है, लेकिन केवल पहले स्थान पर खराब तरीके से विकसित सीएसएस के परिणामस्वरूप मौजूद है। यदि आप मार्कअप और सीएसएस बना रहे हैं, यदि आपने इसे ठीक से किया है, तो आपकी किसी भी शैली को तीसरे पक्ष के ऐप में ब्लीड नहीं किया जाना चाहिए। यदि मैं सीएसएस युक्ति के लिए जिम्मेदार था, तो मैं शर्मिंदा नहीं होऊंगा, लेकिन परेशान लोग क्रूरता से दुरुपयोग कर रहे हैं जो मैंने बनाया था।

— ईएसआर

@DanDascalescu सभी संपत्ति "डिफ़ॉल्ट" ब्राउज़र सीएसएस शैलियों में वापस नहीं जा रही है। यह केवल "प्रारंभिक" सीएसएस शैलियों पर वापस जाने वाला है। अंतर यह है कि एक पृष्ठ पृष्ठ की तरह यदि कोई सीएसएस मौजूद नहीं है, तो दूसरा तत्व शैलियों का उपयोग करेगा (i, e, p { color: blue}रीसेट नहीं किया जाएगा)

— कैमरून

Answer 5

अन्य तरीके:

1) याहू सीएसएस रीसेट के सीएसएस कोड (फ़ाइल) को शामिल करें और फिर इस DIV के अंदर सब कुछ डालें:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

२) या उपयोग

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Answer 6

मैं उस उत्तर का उपयोग करने की अनुशंसा नहीं करता जिसे यहाँ सही के रूप में चिह्नित किया गया है। यह CSS का एक बहुत बड़ा ब्लब है जो सब कुछ कवर करने की कोशिश करता है।

मेरा सुझाव है कि आप मूल्यांकन करते हैं कि प्रति मामले के आधार पर एक तत्व से शैली को कैसे हटाया जाए।

आइए उन एसईओ उद्देश्यों के लिए कहें जिन्हें आपको एक पृष्ठ पर एच 1 को शामिल करना है जिसकी डिजाइन में कोई वास्तविक शीर्षक नहीं है। आप उस पृष्ठ के एनएवी लिंक को एच 1 बनाना चाहते हैं, लेकिन आप उस पेज पर एक विशाल एच 1 के रूप में प्रदर्शित करने के लिए उस नेविगेशन लिंक को नहीं चाहते हैं।

आपको क्या करना चाहिए उस तत्व को h1 टैग में लपेटें और उसका निरीक्षण करें। देखें कि सीएसएस शैलियों को विशेष रूप से एच 1 तत्व के लिए क्या लागू किया जा रहा है।

आइए हम कहते हैं कि मैं तत्व पर निम्नलिखित शैलियों को देखता हूं।

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

अब आपको सटीक शैली को इंगित करने की आवश्यकता है जो एच 1 पर लागू होती है और उन्हें सीएसएस कक्षा में अनसेट करती है। यह कुछ इस तरह दिखेगा:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

यह बहुत साफ-सुथरा है और कोड के एक यादृच्छिक बूँद को आपके css में डंप नहीं करता है, जिसे आप नहीं जानते कि यह वास्तव में क्या कर रहा है।

अब आप इस वर्ग को अपने h1 में जोड़ सकते हैं

<h1 class="no-style-h1">
     Title
</h1>

Answer 7

यदि आप एक बिल्ड सिस्टम में sass का उपयोग कर रहे हैं, तो ऐसा करने का एक तरीका यह है कि सभी प्रमुख ब्राउज़रों में काम करेगा: अपने सभी स्टाइल आयातों को a: not () चयनकर्ता की तरह लपेटना है ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

फिर आप एक कंटेनर पर अक्षम वर्ग का उपयोग कर सकते हैं और उप-सामग्री में आपकी कोई भी शैली नहीं होगी।

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

बेशक, आपकी सभी शैलियाँ अब इसके साथ नहीं चलेंगी: नहीं () चयनकर्ता, इसलिए यह थोड़ा फ़र्ज़ी है, लेकिन अच्छी तरह से काम करता है।

Answer 8

आपने मोबाइल-प्रथम साइटों का उल्लेख किया है ... एक उत्तरदायी डिज़ाइन के लिए, बड़े स्क्रीन शैलियों के साथ छोटे स्क्रीन शैलियों को ओवरराइड करना निश्चित रूप से संभव है। लेकिन आपको जरूरत नहीं हो सकती है।

इसे इस्तेमाल करे:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

वे मीडिया प्रश्न ओवरलैप नहीं करते हैं, इसलिए उनके नियम एक दूसरे को ओवरराइड नहीं करते हैं। इससे शैलियों के प्रत्येक सेट को अलग-अलग बनाए रखना आसान हो जाता है।

Answer 9

बेहतर समाधान

सीएसएस गुणों को डिफ़ॉल्ट (UA शैली) में रीसेट करने के लिए "कॉपी / पेस्ट" स्टाइलशीट डाउनलोड करें :
https://github.com/monmomo04/resetCss.git

धन्यवाद @ मिल्च पैटरन!
मैं वास्तव में रीसेट / डिफ़ॉल्ट शैली गुण मान की तलाश कर रहा था। मेरा पहला प्रयास रूट (html) तत्व के ब्राउज़र देव टूल से गणना किए गए मूल्य को कॉपी करना था। लेकिन जैसा कि यह गणना करता है, यह हर सिस्टम पर अलग दिखता / काम करता था।
उन लोगों के लिए जो बच्चों के तत्वों की शैली को रीसेट करने के लिए तारांकन * का उपयोग करने की कोशिश करते समय एक ब्राउज़र क्रैश का सामना करते हैं, और जैसा कि मुझे पता था कि यह आपके लिए काम नहीं करता है, मैंने सभी HTML टैग नाम के बजाय तारांकन चिह्न "*" को बदल दिया है । ब्राउज़र क्रैश नहीं हुआ; मैं क्रोम संस्करण 46.0.2490.71 मीटर पर हूं।
अंत में, यह उल्लेख करना अच्छा है कि वे गुण शैली को सबसे ऊपरी रूट तत्व की डिफ़ॉल्ट शैली पर रीसेट करेंगे लेकिन आपके एचटीएमएल तत्व के लिए प्रारंभिक मूल्य नहीं। तो इसे ठीक करने के लिए, मैंने वेबकिट आधारित ब्राउज़र की "उपयोगकर्ता-एजेंट" शैलियों को लिया है और इसे "रीसेट-इस" वर्ग के तहत लागू किया है।

उपयोगी लिंक:

सीएसएस गुणों को डिफ़ॉल्ट (UA शैली) में रीसेट करने के लिए "कॉपी / पेस्ट" स्टाइलशीट डाउनलोड करें :
https://github.com/monmomo04/resetCss.git

उपयोगकर्ता-एजेंट शैली:
HTML तत्वों के लिए ब्राउज़रों का डिफ़ॉल्ट CSS
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

सीएसएस विशिष्टता (विशिष्टता पर ध्यान दें):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

Answer 10

मेरे विशिष्ट परिदृश्य में, मैं सामान्य शैलियों को पृष्ठ के एक विशिष्ट भाग पर लागू करना छोड़ना चाहता था, इस तरह से बेहतर सचित्र:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

सीएसएस रिसेट के साथ खिलवाड़ करने के बाद जो ज्यादा सफलता नहीं ला पाया (मुख्य रूप से नियमों की पूर्वता और जटिल स्टाइलशीट पदानुक्रम के कारण), बचाव के लिए सर्वव्यापी jQuery लाया, जिसने बहुत जल्दी और उचित रूप से गंदा किया:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(अब बताएं कि CSS :-) से निपटने के लिए JS का उपयोग करना कितना बुरा है)

Answer 11

आप उन लोगों के लिए यह पता लगाने की कोशिश कर रहे हैं कि वास्तव में स्टाइल को केवल तत्व से कैसे हटाया जाए, फाइलों से सीएसएस को हटाने के बिना, यह समाधान jquery के साथ काम करता है:

$('.selector').removeAttr('style');

Answer 12

यदि आप अपने CSS को कक्षाओं में सेट करते हैं, तो आप आसानी से jQuery removeClass () विधि का उपयोग करके उन्हें हटा सकते हैं। नीचे दिया गया कोड .element वर्ग हटाता है:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

यदि कोई पैरामीटर निर्दिष्ट नहीं है, तो यह विधि चयनित तत्वों से सभी वर्ग नामों को हटा देगी।

Answer 13

नहीं, यह आपके सीएसएस संरचना को बेहतर ढंग से प्रबंधित करने का एक मामला है।

आपके मामले में मैं अपने सीएसएस को कुछ इस तरह से ऑर्डर करूंगा:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

बस प्रयोग करो।

Answer 14

कोई भी मौका आप महत्वपूर्ण नियम के लिए देख रहे हैं! यह सभी घोषणाओं को पूर्ववत नहीं करता है, लेकिन यह उन्हें ओवरराइड करने का एक तरीका प्रदान करता है।

"जब एक शैली घोषणा पर एक महत्वपूर्ण नियम का उपयोग किया जाता है, तो यह घोषणा सीएसएस में किए गए किसी भी अन्य घोषणा को ओवरराइड करती है, जहां भी वह घोषणा सूची में होती है। हालांकि, - महत्वपूर्ण का विशिष्टता से कोई लेना-देना नहीं है।"

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception

Comments

आयातकों को जाने का रास्ता नहीं है। यह उपयोग करने के लिए बोल्ड है और आपको इसे केवल अंतिम उपाय के रूप में उपयोग करना चाहिए (उदाहरण के लिए, जब एक प्लगइन ने एक महत्वपूर्ण उपयोग किया है)

— Maarten Wolfsen