CSS - CSS
![]() | |
Filnamnstillägg |
.css
|
---|---|
Internetmedietyp |
text/css |
Uniform Type Identifier (UTI) | public.css |
Utvecklad av | World Wide Web Consortium (W3C) |
Initial release | 17 december 1996 |
Senaste släppningen | |
Typ av format | Stilarkets språk |
Behållare för | Stilregler för HTML -element (taggar) |
Innehållet av | HTML -dokument |
Ja | |
Hemsida |
Cascading Style Sheets |
---|
Begrepp |
Filosofier |
Verktyg |
Jämförelser |
HTML |
---|
Jämförelser |
Cascading Style Sheets ( CSS ) är ett formatmallsspråk som används för att beskriva presentationen av ett dokument skrivet på ett markeringsspråk som HTML . CSS är en hörnstensteknik i World Wide Web , tillsammans med HTML och JavaScript .
CSS är utformat för att möjliggöra separering av presentation och innehåll, inklusive layout , färger och teckensnitt . Denna separering kan förbättra innehållets tillgänglighet , ge mer flexibilitet och kontroll i specifikationen av presentationsegenskaper, göra det möjligt för flera webbsidor att dela formatering genom att ange relevant CSS i en separat .css -fil som minskar komplexitet och upprepning i strukturinnehållet samt möjliggör .css -filen som ska cachas för att förbättra sidhastigheten mellan sidorna som delar filen och dess formatering.
Separation av formatering och innehåll gör det också möjligt att presentera samma markeringssida i olika stilar för olika återgivningsmetoder, till exempel på skärmen, i tryck, med röst (via talbaserad webbläsare eller skärmläsare ) och på punktskriftsbaserad taktila enheter. CSS har också regler för alternativ formatering om innehållet nås på en mobil enhet .
Namnet cascading kommer från det angivna prioritetsschemat för att avgöra vilken stilregel som gäller om mer än en regel matchar ett visst element. Detta kaskadprioriteringsschema är förutsägbart.
CSS -specifikationerna underhålls av World Wide Web Consortium (W3C). Internetmediatyp ( MIME -typ ) text/css
är registrerad för användning med CSS av RFC 2318 (mars 1998). W3C driver en gratis CSS -valideringstjänst för CSS -dokument.
Förutom HTML stöder andra markeringsspråk användningen av CSS inklusive XHTML , vanlig XML , SVG och XUL .
CSS har en enkel syntax och använder ett antal engelska nyckelord för att ange namnen på olika stilegenskaper.
Ett formatmall består av en lista med regler . Varje regel eller regeluppsättning består av en eller flera väljare och ett deklarationsblock .
Väljare
I CSS deklarerar väljare vilken del av markeringen en stil gäller för genom att matcha taggar och attribut i själva markeringen.
Väljare kan ansöka om följande:
- alla element av en specifik typ, t.ex. rubrikerna på andra nivån h2
- element som anges av attribut , särskilt:
-
id : en unik identifierare i dokumentet, identifierad med ett hashprefix t.ex.
#id
-
klass : en identifierare som kan kommentera flera element i ett dokument, identifierat med ett periodprefix t.ex.
.classname
-
id : en unik identifierare i dokumentet, identifierad med ett hashprefix t.ex.
- element beroende på hur de placeras i förhållande till andra i dokumentträdet .
Klasser och ID är skiftlägeskänsliga, börjar med bokstäver och kan innehålla alfanumeriska tecken, bindestreck och understrykningar. En klass kan gälla valfritt antal instanser av element. Ett ID får endast tillämpas på ett enda element.
gör ett urval som kan bestå av delelement, som eller .Väljare kan kombineras på många sätt för att uppnå stor specificitet och flexibilitet. Flera väljare kan sammanfogas i en mellanrumslista för att specificera element efter plats, elementtyp, id, klass eller vilken kombination som helst av dessa. Väljarnas ordning är viktig. Till exempel gäller alla element i klass myClass som finns i div -element, medan det gäller alla div -element som är inuti element i klass myClass. Detta ska inte förväxlas med sammanfogade identifierare som gäller för div -element i klass myClass.
Följande tabell ger en sammanfattning av väljarsyntax som anger användning och versionen av CSS som introducerade den.
Mönster | Tändstickor | Först definierad på CSS -nivå |
---|---|---|
|
ett element av typ E | 1 |
|
ett E -element är källankret för en hyperlänk som målet ännu inte är besökt (: länk) eller redan besökt (: besökt) | 1 |
|
ett E -element under vissa användaråtgärder | 1 |
|
den första formaterade raden i ett E -element | 1 |
|
den första formaterade bokstaven i ett E -element | 1 |
|
alla element med klass = "c" | 1 |
|
elementet med id = "23290197myid" | 1 |
|
ett E -element vars klass är "varning" (dokumentspråket anger hur klassen bestäms) | 1 |
|
ett E -element med ID lika med "myid" | 1 |
|
elementet med class = "c" och ID lika med "myid" | 1 |
|
ett F -element som är ättling till ett E -element | 1 |
|
något element | 2 |
|
ett E -element med ett "foo" -attribut | 2 |
|
ett E -element vars "foo" -attributvärde exakt är lika med "bar" | 2 |
|
ett E-element vars "foo" -attributvärde är en lista över mellanrumsavgränsade värden, varav ett exakt är lika med "bar" | 2 |
|
ett E-element vars "foo" -attribut har en bindestreckad separerad lista med värden som börjar (från vänster) med "en" | 2 |
|
ett E -element, förälderns första barn | 2 |
|
ett element av typ E i språket "fr" (dokumentspråket anger hur språket bestäms) | 2 |
|
genererat innehåll före ett E -elements innehåll | 2 |
|
genererat innehåll efter ett E -elements innehåll | 2 |
|
ett F -elementbarn till ett E -element | 2 |
|
ett F -element som omedelbart föregås av ett E -element | 2 |
|
ett E -element vars "foo" -attributvärde börjar exakt med strängen "bar" | 3 |
|
ett E -element vars "foo" -attributvärde slutar exakt med strängen "bar" | 3 |
|
ett E -element vars "foo" -attributvärde innehåller delsträngen "bar" | 3 |
|
ett E -element, roten till dokumentet | 3 |
|
ett E-element, det förälderns n: e barn | 3 |
|
ett E-element, det förälderns n: e barn, räknat från det sista | 3 |
|
ett E-element, det n: e syskonet av sin typ | 3 |
|
ett E-element, det n: e syskonet av sin typ, räknat från det sista | 3 |
|
ett E -element, förälderns sista barn | 3 |
|
ett E -element, första syskon i sin typ | 3 |
|
ett E -element, sista syskon av sin typ | 3 |
|
ett E -element, enda barn till föräldern | 3 |
|
ett E -element, bara syskon av sin typ | 3 |
|
ett E -element som inte har några barn (inklusive textnoder) | 3 |
|
ett E -element är målet för den hänvisande URI: en | 3 |
|
ett användargränssnittselement E som är aktiverat | 3 |
|
ett användargränssnittselement E som är inaktiverat | 3 |
|
ett användargränssnittselement E som är markerat (till exempel en alternativknapp eller kryssruta) | 3 |
|
ett E -element som inte matchar enkla väljare | 3 |
|
ett F -element som föregås av ett E -element | 3 |
Deklarationsblock
Ett deklarationsblock består av en lista över deklarationer i hängslen. Varje deklaration i sig består av en egendom , ett kolon ( :
) och ett värde . Om det finns flera deklarationer i ett block ;
måste ett semikolon ( ) infogas för att separera varje deklaration. En valfri semikolon efter den sista (eller enda) deklarationen kan användas.
Egenskaper anges i CSS -standarden. Varje egendom har en uppsättning möjliga värden. Vissa egenskaper kan påverka vilken typ av element som helst, och andra gäller endast vissa grupper av element.
Värden kan vara nyckelord, till exempel "center" eller "ärva" eller numeriska värden, till exempel 200px
(200 pixlar), 50vw
(50 procent av visningsportens bredd) eller
red
"), hexadecimala värden (t.ex. #FF0000
också förkortade som #F00
), RGB -värden på en skala från 0 till 255 (t.ex. rgb(255, 0, 0)
), RGBA -värden som anger både färg och alfa -transparens (t.ex. rgba(255, 0, 0, 0.8)
) eller HSL eller HSLA-värden (t.ex. hsl(000, 100%, 50%)
, hsla(000, 100%, 50%, 80%)
).
Längd enheter
Icke-nollvärden som representerar linjära mått måste innehålla en längdenhet, som antingen är en alfabetisk kod eller förkortning, som i 200px
eller 50vw
; eller ett procenttecken, som i 80%
. Vissa enheter - cm
( centimeter ); in
( tum ); mm
( millimeter ); pc
( pica ); och pt
( punkt ) - är absoluta , vilket innebär att den återgivna dimensionen inte beror på sidans struktur; andra - em
( em ); ex
( ex ) och px
( pixel ) - är relativa , vilket innebär att faktorer som teckenstorleken på ett överordnat element kan påverka den återgivna mätningen. Dessa åtta enheter var en del av CSS 1 och behölls i alla efterföljande revisioner. De föreslagna CSS värden och enheter Module Nivå 3 kommer, om de antas som en W3C rekommendation ger ytterligare sju längdenheter: ch
; Q
; rem
; vh
; vmax
; vmin
; och vw
.
Använda sig av
Innan CSS innehöll nästan alla presentationsattribut för HTML -dokument i HTML -markeringen. Alla teckensnittsfärger, bakgrundsstilar, elementjusteringar, ramar och storlekar måste uttryckligen beskrivas, ofta upprepade gånger, i HTML -koden. CSS låter författare flytta mycket av den informationen till en annan fil, formatmallen, vilket resulterar i betydligt enklare HTML.
Exempelvis definieras rubriker ( h1
element), underrubriker ( h2
), underrubriker ( h3
), etc. strukturellt med HTML. I tryck och på skärmen är val av teckensnitt , storlek , färg och betoning för dessa element presentativt .
Innan CSS, dokumentförfattare som ville tilldela sådana typografiska egenskaper till, säg, alla h2
rubriker var tvungna att upprepa HTML -presentationsmarkering för varje förekomst av den rubriken. Detta gjorde dokument mer komplexa, större och mer felbenägna och svåra att underhålla. CSS möjliggör separation av presentation från struktur. CSS kan definiera färg, teckensnitt, textjustering, storlek, ramar, avstånd, layout och många andra typografiska egenskaper, och kan göra det oberoende för skärm- och utskrifter. CSS definierar också icke-visuella stilar, till exempel läshastighet och betoning för ljudtexter. Den W3C har nu föråldrat att använda all presentations HTML markup.
Till exempel, under pre-CSS HTML, skulle ett rubrikelement definierat med röd text skrivas som:
Med hjälp av CSS kan samma element kodas med stilegenskaper istället för HTML -presentationsattribut:
<h1 style="color: red;">Chapter 1.</h1>
Fördelarna med detta är kanske inte direkt uppenbara, men kraften i CSS blir mer uppenbar när stilegenskaperna placeras i ett internt stilelement eller, ännu bättre, en extern CSS -fil. Anta till exempel att dokumentet innehåller stilelementet:
<style>
h1 {
color: red;
}
</style>
Alla h1
element i dokumentet blir då automatiskt röda utan att behöva någon uttrycklig kod. Om författaren senare ville göra h1
element blå istället kan detta göras genom att ändra stilelementet till:
<style>
h1 {
color: blue;
}
</style>
snarare än att mödosamt gå igenom dokumentet och ändra färgen för varje enskilt h1
element.
Stilarna kan också placeras i en extern CSS -fil, enligt beskrivningen nedan, och laddas med syntax som liknar:
<link href="path/to/file.css" rel="stylesheet" type="text/css">
Detta frikopplar ytterligare stylingen från HTML -dokumentet och gör det möjligt att göra om flera dokument genom att helt enkelt redigera en delad extern CSS -fil.
Källor
CSS -information kan tillhandahållas från olika källor. Dessa källor kan vara webbläsaren, användaren och författaren. Informationen från författaren kan ytterligare klassificeras i inline, medietyp, betydelse, väljarspecificitet, regelordning, arv och fastighetsdefinition. CSS -stilinformation kan finnas i ett separat dokument, eller den kan bäddas in i ett HTML -dokument. Flera stilark kan importeras. Olika stilar kan tillämpas beroende på vilken utmatningsenhet som används; till exempel kan skärmversionen skilja sig mycket från den tryckta versionen, så att författare kan skräddarsy presentationen på lämpligt sätt för varje medium.
Formatmallen med högsta prioritet styr innehållsvisning. Deklarationer som inte ställs in i källan med högsta prioritet skickas vidare till en källa med lägre prioritet, till exempel användaragentstilen. Processen kallas kaskad .
Ett av målen med CSS är att ge användarna större kontroll över presentationen. Någon som tycker att röda kursiverade rubriker är svåra att läsa kan tillämpa ett annat stilark. Beroende på webbläsaren och webbplatsen kan en användare välja mellan olika formatmallar som tillhandahålls av formgivarna, eller ta bort alla tillagda stilar och visa webbplatsen med webbläsarens standardstyling, eller bara åsidosätta den röda kursiva stilstilen utan att ändra andra attribut.
Prioritet | CSS -källtyp | Beskrivning |
---|---|---|
1 | Betydelse | Annonsen " " skriver över de tidigare prioritetstyperna |
2 | I kö | En stil som tillämpas på ett HTML -element via HTML -stilattributet |
3 | Mediatyp | En fastighetsdefinition gäller för alla medietyper, såvida inte en mediaspecifik CSS har definierats |
4 | Användardefinierad | De flesta webbläsare har tillgänglighetsfunktionen: en användardefinierad CSS |
5 | Väljarspecificitet | En specifik kontextuell väljare ( ) skriver över generisk definition |
6 | Regelordning | Sista regeldeklarationen har högre prioritet |
7 | Föräldrarv | Om en egenskap inte specificeras ärvs den från ett överordnat element |
8 | CSS -egendomsdefinition i HTML -dokument | CSS -regel eller CSS inline -stil skriver över ett standardwebbläsarvärde |
9 | Webbläsarens standard | Lägsta prioritet: webbläsarens standardvärde bestäms av W3C: s initialvärdesspecifikationer |
Specificitet
Specificitet avser de relativa vikterna hos olika regler. Den avgör vilka stilar som gäller för ett element när mer än en regel kan gälla. Baserat på specifikationen har en enkel väljare (t.ex. H1) en specificitet på 1, klassväljare har en specificitet på 1,0 och ID -väljare en specificitet på 1,0,0. Eftersom specificitetsvärdena inte överförs som i decimalsystemet används kommatecken för att separera "siffrorna" (en CSS -regel med 11 element och 11 klasser skulle ha en specificitet på 11,11, inte 121).
Följande reglerväljare resulterar således i den angivna specificiteten:
Väljare | Specificitet |
---|---|
|
0, 0, 0, 1 |
|
0, 0, 0, 2 |
|
0, 0, 1, 0 |
|
0, 0, 1, 1 |
|
0, 0, 2, 2 |
|
0, 1, 0, 0 |
|
1, 0, 0, 0 |
Exempel
Tänk på detta HTML -fragment:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#xyz { color: blue; }
</style>
</head>
<body>
<p id="xyz" style="color: green;">To demonstrate specificity</p>
</body>
</html>
I exemplet ovan style
åsidosätter deklarationen i attributet den i <style>
elementet eftersom den har en högre specificitet, och därför verkar stycket grönt.
Arv
Arv är en nyckelfunktion i CSS; den förlitar sig på förfader-ättlingens relation för att fungera. Arv är den mekanism genom vilken egenskaper inte bara tillämpas på ett specifikt element, utan också på dess ättlingar. Arv bygger på dokumentträdet, som är hierarkin för XHTML -element på en sida baserad på häckning. Efterkommande element kan ärva CSS -egendomsvärden från alla förfaderelement som omsluter dem. I allmänhet ärver efterkommande element textrelaterade egenskaper, men deras boxrelaterade egenskaper ärvs inte. Egenskaper som kan ärvas är färg, teckensnitt, bokstavsavstånd, radhöjd, liststil, textjustering, textindrag, texttransformering, synlighet, blanksteg och ordavstånd. Egenskaper som inte kan ärvas är bakgrund, kant, display, flyt och tydlig, höjd och bredd, marginal, min- och maxhöjd och -bredd, kontur, överflöde, stoppning, position, textdekoration, vertikaljustering och z -index.
Arv kan användas för att undvika att deklarera vissa egenskaper om och om igen i ett formatmall, vilket möjliggör kortare CSS.
Arv i CSS är inte detsamma som arv i klassbaserade programmeringsspråk , där det är möjligt att definiera klass B som "som klass A, men med modifieringar". Med CSS är det möjligt att styla ett element med "klass A, men med modifieringar". Det är dock inte möjligt att definiera en sådan CSS -klass B, som sedan kan användas för att styla flera element utan att behöva upprepa ändringarna.
Exempel
Med tanke på följande stilark:
h1 {
color: pink;
}
Antag att det finns ett h1 -element med ett betonande element (em) inuti:
<h1>
This is to <em>illustrate</em> inheritance
</h1>
Om ingen färg tilldelas em -elementet ärver det framhävda ordet "illustrera" färgen på det överordnade elementet, h1. Stilarket h1 har färgen rosa, därför är em -elementet också rosa.
Mellanslag
Mellanslag mellan egenskaper och väljare ignoreras. Det här kodavsnittet:
body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}
är funktionellt ekvivalent med den här:
body {
overflow: hidden;
background-color: #000000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
}
Ett vanligt sätt att formatera CSS för läsbarhet är att indraga varje egendom och ge den sin egen rad. Förutom att formatera CSS för läsbarhet kan stenografiegenskaper användas för att skriva ut koden snabbare, vilket också bearbetas snabbare när det återges:
body {
overflow: hidden;
background: #000 url(images/bg.gif) no-repeat left top;
}
Positionering
CSS 2.1 definierar tre positioneringsscheman:
- Normalt flöde
- Inline -objekt läggs ut på samma sätt som bokstäverna i ord i text, en efter den andra över det tillgängliga utrymmet tills det inte finns mer utrymme och startar sedan en ny rad nedan. Blockera objekt staplas vertikalt, som stycken och som objekten i en punktlista. Normalt flöde inkluderar också relativ positionering av block- eller inline-objekt och inkörningsboxar.
- Flyter
- Ett flytande objekt tas ut ur det normala flödet och flyttas åt vänster eller höger så långt som möjligt i det tillgängliga utrymmet. Annat innehåll flyter sedan längs med det flytande objektet.
- Absolut positionering
- Ett absolut placerat objekt har ingen plats i och påverkar inte det normala flödet av andra objekt. Den intar sin tilldelade position i sin behållare oberoende av andra föremål.
Position egendom
Det finns fem möjliga värden på
fastigheten. Om ett objekt är placerat på något annat än sätt
, då de ytterligare egenskaper
,
,
, och
används för att specificera förskjutningar och positions.The element med positionen statisk påverkas inte av den
,
,
eller
egenskaper.
- Statisk
- Standardvärdet placerar objektet i det normala flödet
- Släkting
- Objektet placeras i det normala flödet och flyttas eller förskjuts sedan från den positionen. Efterföljande flödesobjekt läggs ut som om objektet inte hade flyttats.
- Absolut
- Anger absolut positionering . Elementet är placerat i förhållande till sin närmaste icke-statiska förfader.
- Fast
- Objektet är absolut placerat i en fast position på skärmen även när resten av dokumentet rullas
Flyta och klart
Den float
här fastigheten kan ha en av tre värden. Absolut placerade eller fasta objekt kan inte flyttas. Andra element flyter normalt runt flytande föremål, såvida de inte hindras från att göra det av deras clear
egendom.
- vänster
- Objektet flyter till vänster om raden som det skulle ha dykt upp i; andra objekt kan flöda runt höger sida.
- höger
- Objektet flyter till höger om raden som det skulle ha dykt upp i; andra objekt kan flöda runt vänster sida.
- klar

