CSS

CSS
utvecklaren
CSS arbetsgrupp
https://www.w3.org/Style/CSS/ och https://drafts.csswg.org/
Allmän information
filtillägget	css
mim-typ	text/css
första release	17 december 1996
Senaste versionen	CSS3 ]
formattyp	stilmallsspråk
Standard(er)	Nivå 1 (Rekommendation) Nivå 2 (Rekommendation) Nivå 2 Revision 1 (Rekommendation) Nivå 2 Revision 2 (CSS 2.2)
öppet format

CSS ( Cascading Style Sheets ) är ett grafiskt designspråk för att definiera och skapa presentationen av ett strukturerat dokument skrivet i ett märkningsspråk . Det används ofta för att skapa den visuella designen av webbdokument och användargränssnitt skrivna i HTML eller XHTML ; språket kan tillämpas på alla XML-dokument , inklusive XHTML, SVG , XUL , RSS och så vidare. Tillsammans med HTML och JavaScript är CSS en teknik som används av många webbplatser för att skapa visuellt tilltalande sidor, användargränssnitt för webbapplikationer och GUI för många mobilapplikationer (som Firefox OS). ]

CSS är främst utformad för att markera separationen av innehållet i dokumentet och hur det presenteras, funktioner som lager eller layouter , färger och typsnitt. Denna separation är avsedd att förbättra dokumenttillgängligheten, ge mer flexibilitet och kontroll när det gäller att specificera presentationsfunktioner, tillåta flera HTML -dokument att dela samma stil med en enda, separat stilmall i en fil .css, och minska komplexiteten och upprepningen av kod i dokumentstrukturen.

Separationen av format och innehåll gör det möjligt att presentera samma dokument markerat i olika stilar för olika renderingsmetoder, till exempel på skärmen, i tryck, i tal (med en röstwebbläsare eller skärmläsare) och pekbaserade enheter punktskriftssystemet . _ En webbsida kan också visas på olika sätt beroende på storleken på skärmen eller typen av enhet. Läsare kan ange en annan stilmall, till exempel en CSS-stilmall som sparats på deras dator, för att åsidosätta designerns stilmall.

CSS-specifikationen beskriver ett prioritetsschema för att avgöra vilka stilregler som gäller om mer än en regel matchar ett visst element. Dessa regler tillämpas med ett system som kallas överlappande , så att prioriteringar beräknas och tilldelas reglerna, så att resultaten är förutsägbara.

CSS-specifikationen underhålls av World Wide Web Consortium (W3C) . MIME -typen text/css är registrerad för användning av CSS som beskrivs i RFC 2318 . W3C tillhandahåller ett gratis CSS-valideringsverktyg för CSS-dokument.

Syntax

CSS har en enkel syntax och använder en uppsättning engelska nyckelord för att ange namnen på olika stilegenskaper. En stilmall består av en serie regler . Varje regel, eller uppsättning regler, består av en eller flera väljare och ett deklarationsblock .

Väljare

Väljare deklarerar vilka taggar som tillämpas på stilar som matchar taggen eller attributet som anges i regeln.

Väljare kan tillämpas på:

• Alla element av en typ, till exempel stycken <p>.
• Element följt av ett attribut, särskilt:
  • id : identifierare, en unik identifierare för taggen.
  • class : class, en identifierare för att kommentera flera element.

Klasser och identifierare är skiftlägeskänsliga, börjar med bokstäver och kan innehålla alfanumeriska tecken och understreck. En klass gäller för valfritt antal element. En identifierare gäller för ett enskilt element.

Pseudoklasser används i CSS-väljare för att tillåta formatering med information som inte ingår i dokumentet. Ett exempel på en allmänt använd pseudoklass är :hover, som identifierar innehåll som pekas på av en pekare, såsom muspekaren. Detta namn läggs till i väljaren, så här: a:hovereller #elementid:hover. En pseudoklass klassificerar element, som :linkeller :visited, medan ett pseudo-element gör ett urval av delelement, som ::first-lineeller ::first-letter.

Väljare kan kombineras på många sätt för större flexibilitet och precision. Flera väljare kan sammanfogas på en enda rad för att specificera element efter deras plats, elementtyp, identifierare, klass eller någon kombination av dessa. Ordningen på väljarna är viktig. Till exempel div.myClass {color: red;}gäller den för alla element <div>med klassen myClass, medan den .myClass div {color: red;}gäller för alla element <div>i alla element med klassen myClass.

Följande tabell ger en sammanfattning av syntaxen för de olika väljarna, och anger hur de används och i vilken version av CSS de introducerades:

