SASS 3.2 Media Query e supporto Internet Explorer

Question

Recentemente ho implementato this technique con SASS 3.2 utilizzando i blocchi @content su un progetto su cui stavo lavorando e sono appena arrivato al punto in cui ho bisogno di includere il supporto per i browser meno recenti come IE7 e 8.

Esempio:

.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 
} 

entrambi non supportano media query, e ho spesso gestite in passato servendo tutti gli stili a questi browser quando ho avuto i miei mezzi query separate in file parziali separati come _320.scss, _480.scss e nel mio foglio di stile IE caricandoli in questo modo:

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

Che sarebbe caricare tutti gli stili, e sempre assegnare IE7 - 8 un layout 940px (o qualunque sia la larghezza massima è) e stili. Raggruppando gli stili in SASS 3.2 in linea come questo, elimina la necessità di fogli di stile parziali separati, ma totalmente rovina il modo in cui carico gli stili per IE.

Eventuali idee o soluzioni su come combattere questo? Potrei usare un polyfill come respond.js per forzare l'utilizzo di query multimediali da parte di IE, ma preferirei semplicemente pubblicare un sito non flessibile su Internet Explorer.

Qualche idea su come organizzare al meglio questi file o una soluzione migliore?

Answer 1

C'è un CSS3 Mixin che uso che ha una variabile per i filtri IE. Si potrebbe fare qualcosa di simile avendo una variabile globale, $ forIE o qualcosa del genere, avvolgendo il media query mixin in un if e quindi generando il foglio di stile con o senza le query.

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

Oppure utilizzare il @If per importare un terzo SCSS (_forIE.scss?) Che verrà ignorare le cose con i vostri stili specifici di IE.

Answer 2

Jake Archibald has the best technique Ho visto fino ad oggi per raggiungere questo. Questa tecnica crea automaticamente un foglio di stile separato per IE, con tutti gli stessi stili all'interno delle query multimediali, ma senza la query multimediale stessa.

Ho anche fatto una campagna per ottenere questa tecnica incorporata nel popolare breakpoint extension for Sass, se sei interessato a utilizzarlo!

Answer 3

È possibile generare un foglio di stile separato per IE < 9 che contiene tutto ciò che ha il foglio normale, ma con query di supporto appiattite basate su una larghezza impostata.

spiegazione completa qui http://jakearchibald.github.com/sass-ie/, ma fondamentalmente si dispone di questo 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; 
     } 
    } 
} 

Quale devi usare in questo modo:

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

questo sarebbe all'interno all.scss, che compilare fino a all.css con le domande dei media. Tuttavia, si potrebbe anche avere un file aggiuntivo, all-old-ie.scss:

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

Che semplicemente importa tutti, ma appiattisce multimediali blocchi di query dato una larghezza falso di 65em.

Answer 4

Se si voleva tenere tutto sotto lo stesso tetto e hanno solo una singola richiesta HTTP per i visitatori del browser più anziani si potrebbe fare qualcosa di simile

Configurazione respondto mixin iniziale

// 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; } 
} 

questa volontà crea una query media di larghezza minima e genera il valore px ($ punto) come valore em.

Da questo si avrebbe bisogno di creare questa 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; 
     } 
    } 
    } 
} 

Qui se si passa un pezzo di Sass (SCSS) come questo

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

verrà restituito questo codice

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

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

Questo ti darà l'IE e il "nuovo browser" CSS in un unico file. Se si scrive -

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

Si otterrà -

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

Spero che questo aiuta, ho questo su un codepen anche qui - http://codepen.io/sturobson/pen/CzGuI

Answer 5

io uso meno per un sacco di il mio lavoro, ma su progetti più grandi, con molte persone che lavorano su file, non mi piace usare i file breakpoint, come 1024.less.

Mio e il mio team utilizzano un approccio modulare, come header.less che contiene tutto il codice solo per l'intestazione, inclusi i punti di interruzione associati.

Per ottenere problemi rotonde IE (lavoriamo in un ambiente aziendale), io uso questo approccio:

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

il codice all'interno del media query viene sempre eseguito da IE7 e meno. IE9 e oltre obbediscono alle query multimediali come dovrebbe essere un browser appropriato. Il problema è IE8. Per risolvere questo problema, è necessario farlo comportare come IE7

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

ho trovato questo non sempre funziona se impostato nei metatag nel codice HTML, in modo da impostare utilizzando le intestazioni del server.

Vedi il senso qui: https://gist.github.com/thefella/9888963

Fare IE8 agire come IE7 non è una soluzione che funziona per tutti, ma si adatta alle mie esigenze.