CSS -

CSS

"Pseudo-element" omdirigerar här. För pseudoelementsymboler i kemi, se Skelettformel § Pseudoelementsymboler .

För användning av CSS på Wikipedia, se Hjälp: Cascading Style Sheets .

För annan användning, se CSS (disambiguation) .

Stilarkets språk

Filnamnstillägg	.css
Internetmedietyp	text/css
Uniform Type Identifier (UTI)	public.css
Utvecklad av	World Wide Web Consortium (W3C)
Initial release	17 december 1996 ; 24 år sedan  ( 1996-12-17 )
Senaste släppningen
Typ av format	Stilarkets språk
Behållare för	Stilregler för HTML -element (taggar)
Innehållet av	HTML -dokument
Öppet format ?	Ja
Hemsida	www .w3 .org /TR /CSS / #css

Cascading Style Sheets
Stilblad CSS Zen Garden
Begrepp
animationer lådmodell bildbyte flexbox rutnät
Filosofier
Bordslös Mottaglig "Helig gral"
Verktyg
Sass Mindre Nål CSSTidy
Jämförelser
CSS -stöd Stilmallsspråk
Cascading Style Sheets
v t e

HTML
Dynamisk HTML HTML5 audio duk video- XHTML Grundläggande Mobilprofil C-HTML HTML -element span och div HTML -attribut HTML -ram HTML -redigerare Teckenkodningar Unicode Språkkod Dokumentobjektmodell Objektmodell för webbläsare Stilark CSS Typsnittsfamilj Webbfärger JavaScript WebGL WebCL W3C Validator VAD Quirks -läge webblager Rendering motor
Jämförelser
Dokumentmarkeringsspråk HTML -stöd XHTML 1.1

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 .

Syntax

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
• 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å
E	ett element av typ E	1
E : link	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
E : active	ett E -element under vissa användaråtgärder	1
E :: first-line	den första formaterade raden i ett E -element	1
E :: first-letter	den första formaterade bokstaven i ett E -element	1
. c	alla element med klass = "c"	1
# myid	elementet med id = "23290197myid"	1
E . warning	ett E -element vars klass är "varning" (dokumentspråket anger hur klassen bestäms)	1
E # myid	ett E -element med ID lika med "myid"	1
. c # myid	elementet med class = "c" och ID lika med "myid"	1
E F	ett F -element som är ättling till ett E -element	1
*	något element	2
E [ foo ]	ett E -element med ett "foo" -attribut	2
E [ foo = "bar" ]	ett E -element vars "foo" -attributvärde exakt är lika med "bar"	2
E [ foo ~= "bar" ]	ett E-element vars "foo" -attributvärde är en lista över mellanrumsavgränsade värden, varav ett exakt är lika med "bar"	2
E [ foo |= "en" ]	ett E-element vars "foo" -attribut har en bindestreckad separerad lista med värden som börjar (från vänster) med "en"	2
E : first-child	ett E -element, förälderns första barn	2
E : lang ( fr )	ett element av typ E i språket "fr" (dokumentspråket anger hur språket bestäms)	2
E :: before	genererat innehåll före ett E -elements innehåll	2
E :: after	genererat innehåll efter ett E -elements innehåll	2
E > F	ett F -elementbarn till ett E -element	2
E + F	ett F -element som omedelbart föregås av ett E -element	2
E [ foo ^= "bar" ]	ett E -element vars "foo" -attributvärde börjar exakt med strängen "bar"	3
E [ foo $= "bar" ]	ett E -element vars "foo" -attributvärde slutar exakt med strängen "bar"	3
E [ foo *= "bar" ]	ett E -element vars "foo" -attributvärde innehåller delsträngen "bar"	3
E : root	ett E -element, roten till dokumentet	3
E : nth-child ( n )	ett E-element, det förälderns n: e barn	3
E : nth-last-child ( n )	ett E-element, det förälderns n: e barn, räknat från det sista	3
E : nth-of-type ( n )	ett E-element, det n: e syskonet av sin typ	3
E : nth-last-of-type ( n )	ett E-element, det n: e syskonet av sin typ, räknat från det sista	3
E : last-child	ett E -element, förälderns sista barn	3
E : first-of-type	ett E -element, första syskon i sin typ	3
E : last-of-type	ett E -element, sista syskon av sin typ	3
E : only-child	ett E -element, enda barn till föräldern	3
E : only-of-type	ett E -element, bara syskon av sin typ	3
E : empty	ett E -element som inte har några barn (inklusive textnoder)	3
E : target	ett E -element är målet för den hänvisande URI: en	3
E : enabled	ett användargränssnittselement E som är aktiverat	3
E : disabled	ett användargränssnittselement E som är inaktiverat	3
E : checked	ett användargränssnittselement E som är markerat (till exempel en alternativknapp eller kryssruta)	3
E : not ( s )	ett E -element som inte matchar enkla väljare	3
E ~ F	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

80%

(80 procent av det överordnade elementets bredd). Färgvärden kan anges med nyckelord (t.ex. " red"), hexadecimala värden (t.ex. #FF0000också 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 200pxeller 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 ( h1element), 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 h2rubriker 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 h1element i dokumentet blir då automatiskt röda utan att behöva någon uttrycklig kod. Om författaren senare ville göra h1element 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 h1element.

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.

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:

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å

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 floathä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 clearegendom.

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

Håkon Wium Lie , teknisk chef för Opera Software-företaget och medskapare av CSS-webbstandarder

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.

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 .csstillägget av en mjukvaruprodukt som används för att konvertera PowerPoint -filer till Compact Slide Show -filer, så vissa webbservrar fungerade alla .csssom 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-gradientoch -webkit-linear-gradienthar 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.

CSS 4

Spela media

Jen Simmons diskuterade tillståndet för CSS under 2019, eftersom flera CSS

 

4 -moduler utvecklades

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.

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-countmodulen) 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

Huvudartikel: Separation av presentation och innehåll

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

Huvudartikel: Style sheet (webbutveckling)

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

Huvudartikel: Progressiv förbättring

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).

• Flash av ostylerat innehåll

• Officiell hemsida
  
• CSS på Curlie