Mönster	Menande	Utseende CSS-nivå
E	ett element av typ E	1
E:link	ett element E som är en länk som inte har besökts (:länk) eller redan har besökts (:besökt)	1
E:active	ett element E som utför någon handling från användarens sida	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 class="c"	1
#myid	elementet med id="myid"	1
E.warning	ett element E som tillhör klassen "varning"	1
E#myid	ett element E vars id är "myid"	1
E F	ett element F härstammar från ett element E	1
*	vilket element som helst	två
E[foo]	ett E-element med ett "foo"-attribut	två
E[foo="bar"]	ett E-element vars "foo"-attribut har det exakta värdet "bar"	två
E[foo~="bar"]	ett E-element vars "foo"-attribut har en mellanslagsseparerad lista med värden, varav ett är "bar"	två
E:first-child	det första barnet till ett element E	två
E:lang(eo)	ett E-element vars språk är specificerat till "eo"	två
E::before	innehåll genererat före innehållet i element E	två
E::after	innehåll som genereras efter innehållet i element E	två
E > F	ett element F underordnat till ett element E	två
E + F	ett element E som omedelbart efterträder ett element F	två
E[foo^="bar"]	ett E-element vars "foo"-attribut har ett värde som börjar exakt med strängen "bar"	3
E[foo$="bar"]	ett E-element vars "foo"-attribut har ett värde som slutar exakt med strängen "bar"	3
E[foo*="bar"]	ett E-element vars "foo"-attribut har ett värde som innehåller delsträngen "bar"	3
E:root	ett E-element vid dokumentroten	3
E:nth-child(n)	ett element E, det n:te barnet av detta	3
E:nth-last-child(n)	ett element E, det n:e barnet av det, räknat från det sista barnet	3
E:nth-of-type(n)	ett element E, det n:te underordnade elementet, som endast räknar de av samma typ som föräldern	3
E:nth-last-of-type(n)	ett element E, det n:te underordnade elementet, som endast räknar de av samma typ som föräldern, och från det sista underordnade elementet	3
E:last-child	det sista barnet till ett element E	3
E:first-of-type	ett E-element, de första syskonen i sitt slag	3
E:last-of-type	ett E-element, sista syskon i sitt slag	3
E:only-child	det enda barnet av element E	3
E:only-of-type	det enda syskonen till element E	3
E:empty	ett E-element som inte har några underordnade (inklusive textnoder)	3
E:target	ett länkelement E som trycks ned	3
E:enabled	ett aktiverat UI-element E	3
E:disabled	ett inaktiverat UI-element E	3
E:checked	ett markerat användargränssnittselement E (giltigt för kryssrutor och radioknappar)	3
E:not(s)	ett element E som inte matchar den enkla väljaren s	3
E ~ F	ett element E efterföljt av ett element F	3

Uttalande block

Ett satsblock består av en lista med sammanfogade satser. Varje deklaration består av en egenskap , ett kolon ( :) och ett värde . Om det finns många deklarationer i ett block, ;infogas ett semikolon ( ) för att separera varje deklaration.

