Mam duży plik CSS i chciałbym dołączyć inne pliki CSS do specjalnych przypadków przy użyciu zapytań o media.Czy można dołączyć plik CSS do innego pliku CSS z zapytaniem o media?
Czy można bezpiecznie korzystać @import w CSS tak:
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
Zamiast importowania w pliku CSS, polecam, aby pobrać plik CSS równolegle, jeśli jest to wymagane:
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
Problem z użyciem @import jest, że drugi plik jest pobierany dopiero po Plik CSS zawierający @import został całkowicie pobrany i przeanalizowany. Niezależnie od tego, czy nadpisujesz wszystkie reguły, czy niektóre reguły, podejście to jest szybsze, ponieważ nie ładuje plików sekwencyjnie.
To zależy - jeśli arkusz stylów, w którym '@ import' zawiera inne style, które i tak musi załadować OP, to przeniesienie tego' @ importu 'z tego arkusza stylów nie będzie miało znaczenia. – BoltClock
@BoltClock Prawda, założyłem, że program operacyjny nadpisał wszystkie obecne reguły za pomocą '@ import' –
@BoltClock Właściwie to nie jest prawda. Moje podejście jest szybsze, niezależnie od tego, ponieważ '@ import' uruchamia się tylko wtedy, gdy plik CSS został całkowicie pobrany i przeanalizowany. Oznacza to, że pliki ładują się sekwencyjnie. –
To nie jest ważne, aby mieć @import w @media reguły, więc co masz nie zadziała.
Prawidłowe sposobem na to jest jeszcze prostsze - @import sama akceptuje zapytania mediów po adresem:
@import url('/css/styles-480.css') only screen and (max-width: 480px);
Ta składnia jest introduced in CSS2.1 for use with media types, ale media queries will also work ponieważ jesteśmy bezpośrednim rozszerzeniem od typów mediów.
Pamiętaj, że reguły @import mogą istnieć tylko na początku arkusza stylów.
Jeśli niepokoi Cię wydajność ładowania, możesz użyć oddzielnego elementu <link> w nagłówku strony, aby odnieść się do tego arkusza stylów zamiast do @import, as shown by Asad. Jednak tak czy inaczej zadziała.
Ok. Wielkie dzięki. – Wilson
Ogólnie użycie @import spowalnia wyświetlanie przeglądarki. Zobacz [to powiązane pytanie] (http://stackoverflow.com/questions/6912899/css-import-best-practices). Podstawową zasadą optymalizacji sieci jest po prostu zminimalizowanie liczby żądań, w szczególności zamówień sekwencyjnych. –