SASS 3.2 मीडिया क्वेरीज़ और इंटरनेट एक्सप्लोरर सपोर्ट

Question

मैंने हाल ही में एक परियोजना पर @content ब्लॉक का उपयोग करके SASS 3.2 के साथ this technique लागू किया है, और मैं उस बिंदु पर पहुंच गया हूं जहां मुझे पुराने ब्राउज़र जैसे समर्थन शामिल करने की आवश्यकता है IE7 के रूप में और 8

उदाहरण:

.overview { 
    padding: 0 0 19px; 

    @include respond-to(medium-screens) { 
    padding-top: 19px; 
    } //medium-screens 

    @include respond-to(wide-screens) { 
    padding-top: 19px; 
    } //medium-screens 
} 

वे दोनों मीडिया प्रश्नों का समर्थन नहीं है, और मैं अक्सर इन ब्राउज़रों के लिए सभी शैलियों अप करने पर, यदि मैं अपने मीडिया था द्वारा अतीत में इस संभाला है प्रश्नों को अलग आंशिक फ़ाइलों जैसे _320.scss, _480.scss में विभाजित किया गया है और मेरी आईई स्टाइलशीट में उन्हें लोड कर रहा है:

@import 320.scss; 
@import 480.scss; 
etc. 

कौन सा सभी शैलियों लोड होता है, और हमेशा IE7 आवंटित - 8 एक 940px (या जो भी अधिकतम चौड़ाई है) लेआउट और शैलियों। एसएएसएस 3.2 इनलाइन में शैलियों को घोंसले से, यह अलग आंशिक स्टाइलशीट की आवश्यकता को समाप्त करता है, लेकिन पूरी तरह से स्क्रू करता है कि मैं आईई के लिए शैलियों को कैसे लोड करता हूं।

इससे लड़ने के तरीके पर कोई विचार या समाधान? मैं मीडिया क्वेरी का उपयोग करने के लिए आईई को मजबूर करने के लिए respond.js जैसे पॉलीफिल का उपयोग कर सकता हूं, लेकिन आईई को केवल एक गैर-लचीली साइट की सेवा करना पसंद करूंगा।

किसी भी विचार या तो इन फ़ाइलों को व्यवस्थित करने के लिए या बेहतर समाधान पर कोई विचार?

Answer 1

एक CSS3 Mixin है जिसका उपयोग मैं आईई फ़िल्टर के लिए एक चर है। आप ग्लोबल वेरिएबल, $ forIE या कुछ होने के समान कुछ कर सकते हैं, मीडिया क्वेरी मिक्स्इन को एक के भीतर लपेटें और उसके बाद स्टाइलशीट जेनरेट करें या क्वेरी करें।

@if $forIE == 0 { 
    // Media Query Mixin 
} 

या एक 3 एससीएसएस (_forIE.scss?) है कि अपने IE विशिष्ट शैली के साथ चीजों को पार कर जाएगी आयात करने के लिए @if का उपयोग करें।

Answer 2

Jake Archibald has the best technique मैंने इसे प्राप्त करने के लिए आज तक देखा है। यह तकनीक स्वचालित रूप से आईई के लिए एक अलग स्टाइलशीट बनाती है, जिसमें आपके मीडिया प्रश्नों के अंदर सभी समान शैलियों के साथ ही मीडिया क्वेरी के बिना ही।

मैंने इस तकनीक को लोकप्रिय breakpoint extension for Sass में विकसित करने के लिए भी प्रचार किया, यदि आप इसका उपयोग करने में रूचि रखते हैं!

Answer 3

आप IE < 9 के लिए एक अलग स्टाइलशीट जेनरेट कर सकते हैं जिसमें आपकी सामान्य शीट की सभी चीज़ें शामिल हैं, लेकिन सेट चौड़ाई के आधार पर फ़्लैटेड मीडिया प्रश्नों के साथ।

यहाँ पूर्ण विवरण http://jakearchibald.github.com/sass-ie/, लेकिन मूल रूप से आप इस mixin है:

$fix-mqs: false !default; 

@mixin respond-min($width) { 
    // If we're outputting for a fixed media query set... 
    @if $fix-mqs { 
     // ...and if we should apply these rules... 
     @if $fix-mqs >= $width { 
      // ...output the content the user gave us. 
      @content; 
     } 
    } 
    @else { 
     // Otherwise, output it using a regular media query 
     @media screen and (min-width: $width) { 
      @content; 
     } 
    } 
} 

जो तुम इस तरह का उपयोग करेंगे:

@include respond-min(45em) { 
    float: left; 
    width: 70%; 
} 

यह all.scss अंदर होगा, जो all.css करने के लिए नीचे संकलन होगा मीडिया प्रश्नों के साथ।

$fix-mqs: 65em; 
@import 'all'; 

बस सभी का आयात करता है, लेकिन सपाट मीडिया क्वेरी ब्लॉक 65em का एक नकली चौड़ाई यह देखते हुए कि: हालांकि, अगर आप भी एक अतिरिक्त फ़ाइल, all-old-ie.scss होगा।

Answer 4

यदि आप एक छत के नीचे सब कुछ रखने के लिए और केवल अपने पुराने ब्राउज़र आगंतुकों के लिए एक एकल http अनुरोध आप इस

की तरह कुछ कर सकता है अपने प्रारंभिक respondto mixin

// initial variables set-up 

$doc-font-size: 16; 
$doc-line-height: 24; 

// media query mixin (min-width only) 

@mixin breakpoint($point) { 
    @media (min-width: $point/$doc-font-size +em) { @content; } 
} 

इस वसीयत की स्थापना की है चाहता था एक न्यूनतम चौड़ाई वाली मीडिया क्वेरी बनाएं और अपने पीएक्स वैल्यू ($ पॉइंट) को एम मान के रूप में आउटपुट करें।

इस से

अगर आप सास (एससीएसएस) के एक टुकड़े से पारित इस

@include rwdIE(456, test) { 
    background-color: #d13400; 
} 

है जैसे कि यह इस कोड को

.lt-ie9 .test { 
    background-color: #d13400; 
} 

@media (min-width: 28.5em) { 
    .test { 
    background-color: #d13400; 
    } 
} 

वापस आ जाएगी यहाँ इस mixin

@mixin rwdIE($name, $wrapper-class, $IE: true) { 
    @if $IE == true { 
     .lt-ie9 .#{$wrapper-class} { 
     @content; 
     } 
    .#{$wrapper-class} { 
     @include breakpoint($name) { 
     @content; 
     } 
    } 
    } 
    @else if $IE == false { 
    .#{$wrapper-class} { 
     @include breakpoint($name) { 
      @content; 
     } 
    } 
    } 
} 

बनाने की आवश्यकता होगी

यह आपको एक फ़ाइल में आईई और 'नया ब्राउज़र' सीएसएस देगा। आप लिखते हैं -

@include rwdIE(456, test, false) { 
    background-color: #d13400; 
} 

आप मिल जाएगा -

@media (min-width: 28.5em) { 
    .test { 
    background-color: #d13400; 
    } 
} 

मुझे आशा है कि इस मदद करता है, मैं यह मिल गया है एक यहाँ codepen भी - http://codepen.io/sturobson/pen/CzGuI

Answer 5

मैं का एक बहुत कुछ के लिए कम उपयोग करें मेरा काम, लेकिन बड़ी परियोजनाओं पर, फाइलों में काम करने वाले कई लोगों के साथ, मुझे 1024.less जैसे ब्रेकपॉइंट फ़ाइलों का उपयोग करना पसंद नहीं है।

मेरी और मेरी टीम एक मॉड्यूलर दृष्टिकोण का उपयोग करती है, जैसे हेडर.लेस जिसमें संबंधित ब्रेकपॉइंट्स सहित हेडर के लिए सभी कोड शामिल हैं।

दौर आईई समस्याओं प्राप्त करने के लिए (हम एक कारपोरेट वातावरण में काम करते हैं), मैं इस दृष्टिकोण का उपयोग:

@media screen\9, screen and (min-width: 40em) { 
    /* Media queries here */ 
} 

मीडिया क्वेरी के अंदर कोड हमेशा IE7 और कम से क्रियान्वित किया जाता है। आईई 9 और ऊपर एक उचित ब्राउज़र की तरह मीडिया प्रश्नों का पालन करना चाहिए। समस्या आईई 8 है। इस को हल करने के लिए, आप इसे IE7

X-UA-Compatible "IE=7,IE=9,IE=edge" 

मैं अगर HTML में मेटाटैग में सेट इस हमेशा काम नहीं करता पाया है की तरह व्यवहार करते हैं, तो सर्वर हेडर का उपयोग करके यह निर्धारित करने की आवश्यकता। https://gist.github.com/thefella/9888963

बनाना IE7 तरह IE8 अधिनियम एक समाधान जो सभी के लिए नहीं है, लेकिन यह मेरी जरूरतों सूट:

यहाँ सार देखें।