Egenskaper är inbäddade i CSS-standarden. Varje egenskap har en uppsättning möjliga värden. Vissa egenskaper påverkar vilket element som helst, andra bara en viss grupp av element. Värdena kan vara nyckelord, som "center" eller "ärv", eller numeriska värden, som 200px (200 pixlar) eller 80% (80 procent av fönstrets bredd). Färgvärden specificeras med hjälp av ett nyckelord (t.ex. "röd"), hexadecimala värden (t.ex. #FF0000, som kan förkortas till #F00), RGB-värden på en skala från 0 till 255 (t.ex. rgb(255, 0, 0)) , RGBA-värden är samma som RGB-värden men med stöd för transparens-alfakanalen (t.ex. ), och HSL- eller HSLA-rgba(255, 0, 0, 0.8) värden (t.ex. , ). hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Användning

Före utvecklingen av CSS inkluderades all presentationsinformation för HTML-dokument i HTML-koden. Teckensnittsfärger, bakgrundsstilar, elementjustering, gränser och storlekar beskrevs alla uttryckligen, ibland överflödigt, i HTML-koden. CSS tillåter designers att flytta all presentationsinformation till en annan fil, stilmallen , vilket resulterar i anmärkningsvärt enklare HTML-kod.

Till exempel är rubriker ( h1), underrubriker ( h2t.ex. net), underrubriker ( h3), etc., strukturellt definierade med HTML. I tryck och skärmar är valet av teckensnitt, storlek, färg och betoning för dessa element presentationsmässigt .

Innan CSS, designers som ville tilldela typografiska egenskaper, till exempel till alla element, h2var tvungna att upprepa HTML-presentationskoden för varje element de ville tillämpa den stilen på. Detta skapade dokument som var mer komplexa, långa, mer felbenägna och svåra att underhålla. CSS tillåter åtskillnad mellan presentation och struktur. CSS kan definiera färg, typsnitt, textjustering, storlek, kanter, avstånd, lager och många andra typografiska funktioner, och olika utskrifts- och visningsstilar kan användas. CSS definierar också icke-visuella stilar, såsom läshastighet och betoning på fonetiska textläsare. W3C har förkastat användningen av HTML-presentationstaggar.

Om du till exempel använder stilar med HTML-presentationstaggar kan ett element som h1definieras med röd text renderas som:

< h1 >< span  style = "color:red;" > Kapitel 1. </ span ></ h1 >

Med CSS kan samma element skrivas med inline stilegenskaper istället för visningsattribut och taggar:

< h1  style = "färg: röd;" > Kapitel 1. </ h1 >

En extern CSS-stilmall, som beskrivs nedan, kan länkas till ett HTML-dokument med följande syntax:

< link  href = "stylesheet.css"  rel = "stylesheet"  type = "text/css"  />

CSS-koden kan inkluderas i HTML-koden i <style>-taggen inuti <head>-taggen i dokumentet:

< style > 
  h1  { color :  red } 
</ style >

Källor

CSS-stilar kan tillhandahållas från olika källor. Dessa källor kan vara webbläsaren, användaren och designern. Designerinformation kan klassificeras på följande sätt: inline, mediatyp, betydelse, väljarspecificitet, regelordning, arv och egenskapsdefinition. CSS-stilinformationen kan finnas i ett separat dokument eller så kan den vara inbäddad i ett HTML-dokument. Flera stilmallar kan importeras samtidigt. Olika stilar kan användas beroende på utdata från den för närvarande använda enheten; till exempel kan bildskärmsversionen skilja sig från den tryckta versionen, så designers kan använda olika stilar beroende på vilken enhet som används.

Stilmallen med högst prioritet styr visningen av innehållet. Deklarationer som inte har ställts in i källan med högsta prioritet åsidosätts, till exempel formatmallar för användaragenter. Denna process kallas cascading , eller vattenfall. ]

Ett av målen med CSS är att ge användarna mer kontroll över presentationen. Vissa personer som tycker att kursiverade röda rubriker är svåra att läsa kan använda en annan stilmall. Beroende på webbläsaren och webbplatsen kan en användare välja mellan olika stilmallar som designarna tillhandahåller, eller så kan de ta bort alla tillagda stilmallar och visa webbplatsen med webbläsarens standardstilar, eller så kan de åsidosätta bara stilen i webbläsaren. röda rubriker i kursiv stil utan att ändra andra attribut.

CSS-prioritetsscheman (högst till lägst betydelse)

