डिफ़ॉल्ट मान के लिए सीएसएस प्रदर्शन संपत्ति रीसेट करें

Question

क्या प्रदर्शन संपत्ति को उसके डिफ़ॉल्ट मान से ओवरराइड करना संभव है? उदाहरण के लिए यदि मैंने इसे किसी एक शैली में सेट नहीं किया है, और मैं इसे डिफ़ॉल्ट रूप से अलग करना चाहता हूं।

या यह पता लगाने का एकमात्र तरीका है कि उस तत्व का डिफ़ॉल्ट क्या है और फिर उसे उसी पर सेट करें? यह जानना नहीं चाहेंगे कि क्या तत्व आमतौर पर ब्लॉक, इनलाइन या जो भी हो ...

Comments

अब इसका उपयोग संभव है unset।

— मिनट

प्रदर्शन परीक्षण: unset, initial, inherit,revert

— Theraot

मुझे पता है कि यह सवाल केवल ब्राउज़र डिफॉल्ट्स के लिए रीसेट किए जा रहे प्रदर्शन के बारे में पूछता है, लेकिन कई लोग जो इस पेज पर जाएँगे, जो ब्राउज़र डिफॉल्ट्स का उपयोग करने के लिए सभी विशेषताओं को रीसेट करने की तलाश में हैं: .myclass {all: unset; } div {सभी: unset; } आदि

— user1254723

Answer 1

एक ब्राउज़र की डिफ़ॉल्ट शैलियों को उसके उपयोगकर्ता एजेंट स्टाइलशीट में परिभाषित किया गया है, जिसके स्रोत आप यहां पा सकते हैं । दुर्भाग्य से, कैस्केडिंग और इनहेरिटेंस स्तर 3 युक्ति शैली गुण को उसके ब्राउज़र डिफ़ॉल्ट पर रीसेट करने का एक तरीका प्रस्तावित नहीं करता है। हालाँकि कैस्केडिंग और इनहेरिटेंस स्तर 4 में इसके लिए एक कीवर्ड को फिर से शुरू करने की योजना है - काम करने वाला समूह अभी तक इस कीवर्ड के लिए एक नाम पर सेट नहीं हुआ है (लिंक वर्तमान में कहता है revert, लेकिन यह अंतिम नहीं है)। के लिए ब्राउज़र समर्थन के बारे में जानकारी caniuse.comrevert पर देखी जा सकती है ।

जबकि स्तर 3 कल्पना एक initialकीवर्ड को प्रस्तुत करती है , एक संपत्ति को उसके प्रारंभिक मूल्य पर सेट करना इसे सीएसएस द्वारा परिभाषित डिफ़ॉल्ट मूल्य पर रीसेट करता है , न कि ब्राउज़र द्वारा परिभाषित के रूप में । का प्रारंभिक मूल्य displayहै inline; यह यहाँ निर्दिष्ट है । initialकीवर्ड कि मूल्य, नहीं ब्राउज़र डिफ़ॉल्ट को दर्शाता है। allप्रॉपर्टी के तहत खुद यह नोट बनाता है :

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

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

इसलिए मुझे लगता है कि शुद्ध सीएसएस का उपयोग करने का एकमात्र तरीका ब्राउज़र डिफ़ॉल्ट मान देखना है और इसे मैन्युअल रूप से उस पर सेट करना है:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(उपरोक्त का एक विकल्प होगा div.foo:not(.bar) { display: inline-block; }, लेकिन इसमें ओवरराइड के बजाय मूल चयनकर्ता को संशोधित करना शामिल है।)

Comments

आह, ब्राउज़रों को हमेशा अच्छे और उपयोगी सामान में पाने के लिए इतना धीमा क्यों होना चाहिए: पी और क्यों उपयोगकर्ताओं को इतना धीमा उन्नयन करना चाहिए ... वैसे भी, यह वही है जो मैं चाहता था!

— Svish

@ सविश: मुझे पता है कि मैं initialवास्तव में क्या करता है गलत व्याख्या की । मैंने अपना उत्तर अपडेट कर दिया है।

— BoltClock

