SASS 3.2 Truy vấn phương tiện và Hỗ trợ Internet Explorer

Question

Gần đây, tôi đã triển khai this technique với SASS 3.2 bằng cách sử dụng @content khối trên một dự án mà tôi đã thực hiện và tôi đã đi đến điểm cần hỗ trợ cho các trình duyệt cũ hơn như IE7 và 8.

Ví dụ:

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

cả hai đều không hỗ trợ truy vấn phương tiện truyền thông, và tôi đã thường xuyên xử lý này trong quá khứ bằng cách phục vụ lên tất cả các phong cách để những trình duyệt này khi tôi đã có phương tiện truyền thông của tôi truy vấn được tách thành các phần riêng biệt như _320.scss, _480.scss và trong biểu định kiểu IE của tôi, hãy tải chúng như sau:

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

Điều này sẽ tải tất cả các kiểu và luôn gán bố cục và phong cách IE7 - 8 940px (hoặc bất kỳ chiều rộng tối đa) là gì. Bằng cách lồng các kiểu trong SASS 3.2 inline như thế này, nó loại bỏ sự cần thiết cho các bảng định kiểu riêng biệt một phần, nhưng hoàn toàn vít lên cách tôi tải các kiểu cho IE.

Bất kỳ ý tưởng hoặc giải pháp nào về cách chống lại điều này? Tôi có thể sử dụng một polyfill như response.js để buộc IE sử dụng các truy vấn phương tiện truyền thông, nhưng muốn chỉ phục vụ cho một trang không linh hoạt cho IE.

Bất kỳ ý tưởng nào về cách tổ chức tốt nhất các tệp này hoặc giải pháp tốt hơn?

Answer 1

Có một CSS3 Mixin Tôi sử dụng nó có một biến cho bộ lọc IE. Bạn có thể làm một cái gì đó tương tự bằng cách có một biến toàn cầu, $ forIE hoặc một cái gì đó, bọc mixin truy vấn phương tiện truyền thông trong một if và sau đó tạo ra các stylesheet với hoặc w/o các truy vấn.

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

Hoặc sử dụng @if để nhập lần thứ 3 scss (_forIE.scss?) Sẽ ghi đè mọi thứ bằng phong cách cụ thể của IE của bạn.

Answer 2

Jake Archibald has the best technique Tôi đã thấy cho đến nay để đạt được điều này. Kỹ thuật này sẽ tự động tạo một biểu định kiểu riêng cho IE, với tất cả các kiểu giống nhau bên trong các truy vấn phương tiện của bạn nhưng không có chính truy vấn phương tiện đó.

Tôi cũng đã vận động để có được kỹ thuật này được tích hợp vào phổ biến breakpoint extension for Sass, nếu bạn quan tâm đến việc sử dụng điều đó!

Answer 3

Bạn có thể tạo biểu định kiểu riêng cho IE < 9 có chứa mọi thứ mà tờ thông thường của bạn có, nhưng với các truy vấn phương tiện được làm phẳng dựa trên độ rộng đã đặt.

Full giải thích ở đây http://jakearchibald.github.com/sass-ie/, nhưng về cơ bản bạn có mixin này:

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

nào bạn muốn sử dụng như thế này:

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

Đây sẽ là bên all.scss, trong đó sẽ biên dịch xuống all.css với các truy vấn phương tiện. Tuy nhiên, bạn cũng muốn có một tập tin bổ sung, all-old-ie.scss:

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

Đó chỉ đơn giản là nhập khẩu tất cả, nhưng flattens phương tiện truyền thông khối truy vấn cụ thể có chiều rộng giả của 65em.

Answer 4

Nếu bạn muốn giữ tất cả mọi thứ dưới một mái nhà và chỉ có một yêu cầu http duy nhất cho du khách trình duyệt cũ hơn của bạn, bạn có thể làm một cái gì đó như thế này

Thiết lập ban đầu respondto mixin bạn

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

chí này tạo truy vấn phương tiện tối thiểu và xuất giá trị px của bạn ($ point) dưới dạng giá trị em.

Từ đó bạn sẽ cần phải tạo 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; 
     } 
    } 
    } 
} 

này ở đây nếu bạn vượt qua một mảnh Sass (SCSS) như thế này

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

nó sẽ trả về mã này

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

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

Điều này sẽ cung cấp cho bạn trình duyệt IE và 'trình duyệt mới' CSS trong một tệp. Nếu bạn viết -

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

Bạn sẽ nhận được -

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

Tôi hy vọng điều này sẽ giúp, tôi đã có điều này trên một codepen đây quá - http://codepen.io/sturobson/pen/CzGuI

Answer 5

tôi sử dụng LESS cho rất nhiều công việc của tôi, nhưng trên các dự án lớn hơn, với nhiều người làm việc trên các tệp, tôi không thích sử dụng các tệp điểm ngắt, chẳng hạn như 1024.less.

Nhóm của tôi và nhóm của tôi sử dụng phương thức mô-đun, chẳng hạn như header.less chứa tất cả mã chỉ cho tiêu đề, bao gồm các điểm ngắt được liên kết.

Để có được những vấn đề IE tròn (chúng tôi làm việc trong một môi trường doanh nghiệp), tôi sử dụng phương pháp này:

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

Mã bên trong truy vấn phương tiện truyền thông luôn được thực hiện bởi IE7 và ít hơn. IE9 và ở trên tuân theo các truy vấn phương tiện truyền thông như một trình duyệt thích hợp nên. Vấn đề là IE8. Để giải quyết việc này, bạn cần phải làm cho nó hoạt động giống như IE7

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

tôi đã tìm thấy điều này không phải lúc nào cũng có tác dụng nếu thiết lập trong thẻ meta trong HTML, vì vậy cài đặt nó bằng cách sử dụng tiêu đề máy chủ.

Xem các ý chính ở đây: https://gist.github.com/thefella/9888963

Làm IE8 hành động như IE7 không phải là một giải pháp mà làm việc cho tất cả mọi người, nhưng nó phù hợp với nhu cầu của tôi.