Er zijn een aantal manieren waarop u CSS-stijlen kunt toepassen op een webpagina, inclusief zowel externe stijlpagina's als zelfs inlinestijlen. Als u een externe stijlpagina gebruikt, wat de aanbevolen manier is om het uiterlijk van een HTML-document te bepalen, kunt u
@importeren.
De
@importeren regel stelt u in staat belangrijke externe stijlpagina's in uw document in te voeren - in een HTML-pagina of zelfs in andere CSS-documenten. Het doorbreken van veel stijlen in een aantal kleinere, gerichte bestanden (een voor lay-out, een voor typografie, een voor afbeeldingen, enz.) Kan het soms gemakkelijker maken om die bestanden en de verschillende stijl die ze bevatten te beheren. Als u van die voordelen wilt genieten, dan is het importeren van die verschillende bestanden wat u moet doen om ze allemaal te laten werken voor de weergave van uw webpagina.
Importeren in HTML
Om de te gebruiken
@importeren regel in uw HTML, voegt u het volgende toe aan de
van het document:
:
Deze code zou nu deze stylesheet importeren voor gebruik op deze HTML-pagina en u zou al uw stijlen in dat ene bestand kunnen beheren. Het nadeel van belangrijke stylesheets op deze manier is dat deze methode geen parallelle downloads toestaat. De pagina moet een volledige stylesheet downloaden voordat deze naar de rest van de pagina wordt verplaatst, inclusief eventuele andere CSS-bestanden die u met deze methode importeert. Dit heeft een negatief effect op de snelheid en downloadprestaties van je pagina. Als je bedenkt hoe belangrijk paginaprestaties zijn voor het succes van de website, kan dit nadeel alleen al een reden zijn waarom je zou willen vermijden om @import te gebruiken.
Andere aanpak
Als een alternatief voor het gebruik
@importeren in je HTML kun je als volgt linken naar dat CSS-bestand:
Deze functioneert op dezelfde manier als de
@importeren in dat het u toestaat om al uw CSS vanuit één centrale locatie / bestand te beheren, maar deze methode heeft de voorkeur vanuit een downloadperspectief. Als u nog steeds verschillende soorten stijlen in verschillende bestanden wilt segmenteren, kunt u dit blijven doen en de @import-functionaliteit in uw hoofd-CSS-bestand gebruiken. Dit betekent dat uw externe CSS-bestanden nog steeds afzonderlijk kunnen worden beheerd, maar omdat ze allemaal in één hoofd-CSS worden geïmporteerd, zijn de prestaties verbeterd.
Importeren in CSS
De … gebruiken
code voorbeeld hierboven zou het "default.css" -bestand op uw HTML-pagina kunnen gebruiken. Binnen dat CSS-bestand zou je verschillende paginastijlen hebben. Je kunt al die stijlen gedetailleerd laten weergeven op die ene pagina, of je kunt @import gebruiken om ze uit elkaar te halen voor eenvoudiger beheer. Nogmaals, laten we zeggen dat we 4 verschillende CSS-bestanden gebruiken: een voor de lay-out, een voor typografie en een voor afbeeldingen. Het vierde bestand is ons "hoofdbestand" waarnaar onze pagina verwijst (voor dit voorbeeld is dit "default.css"). Helemaal boven aan dat hoofd-CSS-bestand kunnen we de onderstaande regels toevoegen:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
Merk op dat deze regels moet vóór alle andere inhoud in uw CSS-bestand staan om ze te laten werken. U kunt geen andere CSS-stijl hebben vóór deze importregels.
Onder die importregels kunt u alle andere CSS-stijlen toevoegen die u in uw standaardblad wilt hebben. Wanneer dat hoofd-CSS-bestand wordt geladen, zal het eerst deze afzonderlijke bestanden importeren en hun stijlen toevoegen aan de top van het stylesheet. Vervolgens worden al uw andere stijlen onder deze geïmporteerde stijlen geplaatst, waardoor het volledige CSS-bestand wordt gemaakt dat de webbrowser gebruikt om uw site weer te geven. U profiteert van het beheer van kleinere, meer gerichte bestanden terwijl er nog steeds één stijlblad aan gekoppeld is in die HTML.
@Import gebruiken voor Media Queries
Een ding dat u kunt overwegen om dit te doen, het scheiden van de media-zoekopdrachten van uw website voor responsieve websitestijlen in een afzonderlijk bestand. Omdat deze responsieve stijlen verwarrend kunnen zijn als ze naast de andere stijlregels van uw site worden gezien, kan het aantrekkelijk zijn om ze alleen te hebben in een ander bestand. Een zorg met deze aanpak is dat, sinds uw
@importeren regels moeten de eerste zijn, dit betekent dat uw mediaquery's vóór de rest van de stijlen van uw site worden geladen. Wanneer u een mobiel-eerste responsieve site maakt die rekening houdt met de prestaties, is dit waarschijnlijk een probleem. Om deze reden wordt u aangeraden de responsieve stijlen van uw site niet afzonderlijk op te splitsen en te gebruiken
@importeren om ze naar uw site te brengen. Ja, er lijken voordelen te zijn, maar de nadelen zijn groter dan die voordelen.
Heb ik @import nodig?
Nee dat doe je niet. Veel sites tonen simpelweg al hun hoofdstijlen in één bestand en, zo groot als dat bestand is, wordt het op die manier beheerd (zo doe ik het in mijn eigen werk). Als je vind
@importeren nuttig, dan kan het deel uitmaken van uw workflow. Anders kunt u veilig webpagina's bouwen uw enkele stylesheet van al uw CSS-regels.
Browserondersteuning
Zeer oude browsers hebben moeite met sommige van deze @import-regels, maar deze browsers zullen tegenwoordig waarschijnlijk geen probleem voor u zijn. Dit geldt met name nu de deadline voor het einde van de levensduur van oudere versies van Internet Explorer is verstreken. Uiteindelijk, als je besluit te gebruiken
@importeren regels in uw HTML of CSS, mag u geen problemen ondervinden met oudere versies van webbrowsers, tenzij u een vreemde behoefte hebt om ongelooflijk oude versies van IE te ondersteunen.
Bewerkt door Jeremy Girard