@ सविश: सीएसएस संपत्ति के स्तर पर प्रारंभिक मूल्यों को परिभाषित करता है, न कि प्रति-तत्व के आधार पर जैसा कि मैंने मूल रूप से सोचा था। इस उदाहरण में, का प्रारंभिक मान displayहमेशा होता है inline( w3.org/TR/CSS21/visuren.html#display-prop ), इस पर ध्यान दिए बिना कि यह a divया a है span। एक divतत्व HTML के अनुसारdisplay: block डिफ़ॉल्ट रूप से है , और सीएसएस नहीं है, इसलिए यह कहने के लिए ब्राउज़र के यूए स्टाइलशीट पर निर्भर है div { display: block; }।

— BoltClock

"सीएसएस संपत्ति के स्तर पर प्रारंभिक मूल्यों को परिभाषित करता है, न कि प्रति-तत्व के आधार पर जैसा कि मैंने मूल रूप से सोचा था।" - मुझे वास्तव में इसे विश्वास करने के लिए इसे कुछ बार फिर से पढ़ना पड़ा। (चूंकि सीएसएस लगता है हमेशा (कुछ प्रकार के) तत्व संदर्भ में लागू किया जाता है, इसका समर्थन नहीं करना यहां सीखने के लिए कुछ गैर-तुच्छ का सुझाव देता है - क्या कोई तर्क जानता है?)

— एसज़।

defaultका नाम बदल दिया गया revert।

— ओरियल

Answer 2

यदि जावास्क्रिप्ट का उपयोग करने की अनुमति है , तो आप displayसंपत्ति को एक खाली स्ट्रिंग पर सेट कर सकते हैं। यह उस विशेष तत्व के लिए डिफ़ॉल्ट का उपयोग करने का कारण होगा।

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

यहाँ एक jsbin के लिए एक कड़ी है ।

क्योंकि आप प्रदर्शन के विभिन्न प्रकार के बारे में चिंता की जरूरत नहीं है (पर वापस लौटने की यह अच्छा है block, inline, inline-block, table-cell, आदि)।

लेकिन, इसके लिए जावास्क्रिप्ट की आवश्यकता होती है, इसलिए यदि आप सीएसएस-केवल समाधान की तलाश कर रहे हैं, तो यह आपके लिए समाधान नहीं है।

नोट: यह इनलाइन शैलियों को ओवरराइड करता है, लेकिन स्टाइल सीएसएस में सेट नहीं होता है

Comments

ध्यान दें कि यह केवल तभी काम करता है जब styleपहली बार में जावास्क्रिप्ट या इनलाइन विशेषता का उपयोग करके शैली सेट की गई थी । आप इस पद्धति का उपयोग करके किसी स्टाइलशीट से एक घोषणा को ओवरराइड या हटा नहीं सकते हैं।

— बोल्टकॉक

@BoltClock मैं असहमत हूं। यहाँ एक jsfiddle है जो मुझे लगता है कि आप जो कह रहे हैं, उसे नापसंद करते हैं। jsfiddle.net/g45qagt3

— thetallweeks

क्षमा करें, ओवरराइड शब्द का मेरा उपयोग भ्रमित करने वाला था। मेरा मतलब है कि खाली स्ट्रिंग के लिए एक शैली सेट करना केवल एक शैली को हटा देगा जो कि styleविशेषता या जावास्क्रिप्ट सेटर के माध्यम से लागू किया गया था । यदि आप जेएस के माध्यम से एक विशिष्ट मूल्य निर्धारित करते हैं, तो आप अभी भी एक स्टाइलशीट घोषणा को ओवरराइड कर सकते हैं, लेकिन इसे खाली करने के लिए इसे सेट करने के बराबर है - स्टाइलशीट घोषणा बरकरार रहेगी। : संशोधित बेला देखें jsfiddle.net/BoltClock/g45qagt3/1

— BoltClock

यह ध्यान देने योग्य है, कि खाली स्ट्रिंग किसी भी संपत्ति के लिए काम करती है, न कि केवल "प्रदर्शन"

— आर्टूर बेलजावेव

Answer 3

परेशान display:

आप उस मूल्य का उपयोग कर सकते हैं unsetजो फ़ायरफ़ॉक्स और क्रोम दोनों में काम करता है ।

display: unset;

---

.foo     { display: none;  }
.foo.bar { display: unset; }

Comments

unsetजैसी समस्याएं हैं initial। का मान displayबनेगा inline। देखें codepen.io/Gidgidonihah/pen/mwWxEq

— Gidgidonihah

ओपी स्पष्ट रूप से प्रति तत्व डिफ़ॉल्ट रूप से रीसेट करना चाहता है, उदाहरण के लिए इनलाइन और स्पैन को ब्लॉक करने के लिए रीसेट करना। unsetइसकी प्रति संपत्ति के बाद से मदद नहीं करेगा और हमेशा प्रदर्शन को रीसेट करेगा inline। कृपया अपना उत्तर अपडेट करने पर विचार करें।

— क्रूलिक

Answer 4

नहीं, यह आमतौर पर संभव नहीं है। एक बार कुछ CSS (या HTML) कोड एक तत्व पर एक संपत्ति के लिए एक मूल्य निर्धारित करता है, इसे पूर्ववत करने और ब्राउज़र को इसके डिफ़ॉल्ट मूल्य का उपयोग करने का कोई तरीका नहीं है।

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

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

Answer 5

यदि आपके पास जावास्क्रिप्ट तक पहुंच है , तो आप एक तत्व बना सकते हैं और इसकी गणना शैली पढ़ सकते हैं।

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Comments

कम से कम क्रोम में, आपको गणना शैली प्राप्त करने के लिए वास्तव में उत्पन्न तत्व को <body> टैग में जोड़ना होगा।

— डिंपलक्स

Answer 6

बोल्टकॉक और जॉन द्वारा जवाब के बारे में, मैं व्यक्तिगत रूप से IE11 का उपयोग करते समय प्रारंभिक कीवर्ड के साथ समस्या थी। यह क्रोम में ठीक काम करता है, लेकिन IE में इसका कोई प्रभाव नहीं लगता है।

इस उत्तर के अनुसार IE प्रारंभिक कीवर्ड का समर्थन नहीं करता है: Div डिस्प्ले: प्रारंभिक मतलब 10 और क्रोम 29 में काम नहीं कर रहा है

मैंने इसे यहाँ सुझाए जाने के बजाय इसे खाली करने की कोशिश की: प्रदर्शन के बाद वापस सामान्य में कैसे लौटा जाए: तालिका पंक्ति के लिए कोई भी नहीं

यह काम किया और मेरे परिदृश्य के लिए काफी अच्छा था। निश्चित रूप से वास्तविक प्रारंभिक मूल्य निर्धारित करने के लिए उपरोक्त उत्तर केवल वही अच्छा है जो मुझे मिल सकता है।