Reguła @import w CSS

Definicja i zastosowanie

Reguła @import pozwala na zaimportowanie arkusza stylów do innego arkusza stylów.

Reguła @import musi znajdować się na początku dokumentu (ale po jakimkolwiek deklarowaniu @charset).

Reguła @import obsługuje również zapytania mediów, więc można pozwolić na import zależny od mediów.

Przykład

Przykład 1

Importuj arkusz stylów "navigation.css" do bieżącego arkusza stylów:

@import "navigation.css"; /* Użyj ciągu znaków */

lub

@import url("navigation.css"); /* Użyj URL */

Przykład 2

Importuj arkusz stylów "printstyle.css", tylko gdy media to druk:

@import "printstyle.css" print;

Spróbuj sam

Przykład 3

Importuj arkusz stylów "mobstyle.css", tylko gdy media to ekran i szerokość ekranu wynosi maksymalnie 768 pikseli:

@import "mobstyle.css" screen and (max-width: 768px);

Spróbuj sam

Gramatyka CSS

@import url|string list-of-mediaqueries;

Wartość atrybutu

Wartość Opis
url|string URL lub ciąg znaków, reprezentujący lokalizację zasobu do zaimportowania. URL może być absolutny lub względny.
list-of-mediaqueries Lista mediów rozdzielonych przecinkami, która określa, w jakich warunkach mają być zastosowane reguły CSS wwożone przez URL.

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5