Inhoud
- Gebruik een van de twee gratis methoden om style sheets in uw webpagina te laden
- Het verschil tussen @import en
- Waarom @import gebruiken?
- Waarom gebruiken ?
- Hoe zit het met het mediatype?
- Dus welke methode moet je gebruiken?
Gebruik een van de twee gratis methoden om style sheets in uw webpagina te laden
Verschillende sites bevatten hun externe Cascading Style Sheets op verschillende manieren - ofwel door de @import-benadering te gebruiken of door te linken naar dat CSS-bestand. Wat is het verschil tussen @import en link voor CSS en hoe heb je besloten welke het beste voor jou is?
Het verschil tussen @import en
Linken is de eerste methode om een extern stijlblad op uw webpagina's op te nemen. Het is bedoeld om uw pagina te koppelen aan uw stijlblad. Het wordt toegevoegd aan de kop van uw HTML-document.
Door te importeren kunt u het ene stijlblad in het andere importeren. Dit is iets anders dan het linkscenario omdat u style sheets kunt importeren binnen een gelinkt style sheet.
Vanuit standaard oogpunt is er geen verschil tussen het linken naar een externe style sheet of het importeren ervan. Hoe dan ook is correct en beide manieren zullen in de meeste gevallen even goed werken. Er zijn echter een paar redenen waarom u de ene boven de andere wilt gebruiken.
Waarom @import gebruiken?
Vele jaren geleden was de meest voorkomende reden voor het gebruik van @import in plaats daarvan (of samen met) is omdat oudere browsers @import niet herkenden, dus je kon er stijlen voor verbergen. Door uw stylesheets te importeren, zou u ze in wezen beschikbaar maken voor modernere browsers die aan de normen voldoen en ze "verbergen" voor de oudere browserversies.
Een ander gebruik van de @import-methode is om meerdere stylesheets op een pagina te gebruiken, terwijl er slechts één link in het hoofd van uw document is opgenomen. Een bedrijf kan bijvoorbeeld een globaal opmaakmodel hebben voor elke pagina op de site, met subsecties met aanvullende stijlen die alleen van toepassing zijn op die subsectie. Door te linken naar het subsectie stijlblad en de globale stijlen bovenaan dat stijlblad te importeren, hoef je geen gigantisch stijlblad te onderhouden met alle stijlen voor de site en elke subsectie. De enige vereiste is dat eventuele @importregels voor de rest van je stijlregels moeten staan. Erfelijkheid kan nog steeds een probleem zijn.
Waarom gebruiken ?
De belangrijkste reden voor het gebruik van gekoppelde stylesheets is om uw klanten alternatieve stylesheets te bieden. Browsers zoals Firefox, Safari en Opera ondersteunen het kenmerk rel = "alternate stylesheet" en als er een beschikbaar is, kunnen kijkers ertussen schakelen. U kunt ook een JavaScript-switcher gebruiken om te schakelen tussen stijlbladen in IE - meestal gebruikt met zoomlay-outs voor toegankelijkheidsdoeleinden.
Een van de nadelen van het gebruik van @import is dat als je een heel eenvoudige kop hebt met alleen de @import-regel erin, je pagina's tijdens het laden een "flits van niet-gestileerde inhoud" kunnen weergeven. Een eenvoudige oplossing hiervoor is ervoor te zorgen dat je ten minste één extra link of scriptelement in je hoofd hebt.
Hoe zit het met het mediatype?
Veel schrijvers beweren dat u het mediatype kunt gebruiken om stijlbladen voor oudere browsers te verbergen. Vaak noemen ze dit idee als een voordeel bij het gebruik van @import of , maar u kunt het mediatype met beide methoden instellen, en oudere browsers die geen mediatypen ondersteunen, zullen ze in geen van beide gevallen bekijken.
Dus welke methode moet je gebruiken?
De meeste ontwikkelaars gebruiken tegenwoordig link en importeren vervolgens style sheets in externe style sheets. Op die manier hoeft u slechts één of twee regels code aan te passen in uw HTML-documenten. Maar het komt erop neer dat het aan jou is. Als je meer vertrouwd bent met @import, ga er dan voor! Beide methoden voldoen aan de normen en tenzij u van plan bent echt oude browsers te ondersteunen, is er ook geen sterke reden om deze te gebruiken.
