SASS 3.2 Zapytania o media i obsługa Internet Explorera

Question

Niedawno zaimplementowałem this technique z SASS 3.2 przy użyciu bloków @content nad projektem, nad którym pracowałem, i właśnie doszedłem do punktu, w którym muszę uwzględnić obsługę starszych przeglądarek, takich jak jak IE7 i 8.

Przykład:

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

obaj nie obsługują zapytań o media, a ja często traktowane w przeszłości przez obsługujących wszystkie style do tych przeglądarek kiedy miałem mediów kwerendy podzielone na osobne pliki częściowe, takie jak _320.scss, _480.scss oraz w moim arkuszu stylów IE ładowanie ich w następujący sposób:

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

Które załadować wszystkie style i zawsze przypisać IE7 - 8 a 940px (lub cokolwiek maksymalna szerokość) układ i style. Poprzez zagnieżdżanie stylów w SASS 3.2 inline, eliminuje to potrzebę oddzielnych częściowych arkuszy stylów, ale całkowicie wkręca sposób ładowania stylów dla IE.

Jakieś pomysły lub rozwiązania, jak z tym walczyć? Mógłbym użyć polyfill takich jak response.js, aby zmusić IE do korzystania z zapytań o media, ale wolałbym po prostu wyświetlać nieelastyczną stronę do IE.

Jakieś pomysły na to, jak najlepiej uporządkować te pliki, czy lepsze rozwiązanie?

Answer 1

Jest jeden, który używa zmiennej dla filtrów IE. Możesz zrobić coś podobnego, mając zmienną globalną, $ forIE lub coś takiego, owijając mixin z zapytaniami o media wewnątrz, a następnie generując arkusz stylów za pomocą lub bez zapytań.

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

Albo użyć @if importować 3rd SCSS (_forIE.scss?), Który będzie zastąpić rzeczy konkretnych stylów IE.

Answer 2

Jake Archibald has the best technique Do tej pory widziałem, jak to osiągnąć. Ta technika automatycznie tworzy oddzielny arkusz stylów dla IE, z tymi samymi stylami wewnątrz zapytań o media, ale bez samego zapytania o media.

Prowadziłem kampanię, aby tę technikę zastosować w popularnej wersji breakpoint extension for Sass, jeśli chcesz ją wykorzystać!

Answer 3

Można wygenerować oddzielny arkusz stylów dla IE < 9 zawierający wszystko, co ma zwykły arkusz, ale ze spłaszczonymi zapytaniami o media na podstawie ustawionej szerokości.

Pełne wyjaśnienie tutaj http://jakearchibald.github.com/sass-ie/, ale w zasadzie masz ten 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; 
     } 
    } 
} 

Które byłoby użyć tak:

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

Byłoby wewnątrz all.scss, które skompilować do all.css z zapytaniami o media. Jednakże, można również mieć dodatkowy plik all-old-ie.scss:

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

To po prostu importuje wszystko, ale spłaszcza multimedialne bloków zapytania podane fałszywe szerokość 65em.

Answer 4

Jeśli chciał mieć wszystko pod jednym dachem i tylko jedno żądanie HTTP dla swoich starszych użytkowników przeglądarek można zrobić coś takiego

konfigurowania początkowy 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; } 
} 

Będzie utwórz zapytanie o media o minimalnej szerokości i wyprowadź wartość px ($ point) jako wartość em.

Od tego trzeba by stworzyć ten 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; 
     } 
    } 
    } 
} 

tu jeśli przejść kawałek Sass (SCSS) jak to

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

powróci ten kod

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

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

To da ci IE i "nową przeglądarkę" CSS w jednym pliku. Jeśli piszesz -

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

Dostaniesz -

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

Mam nadzieję, że to pomaga, mam to na codepen tutaj też - http://codepen.io/sturobson/pen/CzGuI

Answer 5

używam mniej za dużo moja praca, ale w większych projektach, z wieloma ludźmi pracującymi na różnych plikach, nie lubię używać plików punktów przerwania, takich jak 1024.less.

Mój i mój zespół stosuje podejście modułowe, takie jak header.less, który zawiera cały kod tylko nagłówka, w tym powiązanych punktów przerwania.

ominąć problemy z IE (pracujemy w środowisku korporacyjnym), używam tego podejścia:

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

Kod wewnątrz zapytania mediów jest zawsze wykonywany przez IE7 i mniej. IE9 i wyżej są posłuszne zapytaniom o media, tak jak powinna wyglądać odpowiednia przeglądarka. Problemem jest IE8. Aby rozwiązać ten problem, trzeba by zachowywał się jak IE7

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

Znalazłem ten nie zawsze działa, jeśli ustawić w metatagów w kodzie HTML, więc ustawić go przy użyciu nagłówków serwera.

Zobacz istota tutaj: https://gist.github.com/thefella/9888963

Making IE8 akt jak IE7 nie jest rozwiązaniem, które działa dla wszystkich, ale to pasuje do moich potrzeb.