Gebruik @import in Cascading Style Sheets (CSS)

Daar is 'n aantal maniere waarop u CSS-style op 'n webblad kan toepas, insluitende beide eksterne stylvelle of selfs inline-style . As u 'n eksterne stylblad gebruik, wat die aanbevole manier is om die voorkoms en gevoel van 'n HTML-dokument te bepaal, is een benadering om @import te gebruik.

Die @import-reël laat jou toe om belangrike eksterne stylvelle in jou dokument te gebruik - óf in 'n HTML-bladsy of selfs in ander CSS-dokumente. Deur baie style te breek in 'n aantal kleiner, gefokusde lêers (een vir uitleg, een vir tipografie , een vir beelde, ens.) Kan dit soms makliker wees om daardie lêers en die verskillende style wat hulle bevat, te bestuur. As jy daardie voordeel wil geniet, is die invoer van daardie verskillende lêers wat jy moet doen om hulle almal te laat werk vir die vertoon van jou webblad.

Invoer in HTML

Om die @import-reël in jou HTML te gebruik, voeg jy die volgende by die van die dokument:
:

@import url ("/ styles / default.css");

Hierdie kode sal nou hierdie stylblad invoer vir gebruik op hierdie HTML-bladsy en jy kan al jou style in daardie een lêer bestuur. Die nadeel van belangrike style sheets op hierdie manier is dat hierdie metode nie vir parallelle downloads toelaat nie. Die bladsy moet 'n volledige styleblad aflaai voordat dit na die res van die bladsy beweeg, insluitend enige ander CSS-lêers wat u met hierdie metode invoer. Dit sal 'n negatiewe uitwerking hê op die spoed en die prestasie van u blaaier. Oorweging van hoe belangrik bladsyprestasie is vir die webtuksukses van vandag, kan hierdie nadeel alleen wees, 'n rede waarom jy nie wil gebruik om @import te gebruik nie.

Alternatiewe benadering

As 'n alternatief vir die gebruik van @import in jou HTML, kan jy na hierdie CSS-lêer skakel soos volg:

Dit funksioneer baie soortgelyk aan die @import omdat dit jou toelaat om al jou CSS vanaf een sentrale plek / lêer te bestuur, maar hierdie metode is verkieslik vanuit 'n aflaaiperspektief. As jy nog verskillende soorte style in aparte lêers wil segmenteer, kan jy dit voortgaan en die @import-funksie in jou meester-CSS-lêer gebruik. Dit beteken dat u eksterne CSS-lêers nog individueel bestuur kan word, maar aangesien hulle almal in een meester-CSS invoer, word prestasie verbeter.

Invoer in CSS

As u die kode voorbeeld hierbo gebruik, sal die lêer "default.css" op u HTML bladsy gebruik. Binne daardie CSS-lêer sal jy jou verskillende bladsystyle hê. Jy kan al die style op daardie een bladsy bevat, of jy kan @import gebruik om hulle uitmekaar te maak vir maklike bestuur. Weereens, laat ons sê dat ons 4 afsonderlike CSS-lêers gebruik - een vir uitleg, een vir tipografie en een vir prente. Die vierde lêer is ons "master" -lêer wat ons bladsy skakels na (vir hierdie voorbeeld, dit is "default.css"). Aan die bokant van die meester CSS-lêer kan ons die onderstaande reëls byvoeg:

@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');

Let daarop dat hierdie reëls voor alle ander inhoud in u CSS-lêer moet wees sodat hulle kan werk. Jy kan nie enige ander CSS-styl hê voor hierdie invoerreëls nie!

Onder die invoerreëls kan u enige ander CSS-style wat u in u verstekblad wil hê, byvoeg. Wanneer die hoof CSS-lêer gelaai word, sal dit eers die afsonderlike lêers invoer en hulle style bo-aan die stylevel voeg. Dit sal dan al jou ander style onder hierdie ingevoerde kinders hê, en skep die volledige CSS-lêer wat die webblaaier sal gebruik om jou werf te vertoon. U kry die voordeel om kleiner, meer gefokusde lêers te bestuur terwyl u steeds 'n enkele styleblad het wat in daardie HTML verband hou.

Gebruik die invoer vir Media-navrae

Een ding wat jy dalk oorweeg om dit te doen om jou webwerf se media navrae te skei vir responsiewe webwerf style in 'n aparte lêer. Omdat hierdie reaksie-style verwarrend kan wees wanneer dit langs jou werf se ander stylreëls gesien word, kan dit aantreklik wees om dit op hul eie in 'n ander lêer te hê. Een probleem met hierdie benadering is dat, aangesien jou @import-reëls eerste moet wees, beteken dit dat jou media-navrae voor die res van jou werf se style gelaai sal word. As jy 'n mobiele eerste reaksie-webwerf skep wat prestasie in ag neem, is dit waarskynlik 'n probleem. Daarom word voorgestel dat jy nie die reaksie-style van jou werf afsonderlik nasien nie en gebruik @import om dit na jou werf te bring. Ja, daar lyk dalk voordele daarvan, maar die nadele swaarder as dié voordele.

Moet ek die invoer invoer?

Nee jy doen nie. Baie webwerwe wys eenvoudig al hul hoofstyle in een lêer en, so groot as wat die lêer is, word dit so bestuur (dit is hoe ek dit in my eie werk doen). As jy @import nuttig vind, kan dit deel van jou workflow wees. Andersins kan jy webblaaie op 'n veilige manier bou wat jou enkele styleblad van al jou CSS-reëls.

Browser Ondersteuning

Baie, baie ou blaaiers het probleme met sommige van hierdie @import-reëls, maar hierdie blaaiers sal waarskynlik nie vir u 'n probleem wees nie. Dit geld veral nou dat die einde van die deadline vir ouer weergawes van Internet Explorer geslaag het. Uiteindelik, as u besluit om @import-reëls in u HTML of CSS te gebruik, moet u nie probleme ondervind met ouer weergawes van webblaaiers nie, tensy u enige vreemde behoefte het om ongelooflike ou weergawes van IE te ondersteun.

Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard.