@import
Dołącza zawartość innego arkusza CSS do bieżącego. Może od razu umieścić go w warstwie albo wczytać tylko dla wybranych mediów.
Przykład
#@import url("reset.css") layer(reset);
@import url("theme.css") layer(theme);
@import url("print.css") print;
.button {
background: #7c3aed;
}Importy stoją na samej górze pliku. Style z reset.css i theme.css trafiają do warstw, więc zwykłe reguły, takie jak .button, zawsze z nimi wygrywają. Plik print.css działa tylko przy drukowaniu. Przykład nie ma podglądu, bo w ramce tych plików nie ma.
Definicja i zastosowanie
#Reguła @import wczytuje inny plik CSS i traktuje jego reguły tak, jakby stały w miejscu importu. Adres podajesz jako url("plik.css") albo sam tekst w cudzysłowie. Ścieżki względne liczą się od położenia arkusza, w którym stoi import, a nie od strony HTML.
Import musi stać na samej górze arkusza, przed wszystkimi innymi regułami. Wyprzedzić go mogą tylko @charset i deklaracje kolejności warstw w formie @layer a, b;. Import wpisany niżej przeglądarka po cichu ignoruje.
Po adresie możesz dopisać warunki. layer(nazwa) wrzuca cały plik do warstwy kaskadowej, co świetnie sprawdza się przy resetach i bibliotekach: ich style przegrają z Twoimi, nawet jeśli mają wyższą specyficzność. Zapytanie o media, np. print albo (width >= 900px), sprawia, że reguły z pliku działają tylko wtedy, gdy warunek jest spełniony.
Uważaj na wydajność. Przeglądarka dowiaduje się o imporcie dopiero po pobraniu i przeczytaniu arkusza, który go zawiera, więc pliki ładują się jeden po drugim zamiast równolegle. Na produkcji lepiej dołączyć arkusze osobnymi znacznikami <link> w HTML albo połączyć je w jeden plik narzędziem do budowania, np. Vite, które rozwija importy już podczas budowania.
Składnia
#@import url("plik.css");
@import "plik.css";
@import url("plik.css") layer(<nazwa>);
@import url("plik.css") <zapytanie o media>;Więcej przykładów
#@layer reset, vendor, app;
@import url("reset.css") layer(reset);
@import url("vendor/slider.css") layer(vendor);
@layer app {
.slider {
border-radius: 12px;
}
}Deklaracja @layer może stać przed importami i ustala kolejność warstw. Styl z warstwy app wygra z biblioteką, nawet gdyby jej selektory były bardziej szczegółowe.
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/css/print.css" media="print">Przeglądarka widzi wszystkie arkusze od razu i pobiera je równolegle. Arkusz z media="print" nie blokuje wyświetlania strony na ekranie.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Stawiaj importy na samym początku pliku. Import po jakiejkolwiek zwykłej regule nie zadziała, a przeglądarka nie zgłosi błędu.
- Zewnętrzne biblioteki importuj z
layer(). Nie będziesz musiał podbijać specyficzności ani używać!important, żeby nadpisać ich style. - Unikaj łańcuchów importów, w których plik importuje plik, a ten kolejny. Każde ogniwo to osobne czekanie na sieć.
Powiązane hasła
#- @layerDzieli style na warstwy kaskadowe o ustalonej kolejności. Reguła z późniejszej warstwy wygrywa bez względu na specyficzność selektora.
- @mediaWłącza style tylko wtedy, gdy urządzenie spełnia warunek: ma odpowiednią szerokość okna, ciemny motyw, mysz albo drukuje stronę.
- @font-faceRejestruje krój pisma pod wybraną nazwą, której potem używasz w font-family. Pozwala korzystać z fontów z plików własnej strony.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- @supportsWłącza style tylko w przeglądarkach, które obsługują daną właściwość, wartość albo selektor. Pozwala bezpiecznie korzystać z nowości.
Widzisz błąd albo brakuje przykładu? Napisz do nas.