CSS @import-sääntö

Määrittely ja käyttö

@import-sääntö sallii sinun tuoda tyyliarkin toiseen tyyliarkkiin.

@import-sääntö on asetettava dokumentin alkuun (mutta @charset-ilmotuksen jälkeen).

@import-sääntö tukee myös mediaqueryja, joten se voi sallia media riippuvien tuontien.

Esimerkki

Esimerkki 1

Tuo "navigation.css"-tyyliarkki nykyiseen tyyliarkkiin:

@import "navigation.css"; /* Käytä merkkijonoa */

tai

@import url("navigation.css"); /* Käytä URL:ää */

Esimerkki 2

Tuo "printstyle.css"-tyyliarkki vain silloin, kun media on tulostus:

@import "printstyle.css" print;

Kokeile itse

Esimerkki 3

Tuo "mobstyle.css"-tyyliarkki vain silloin, kun media on screen ja näyttölaajuus enintään 768 pikseliä:

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

Kokeile itse

CSS-grammatiikka

@import url|string list-of-mediaqueries;

ominaisuusarvo

arvo kuvaus
url|string URL tai merkkijono, joka edustaa tuotavaa resurssin sijaintia. URL voi olla absoluuttinen tai suhteellinen.
list-of-mediaqueries Komavalitsimena erotettu mediaquery-lista, joka määrittää, millä ehdoilla URL:stä tuodut CSS-säännöt sovelletaan.

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka täysin tukee kyseistä ominaisuutta.

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