Prioritet	CSS-källtyp	Beskrivning
1	Betydelse	Anteckning !importantskriver över tidigare prioritet
två	linje	En stil som appliceras på ett HTML-element via attributetstyle
3	Mediatyp	En egenskap gäller för alla mediatyper, såvida inte en specifik CSS -medietyp har definierats.
4	Användardefinierad	De flesta webbläsare har denna tillgänglighetsfunktion: en användardefinierad CSS-stil
5	Väljarens specificitet	En specifik kontextuell väljare ( #heading p) åsidosätter en allmän definition ( p)
6	Ordningen på reglerna	Den senast angivna regeln har högre prioritet
7	Arv	Om en egenskap inte anges ärvs den från det överordnade elementet.
8	CSS-egenskapsdefinition i HTML-dokument	En vanlig CSS-regel åsidosätter webbläsarvärdet
9	Webbläsare som standard	Lägsta prioritet: Dessa värden bestäms av de initiala W3C-specifikationerna

Specificitet

Specificitet avser den relativa vikten av olika regler . Bestämmer vilka stilar som tillämpas på ett element när mer än en regel försöker tillämpa stilar på det. Baserat på specifikationen har en enkel väljare ( h1t.ex.) en specificitet på 1, klassväljare har en specificitet på 1.0 och id-väljare har en specificitet på 1,0,0. Eftersom specificitetsvärden inte bärs som i decimalsystemet används kommatecken för att separera "siffror" (en CSS-regel som har 11 element och 11 klasser har en specificitet på 11,11, inte 121).

Följande regelväljare resulterar därför i den angivna specificiteten:

Väljare	specificitet
H1 {color: white;}	0, 0, 0, 1
P EM {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
P.bright {color: blue;}	0, 0, 1, 1
P.bright EM.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

Exempel

Tänk på det här HTML-dokumentet:

 <!DOCTYPE html> 
 < html > 
   < head > 
     < meta  charset = "utf-8" > 
     < style > 
        # id { property : value ;} 
     </ style > 
   </ head > 
   < body > 
     < p  id = "xyz"  stil = "färg: blå;" > För att visa specificitet </ p > 
   </ body > 
 </ html >

I det här exemplet åsidosätter deklarationen i attributet styleelementdeklarationen <style>eftersom den har en högre specificitet.

Arv

Arv är en nyckelfunktion i CSS; baserat på anfader-ättling-relationen att fungera. Arv är den mekanism genom vilken egenskaper inte bara tillämpas på ett enskilt element, utan också på dess avkomlingar. Arv baseras på dokumentträdet, som är hierarkin av XHTML-element på en sida baserad på kapsling. Underliggande element kan ärva CSS-egenskapsvärden från ett förfaderelement. I allmänhet ärver underordnade element textrelaterade egenskaper, men boxrelaterade egenskaper gör det inte. Egenskaper som kan ärvas är färg, teckensnitt, mellanrum, radvikt, listegenskaper, textjustering, indrag, synlighet, mellanrum och ordavstånd. Egenskaper som inte kan ärvas är bakgrund, ramar, visning, positionering, storlek, marginaler, minimi- och maxstorlek, kontur , översvämning, utfyllnad, position, vertikal justering och z-index. ]

Arv förhindrar att vissa egenskaper deklareras om och om igen i stilmallen, vilket gör att designers kan skriva mindre CSS-kod. Det förbättrar användarnas snabba inläsning av webbplatser och låter kunderna spara pengar på utvecklingskostnader och bandbredd.

Exempel

Vi har följande stilmall:

 h1  { 
    färg :  rosa ; 
 }

Det här är ett element h1med en betoningstagg ( em) inuti:

< h1 > 
    Detta är för att < em > illustrera </ em > arv
 </ h1 >

Om elementet inte tilldelas en färg emkommer ordet "illustrera" att ärva färgen på det överordnade elementet, h1. Då visas ordet "illustrera" i rosa. Låt oss ta till exempel den grå färgen för texten som finns mellan etiketterna em.

em  { 
    färg :  grå ; 
}

Tomma utrymmen

Vitutrymme mellan egenskaper och väljare ignoreras. Denna kodbit:

kropp { overflow : gömd ; bakgrund : #000000 ;}

är lika med denna andra:

 kropp  { 
    overflow :  gömd ; 
    bakgrund :  #000000 ; 
 }

Även om avståndet förbättrar kodens läsbarhet.

Positionering

CSS 2.1 definierar 3 positioneringsscheman:

Vanligt

Inline- element är ordnade på samma sätt som bokstäver i ord i text, när det inte finns mer utrymme på en rad startas en ny rad nedan. Blockelement är arrangerade vertikalt, som stycken.

Flytande

Ett flytelement är utanför det normala flödet och placerat så långt till höger eller vänster som möjligt i det tillgängliga utrymmet. De andra elementen flyter runt flytelementet.

Absolut

Ett absolut placerat element har ingen plats och påverkar inte det normala flödet av element. Den upptar det utrymme som har tilldelats den oberoende av de andra elementen.

Positioneringsegenskaper

Det finns 4 möjliga värden för fastigheten position. Om ett element är placerat på ett annat sätt än static, finns det fyra underegenskaper som används för att ange positioner och förskjutningar: top, bottom, leftoch right. ]

statisk

Standard för element i den normala strömmen .

Släkting

Elementet placeras i flödesnormalen och flyttas sedan relativt till sitt normala läge. De andra elementen är oberoende av det relativt rörda elementet.

absolut

Anger absolut positionering . Elementet är placerat i förhållande till sin närmaste icke-statiska förfader.

Fast

Elementet placeras absolut i en fast position på skärmen även om resten av dokumentet rör sig.

Flyta och rensa

Fastigheten floatkan ha 3 olika värden. Absolut eller fast positionerade element kan inte tillämpas på den här egenskapen. Andra element flyter normalt runt flytelementen, om inte någon av egenskaperna är inställda clear.

vänster

Flytelement flyter till vänster och andra element flyter till höger om detta element.

höger

Flytelement flyter till höger och andra element flyter till vänster om detta element.

klar

Tvingar elementet att inte flyta runt element som flyter till vänster ( clear: left), till höger ( clear: right) eller åt båda sidor ( clear: both).

Historik

Håkon Wium Lie , CTO för Opera Software företaget och medskapare av CSS-standarden

CSS föreslogs först av Håkon Wium Lie den 10 oktober 1994. Samtidigt arbetade Lie med Tim Berners-Lee på CERN . Många andra stilmallsspråk föreslogs samtidigt, och diskussioner om offentliga e-postlistor inom W3C ledde till den första CSS-rekommendationen av W3C (CSS1) 1996. I synnerhet Bert Bos ' s förslag var inflytelserik; han var medförfattare till CSS1 och krediteras som medskapare av CSS. ]

Stilmallar har funnits i en eller annan form sedan starten av Standard Generalized Markup Language ( SGML ) på 1980-talet, och CSS utvecklades för att tillhandahålla stilmallar för webben. Ett krav för ett webbstilmallsspråk var att stilmallarna finns i olika stilar på webben. Därför var befintliga stilmallsspråk som DSSSL och FOSI inte lämpliga. CSS, å andra sidan, låter dokumentet påverkas av flera stilmallar via "cascading"-stilar. ]

