सीएसएस "if" कथन के समतुल्य

Question

क्या सीएसएस में सशर्त बयान का उपयोग करने का कोई तरीका है?

Answer 1

नहीं। लेकिन क्या आप एक उदाहरण दे सकते हैं जो आपके मन में है? स्थिति क्या आप जांचना चाहते हैं?

शायद Sass या Compass आपके लिए दिलचस्प हैं। सास से

उद्धरण:

सास सीएसएस मज़ा फिर से बना देता है। सास सीएसएस, प्लस नेस्टेड नियम, चर, मिश्रण, और अधिक, सभी संक्षेप में, पठनीय वाक्यविन्यास में हैं।

Answer 2

सीएसएस में उपलब्ध एकमात्र स्थितियां selectors और @media हैं। कुछ ब्राउज़र CSS 3 selectors और media queries में से कुछ का समर्थन करते हैं।

यदि आप किसी चयनकर्ता से मेल खाते हैं या नहीं (उदाहरण के लिए एक नई कक्षा जोड़कर) को बदलने के लिए जावास्क्रिप्ट के साथ एक तत्व को संशोधित कर सकते हैं।

Answer 3

सीएसएस फ़ाइलें सशर्त बयान का समर्थन नहीं करती हैं।

यदि आप कुछ स्थितियों के आधार पर कुछ तरीकों में से किसी एक को देखना चाहते हैं, तो इसे अपने सर्वर साइड स्क्रिप्टिंग भाषा या जावास्क्रिप्ट का उपयोग करके उपयुक्त वर्ग दें। जैसे

<div class="oh-yes"></div> 
<div class="hell-no"></div> 

Answer 4

आपका स्टाइलशीट उपलब्ध चर कि अपने HTML दस्तावेज़ क्या आप प्रदर्शित करने के लिए की जरूरत के आधार पर पर कॉल कर सकते हैं की एक स्थिर तालिका के रूप में के बारे में सोचा जाना चाहिए। तर्क आपके जावास्क्रिप्ट और एचटीएमएल में होना चाहिए, यदि आपको वास्तव में आवश्यकता है तो स्थितियों के आधार पर गतिशील रूप से विशेषताओं को लागू करने के लिए जावास्क्रिप्ट का उपयोग करें। स्टाइलशीट तर्क के लिए जगह नहीं हैं।

Answer 5

नहीं, तुम सीएसएस में अगर ऐसा नहीं कर सकते, लेकिन आप जो शैली पत्रक आप का उपयोग करेगा

यहाँ एक उदाहरण है चुन सकते हैं:

<!--[if IE 6]> 
Special instructions for IE 6 here 
<![endif]--> 

केवल IE यहाँ 6 के लिए इस्तेमाल करेगा वेबसाइट है जहां यह http://www.quirksmode.org/css/condcom.html से है, केवल आईई की सशर्त टिप्पणियां हैं। अन्य ब्राउज़र नहीं करते हैं, हालांकि कुछ गुण हैं जिनका उपयोग आप फ़ायरफ़ॉक्स के लिए -मोज़ से शुरू कर सकते हैं या सफारी के साथ शुरू करने के लिए कर सकते हैं। आप जावास्क्रिप्ट का उपयोग यह पता लगाने के लिए कर सकते हैं कि आप किस ब्राउजर का उपयोग कर रहे हैं और जावास्क्रिप्ट का उपयोग करें यदि आप जो भी क्रियाएं करना चाहते हैं, लेकिन यह एक बुरा विचार है, क्योंकि इसे अक्षम किया जा सकता है।

Answer 6

सीएसएस के लिए कोई मूल आईएफ/ईएलएसई उपलब्ध नहीं है। सीएसएस प्रीप्रोसेसर जैसे SASS (और कम्पास) मदद कर सकते हैं, लेकिन यदि आप अधिक फीचर-विशिष्ट की तलाश में हैं, तो अगर आपको Modernizr एक कोशिश देनी चाहिए। यह सुविधा-पहचान करता है और फिर एचटीएमएल तत्व में वर्ग जोड़ता है यह इंगित करने के लिए कि कौन सा CSS3 & एचटीएमएल 5 विशेषताएं ब्राउज़र का समर्थन करता है और समर्थन नहीं करता है।फिर आप लिख सकते हैं बहुत अगर/किसी और की तरह सीएसएस किसी भी पूर्व प्रसंस्करण के बिना अपने सीएसएस में सही, इस तरह:

