Ne koristite @import za ubacivanje CSS stilova u HTML dokument

Kategorija: CSS Delicious Stumble It!

Bolje rečeno, pazite kako koristite @import naredbu. Steve Soulders je dokazao kroz seriju testova da nepravilno korišćenje @import naredbe za uvoz CSS stilova u HTML dokument može, u određenim situacijama, poprilično da uspori učitavanje web stranice. Problem nije kada imate samo jedan CSS fajl, već nekoliko koje preko @import naredbe uvozite u HTML dokument, ili najgori mogući scenario kada se u isto vreme koristi @import i link, a kao što je Steve objasnio u komentarima, mnogi poznati sajtovi kao što su wordpress.com, nytimes.com, about.com i adobe.com upravo to rade.

Postoje dva načina da se CSS fajl doda jednoj web stranici. Prvi način:

<link rel='stylesheet' type='text/css' href='a.css'>

Drugi način:

<style>
@import url('a.css');
</style>

Koristeći ovaj drugi pristup sakrivaju se CSS fajlovi od starijih brauzera, kojima se servira samo HTML. U suprotnom obično dolazi do raspada sistema, jer stariji brauzeri ne podržavaju dobro CSS 2.1 specifikaciju (o CSS 3 da i ne govorimo), pa je najbolja varijanta da dobiju samo HTML kod.

Znači ako u jednom HTML dokumentu postoji ovako nešto:

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>

dolazi do toga da se CSS fajlovi preuzimaju jedan po jedan, a ne u isto vreme, paralelno. Na taj način stranica se duže učitava. Može neko da pomisli pa koliko se to duže učitava, možda sekund, dva, to nije ništa strašno. U redu, ali ako imate više CSS fajlova, sekund dva po sekund dva i već imate problem, jer ako se stranica učitava duže od 8 sekundi, a po nekim najnovijim istraživanjima duže od 4 sekunde, potencijalni posetioci često napuštaju sajt i odlaze na drugo mesto.

Neke poznate knjige koje se bave CSS tehnologijom, kao što je na primer CSS Mastery, preporučuju da u slučaju da postoji više CSS fajlova, prvo se iz HTML dokumenta uradi @import glavnog CSS fajla:

<style>
@import url('glavni.css');
</style>

pa se onda iz tog (glavni.css) fajla, opet preko @import uvezu ostali CSS fajlovi:

@import url('reset.css');
@import url('layout.css');
@import url('typographyAndColor.css');
@import url('other.css');

Molly Holzschlag u knjizi Skok u HTML i CSS koja je objavljena i na srpskom jeziku, preporučuje isti pristup.

Sada ispada, kao što je to Steve Soulders pokazao i dokazao, da je ovo u određenim situacijama veoma loš pristup, jer u slučaju da postoji više CSS fajlova može doći do velikog kašnjenja u učitavanju stranice, upravo zbog vremena koje je potrebno da se svi CSS fajlovi preuzmu.

Više o svim mogućim kombinacijama korišćenja link i @import naredbe, i o tome kako je najbolje uvoziti CSS stilove, pročitajte u tekstu don’t use @import.