Allt eftersom HTML växte kom det att omfatta en mängd olika designfunktioner för att möta kraven från webbdesigners. Denna utveckling gav designern större kontroll över webbplatsens utseende, till priset av mer komplex HTML. Variationer i webbläsarimplementeringar, som ViolaWWW och WorldWideWeb , gjorde det svårare att konsekventa utseendet på webbplatsen, och användarna hade mindre kontroll över hur webbinnehåll visades. Webbläsaren/redigeraren skapad av Tim Berners-Lee hade stilmallar som var inbyggda i programmet. Stilmallar var därför inte länkade till dokument på webben. Robert Cailliau , också på CERN, ville skilja struktur från presentation, så att olika stilmallar kunde beskriva olika presentationer för tryck, skärmar och förlag. ]

Att förbättra möjligheterna för webbrendering var ett ämne av intresse för många i webbgemenskaperna, och 9 olika stilmallsspråk föreslogs på e-postlistan i www-stil. Av dessa nio förslag påverkade två djupt vad som blev CSS: Cascading HTML Style Sheets och Stream-based Style Sheet Proposal (SSP). ​ Två webbläsare användes för att testa de första förslagen; Lie arbetade med Yves Lafon för att implementera CSS i Arena -webbläsaren skapad av Dave Raggett . ​Bert Bos implementerade sitt eget SSP-förslag i Argo- webbläsaren . Sedan dess har Lie och Bos arbetat tillsammans för att utveckla CSS-standarden. "H" togs bort från namnet eftersom dessa stilmallar kan tillämpas på andra märkningsspråk än HTML. ]

Lies förslag presenterades vid " Mosaic and the Web "-konferensen (senare kallad WWW2) i Chicago , Illinois 1994, och igen med Bert Bos 1995. Vid den tiden var W3C redan under etablering. , och visade intresse i CSS-utveckling. Han organiserade en workshop för det ändamålet ledd av Steven Pemberton . Detta resulterade i att W3C gav mer CSS-arbete till resultaten från Editorial Review Board (ERB). Lie och Bos var det huvudsakliga tekniska teamet i denna del av projektet, med ytterligare deltagare som Thomas Reardon från Microsoft . I augusti 1996 introducerade Netscape Communication Corporation ett alternativt stilmallsspråk kallat JavaScript Style Sheets (JSSS). Specifikationen slutfördes aldrig och är föråldrad. I slutet av 1996 var CSS redo att bli officiell, och CSS 1-rekommendationen publicerades i december.

Utvecklingen av HTML, CSS och DOM hade gjorts i en enda grupp, HTML Editorial Review Board (ERB). I början av 1997 delades ERB upp i tre arbetsgrupper: HTML Working Group , ledd av Dan Connolly från W3C; DOM-arbetsgruppen, ledd av Lauren Wood från SoftQuad ; och CSS Working Group , ledd av Chris Lilley från W3C.

CSS-arbetsgruppen började fixa buggar som inte hade granskats i CSS 1, vilket resulterade i skapandet av CSS 2 den 4 november 1997. Den publicerades som en rekommendation den 12 maj 1998. Tillägg till CSS därefter, gemensamt känd som " CSS3", fick de ett modulärt utseende, där varje funktion utvecklades oberoende.

