`@import` în CSS

Reguli @ (at-rules) CSS2+ (layer(): Chrome 99, Firefox 97, Safari 15.4; supports(): Chrome 122, Firefox 115, Safari 17.5)

Include un alt fișier CSS în foaia curentă, opțional condiționat de un media query, de suport sau pus într-un strat (@layer).

Sintaxă CSS

@import url("baza.css");
@import url("tiparire.css") print;
@import url("tema.css") layer(tema);
@import url("grid.css") supports(display: grid);

Ce face `@import`

@import aduce conținutul altui fișier CSS ca și cum ar fi fost scris în locul regulii. Trebuie scris la începutul fișierului, înaintea oricărei alte reguli (sunt permise înainte doar @charset și declarațiile @layer fără bloc); un @import pus mai jos este ignorat.

Poți condiționa importul: cu un media query (print, (width < 600px)), cu supports(...) ca la @supports, sau poți pune tot fișierul într-un strat al cascadei cu layer(nume).

Pe site-uri publice, @import poate încetini afișarea: browserul descoperă fișierul importat abia după ce a descărcat și citit fișierul care îl importă. Pentru producție, de obicei este mai rapid să pui mai multe etichete <link> în HTML sau să unești fișierele la build.

Valori uzuale

Valoare	Descriere
`url("fisier.css")`	Fișierul importat; și forma scurtă „fisier.css” este acceptată.
`media query`	Importă doar pentru anumite medii sau ecrane (print, screen and (min-width: 900px)).
`layer(nume)`	Pune regulile importate într-un strat al cascadei (vezi @layer).
`supports(condiție)`	Importă doar dacă browserul suportă condiția.

Exemple

Exemplul 1: Bibliotecă externă pusă într-un strat cu prioritate mică

Declari ordinea straturilor, apoi imporți biblioteca în stratul „biblioteci”. Regulile tale din stratul „site” câștigă indiferent de specificitatea regulilor din bibliotecă.

@layer biblioteci, site;
@import url("normalize.css") layer(biblioteci);

@layer site {
  button {
    font-family: inherit;
    background: #2563eb;
    color: white;
  }
}

Efect vizual în browser

Butoanele folosesc fontul paginii și fundalul albastru, chiar dacă normalize.css conține reguli pentru button cu selectori mai specifici.

Exemplul 2: Stiluri separate doar pentru tipărire

Fișierul tiparire.css se aplică numai când pagina este tipărită sau salvată ca PDF.

@import url("tiparire.css") print;

/* tiparire.css conține, de exemplu: */
/* nav, footer, .reclama { display: none; } */