CSS @import-sääntö

  • Edellinen sivu
  • Seuraava sivu

Määrittely ja käyttö

@import-sääntö mahdollistaa tyyliarkin tuomisen toiseen tyyliarkkiin.

@import-sääntö täytyy olla dokumentin alussa (mutta @charset-deklaroinnin jälkeen).

@import-sääntö tukee myös media-kyselyjä, joten se voi mahdollistaa riippuvuuden median tuonnista.

Esimerkki

Esimerkki 1

Tuo "navigation.css"-tyyliarkki nykyiseen tyyliarkkiin:

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

tai

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

Esimerkki 2

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

@import "printstyle.css" print;

Kokeile itse!

Esimerkki 3

Tuo "mobstyle.css"-tyyliarkki vain silloin, kun media on screen ja näyttölaajuus on 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 Mediaqueries-listit, jotka erotetaan pilkulla, määrittävät, millä ehdoin CSS-säännöt, jotka tuodaan URL:n kautta, sovelletaan.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5
  • Edellinen sivu
  • Seuraava sivu