2005 beslutade CSS-arbetsgruppen att skärpa kraven i standarderna. Detta innebar att redan publicerade standarder som CSS 2.1, CSS3 Selectors och CSS3 Text nedgraderades från statusen "Candidate Recommendations" till "Working Draft".

Nivåer

CSS-ögonblicksbild 2021

CSS har skapats på olika nivåer och profiler. Varje nivå av CSS bygger på den föregående, och lägger vanligtvis till funktionalitet till den föregående nivån.

Profiler är vanligtvis en del av en eller flera nivåer av CSS definierade för en viss enhet eller gränssnitt. För närvarande kan profiler användas för mobila enheter, skrivare eller tv -apparater .

CSS1

Den första officiella specifikationen för CSS, rekommenderad av W3C, var CSS1, publicerad i december 1995, och övergavs i april 2008. ]

Några av funktionerna som den erbjuder är:

• Teckensnittsegenskaper , såsom typ, storlek, betoning...
• Färg på text, bakgrunder, kanter eller andra element.
• Textattribut, som avstånd mellan ord, bokstäver, rader osv.
• Justering av texter, bilder, tabeller eller annat.
• Boxegenskaper, som marginal, kantlinje, utfyllnad eller mellanrum.
• Egenskaper för identifiering och presentation av listor.

CSS2

CSS2-specifikationen utvecklades av W3C och publicerades som en rekommendation i maj 1998 och övergavs i april 2008. ]

Som en förlängning av CSS1 erbjöds bland annat följande:

• Funktionerna för lagren ( <div> ) såsom relativ/absolut/fast positionering, nivåer ( z-index ), etc.
• Begreppet " medietyper ".
• Stöd för auditiva stilmallar.
• Dubbelriktad text , skuggor osv.

CSS 2.1

Den första versionen av CSS2, vanligtvis känd som "CSS 2.1", fixar vissa buggar som finns i CSS2, tar bort dåligt stödd eller trasig funktionalitet i webbläsare och lägger till några nya specifikationer.

Enligt specifikationerna för det tekniska standardiseringssystemet hade CSS2.1 status som "kandidat" ( kandidatrekommendation ) i flera år, men förslaget avslogs i juni 2005. I juni 2007 föreslogs ett förslag som ny versionskandidat, och den uppdaterades 2009, men i december 2010 avvisades den igen.

I april 2011 föreslogs CSS 2.1 på nytt som en kandidat, och efter att ha granskats av W3C:s rådgivande kommitté publicerades den slutligen som en officiell rekommendation den 7 juni 2011. ]

CSS3

Till skillnad från CSS2, som var en enda specifikation som definierade olika funktioner, är CSS3 uppdelad i flera separata dokument, kallade "moduler".

Varje modul lägger till nya funktioner till de som definieras i CSS2, så de tidigare bevaras för att bibehålla kompatibiliteten.

Arbetet med CSS3 började ungefär när den officiella CSS2-rekommendationen publicerades, och de första utkasten till CSS3 släpptes i juni 1999. ]

På grund av modulariseringen av CSS3 kan olika moduler vara i olika utvecklingsstadier, så att från och med november 2011 finns ett femtiotal moduler publicerade, tre av dem blev rekommendationer. W3C Official 2011: "Selectors " , "Namnutrymmen" och "Färg" .

Vissa moduler, som "Bakgrunder och färger" , "Mediefrågor" eller "Flerkolumnlayouter" är i "kandidatfasen" och anses vara rimligt stabila i slutet av 2011, och deras implementeringar i de olika webbläsarna är markerade med samma motorprefix. ]

CSS4

Det finns ingen integrerad specifikation av CSS4, eftersom specifikationen har delats upp i flera separata moduler som hanterar nivåer oberoende av varandra.

Moduler som byggde på CSS nivå 2 saker började på nivå 3. Vissa av dem har nått nivå 4 eller närmar sig till och med nivå 5. Andra moduler som definierar helt ny funktionalitet, som Flexbox, har utsetts till nivå 1 och några av de närmar sig nivå 2.

CSS-arbetsgruppen publicerar ibland "snapshots", som är en samling av hela moduler och delar av andra utkast som anses stabila nog att implementeras av webbläsarutvecklare. Hittills har fem av dessa "aktuella bästa praxis"-dokument publicerats som anteckningar, 2007, 2010, 2015, 2017 och 2018.

Eftersom dessa specifikationer är avsedda för utvecklare har det funnits en växande efterfrågan på liknande men författarorienterade referensdokument, som skulle presentera statusen för interoperabla implementeringar samtidigt som de dokumenteras av webbplatser som "Kan jag använda..." och MDN-webben Dokument. En grupp som kallas W3C Community Group har etablerats i början av 2020 för att diskutera och definiera sådana resurser. Den faktiska typen av versionshantering är också uppe för debatt, vilket innebär att dokumentet, när det väl har tagits fram, kanske inte heter "CSS4".

