Eigenlijk vraag ik me af wat het voordeel/doel is van het gebruik van @importom stylesheets te importeren in een bestaande stylesheet in plaats van gewoon een andere toe te voegen …
<link rel="stylesheet" type="text/css" href="" />
naar de kop van het document?
Antwoord 1, autoriteit 100%
Vanuit het oogpunt van paginasnelheid zou @importuit een CSS-bestand bijna nooit moeten worden gebruikt, omdat het kan voorkomen dat stylesheets gelijktijdig worden gedownload. Als stylesheet A bijvoorbeeld de tekst bevat:
@import url("stylesheetB.css");
dan kan het downloaden van de tweede stylesheet pas starten als de eerste stylesheet is gedownload. Als aan de andere kant naar beide stylesheets wordt verwezen in <link>-elementen op de HTML-hoofdpagina, kunnen beide tegelijkertijd worden gedownload. Als beide stylesheets altijd samen worden geladen, kan het ook handig zijn om ze eenvoudig in één bestand te combineren.
Er zijn af en toe situaties waarin @importgepast is, maar dit zijn over het algemeen de uitzondering, niet de regel.
Antwoord 2, autoriteit 58%
Ik ga advocaat van de duivel spelen, want ik haat het als mensen het te veel met elkaar eens zijn.
1. Als je een stylesheet nodig hebt die afhankelijk is van een andere stylesheet, gebruik dan @import. Voer de optimalisatie in een aparte stap uit.
Er zijn op elk moment twee variabelen waarvoor u optimaliseert: de prestaties van uw code en de prestaties van de ontwikkelaar. In veel, zo niet de meeste gevallen, is het belangrijker om de ontwikkelaar efficiënter te maken, en pas dan de code beter te laten presteren.
Als je een stylesheet hebt die afhankelijkvan een andere is, is het meest logische om ze in twee aparte bestanden te plaatsen en @import te gebruiken. Dat is het meest logisch voor de volgende persoon die naar de code kijkt.
(Wanneer zou zo’n afhankelijkheid plaatsvinden? Het is naar mijn mening vrij zeldzaam
– meestal is één stylesheet voldoende. Er zijn echter enkele logische plaatsen om dingen in verschillende CSS-bestanden te plaatsen 🙂
- Thema’s: als je verschillende kleurenschema’s of thema’s voor dezelfde pagina hebt, kunnen ze sommige, maar niet alle onderdelen delen.
- Subcomponenten: een gekunsteld voorbeeld – stel dat u een restaurantpagina heeft met een menu. Als het menu heel anders is dan de rest van?
de pagina, is het gemakkelijker te onderhouden als deze in een eigen bestand staat.
Meestal zijn stylesheets onafhankelijk, dus het is redelijk om ze allemaal op te nemen met behulp van <link href>. Als ze echter een afhankelijke hiërarchie zijn, moet u doen wat het meest logisch is om te doen.
Python gebruikt import; C-gebruik omvat; JavaScript heeft vereisen. CSS heeft import; wanneer je het nodig hebt, gebruik het!
2. Zodra u het punt bereikt waarop de site moet worden geschaald, voegt u alle CSS samen.
Meerdere CSS-verzoeken van elkesoort – hetzij via links of via @imports – zijn slechte praktijkenvoor hoogwaardige websites. Zodra je op het punt bent waar optimalisatie belangrijk is, zou al je CSS door een minifier moeten stromen. Cssmincombineert importstatements; zoals @Brandon opmerkt, heeft grunt meerdere opties om dit ook te doen. (Zie ook deze vraag).
Als je eenmaal in het verkleinde stadium bent, is <link>sneller, zoals mensen al hebben opgemerkt, dus link hoogstens naar een paar stylesheets en @importeer er geen of helemaal niet mogelijk.
Voordat de site echter op productieschaal komt, is het belangrijker dat de code georganiseerd en logisch is, dan dat deze iets sneller gaat.
Antwoord 3, autoriteit 4%
Het is het beste om @importNIET te gebruiken om CSS op te nemen in een pagina om snelheidsredenen. Zie dit uitstekende artikel om te zien waarom niet: http://www.stevesouders.com/ blog/2009/04/09/dont-use-import/
Ook is het vaak moeilijker om css-bestanden die via de @import-tag worden aangeboden, te verkleinen en te combineren, omdat minify-scripts de @import-regels niet uit andere css-bestanden kunnen “pellen”. Als je ze als <link-tags opneemt, kun je bestaande minify php/dotnet/java-modules gebruiken om de minificatie uit te voeren.
Dus: gebruik <link />in plaats van @import.
Antwoord 4, autoriteit 3%
met behulp van de link-methode worden de stylesheets parallel (sneller en beter) geladen en bijna alle browsers ondersteunen link
import laadt eventuele extra css-bestanden één voor één (langzamer) en kan u Flash Of Unstyled Content opleveren
Antwoord 5, autoriteit 3%
@Nebo Iznad Mišo Grgur
Dit zijn allemaal correcte manieren om @import te gebruiken
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
bron: https://developer.mozilla.org/en -US/docs/Web/CSS/@import
Antwoord 6, autoriteit 2%
Er is niet echt veel verschil in het toevoegen van een css-stylesheet in de head versus het gebruik van de importfunctionaliteit. Het gebruik van @importwordt over het algemeen gebruikt voor het koppelen van stylesheets, zodat deze gemakkelijk kunnen worden uitgebreid. Het kan worden gebruikt om gemakkelijk verschillende kleurlay-outs te wisselen, bijvoorbeeld in combinatie met enkele algemene CSS-definities. Ik zou zeggen dat het belangrijkste voordeel / doel uitbreidbaarheid is.
Ik ben het ook eens met de opmerking van xbonez in die zin dat draagbaarheid en onderhoudbaarheid toegevoegde voordelen zijn.
Antwoord 7
Ze lijken erg op elkaar. Sommigen beweren dat @import beter te onderhouden is. Elke @import kost u echter een nieuw HTTP-verzoek op dezelfde manier als het gebruik van de “link”-methode. Dus in de context van snelheid is het niet sneller. En zoals “duskwuff” zei, het laadt niet tegelijkertijd, wat een ondergang is.
Antwoord 8
Een plaats waar ik @import gebruik, is wanneer ik twee versies van een pagina aan het maken ben, Engels en Frans. Ik zal mijn pagina in het Engels uitbouwen, met behulp van een main.css. Wanneer ik de Franse versie uitbouw, zal ik een link naar een Franse stylesheet (main_fr.css) maken. Bovenaan de Franse stylesheet importeer ik de main.css, en herdefinieer dan specifieke regels voor alleen de onderdelen die ik anders nodig heb in de Franse versie.
Antwoord 9
Geciteerd uit http://webdesign.about.com/od/beginningcss/ f/css_import_link.htm
Het belangrijkste doel van de @import-methode is om meerdere stylesheets op een pagina te gebruiken, maar slechts één link in uw < hoofd >. Een bedrijf kan bijvoorbeeld een globaal stijlblad hebben voor elke pagina op de site, met subsecties met aanvullende stijlen die alleen van toepassing zijn op die subsectie. Door te linken naar de subsectie-stylesheet en de globale stijlen bovenaan die stylesheet te importeren, hoeft u niet een gigantische stylesheet bij te houden met alle stijlen voor de site en elke subsectie. De enige vereiste is dat eventuele @import-regels vóór de rest van uw stijlregels moeten komen. En onthoud dat overerving nog steeds een probleem kan zijn.
Antwoord 10
Soms moet je @import gebruiken in plaats van inline . Als je aan een complexe applicatie werkt die 32 of meer css-bestanden heeft en je moet IE9 ondersteunen, dan is er geen keuze. IE9 negeert elk css-bestand na de eerste 31 en dit omvat en inline css. Elk blad kan echter 31 andere importeren.
Antwoord 11
Er zijn FOUTEN in de veronderstellingen over @importhier die de argumenten ertegen volledig onjuist maken.
Allereerst, meerdere @importsgecombineerd in een embed <style>-element of meerdere in een <link>-tag allemaal parallel aan elkaar downloaden. (Dat geldt zelfs voor oude IE-browsers). In het geval van meerdere @import-regels binnen een <link>-tag en bovenliggende CSS-sheet, worden deze ook allemaal parallel gedownload en gebruiken ze dezelfde verbinding als de bovenliggende stijlpagina , ook. Ze worden alleen niet parallel met het bovenliggende blad en eventuele CSS gedownload.
Dus de @import-bladen in dit gelinkte blad hieronder worden allemaal parallel aan elkaar gedownload. Dus als we dit bovenliggende blad hadden:
<link media="screen" rel="stylesheet" type="text/css" href="parent.css" />
…dan hebben we in het parent.css-blad hierboven de volgende @import-kinderen, ze zouden allemaal parallel en in de meeste browsers moeten downloaden en hetzelfde delen TCP-verbinding:
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
In het tweede voorbeeld hieronder moeten deze @import-declaraties die zijn ingesloten in een HTML <style>-tag ook allemaal parallel aan elkaar worden gedownload, gewoon willekeurig. Nogmaals, dit werkte op deze manier in veel oudere browsers, maar ook in nieuwere. Van wat ik heb gelezen, hebben ze mogelijk problemen met de bestelling als ze @importop deze manier gebruiken, maar je CSS zou zelden afhankelijk moeten zijn van cascadevolgorde in dit type ontwerp.
<style>
@import url('child1.css');
@import url('child2.css');
@import url('child3.css');
@import url('child4.css');
</style>
De enige tijd @importHeeft problemen de volgende beperkte scenario’s:
- U gebruikt IE versie 4-9, voornamelijk, die historisch beperkte verbindingen had (IE6 had slechts 2 verbinding met de server, bijvoorbeeld). Met deze browsers verschillende
@importen Linked CSS in combinatie niet om parallel te downloaden. Dit zou van invloed zijn op<link>CSS Downloads, dus dit is geen reëel geval tegen@import. - In het eerste geval hierboven, waar een
<link>Ouderstijlplaat bevat geïmporteerde vellen, omdat het bovenligging van de bovenligging moet worden aangesloten en het CSS-bestand moet ontleden, voegt dit één extra verbinding met de server toe. . Die logisch is en moet worden verwacht. Als uw blad alleen invoer en geen CSS heeft, die ik aanraden, met geen CSS om @Import onmiddellijk te beginnen en dezelfde verbinding moet gebruiken om het bestand als ouder te downloaden. - In het eerste geval hierboven, waar een
<link>moederstijlplaat bevat meerdere geïmporteerde vellen, als het bovenligging ook aanvullende CSS heeft na de @IMPORTS-verklaringen, dan is er een waar “Blokkeren” CSS-verbinding. In dat geval moet het Parent CSS-bestand eerst worden gedownload, voltooit u de CSS-parseren en downloaden eerst, ontdek de @IMPORTS en downloadt u vervolgens de @import-stijlen en plaats ze vóór de CSS in het bestand voordat het bestand is voltooid. Dit maakt logisch gevoel en waarom MOET NOOIT CSS combineren met@importStyle-regels in alle CSS-stijlblad . Ik doe dat nooit. Als u de CSS in het bovenliggende bestand verwijdert, belt de invoer onmiddellijk hun bestanden via de aansluiting van de bovenliggende bestanden onverwijld. - Als u een
<link>-stylesheet zonder geïmporteerde regels combineert met een gekoppelde stylesheet met een@importof een ingesloten<style>met@import, ALLEEN in Internet Explorer, ze worden over het algemeen niet parallel gedownload. De andere browsers beheren deze boete. Zoals vermeld kan dit te maken hebben met de beperkte browserverbindingen van IE.
Op basis van deze regels werkt @import in de meeste situaties dus prima. Het belangrijkste probleem is het toevoegen van @import aan een blad met veel gewone CSS. Dat soort dingen is logisch en zou een lange vertraging veroorzaken als de ouder zijn eigen CSS parseert en vervolgens aanvullende @importsontdekt.
Houd er rekening mee dat moderne browsers ongeveer 6 beschikbare verbindingen hebben, dus @importzou niet het knelpunt zijn, het hebben van te veel bestanden of te veel GROTE bestanden plus niet-async JavaScript zou parsing en weergave blokkeren in uw webpagina’s. Trouwens, uw typische JavaScript API-download is nu 1,5 Megabytes!
UPDATE
Er zijn ook veel GOEDE redenen om @import te gebruiken!
Een krachtige reden om @import te gebruiken is om cross-browser te ontwerpen. Geïmporteerde bladen zijn over het algemeen verborgen voor veel oudere browsers, waardoor u specifieke opmaak kunt toepassen voor zeer oude browsers zoals Netscape 4 of oudere series, Internet Explorer 5.2 voor Mac, Opera 6 en ouder, en IE 3 en 4 voor pc. …gebruik dan @importen voeg een moderne stylesheet toe die deze browsers niet kunnen zien omdat veel oudere browsers bepaalde versies van @importniet herkennen.
Voorbeeld, voeg een normaal stijlblad toe dat door alle browsers wordt gezien, oud en nieuw:
<link media="screen" rel="stylesheet" type="text/css" href="styles.css" />
…met deze CSS erin…
body {
font-size:13px;
}
Nu, in uw geïmporteerde aangepaste blad (newerbrowsers.css) past u gewoon de nieuwere stijl toe om over de bovenstaande te schrijven, alleen voor nieuwere browsers. De nieuwere browser gebruikt “em”-eenheden, de oudere “px”. Deze versie van @importhieronder wordt niet gezien door een groot aantal oudere browsers, waaronder IE 1-7, MAC IE 5, Netscape 4 en vele andere:
<link media="screen" rel="stylesheet" type="text/css" href="newerbrowsers.css" />
…met deze @import binnenin zullen alleen nieuwere browsers het zien. Als u dit @import-formaat gebruikt met ‘all’, wordt het verborgen voor IE1-7-browsers en nog veel meer!
@import 'imported.css' all;
…met deze CSS in de @import…
html body {
font-size:1em;
}
Het gebruik van ’em’-eenheden is superieur aan ‘px’-eenheden, omdat zowel de lettertypen als het ontwerp kunnen worden uitgerekt op basis van gebruikersinstellingen, terwijl oudere browsers het beter doen met pixelgebaseerde (die rigide zijn en niet kunnen worden gewijzigd in de browser gebruikersinstellingen). Het geïmporteerde blad wordt door de meeste oudere browsers niet gezien.
Misschien wel, who cares! Probeer naar wat grotere verouderde overheids- of bedrijfssystemen te gaan en je zult nog steeds die oudere browsers zien gebruikt. Maar het is eigenlijk gewoon een goed ontwerp, want de browser waar je vandaag van houdt, zal op een dag ook verouderd en verouderd zijn. En als je CSS op een beperkte manier gebruikt, heb je nu een nog grotere en groeiende groep user-agents die niet goed werken met je site.
Door @importte gebruiken, zal uw cross-browser website-compatibiliteit nu 99,9% verzadiging bereiken, simpelweg omdat zoveel oudere browsers de geïmporteerde bladen niet kunnen lezen. Het garandeert dat je een eenvoudige basislettertypeset voor hun html toepast, maar meer geavanceerde CSS wordt gebruikt door nieuwere agenten. Hierdoor is inhoud toegankelijk voor oudere agenten zonder afbreuk te doen aan de rijke visuele weergave die nodig is in nieuwere desktopbrowsers. Houd er rekening mee dat moderne browsers HTML-structuren en CSS zeer goed cachen na de eerste oproep naar een website. Meerdere oproepen naar de server is niet de bottleneck die het ooit was.
Megabytes en megabytes aan Javascript API’s en JSON geüpload naar slimme apparaten en slecht ontworpen HTML-opmaak die niet consistent is tussen pagina’s is de belangrijkste oorzaak van trage weergave tegenwoordig. Uw gemiddelde Google-nieuwspagina is meer dan 6 megabyte ECMAScript om maar een klein beetje tekst weer te geven! LOL Een paar kilobytes aan CSS in de cache en consistente schone HTML met kleinere javascript-voetafdrukken worden razendsnel in een user-agent weergegeven, simpelweg omdat de browser zowel consistente DOM-opmaak als CSS in de cache opslaat, tenzij je ervoor kiest om dat te manipuleren en te wijzigen via javascript-circustrucs.
Antwoord 12
Ik denk dat de sleutel hierin de twee redenen zijn waarom je eigenlijk meerdere CSS-stijlbladen schrijft.
- U schrijft meerdere bladen omdat de verschillende pagina’s van uw website verschillende CSS-definities vereisen. Of ze hebben in ieder geval niet alle CSS-definities nodig die andere pagina’s nodig hebben. Je splitst de CSS-bestanden dus op om te optimaliseren welke bladen op de verschillende pagina’s worden geladen en om te voorkomen dat er te veel CSS-definities worden geladen.
- De tweede reden die in je opkomt is dat je CSS zo groot wordt dat het onhandig wordt om ermee om te gaan en om het gemakkelijker te maken om het grote CSS-bestand te onderhouden, splits je het op in meerdere CSS-bestanden.
Om de eerste reden zou de extra tag <link>van toepassing zijn, omdat u hierdoor verschillende sets CSS-bestanden voor verschillende pagina’s kunt laden.
Om de tweede reden lijkt het @importstatement het handigst omdat je meerdere CSS-bestanden krijgt, maar de bestanden die worden geladen zijn altijd hetzelfde.
Vanuit het perspectief van de laadtijd is het niet anders. De browser moet de gescheiden CSS-bestanden controleren en downloaden, ongeacht hoe ze zijn geïmplementeerd.
Antwoord 13
Gebruik @import in uw CSS als u een CSS RESET gebruikt, zoals Eric Meyer’s Reset CSS v2.0, zodat het zijn werk doet voordat u uw CSS toepast, waardoor conflicten worden voorkomen.
Antwoord 14
Ik denk dat @import het handigst is bij het schrijven van code voor meerdere apparaten. Voeg een voorwaardelijke instructie toe om alleen de stijl voor het betreffende apparaat op te nemen, dan wordt er maar één blad geladen. Je kunt nog steeds de link-tag gebruiken om gemeenschappelijke stijlelementen toe te voegen.
Antwoord 15
Ik heb een “hoge piek” ervaren van gelinkte stylesheets die je kunt toevoegen. Hoewel het toevoegen van een willekeurig aantal gekoppelde Javascript geen probleem was voor mijn gratis hostprovider, kreeg ik na het verdubbelen van het aantal externe stylesheets een crash/slowdown.
En het juiste codevoorbeeld is:
@import 'stylesheetB.css';
Dus ik vind het handig om een goede mentale kaart te hebben, zoals Nitram al zei, terwijl ik het ontwerp nog steeds hard codeer.
Goddank.
En het spijt me voor eventuele Engelse grammaticale fouten.
Antwoord 16
Moderne browsers kunnen een css-bestand gebruiken om globale variabelen te definiëren. Dit bestand kan worden geïmporteerd in andere css-bestanden die de variabelen kunnen gebruiken.
Om bijvoorbeeld consistente kleuren op een site te hebben:
-
colors.css
:root { --bg-dark: #ffffff; } -
home.css
@import "colors.css"; body: var(--bg-dark)
Antwoord 17
Er is bijna geen reden om @Import te gebruiken, omdat het elk geïmporteerd CSS-bestand afzonderlijk laadt en uw site aanzienlijk kan vertragen. Als u geïnteresseerd bent in de optimale manier om met CSS aan te pakken (als het gaat om pagina-snelheid), is dit hoe u moet omgaan met alle uw CSS-code:
- Open al uw CSS-bestanden en kopieer de code van elk bestand
- Plak alle code tussen een tag van één stijl in de HTML-kop van uw pagina
- Gebruik nooit CSS @Import of afzonderlijke CSS-bestanden om CSS te leveren, tenzij u een grote hoeveelheid code hebt of er een specifieke behoefte is.
Meer gedetailleerde informatie hier: http://www.giftofspeed.com/optimize-cs- levering /
De reden waarom de bovenstaande werken het best is, is omdat het minder aanvragen voor de browser creëert om mee om te gaan en het kan onmiddellijk beginnen met het weergeven van de CSS in plaats van afzonderlijke bestanden te downloaden.
Antwoord 18
Dit kan een PHP-ontwikkelaar helpen. De onderstaande functies zullen witte ruimte strippen, reacties verwijderen en aaneenbouwen van al uw CSS-bestanden. Steek het vervolgens in een <style>TAG in de kop vóór pagina belasting.
De onderstaande functie zal opmerkingen strippen en de geslaagd zijn in CSS. Het is gekoppeld in combinatie met de volgende functie.
<?php
function minifyCSS($string)
{
// Minify CSS and strip comments
# Strips Comments
$string = preg_replace('!/\*.*?\*/!s','', $string);
$string = preg_replace('/\n\s*\n/',"\n", $string);
# Minifies
$string = preg_replace('/[\n\r \t]/',' ', $string);
$string = preg_replace('/ +/',' ', $string);
$string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);
# Remove semicolon
$string = preg_replace('/;}/','}',$string);
# Return Minified CSS
return $string;
}
?>
U roept deze functie aan in de kop van uw document.
<?php
function concatenateCSS($cssFiles)
{
// Load all relevant css files
# concatenate all relevant css files
$css = '';
foreach ($cssFiles as $cssFile)
{
$css = $css . file_get_contents("$cssFile.css");
}
# minify all css
$css = minifyCSS($css);
echo "<style>$css</style>";
}
?>
Neem de functie concatenateCSS()op in uw documentkop. Geef een array door met de namen van je stylesheets met het pad IE: css/styles.css. U bent niet verplicht om de extensie .csstoe te voegen, aangezien deze automatisch wordt toegevoegd in de bovenstaande functie.
<head>
<title></title>
<?php
$stylesheets = array(
"bootstrap/css/bootstrap.min",
"css/owl-carousel.min",
"css/style"
);
concatenateCSS( $stylesheets );
?>
</head>