Có thể đưa tệp CSS vào một tệp CSS khác bằng truy vấn phương tiện không?

Question

Tôi có tệp CSS lớn và tôi muốn bao gồm các tệp CSS khác cho các trường hợp đặc biệt bằng truy vấn phương tiện.

Có an toàn để sử dụng @import trong CSS như thế này:

@media only screen and (max-width: 480px) {  
    @import url('/css/styles-480.css');  
} 

Answer 1

Thay vì nhập khẩu trong một file CSS, tôi sẽ khuyên bạn nên tải file CSS song song nếu nó là cần thiết:

<link media="only screen and (max-width: 480px)" 
href="/css/styles-480.css" type="text/css" rel="stylesheet" /> 

Vấn đề với việc sử dụng @import là các tập tin thứ hai chỉ được tải về sau khi Tệp CSS chứa @import được tải xuống và phân tích cú pháp hoàn toàn. Bất kể bạn có ghi đè tất cả các quy tắc hoặc một số quy tắc của mình hay không, cách tiếp cận này nhanh hơn, vì nó không tải các tệp tuần tự.

Answer 2

Đó là không có giá trị để có một @import trong một quy tắc @media, vì vậy những gì bạn có sẽ không hoạt động.

Cách đúng để làm điều này thậm chí còn đơn giản hơn - @import bản thân chấp nhận một truy vấn phương tiện truyền thông sau URL:

@import url('/css/styles-480.css') only screen and (max-width: 480px); 

Cú pháp này là introduced in CSS2.1 for use with media types, nhưng media queries will also work vì chúng là một phần mở rộng trực tiếp từ các loại phương tiện truyền thông.

Hãy nhớ rằng các quy tắc @import chỉ có thể tồn tại ở đầu biểu định kiểu.

Nếu bạn lo ngại về hiệu suất tải, bạn có thể muốn sử dụng phần tử <link> riêng trong đầu trang của mình để tham khảo biểu định kiểu này thay vì @import, as shown by Asad. Tuy nhiên, một trong hai cách sẽ làm việc tốt.