Stöd av webbläsare

Varje webbläsare använder en annan renderingsmotor för att rendera webbsidor, och CSS-stödet är inte exakt detsamma för någon av renderingsmotorerna. Eftersom webbläsare inte tillämpar CSS korrekt har många programmeringstekniker utvecklats för att tillämpas av en specifik webbläsare (allmänt känd som CSS-hack eller CSS-filter ). Antagandet av nya funktioner i CSS hämmas av bristen på stöd i större webbläsare. Till exempel har Internet Explorer varit långsam med att lägga till stöd för vissa CSS3-funktioner, vilket har hindrat antagandet av dessa funktioner och skadat webbläsarens rykte bland utvecklare. ​ För att säkerställa en konsekvent upplevelse för sina användare, testar webbutvecklare ibland sina webbplatser i flera webbläsare, operativsystem och webbläsarversioner. Ökad utvecklingstid och komplexitet. Olika verktyg som BrowserStack har byggts för att minska komplexiteten i att underhålla webbsidor.

Utöver de tidigare nämnda testverktygen har många webbplatser stödlistor för webbläsare för CSS-specifika egenskaper, inklusive CanIUse och Mozilla Developer Network . Dessutom definierar CSS3 många frågor , bland vilka direktivet tillhandahålls @supportssom tillåter utvecklare att specificera webbläsare med stöd för en specifik funktion direkt i CSS. CSS-kod som inte stöds av äldre versioner av en webbläsare tillhandahålls ibland via polyfills i JavaScript. Dessa metoder lägger till komplexitet till utvecklingsprojekt, och som ett resultat definierar företag ofta en lista över de olika versioner av webbläsare som stöds och som inte stöds.

Eftersom webbplatser antar nya kodstandarder som är inkompatibla med äldre webbläsare, fråntas dessa webbläsare åtkomst till många av resurserna på webben (ibland avsiktligt). Många av de mest populära webbplatserna på Internet är inte bara visuellt fula i äldre webbläsare på grund av dåligt CSS-stöd, de fungerar inte alls, till stor del på grund av utvecklingen av JavaScript och andra webbteknologier. ]

Begränsningar

Några av de kända begränsningarna för nuvarande CSS-funktioner är:

Väljare kan inte befordras

CSS erbjuder för närvarande inte ett sätt att välja förälder till ett element som uppfyller några kriterier. CSS-nivå 4-väljare, som fortfarande är i Working Draft-kvalitet, har föreslagit en väljare, men bara som en del av en annan väljare. Ett mer avancerat väljarschema (som XPath ) skulle kunna möjliggöra mer sofistikerade stilmallar. CSS-arbetsgruppens främsta skäl till att avvisa förslag om nedifrån-och-uppväljare är relaterade till webbläsarens prestanda och ökande renderingsbuggar. ]

Dynamiska pseudoklasser kan inte kontrolleras

Dynamiska pseudoklasser (som :hover) kan inte kontrolleras eller inaktiveras från webbläsaren, vilket gör dem mottagliga för missbruk av banner- eller popup- designers . ]

Kan inte namnge CSS-stilar

Det finns inget sätt att namnge en CSS-stil, vilket skulle tillåta skript på klientsidan att referera till regeln även om väljaren ändras.

Stilar från en regel kan inte inkluderas i en annan

CSS-stilar behöver ibland dupliceras över flera regler för att uppnå önskad effekt, vilket orsakar ytterligare underhåll och kräver mer testning. Vissa CSS-funktioner föreslogs för att åtgärda detta, men (från och med februari 2016) har ingenting implementerats ännu. ]

Det går inte att välja specifik text utan att ändra uppmärkning

Förutom pseudoelementet :first-letterkan du inte välja ett specifikt textområde utan att använda taggar som <span>.

Lösta begränsningar

Det finns också begränsningar som redan har lösts:

vertikalt inriktad

Även om horisontell justering i allmänhet är lätt att kontrollera, är vertikal justering ofta icke-intuitiv eller helt omöjlig. Enkla uppgifter, som att centrera ett element vertikalt eller att sätta en sidfot längst ner är mycket svårt. Flexible Box-modulen förbättrar denna situation avsevärt och vertikal justering är mycket enklare och stöds i alla aktuella webbläsare. Äldre webbläsare har inte dessa funktioner (främst Internet Explorer 9 och lägre) och stöds för närvarande inte av deras tillverkare. ]