.geolocation #someElem { 
    /* only apply this if the browser supports Geolocation */ 
} 
.no-geolocation #someElem { 
    /* only apply this if the browser DOES NOT support Geolocation */ 
} 

तो बजाय ऊपर के उदाहरण जो बिंदु दिखाता ध्यान रखें कि आप उत्तरोत्तर बढ़ाने चाहिए रखें, (बेहतर), आप कुछ इस तरह अधिक लिखना चाहिए:

#someElem { 
    /* default styles, suitable for both Geolocation support and lack thereof */ 
} 
.geolocation #someElem { 
    /* only properties as needed to overwrite the default styling */ 
} 

ध्यान दें कि Modernizr जावास्क्रिप्ट पर भरोसा है, इसलिए यदि जे एस अक्षम किया गया है तुम कुछ भी नहीं मिलेगा। इसलिए नोसो जेएस नींव के रूप में पहले, सोसमएलेम के प्रगतिशील वृद्धि दृष्टिकोण।

Answer 7

मैं कहूंगा कि सीएसएस में "आईएफ" की सबसे नज़दीकी चीज मीडिया प्रश्न हैं, जैसे कि आप उत्तरदायी डिजाइन के लिए उपयोग कर सकते हैं। मीडिया प्रश्नों के साथ, आप चीजें कह रहे हैं, "यदि स्क्रीन 440 पीएक्स और 660 पीएक्स चौड़ी के बीच है, तो यह करें"। यहां मीडिया के प्रश्नों के बारे में और अधिक पढ़ें: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, और यहाँ वे कैसे दिखते का एक उदाहरण है:

@media screen and (max-width: 300px) { 
body { 
    background-color: lightblue; 
} 

कि काफी की हद तक है "IF" सीएसएस के भीतर है, सिवाय इसके एस.ए.एस.एस./एससीएसएस की अवधि में (जैसा कि ऊपर उल्लेख) ।

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

<?php 
    IF(A>B){ 
echo '<div class="option-a">'; 
} 
    ELSE { 
echo '<div class="option-b">'; 
} 
?> 

फिर अपने सीएसएस

तरह

.option a { 
background-color:red; 
} 
.option b { 
background-color:blue; 
} 

Answer 8

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

 #sidebartoggler:checked + .page-wrap .hamb { 
     background: #fff; 
     } 

// example set as if statement sudo code. 

if (sidebaretoggler is checked == true) { 
set the background color of .hamb to white; 
} 

Answer 9

@supports नियम (92% ब्राउज़र समर्थन जुलाई 2017) नियम सीएसएस संपत्तियों पर सशर्त तर्क के लिए इस्तेमाल किया जा सकता है:

@supports (display: -webkit-box) { 
    .for_older_webkit_browser { display: -webkit-box } 
} 

@supports not (display: -webkit-box) { 
    .newer_browsers { display: flex } 
} 

Answer 10

सीएसएस ही सशर्त बयान नहीं है, लेकिन यहाँ a hack involving custom properties (उर्फ है "सीएसएस चर")।

इस मामूली उदाहरण में, आप एक निश्चित स्थिति के आधार पर एक पैडिंग लागू करना चाहते हैं-जैसे "if" कथन।

:root { --is-big: 0; } 

.is-big { --is-big: 1; } 

.block { 
    padding: calc(
    4rem * var(--is-big) + 
    1rem * (1 - var(--is-big)) 
); 
} 

इसलिए किसी भी .block कि एक .is-big है या कि, एक का वंशज है 4rem की पैडिंग होगा, जबकि अन्य सभी ब्लॉकों केवल 1rem होगा। अब मैं इसे एक "तुच्छ" उदाहरण कहता हूं क्योंकि यह हैक के बिना किया जा सकता है।

.block { 
    padding: 1rem; 
} 

.is-big .block, 
.block.is-big { 
    padding: 4rem; 
} 

लेकिन मैं अपने अनुप्रयोगों को अपनी कल्पना में छोड़ दूंगा।