CSS föreslogs först av Håkon Wium Lie den 10 oktober 1994. Då arbetade Lie med Tim Berners-Lee på CERN . Flera andra stilarkspråk för webben föreslogs ungefär samtidigt, och diskussioner om offentliga e -postlistor och inuti World Wide Web Consortium resulterade i att den första W3C CSS -rekommendationen (CSS1) släpptes 1996. I synnerhet ett förslag från Bert Bos var inflytelserik; han blev medförfattare till CSS1 och anses vara medskapare av CSS.
Style sheets har funnits i en eller annan form sedan början av Standard Generalized Markup Language ( SGML ) på 1980 -talet, och CSS utvecklades för att tillhandahålla formatmallar för webben. Ett krav för ett webbformatarkspråk var att formatmallar skulle komma från olika källor på webben. Därför var befintliga formatmallsspråk som DSSSL och FOSI inte lämpliga. CSS, å andra sidan, låter ett dokuments stil påverkas av flera formatmallar med hjälp av "kaskad" -stilar.
, även han från CERN, ville skilja strukturen från presentationen så att olika formatmallar kunde beskriva olika presentationer för utskrift, skärmbaserade presentationer och redaktörer.Förbättring av webbpresentationskapacitet var ett ämne av intresse för många i webbsamhället och nio olika formatmallsspråk föreslogs på e-postlistan i www-stil. Av dessa nio förslag var två särskilt inflytelserika på vad som blev CSS: Cascading HTML Style Sheets och Stream-based Style Sheet Proposal (SSP). Två webbläsare fungerade som testbäddar för de första förslagen; Lie arbetat med Yves Lafon att genomföra CSS i Dave Raggett 's Arena webbläsare. Bert Bos implementerade sitt eget SSP -förslag i Argo -webbläsaren. Därefter arbetade Lie och Bos tillsammans för att utveckla CSS -standarden ("H" togs bort från namnet eftersom dessa formatmallar också kunde tillämpas på andra markeringsspråk förutom HTML).
Lies förslag presenterades vid konferensen " Mosaic and the Web " (senare kallad WWW2) i Chicago, Illinois 1994, och igen med Bert Bos 1995. Ungefär vid denna tidpunkt var W3C redan under uppbyggnad och intresserade sig för utvecklingen av CSS. Den organiserade en workshop för detta ändamål under ledning av Steven Pemberton . Detta resulterade i att W3C lade till arbete på CSS till leveranserna från HTML Editorial Review Board (ERB). Lie och Bos var den främsta tekniska personalen på denna aspekt av projektet, med ytterligare medlemmar, inklusive Thomas Reardon från Microsoft, som också deltog. I augusti 1996 presenterade Netscape Communication Corporation ett alternativt stilarkspråk som kallas JavaScript Style Sheets (JSSS). Specifikationen blev aldrig färdig och föråldras. I slutet av 1996 var CSS redo att bli officiell och CSS -nivå 1 -rekommendationen publicerades i december.
Utveckling av HTML, CSS och DOM hade alla ägt rum i en grupp, HTML Editorial Review Board (ERB). I början av 1997 delades ERB upp i tre arbetsgrupper: HTML -arbetsgrupp , ledd av Dan Connolly från W3C; DOM -arbetsgrupp, ledd av Lauren Wood från SoftQuad ; och CSS arbetsgrupp , ledd av Chris Lilley från W3C.
CSS -arbetsgruppen började ta itu med frågor som inte hade behandlats med CSS -nivå 1, vilket resulterade i skapandet av CSS -nivå 2 den 4 november 1997. Den publicerades som en W3C -rekommendation den 12 maj 1998. CSS -nivå 3, som var startade 1998, är fortfarande under utveckling från 2014.
År 2005 beslutade CSS -arbetsgrupperna att strängare tillämpa kraven på standarder. Detta innebar att redan publicerade standarder som CSS 2.1, CSS 3 Selectors och CSS 3 Text drogs tillbaka från kandidatrekommendation till Working Draft -nivå.
Svårigheter med adoption
CSS 1 -specifikationen slutfördes 1996. Microsofts Internet Explorer 3 släpptes det året, med begränsat stöd för CSS. IE 4 och Netscape 4.x lade till mer stöd, men det var vanligtvis ofullständigt och hade många buggar som hindrade CSS från att vara användbart. Det var mer än tre år innan någon webbläsare uppnådde nästan full implementering av specifikationen. Internet Explorer 5.0 för Macintosh , levererat i mars 2000, var den första webbläsaren som hade fullt (bättre än 99 procent) CSS 1 -stöd, vilket överträffade Opera , som hade varit ledande sedan introduktionen av CSS -stöd femton månader tidigare. Andra webbläsare följde kort därefter, och många av dem implementerade dessutom delar av CSS 2.
Men även när senare version 5 -webbläsare började erbjuda en ganska fullständig implementering av CSS, var de fortfarande felaktiga i vissa områden och var fyllda av inkonsekvenser, buggar och andra finurligheter . Microsoft Internet Explorer 5.x för Windows , till skillnad från den mycket annorlunda IE för Macintosh , hade en felaktig implementering av " CSS -boxmodellen ", jämfört med CSS -standarderna. Sådana inkonsekvenser och variationer i funktionsstöd gjorde det svårt för designers att uppnå ett konsekvent utseende i webbläsare och plattformar utan att använda lösningar som kallas CSS -hack och filter . IE/Windows-boxmodellbuggarna var så allvarliga att när Internet Explorer 6 släpptes introducerade Microsoft ett bakåtkompatibelt CSS-tolkningsläge (' quirks mode ') tillsammans med ett alternativt, korrigerat 'standardläge'. Andra webbläsare som inte är Microsoft tillhandahåller också en sådan 'mode'-switch-beteendefunktion. Det blev därför nödvändigt för upphovsmän till HTML- filer för att se till att de innehöll särskild särskiljande 'standard-kompatibel CSS avsedd' markör för att visa att författarna avsåg att CSS skulle tolkas korrekt, i överensstämmelse med standarder, i motsats till att vara avsedd för den nu långa föråldrad webbläsare IE5/Windows . Utan denna markör, kommer webbläsare som har "quirks mode" -växlingsfunktionen att storlek objekt på webbsidor som IE5/Windows skulle hellre än att följa CSS-standarder.
Problem med ojämn användning av CSS, tillsammans med felaktigheter i den ursprungliga specifikationen, ledde till att W3C reviderade CSS 2 -standarden till CSS 2.1, vilket flyttade sig närmare en fungerande ögonblicksbild av nuvarande CSS -stöd i HTML -webbläsare. Vissa CSS 2 -egenskaper som ingen webbläsare lyckades implementera tappades, och i några fall ändrades definierade beteenden för att anpassa standarden till de övervägande befintliga implementeringarna. CSS 2.1 blev en kandidatrekommendation den 25 februari 2004, men CSS 2.1 drogs tillbaka till arbetsutkaststatus den 13 juni 2005 och återvände först till kandidatrekommendationens status den 19 juli 2007.
Förutom dessa problem användes .css
tillägget av en mjukvaruprodukt som används för att konvertera PowerPoint -filer till Compact Slide Show -filer, så vissa webbservrar fungerade alla .css
som MIME -typ application/x-pointplus
snarare än text/css
.
Leverantörsprefix
Individuella webbläsarleverantörer introducerade ibland nya parametrar inför standardisering och universalisering. För att förhindra störningar i framtida implementeringar har leverantörerna förberett unika namn till parametrarna, till exempel -moz-
för Mozilla Firefox , -webkit-
uppkallad efter webbläsarmotorn i Apple Safari , -o-
för Opera Browser och -ms-
för Microsoft Internet Explorer .
Ibland har parametrarna med leverantörsprefix som -moz-radial-gradient
och -webkit-linear-gradient
har något olika syntax jämfört med deras motsvarigheter som inte är leverantörsprefix.
Förhandsfastigheter görs föråldrade vid tidpunkten för standardisering. Det finns program för att automatiskt lägga till prefix för äldre webbläsare och för att påpeka standardiserade versioner av prefixade parametrar. Eftersom prefix är begränsade till en liten delmängd av webbläsare kan andra webbläsare se funktionen genom att ta bort prefixet. Ett undantag är vissa föråldrade -webkit-
prefixegenskaper, som är så vanliga och ihållande på webben att andra familjer av webbläsare har beslutat att stödja dem för kompatibilitet.
Variationer
CSS har olika nivåer och profiler. Varje nivå av CSS bygger på den sista, lägger vanligtvis till nya funktioner och betecknas vanligtvis som CSS 1, CSS 2, CSS 3 och CSS 4. Profiler är vanligtvis en delmängd av en eller flera nivåer av CSS byggda för en viss enhet eller användargränssnitt . För närvarande finns det profiler för mobila enheter, skrivare och tv -apparater. Profiler bör inte förväxlas med medietyper som har lagts till i CSS 2.
CSS 1
Den första CSS -specifikationen som blev en officiell W3C -rekommendation är CSS -nivå 1, publicerad den 17 december 1996. Håkon Wium Lie och Bert Bos krediteras som de ursprungliga utvecklarna. Bland dess funktioner finns stöd för
- Teckensnittsegenskaper som teckensnitt och betoning
- Färg på text, bakgrunder och andra element
- Textattribut som avstånd mellan ord, bokstäver och textrader
- Justering av text, bilder, tabeller och andra element
- Marginal, kant, stoppning och positionering för de flesta elementen
- Unik identifiering och generisk klassificering av grupper av attribut
W3C behåller inte längre CSS 1 -rekommendationen.
CSS 2
CSS-nivå 2-specifikationen utvecklades av W3C och publicerades som en rekommendation i maj 1998. En superset av CSS 1, CSS 2 innehåller ett antal nya funktioner som absolut, relativ och fast positionering av element och z-index , begreppet medietyper, stöd för ljudformatark (som senare ersattes av CSS 3 -talmoduler) och dubbelriktad text och nya typsnittsegenskaper som skuggor.
W3C behåller inte längre CSS 2 -rekommendationen.
CSS 2.1
CSS nivå 2 revision 1, ofta kallad "CSS 2.1", åtgärdar fel i CSS 2, tar bort funktioner som inte stöds eller inte är helt kompatibla och lägger till redan implementerade webbläsartillägg till specifikationen. För att följa W3C -processen för standardisering av tekniska specifikationer gick CSS 2.1 fram och tillbaka mellan arbetsutkastets status och kandidatrekommendationsstatus i många år. CSS 2.1 blev först en kandidatrekommendation den 25 februari 2004, men den återfördes till ett arbetsutkast den 13 juni 2005 för ytterligare granskning. Den återvände till kandidatrekommendationen den 19 juli 2007 och uppdaterades sedan två gånger under 2009. Men eftersom ändringar och förtydliganden gjordes gick den tillbaka till arbetsutkastet för senaste samtal den 7 december 2010.
CSS 2.1 gick till föreslagen rekommendation den 12 april 2011. Efter att ha granskats av W3C: s rådgivande kommitté publicerades den slutligen som en W3C -rekommendation den 7 juni 2011.
CSS 2.1 planerades som den första och sista revisionen av nivå 2 - men lågprioriterat arbete med CSS 2.2 började 2015.
CSS 3
Till skillnad från CSS 2, som är en stor specifikation som definierar olika funktioner, är CSS 3 uppdelad i flera separata dokument som kallas "moduler". Varje modul lägger till nya funktioner eller utökar funktioner som definieras i CSS 2, vilket bevarar bakåtkompatibilitet. Arbetet med CSS -nivå 3 startade runt tidpunkten för publiceringen av den ursprungliga CSS 2 -rekommendationen. De tidigaste CSS 3 -utkasten publicerades i juni 1999.
På grund av moduleringen har olika moduler olika stabilitet och status.
Vissa moduler har status som kandidatrekommendation ( CR ) och anses vara måttligt stabila. I CR -stadiet rekommenderas implementering att släppa leverantörsprefix.
Modul | Specifikationstitel | Status | Datum |
---|---|---|---|
css3-bakgrund | CSS Bakgrunder och gränser modul Nivå 3 | Kandidat Rek. |
Dec 2020
|
css3-box | CSS grundlådemodell | Kandidat Rek. |
Dec 2020
|
css-cascade-3 | CSS -kaskad- och ärftnivå 3 | Rekommendation |
Februari 2021
|
css3-färg | CSS färgmodul nivå 3 | Rekommendation |
Juni 2018
|
css3-innehåll | CSS3 -genererad och ersatt innehållsmodul | Arbets Utkast 2 |
Augusti 2019
|
Rekommendation |
September 2018
|
||
css3-gcpm | CSS -genererat innehåll för sidmedialmodul | Working Draft |
Maj 2014
|
css3-layout | CSS -malllayoutmodul | Notera |
Mars 2015
|
css3-mediaqueries | Mediefrågor | Rekommendation |
Juni 2012
|
mediaqueries-4 | Mediefrågor Nivå 4 | Kandidat Rek. |
Juli 2020
|
css3-multicol | Layoutmodul med flera kolumner Nivå 1 | Working Draft |
Februari 2021
|
css3-sida | CSS Paged Media Module Level 3 | Working Draft |
Oktober 2018
|
väljare-3 | Väljare Nivå 3 | Rekommendation |
November 2018
|
väljare-4 | Väljare Nivå 4 | Working Draft |
November 2018
|
css3-ui | CSS Basic User Interface Module Level 3 (CSS3 UI) | Rekommendation |
Juni 2018
|
CSS 4
Det finns ingen enda, integrerad CSS4 -specifikation, eftersom specifikationen har delats upp i många separata moduler som nivåer oberoende.
Moduler som bygger på saker från CSS nivå 2 började på nivå 3. Några av dem har redan nått nivå 4 eller närmar sig redan nivå 5. Andra moduler som definierar helt ny funktionalitet, till exempel Flexbox , har utsetts till nivå 1 och några av de närmar sig nivå 2.
CSS Working Group publicerar ibland "Snapshots", en samling av hela moduler och delar av andra utkast som anses vara tillräckligt stabila för att kunna implementeras av webbläsarutvecklare. Hittills har fem sådana "bästa aktuella metoder" -dokument publicerats som Notes 2007, 2010, 2015, 2017 och 2018.
Eftersom dessa specifikationsöversikter främst är avsedda för utvecklare har det blivit en ökande efterfrågan på referensdokument som är liknande versioner riktade till författare, vilket skulle visa statusen för driftskompatibla implementeringar som under tiden dokumenterats av webbplatser som Can I Use ... och Mozilla Developer Network. En W3C Community Group har bildats i början av 2020 för att diskutera och definiera en sådan resurs. Den faktiska typen av versionering är också uppe till debatt, vilket innebär att dokumentet en gång producerat kanske inte kallas "CSS4".
Varje webbläsare använder en layoutmotor för att återge webbsidor, och stöd för CSS -funktionalitet är inte konsekvent mellan dem. Eftersom webbläsare inte analyserar CSS perfekt har flera kodningstekniker utvecklats för att rikta specifika webbläsare med lösningar (allmänt kända som CSS -hack eller CSS -filter). Antagande av ny funktionalitet i CSS kan hindras av brist på stöd i större webbläsare. Exempelvis Internet Explorer var långsam med att lägga till stöd för många CSS 3 -funktioner, vilket saktade ner användningen av dessa funktioner och skadade webbläsarens rykte bland utvecklare. För att säkerställa en konsekvent upplevelse för sina användare testar webbutvecklare ofta sina webbplatser i flera operativsystem, webbläsare och webbläsarversioner, vilket ökar utvecklingstiden och komplexiteten. Verktyg som BrowserStack har byggts för att minska komplexiteten i att underhålla dessa miljöer.
som är utformade för att få webbläsare att bete sig konsekvent. Dessa lösningar - och behovet av att stödja reservfunktioner - kan lägga till komplexitet i utvecklingsprojekt, och därför definierar företag ofta en lista med webbläsarversioner som de kommer att stödja och inte kommer att stödja.Eftersom webbplatser antar nyare kodstandarder som är inkompatibla med äldre webbläsare kan dessa webbläsare avbrytas från att komma åt många av resurserna på webben (ibland avsiktligt). Många av de mest populära webbplatserna på internet försämras inte bara visuellt på äldre webbläsare på grund av dåligt CSS -stöd, men fungerar inte alls, till stor del på grund av utvecklingen av JavaScript och annan webbteknik.
Några noterade begränsningar av CSS nuvarande funktioner inkluderar:
- Väljarna kan inte stiga
- CSS erbjuder för närvarande inget sätt att välja en förälder eller förfader till ett element som uppfyller vissa kriterier. CSS Selectors Level 4, som fortfarande är i Working Draft -status, föreslår en sådan väljare, men bara som en del av den fullständiga "ögonblicksbild" -väljarprofilen, inte den snabba "live" -profilen som används i dynamisk CSS -styling. Ett mer avancerat väljarschema (t.ex. XPath ) skulle möjliggöra mer sofistikerade stilark. De främsta orsakerna till att CSS -arbetsgruppen tidigare avvisade förslag på överordnade väljare är relaterade till webbläsarens prestanda och inkrementella återgivningsproblem .
- Kan inte uttryckligen deklarera nytt omfång oberoende av position
- Omfattningsregler för egenskaper som z-index letar efter det närmaste överordnade elementet med en position: absolut eller position: relativ attribut. Denna udda koppling har oönskade effekter. Till exempel är det omöjligt att undvika att deklarera ett nytt omfång när man tvingas justera elementets position, vilket hindrar en från att använda önskat omfång för ett överordnat element.
- Pseudoklass dynamiskt beteende kan inte kontrolleras
- Kan inte namnge regler
- Det finns inget sätt att namnge en CSS-regel, vilket tillåter (till exempel) klientskript att hänvisa till regeln även om dess väljare ändras.
- Det går inte att inkludera stilar från en regel till en annan regel
- CSS -stilar måste ofta kopieras i flera regler för att uppnå önskad effekt, vilket kräver ytterligare underhåll och kräver mer noggrann testning. Några nya CSS -funktioner föreslogs för att lösa detta, men övergavs efteråt. I stället kan författare få denna förmåga genom att använda mer sofistikerade formatmallsspråk som kompileras till CSS, till exempel Sass , Less eller Stylus .
- Det går inte att rikta in specifik text utan att ändra markeringen
Tidigare frågor
Dessutom förekom flera fler problem i tidigare versioner av CSS -standarden, men har lindrats:
- Vertikala kontrollbegränsningar
- Även om horisontell placering av element alltid var generellt lätt att kontrollera, var vertikal placering ofta ointuitiv, invecklad eller direkt omöjlig. Enkla uppgifter, till exempel att centrera ett element vertikalt eller placera en sidfot som inte är högre än undersidan av visningsporten, krävde antingen komplicerade och ointuitiva stilregler eller enkla men i stort sett inte stödda regler. Flexible Box -modulen förbättrade situationen avsevärt och vertikal kontroll är mycket enklare och stöds i alla moderna webbläsare. Äldre webbläsare har fortfarande dessa problem, men de flesta (främst Internet Explorer 9 och senare) stöds inte längre av sina leverantörer.
- Frånvaro av uttryck
- Brist på kolumndeklaration
- Även om det är möjligt i nuvarande CSS 3 (med
column-count
modulen) kan layouter med flera kolumner vara komplexa att implementera i CSS 2.1. Med CSS 2.1 utförs processen ofta med flytande element, som ofta återges olika av olika webbläsare, olika datorskärmsformer och olika skärmförhållanden som ställs in på standardmonitorer. Alla moderna webbläsare stöder denna CSS 3 -funktion i en eller annan form.
- Separation av innehåll från presentation
- CSS underlättar publicering av innehåll i flera presentationsformat baserat på nominella parametrar. Nominella parametrar inkluderar tydliga användarinställningar, olika webbläsare, vilken typ av enhet som används för att se innehållet (en stationär dator eller mobil enhet), användarens geografiska plats och många andra variabler.
- Konsekvens på hela webbplatsen
- När CSS används effektivt, när det gäller arv och "kaskad", kan ett globalt stilark användas för att påverka och utforma element på hela webbplatsen. Om situationen uppstår att utformningen av elementen ska ändras eller justeras kan dessa ändringar göras genom att redigera regler i det globala stilarket. Innan CSS var den här typen av underhåll svårare, dyrare och mer tidskrävande.
- Bandbredd
- Ett formatmall, internt eller externt, anger stilen en gång för ett antal HTML -element som valts av
class
, typ eller relation till andra. Detta är mycket mer effektivt än att upprepa stilinformation inline för varje förekomst av elementet. Ett externt formatmall lagras vanligtvis i webbläsarens cache och kan därför användas på flera sidor utan att laddas om, vilket ytterligare minskar dataöverföringen över ett nätverk. - Omformatering av sidor
- Med en enkel ändring av en rad kan ett annat formatmall användas för samma sida. Detta har fördelar för tillgänglighet, liksom möjligheten att skräddarsy en sida eller webbplats till olika målenheter. Dessutom visar enheter som inte kan förstå stylingen fortfarande innehållet.
- Tillgänglighet
- Utan CSS måste webbdesigners vanligtvis lägga upp sina sidor med tekniker som HTML-tabeller som hindrar tillgänglighet för synskadade användare (se Tableless web design#Accessibility ).
Ramverk
CSS-ramverk är förberedda bibliotek som är avsedda att möjliggöra enklare och mer standardkompatibel utformning av webbsidor med språket Cascading Style Sheets. CSS -ramverk inkluderar Blueprint , Bootstrap , Foundation och Materialize. Precis som programmerings- och skriptspråkbibliotek är CSS -ramar vanligtvis införlivade som externa .css -blad som refereras till HTML -koden . De ger ett antal färdiga alternativ för att designa och lägga upp webbsidan. Även om många av dessa ramar har publicerats, använder vissa författare dem mest för snabb prototypering, eller för att lära av, och föredrar att 'handgjorda' CSS som är lämpligt för varje publicerad webbplats utan design, underhåll och nedladdningskostnader för att ha många oanvända funktioner i sajtens styling.
Designmetoder
När storleken på CSS -resurser som används i ett projekt ökar måste ett utvecklingsteam ofta besluta om en gemensam designmetodik för att hålla dem organiserade. Målen är enkel utveckling, enkel samarbete under utveckling och prestanda för de utplacerade formatmallarna i webbläsaren. Populära metoder inkluderar OOCSS (objektorienterad CSS), ACSS (atomär CSS), oCSS (organiskt kaskadstilark), SMACSS (skalbar och modulär arkitektur för CSS) och BEM (block, element, modifierare).
- Meyer, Eric A. (2006). Cascading Style Sheets: The Definitive Guide, tredje upplagan . O'Reilly Media, Inc. ISBN 0-596-52733-0.
- Mer Eric Meyer Om CSS (2004) ISBN 0-7357-1425-8
- Eric Meyer Om CSS (2002), ISBN 0-7357-1245-X
- Meyer, Eric A. (2001) Cascading Style Sheets 2.0 Programmeringsreferens , McGraw-Hill Osborne Media, ISBN 0-07-213178-0
- Zen of CSS Design (2005) (medförfattare av CSS Zen Garden Owner, Dave Shea och Molly E. Holzschlag ), ISBN 0-321-30347-4
- Kynn Bartlett: Teach Yourself CSS in 24 Hours , 2nd Edition (2006), Sams Publishing, ISBN 978-0672329067
- Cascading Style Sheets: Designing for the Web (2005) av Håkon Wium Lie och Bert Bos, ISBN 0-321-19312-1
- Cascading Style Sheets Cascading Style Sheets , doktorsavhandling, av Håkon Wium Lie - ger en auktoritativ historisk referens till CSS
- Keith Schengili-Roberts (2003): Core CSS, andra upplagan , Prentice Hall, ISBN 0-13-009278-9
- Om Analysis of Cascading Style Sheets , Pierre Geneves , Nabil Layaida och Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12), s. 809–818, 2012.