frånvaro av uttryck

Det finns ännu inte ett standardalternativ för att ange egenskapsvärden som ett enkelt uttryck (som margin-left: 10% – 3em + 4px;). Detta kan vara användbart i många fall, som att beräkna antalet kolumner i en tabell. Internet Explorer versioner 5 till 7 stöder en proprietär tillägg expression(), med liknande funktionalitet. expression()det stöds inte längre av Internet Explorer 8 och framåt, förutom i kompatibilitetslägen. Detta beslut togs för att förbättra "standardefterlevnad, webbläsarprestanda och av säkerhetsskäl." Emellertid har en kandidatrekommendation calc()för att övervinna denna begränsning publicerats av CSS WG och stöds nu av de flesta moderna webbläsare. ]

Saknar deklaration av textkolumner

Även om det redan är möjligt att implementera detta i CSS3-specifikationen (med modulen column-count), är lager med många kolumner svåra att implementera med CSS 2.1. Med CSS 2.1 görs processen med hjälp av flytande element, som renderas olika i olika webbläsare, storlekar, skärmformer och operativsystem. Nu stöder alla moderna webbläsare denna funktion i CSS3 på ett eller annat sätt. ]

Fördelar

Å andra sidan är några fördelar med att använda CSS:

Separation av innehåll och presentation

CSS gör det enkelt att publicera innehåll i flera visningsformat baserat på nominella parametrar. Dessa inkluderar explicita användarpreferenser, olika webbläsare , typen av enhet som används för att visa innehållet (en PC eller en smartphone ), geografisk plats eller andra variabler.

Konsistens på webbplatsen

När CSS används effektivt, när det gäller arv och överlappande, kan en global stilmall användas för att utforma en hel webbplats. Om dessa stilar behöver ändras senare, kan ändringarna göras bara genom att ändra reglerna i den globala stilmallen. Innan CSS var detta mycket svårare, dyrare och mer tidskrävande.

Bandbredd

En intern eller extern formatmall anger stilen för en uppsättning HTML-element valda efter klass, typ eller arv. Detta är mer effektivt än att upprepa information för varje förekomst av elementet. En extern stilmall sparas vanligtvis i webbläsarens cache , och kan användas på flera sidor utan att laddas om, vilket minskar dataöverföringen över nätverket.

sidformatering

Med en enkel ändring på en enda rad kan stilmallen för samma sida ändras. Detta ger fördelar för tillgängligheten, samt gör det möjligt att anpassa sajten till olika enheter.

Tillgänglighet

Utan CSS designade webbdesigners vanligtvis sina sidor med element som tabeller som gjorde tillgängligheten svår för andra användare, och som försämrade viss användning av dokument av webbläsare inriktade på personer med vissa sensoriska begränsningar.

CSS-ramverk

CSS-ramverk är bibliotek förberedda för att möjliggöra förenkling och större överensstämmelse med standarderna för design av webbsidor som använder CSS-språket. Några av de vanligaste CSS-ramverken är Foundation , Blueprint , Bootstrap , Cascade Framework och Materialize . Liksom i programmeringsbibliotek i skriptspråk, är CSS-ramverk vanligtvis inbäddade som externa CSS-stilmallar som refereras till med <link>. Detta ger ett stort antal färdiga alternativ för design och layout av en webbsida. Även om många ramverk redan har publicerats, använder vissa designers dem mest för snabb prototypframställning eller för inlärningsändamål, och föredrar att bygga sin egen CSS-kod för hand. ]

Se även

• Em (typografi)
• HTML
• Syra3
• css zen trädgård
• Bilaga: Lista över stilmallsspråk
• progressiv förbättring
• Hjälp : Cascading Style Sheets

Externa länkar

• CSS Snapshot 2015 . W3C (på engelska) . Hämtad 10 december 2015 .   – Detta dokument samlar i ett enda dokument alla specifikationer som utgör det nuvarande tillståndet för CSS under 2015.

• "Cascading Style Sheets (CSS) Snapshot 2010" . W3C (på engelska) . Hämtad 23 juli 2014 .   – Innehåller länkar till specifikationer.
• Jämförelse av CSS-rendering i olika motorer (Wikipedia på engelska)
• [1] CSS3 Introduktion

• Detta arbete innehåller en partiell översättning härledd från « Css » av Wikipedia på engelska, närmare bestämt denna version , publicerad av dess utgivare under GNU Free Documentation License och Creative Commons Attribution-ShareAlike 3.0 Unported License .