सीएसएस परिवर्तनीय फ़ॉलबैक में अल्पविराम का उपयोग कैसे करें?

Question

कोई सीएसएस वैरिएबल के फ़ॉलबैक मान में अल्पविराम का उपयोग कैसे कर सकता है?

उदा। यह ठीक है: var(--color, #f00), लेकिन यह अजीब var(--font-body, Verdana, sans-serif) है।

विचार font-family को Verdana, sans-serif के फ़ॉलबैक मान के साथ एक चर का उपयोग करने में सक्षम होना है।

---

संपादित करें: यह वास्तव में ब्राउज़रों कि सीएसएस गुण समर्थन के लिए बहुत अच्छी तरह से काम करता है, लेकिन समस्या Google पॉलिमर के polyfills से आते हैं लगता है।

font-family: var(--font-body, Verdana), var(--font-body-family, sans-serif) 

Answer 1

नीचे W3C spec से एक उद्धरण है: (जोर मेरा है)

नोट: वापस आने की वाक्य रचना, कस्टम गुण की तरह, अल्पविराम अनुमति देता है। उदाहरण के लिए, var (- foo, red, blue) लाल, नीले रंग की फॉलबैक परिभाषित करता है; वह है, पहले कॉमा और फ़ंक्शन के अंत के बीच कुछ भी फ़ॉलबैक मान माना जाता है।

आप उपरोक्त कथन से देख सकते हैं, यदि आपका इरादा फ़ॉलबैक मान के रूप में स्थापित करने के लिए Verdana, sans-serif जब --font-body तब से परिभाषित नहीं है प्रश्न में दिए गए वाक्य रचना काम करने की उम्मीद कर रहा है। यह spec के अनुसार किसी भी उद्धरण की आवश्यकता नहीं है।

मैं एक ब्राउज़र है कि सीएसएस वैरिएबल का समर्थन की जरूरत नहीं है और इसलिए मैं निम्नलिखित कोड का परीक्षण नहीं कर सकता है, लेकिन यह कल्पना के आधार पर काम करना चाहिए:

.component .item1 { 
 
    --font-body: Arial; 
 
    font-family: var(--font-body, Verdana, sans-serif); 
 
    /* should result in font-family: Arial */ 
 
} 
 
.component .item2 { 
 
    font-family: var(--font-body, Verdana, sans-serif); 
 
    /* should result in font-family: Verdana, sans-serif */ 
 
}

<div class=component> 
 
    <p class=item1>Arial 
 
    <p class=item2>Verdana, sans-serif 
 
</div>

Answer 2

यह द्वारा प्राप्त किया जा सकता है:

भविष्य में संदर्भ के लिए, मैं दोनों फ़ॉन्ट और इतने की तरह फ़ॉन्ट परिवार वापस आने के लिए वैरिएबल का उपयोग कर समाप्त हो गया (अब के लिए यह कर के स्पष्ट तरीका प्रतीत हो रहा है) बस अल्पविराम के द्वारा अलग मूल्यों को अलग:

p{ 
    /* By commenting this out, we are making the variable non-existent */ 
    /* --font-family: "Times New Roman, serif"; */ 
} 

p.sans-serif{ 
    font-family: var(--font-family, "Arial", "Helvetica"); 
} 

<p class="sans-serif"> 
    This will be in a sans-serif font because the fallback value is "Arial" and "Helvetica" 
</p> 

आप देख सकते हैं, p.sans-serif सामान्य रूप से एक सेरिफ़ फ़ॉन्ट में प्रदर्शित होगा। यदि आप p शैली को अनमोल करते हैं, तो यह एक सेरिफ़ फ़ॉन्ट में दिखाया जाएगा।

हालांकि, यदि चर मौजूद नहीं है (जो, जब से हमने इसे टिप्पणी नहीं की है, तो फ़ॉलबैक काम करता है।

Answer 3

हैरी उल्लेख के रूप में , आपको पहले से ही ब्राउज़र में काम करना चाहिए जो कस्टम गुणों को लागू करता है।

लेकिन आप font-family साथ कस्टम गुण उपयोग कर रहे हैं, वहाँ एक प्रमुख चेतावनी है: var() आप को संशोधित करने या तथ्य के कारण एक मौजूदा फ़ॉन्ट ढेर करने के लिए जोड़ने के लिए, की अनुमति नहीं है कि ठीक उसी तरह में कस्टम गुण झरना अन्य सभी गुणों के रूप में।यही कारण है कि कहने के लिए, अभिव्यक्ति है दो संभावित मान में से एक में

var(--font-body, Verdana, sans-serif) 

परिणाम:

1. हैं --font-bodyfont-family लिए एक मान्य मान है, var(--font-body)
अन्यथा
2. , Verdana, sans-serif

"वर्दान, संस-सेरिफ़" फ़ॉन्ट-स्टै का हिस्सा नहीं है सीके जिसे --font-body में परिभाषित किया गया है, और --font-body में परिभाषित परिवार को ब्राउज़र में अनुपलब्ध या अन्यथा अनुपलब्ध होना चाहिए, यह वर्डाना या संस-सेरिफ़ पर वापस आ जाएगा; यह बदले में ब्राउज़र के चयन के मनमाना डिफ़ॉल्ट फ़ॉन्ट पर वापस आ जाएगा।

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