CSS

CSS
utvikler
CSS arbeidsgruppe
https://www.w3.org/Style/CSS/ og https://drafts.csswg.org/
Generell informasjon
filutvidelse css
mime-type tekst/css
Første utgivelse 17. desember 1996
Siste versjon CSS3 [ 1 ]
formattype stilarkspråk
Standarder) Nivå 1 (anbefaling)
Nivå 2 (anbefaling)
Nivå 2 Revisjon 1 (anbefaling)
Nivå 2 Revisjon 2 (CSS 2.2)
åpent format Ja 

CSS ( Cascading Style Sheets ) er et grafisk designspråk for å definere og lage presentasjonen av et strukturert dokument skrevet i et markup-språk . [ 2 ] Det er mye brukt for å etablere den visuelle utformingen av webdokumenter, og brukergrensesnitt skrevet i HTML eller XHTML ; språket kan brukes på alle XML-dokumenter , inkludert XHTML, SVG , XUL , RSS og så videre. Sammen med HTML og JavaScript er CSS en teknologi som brukes av mange nettsteder for å lage visuelt tiltalende sider, brukergrensesnitt for nettapplikasjoner og GUI -er for mange mobilapplikasjoner (som Firefox OS). [ 3 ]

CSS er hovedsakelig utformet for å markere separasjonen av innholdet i dokumentet og måten det presenteres på, funksjoner som lag eller layout , farger og fonter. [ 4 ] Denne separasjonen er ment å forbedre dokumenttilgjengelighet, gi mer fleksibilitet og kontroll i å spesifisere presentasjonsfunksjoner, tillate flere HTML -dokumenter å dele samme stil ved å bruke et enkelt, separat stilark i en fil .css, og redusere kompleksitet og repetisjon av kode i dokumentstrukturen.

Separasjonen av format og innhold gjør det mulig å presentere det samme dokumentet merket i forskjellige stiler for forskjellige gjengivelsesmetoder, for eksempel på skjermen, på trykk, i tale (ved hjelp av en stemmeleser eller skjermleser), og berøringsbaserte enheter punktskriftsystemet . _ En nettside kan også vises forskjellig avhengig av størrelsen på skjermen eller typen enhet. Lesere kan spesifisere et annet stilark, for eksempel et CSS-stilark som er lagret på datamaskinen deres, for å overstyre designerens stilark.

CSS-spesifikasjonen beskriver et prioriteringsskjema for å bestemme hvilke stilregler som gjelder hvis mer enn én regel samsvarer for et bestemt element. Disse reglene brukes med et system som kalles cascading , slik at prioriteringer beregnes og tildeles reglene, slik at resultatene er forutsigbare.

CSS-spesifikasjonen vedlikeholdes av World Wide Web Consortium (W3C) . MIME -typen text/css er registrert for bruk av CSS beskrevet i RFC 2318 . [ 5 ] W3C tilbyr et gratis CSS-valideringsverktøy for CSS-dokumenter.

Syntaks

CSS har en enkel syntaks og bruker et sett med engelske nøkkelord for å spesifisere navnene på ulike stilegenskaper. Et stilark består av en rekke regler . Hver regel, eller sett med regler, består av én eller flere velgere og en deklarasjonsblokk .

Velgere

Velgere erklærer hvilke tagger som brukes på stiler som samsvarer med taggen eller attributtet som er angitt i regelen.

Velgere kan brukes på:

Klasser og identifikatorer skiller mellom store og små bokstaver, begynner med bokstaver og kan inneholde alfanumeriske tegn og understrekinger. En klasse gjelder for et hvilket som helst antall elementer. En identifikator gjelder for et enkelt element.

Pseudo-klasser brukes i CSS-velgere for å tillate formatering ved hjelp av informasjon som ikke er inkludert i dokumentet. Et eksempel på en mye brukt pseudoklasse er :hover, som identifiserer innhold som pekes på av en peker, for eksempel musepekeren. Dette navnet legges til velgeren, slik: a:hovereller #elementid:hover. En pseudo-klasse klassifiserer elementer, som :linkeller :visited, mens et pseudo-element gjør et utvalg av delelementer, som ::first-lineeller ::first-letter.

Velgere kan kombineres på mange måter for større fleksibilitet og presisjon. Flere velgere kan slås sammen på en enkelt linje for å spesifisere elementer etter deres plassering, elementtype, identifikator, klasse eller en hvilken som helst kombinasjon av disse. Rekkefølgen på velgerne er viktig. For eksempel div.myClass {color: red;}gjelder det for alle elementer <div>med klasse myClass, mens det .myClass div {color: red;}gjelder for alle elementer <div>i ethvert element med klasse myClass.

Følgende tabell gir et sammendrag av syntaksen til de forskjellige velgerne, og angir hvordan de brukes og versjonen av CSS de ble introdusert i:

Mønster Betydning
Utseende CSS-nivå
E et element av type E 1
E:link et element E som er en lenke som ikke er besøkt (:link) eller som allerede er besøkt (:visited) 1
E:active et element E som utfører en handling fra brukerens side 1
E::first-line den første formaterte linjen i et E-element 1
E::first-letter den første formaterte bokstaven i et E-element 1
.c alle elementer med class="c" 1
#myid elementet med id="myid" 1
E.warning et element E som tilhører klassen "advarsel" 1
E#myid et element E hvis id er "myid" 1
E F et element F stammer fra et element E 1
* hvilket som helst element to
E[foo] et E-element med et "foo"-attributt to
E[foo="bar"] et E-element hvis "foo"-attributt har en nøyaktig verdi på "bar" to
E[foo~="bar"] et E-element hvis "foo"-attributt har en mellomromseparert liste med verdier, hvorav en er "bar" to
E:first-child det første barnet til et element E to
E:lang(eo) et E-element hvis språk er spesifisert til "eo" to
E::before innhold generert før innholdet i element E to
E::after innhold generert etter innholdet i element E to
E > F et element F underordnet av et element E to
E + F et element E som umiddelbart etterfølger et element F to
E[foo^="bar"] et E-element hvis "foo"-attributt har en verdi som begynner nøyaktig med strengen "bar" 3
E[foo$="bar"] et E-element hvis "foo"-attributt har en verdi som slutter nøyaktig med strengen "bar" 3
E[foo*="bar"] et E-element hvis "foo"-attributt har en verdi som inneholder understrengen "bar" 3
E:root et E-element ved dokumentroten 3
E:nth-child(n) et element E, det n-te barnet av dette 3
E:nth-last-child(n) et element E, det n-te barnet av det, regnet fra det siste barnet 3
E:nth-of-type(n) et element E, det n'te underordnede elementet, teller bare de av samme type som forelderen 3
E:nth-last-of-type(n) et element E, det n'te underordnede elementet, teller bare de av samme type som forelderen, og fra det siste barnet 3
E:last-child det siste barnet til et element E 3
E:first-of-type et E-element, de første søsken i sitt slag 3
E:last-of-type et E-element, siste søsken i sitt slag 3
E:only-child det eneste barnet til element E 3
E:only-of-type den eneste søsken til element E 3
E:empty et E-element som ikke har noen underordnede (inkludert tekstnoder) 3
E:target et lenkeelement E som trykkes 3
E:enabled et aktivert UI-element E 3
E:disabled et deaktivert UI-element E 3
E:checked et merket brukergrensesnittelement E (gyldig for avmerkingsbokser og radioknapper) 3
E:not(s) et element E som ikke samsvarer med den enkle velgeren s 3
E ~ F et element E etterfulgt av et element F 3

Uttalelsesblokk

En setningsblokk består av en liste over sammenføyde setninger. Hver erklæring består av en egenskap , et kolon ( :) og en verdi . Hvis det er mange deklarasjoner i en blokk, settes et semikolon ( ;) inn for å skille hver deklarasjon.

Egenskaper er innebygd i CSS-standarden. Hver egenskap har et sett med mulige verdier. Noen egenskaper påvirker ethvert element, andre bare en bestemt gruppe elementer. Verdiene kan være nøkkelord, for eksempel "senter" eller "arv", eller numeriske verdier, for eksempel 200px (200 piksler) eller 80% (80 prosent av vinduets bredde). Fargeverdier spesifiseres ved hjelp av et nøkkelord (f.eks. "rød"), heksadesimale verdier (f.eks. #FF0000, som kan forkortes som #F00), RGB-verdier på en skala fra 0 til 255 (f.eks rgb(255, 0, 0).) , RGBA-verdier er de samme som RGB-verdier, men med støtte for alfakanalen for åpenhet (f.eks . ), og HSL- eller HSLA-rgba(255, 0, 0, 0.8) verdier (f.eks . , ). hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Bruk

Før utviklingen av CSS ble all presentasjonsinformasjon til HTML-dokumenter inkludert i HTML-koden. Skriftfarger, bakgrunnsstiler, elementjustering, kantlinjer og størrelser ble alle eksplisitt, noen ganger overflødig, beskrevet i HTML-en. CSS lar designere flytte all presentasjonsinformasjon til en annen fil, stilarket , noe som resulterer i bemerkelsesverdig enklere HTML-kode.

For eksempel er overskrifter ( h1), underoverskrifter ( h2f.eks. netto), underoverskrifter ( h3), osv., strukturelt definert ved hjelp av HTML. På trykk og skjermer er valget av skrifttype, størrelse, farge og fremheving for disse elementene presentasjonsmessig .

Før CSS måtte designere som ønsket å tilordne typografiske egenskaper, for eksempel til alle elementer h2, gjenta HTML-presentasjonskoden for hvert element de ønsket å bruke stilen på. Dette skapte dokumenter som var mer komplekse, lange, mer feilutsatte og vanskelige å vedlikeholde. CSS tillater skille mellom presentasjon og struktur. CSS kan definere farge, skrifttype, tekstjustering, størrelse, kantlinjer, avstand, lagdeling og mange andre typografiske funksjoner, og ulike utskrifts- og visningsstiler kan brukes. CSS definerer også ikke-visuelle stiler, for eksempel lesehastighet og vekt på lydtekstlesere. W3C har avviklet bruken av HTML-presentasjonskoder.

Hvis du for eksempel bruker stiler ved hjelp av HTML-presentasjonskoder, kan et element h1definert med rød tekst gjengis som:

< h1 >< span style = "farge:rød;" > Kapittel 1. </ span ></ h1 >

Ved å bruke CSS kan det samme elementet skrives ved å bruke innebygde stilegenskaper i stedet for visningsattributter og koder:

< h1 style = "farge: rød;" > Kapittel 1. </ h1 >

Et eksternt CSS-stilark, beskrevet nedenfor, kan kobles til et HTML-dokument ved å bruke følgende syntaks:

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

CSS-koden kan inkluderes i HTML-koden i <style>-taggen inne i <head>-koden til dokumentet:

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

Kilder

CSS-stiler kan leveres fra forskjellige kilder. Disse kildene kan være nettleseren, brukeren og designeren. Designerinformasjon kan klassifiseres på følgende måter: innebygd, medietype, viktighet, velgerspesifisitet, regelrekkefølge, arv og egenskapsdefinisjon. CSS-stilinformasjonen kan være i et separat dokument eller den kan være innebygd i et HTML-dokument. Flere stilark kan importeres samtidig. Ulike stiler kan brukes avhengig av utdataene til enheten som brukes for øyeblikket; for eksempel kan skjermversjonen være forskjellig fra den trykte versjonen, slik at designere kan bruke forskjellige stiler avhengig av enheten som brukes.

Stilarket med høyest prioritet styrer visningen av innholdet. Erklæringer som ikke er angitt i kilden med høyest prioritet, overstyres, for eksempel stilark for brukeragenter. Denne prosessen kalles cascading , eller foss. [ 6 ]

Et av målene med CSS er å gi brukerne mer kontroll over presentasjonen. Noen personer som synes det er vanskelig å lese kursivte røde overskrifter, kan bruke et annet stilark. Avhengig av nettleseren og nettstedet, kan en bruker velge mellom ulike stilark levert av designerne, eller de kan fjerne alle stilark som er lagt til og se nettstedet ved å bruke nettleserens standardstiler, eller de kan overstyre bare stilen til nettleseren. røde overskrifter i kursiv uten å endre andre attributter.

CSS-prioritetsordninger (høyest til lavest viktighet)
Prioritet CSS-kildetype Beskrivelse
1 Betydning Merknad !importantoverskriver tidligere prioritet
to linje En stil brukt på et HTML-element via attributtetstyle
3 Media type En egenskap gjelder for alle medietyper, med mindre en spesifikk CSS -medietype er definert.
4 Brukerdefinert De fleste nettlesere har denne tilgjengelighetsfunksjonen: en brukerdefinert CSS-stil
5 Velgers spesifisitet En spesifikk kontekstuell velger ( #heading p) overstyrer en generell definisjon ( p)
6 Rekkefølgen på reglene Den sist angitte regelen har høyere prioritet
7 Arv Hvis en egenskap ikke er spesifisert, arves den fra det overordnede elementet.
8 CSS-egenskapsdefinisjon i HTML-dokument En vanlig CSS-regel overstyrer nettleserverdien
9 Nettleser standard Laveste prioritet: Disse verdiene bestemmes av de første W3C-spesifikasjonene

Spesifisitet

Spesifisitet refererer til den relative vekten av ulike regler . Bestemmer hvilke stiler som brukes på et element når mer enn én regel forsøker å bruke stiler på det. Basert på spesifikasjonen har en enkel velger ( h1, for eksempel) en spesifisitet på 1, klassevelger har en spesifisitet på 1.0, og id-velger har en spesifisitet på 1,0,0. Fordi spesifisitetsverdier ikke bæres som i desimalsystemet , brukes komma til å skille "siffer" (en CSS-regel som har 11 elementer og 11 klasser har en spesifisitet på 11,11, ikke 121).

Derfor resulterer følgende regelvelgere i den angitte spesifisiteten:

Velgere spesifisitet
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
Eksempel

Tenk på dette HTML-dokumentet:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < style > # id { property : value ;} </ style > </ head > < body > < p id = "xyz" style = "farge: blå;" > For å demonstrere spesifisitet </ p > </ body > </ html >

I dette eksemplet styleoverstyrer deklarasjonen i attributtet elementdeklarasjonen <style>fordi den har en høyere spesifisitet.

Arv

Arv er en nøkkelfunksjon i CSS; basert på stamfar-etterkommer forholdet til å operere. Arv er mekanismen der egenskaper ikke bare brukes på et enkelt element, men også på dets etterkommere. Arv er basert på dokumenttreet, som er hierarkiet av XHTML-elementer på en side basert på nesting. Etterkommerelementer kan arve CSS-egenskapsverdier fra et forfedreelement. Generelt arver etterkommere elementer tekstrelaterte egenskaper, men boksrelaterte egenskaper gjør det ikke. Egenskaper som kan arves er farge, skrift, avstand, linjevekt, listeegenskaper, tekstjustering, innrykk, synlighet, mellomrom og ordavstand. Egenskaper som ikke kan arves er bakgrunn, kantlinjer, visning, plassering, størrelse, marger, minimums- og maksimumsstørrelse, kontur , overløp, polstring, posisjon, vertikal justering og z-indeks. [ 7 ]

Arv forhindrer noen egenskaper fra å bli deklarert om og om igjen i stilarket, slik at designere kan skrive mindre CSS-kode. Det forbedrer den raske lasting av nettsteder av brukere, og lar kundene spare penger på utviklingskostnader og båndbredde.

Eksempel

Vi har følgende stilark:

h1 { farge : rosa ; }

Dette er et element h1med en emphasis tag ( em) inni:

< h1 > Dette er for å < em > illustrere </ em > arv </ h1 >

Hvis elementet ikke er tildelt en farge em, vil ordet "illustrere" arve fargen til det overordnede elementet, h1. Da vil ordet "illustrere" vises i rosa. La oss for eksempel ta den grå fargen for teksten som er mellom etikettene em.

em { farge : grå ; }

Tomme mellomrom

Mellomrom mellom egenskaper og velgere ignoreres. Denne kodebiten:

kropp { overløp : skjult ; bakgrunn : #000000 ;}

er lik denne andre:

kropp { overløp : skjult ; bakgrunn : #000000 ; }

Selv om avstanden forbedrer lesbarheten til koden.

Plassering

CSS 2.1 definerer 3 posisjoneringsskjemaer:

Vanlig Inline - elementer er ordnet på samme måte som bokstaver i ord i tekst, når det ikke er mer plass på en linje, startes en ny linje under. Blokkelementer er arrangert vertikalt, som avsnitt. Flytende Et flyteelement er utenfor normal flyt og plassert så langt til høyre eller venstre som mulig i ledig plass. De andre elementene flyter rundt flyteelementet. Absolutt Et absolutt plassert element har ikke en plass, og påvirker ikke den normale flyten av elementer. Den opptar plassen som er tildelt den uavhengig av de andre elementene. Plasseringsegenskaper

Det er 4 mulige verdier for eiendommen position. Hvis et element er plassert på en annen måte enn static, er det fire underegenskaper som brukes til å spesifisere posisjoner og forskyvninger: top, bottom, leftog right. [ 8 ]

statisk Standard til elementer i den normale strømmen . Slektning Elementet plasseres i strømningsnormalen og flyttes deretter relativt til sin normale posisjon. De andre elementene er uavhengige av det relativt bevegede elementet. absolutt Angir absolutt posisjonering . Elementet er plassert i forhold til dets nærmeste ikke-statiske stamfar. Fikset Elementet er plassert absolutt i en fast posisjon på skjermen selv om resten av dokumentet beveger seg. Flyt og tøm

Eiendommen floatkan ha 3 forskjellige verdier. Absolutt eller fast posisjonerte elementer kan ikke brukes på denne egenskapen. Andre elementer flyter normalt rundt flyteelementene, med mindre noen av egenskapene er satt clear.

venstre Flyteelementer flyter til venstre og andre elementer flyter til høyre for dette elementet. Ikke sant Flyteelementer flyter til høyre og andre elementer flyter til venstre for dette elementet. klar Tvinger elementet til ikke å flyte rundt elementer som flyter til venstre ( clear: left), til høyre ( clear: right) eller til begge sider ( clear: both).

Historikk

CSS ble først foreslått av Håkon Wium Lie 10. oktober 1994. [ 9 ] Samtidig jobbet Lie med Tim Berners-Lee ved CERN . [ 10 ] Mange andre stilarkspråk ble foreslått på samme tid, og diskusjoner om offentlige e-postlister innen W3C førte til den første CSS-anbefalingen fra W3C (CSS1) [ 11 ] i 1996. Spesielt Bert Bos ' s forslag var innflytelsesrikt; han var medforfatter av CSS1 og er kreditert som medskaper av CSS. [ 12 ]

Stilark har eksistert i en eller annen form siden starten av Standard Generalized Markup Language ( SGML ) på 1980-tallet, og CSS ble utviklet for å gi stilark for nettet. [ 13 ] Et krav til et webstilarkspråk var at stilarkene kommer i forskjellige stiler på nettet. Derfor var eksisterende stilarkspråk som DSSSL og FOSI ikke egnet. CSS, på den annen side, lar dokumentet påvirkes av flere stilark via "cascading"-stiler. [ 13 ]

Etter hvert som HTML vokste, kom det til å omfatte et bredt utvalg av designfunksjoner for å møte kravene til webdesignere. Denne utviklingen ga designeren større kontroll over utseendet til nettstedet, på bekostning av mer kompleks HTML. Variasjoner i nettleserimplementeringer, slik som ViolaWWW og WorldWideWeb , [ 14 ] gjorde det vanskeligere å konsekvente utseendet på nettstedet, og brukerne hadde mindre kontroll over hvordan nettinnhold ble vist. Nettleseren/redaktøren laget av Tim Berners-Lee hadde stilark som var innebygd i programmet. Stilark var derfor ikke knyttet til dokumenter på nettet. [ 15 ] Robert Cailliau , også ved CERN, ønsket å skille struktur fra presentasjon, slik at ulike stilark kunne beskrive ulike presentasjoner for trykk, skjermer og forlag. [ 14 ]

Forbedring av evnene til webgjengivelse var et tema av interesse for mange i nettsamfunnene, og 9 forskjellige stilarkspråk ble foreslått på e-postlisten i www-stil. [ 13 ] Av disse ni forslagene, påvirket to dypt hva som ble CSS: Cascading HTML Style Sheets [ 9 ] og Stream-based Style Sheet Proposal (SSP). [ 12 ]​ [ 16 ]​ To nettlesere ble brukt til å teste for de første forslagene; Lie jobbet med Yves Lafon for å implementere CSS i Arena -nettleseren laget av Dave Raggett . [ 17 ] ​[ 18 ] ​[ 19 ] ​Bert Bos implementerte sitt eget SSP-forslag i Argo - nettleseren . [ 12 ] Siden den gang har Lie og Bos jobbet sammen for å utvikle CSS-standarden. 'H' ble fjernet fra navnet fordi disse stilarkene kan brukes på andre markeringsspråk enn HTML. [ 10 ]

Lies forslag ble presentert på " Mosaic and the Web "-konferansen (senere kalt WWW2) i Chicago , Illinois i 1994, og igjen med Bert Bos i 1995. [ 10 ] På det tidspunktet var W3C allerede under etablering. , og viste interesse i CSS-utvikling. Han organiserte en workshop for det formålet ledet av Steven Pemberton . Dette resulterte i at W3C ga mer CSS-arbeid til resultatene fra Editorial Review Board (ERB). Lie og Bos var det viktigste tekniske teamet på denne delen av prosjektet, med flere deltakere som Thomas Reardon fra Microsoft . I august 1996 introduserte Netscape Communication Corporation et alternativt stilarkspråk kalt JavaScript Style Sheets (JSSS). [ 10 ] Spesifikasjonen ble aldri ferdigstilt og er utdatert. [ 20 ] Ved slutten av 1996 var CSS klar til å bli offisiell, og CSS 1-anbefalingen ble publisert i desember.

Utviklingen av HTML, CSS og DOM hadde blitt gjort i en enkelt gruppe, HTML Editorial Review Board (ERB). Tidlig i 1997 ble ERB delt inn i tre arbeidsgrupper: HTML Working Group , ledet av Dan Connolly fra W3C; DOM-arbeidsgruppe, ledet av Lauren Wood fra SoftQuad ; og CSS Working Group , ledet av Chris Lilley fra W3C.

CSS-arbeidsgruppen begynte å fikse feil som ikke hadde blitt gjennomgått i CSS 1, noe som resulterte i opprettelsen av CSS 2 4. november 1997. Den ble publisert som en anbefaling 12. mai 1998. Tillegg til CSS deretter, samlet kjent som " CSS3", fikk de et modulært utseende, hvor hver funksjon ble utviklet uavhengig.

I 2005 besluttet CSS-arbeidsgruppen å gjøre kravene til standardene strengere. Dette betydde at allerede publiserte standarder som CSS 2.1, CSS3 Selectors og CSS3 Text ble nedgradert fra "Candidate Recommendations" til "Working Draft" status.

Nivåer

CSS er laget på ulike nivåer og profiler. Hvert nivå av CSS bygger på det forrige, og legger generelt til funksjonalitet til det forrige nivået.

Profiler er vanligvis en del av ett eller flere nivåer av CSS definert for en bestemt enhet eller grensesnitt. For øyeblikket kan profiler brukes til mobile enheter, skrivere eller TV- er .

CSS1

Den første offisielle spesifikasjonen av CSS, anbefalt av W3C, var CSS1, publisert i desember 1995, [ 21 ] og forlatt i april 2008. [ 21 ]

Noen av funksjonene den tilbyr er:

  • Skriftegenskaper , for eksempel type, størrelse, fremheving ...
  • Farge på tekst, bakgrunner, kanter eller andre elementer.
  • Tekstattributter, som avstand mellom ord, bokstaver, linjer osv.
  • Justering av tekster, bilder, tabeller eller annet.
  • Boksegenskaper, for eksempel marg, kantlinje, utfylling eller mellomrom.
  • Egenskaper for identifikasjon og presentasjon av lister.

CSS2

CSS2-spesifikasjonen ble utviklet av W3C og publisert som en anbefaling i mai 1998, og ble forlatt i april 2008. [ 22 ]

Som en utvidelse av CSS1 ble blant annet følgende tilbudt:

  • Lagenes funksjonalitet ( <div> ) som relativ/absolutt/fast posisjonering, nivåer ( z-indeks ), etc.
  • Konseptet med " medietyper ".
  • Støtte for auditive stilark.
  • Toveis tekst , skygger osv.
CSS 2.1

Den første revisjonen av CSS2, vanligvis kjent som "CSS 2.1", fikser noen feil funnet i CSS2, fjerner dårlig støttet eller ødelagt funksjonalitet i nettlesere, og legger til noen nye spesifikasjoner.

I henhold til spesifikasjonene for det tekniske standardiseringssystemet hadde CSS2.1 status som "kandidat" ( kandidatanbefaling ) i flere år, [ 23 ] men forslaget ble avvist i juni 2005. I juni 2007 ble det foreslått et forslag til ny versjonskandidat, og den er oppdatert i 2009, men i desember 2010 ble den igjen avvist.

I april 2011 ble CSS 2.1 foreslått på nytt som en kandidat, [ 24 ] og etter å ha blitt gjennomgått av W3Cs rådgivende komité , ble den endelig publisert som en offisiell anbefaling 7. juni 2011. [ 25 ]

CSS3

I motsetning til CSS2, som var en enkelt spesifikasjon som definerte ulike funksjoner, er CSS3 delt inn i flere separate dokumenter, kalt "moduler".

Hver modul legger til nye funksjoner til de som er definert i CSS2, slik at de forrige blir bevart for å opprettholde kompatibiliteten.

Arbeidet med CSS3 startet rundt den tiden den offisielle CSS2-anbefalingen ble publisert, og de første utkastene til CSS3 ble utgitt i juni 1999. [ 26 ]

På grunn av modulariseringen av CSS3, kan forskjellige moduler være i forskjellige stadier av utviklingen, [ 27 ] slik at fra og med november 2011 er det omtrent femti moduler publisert, [ 26 ] tre av dem ble anbefalinger. W3C Official 2011: "Selectors " , "Navneområder" og "Farge" .

Noen moduler, som "Bakgrunner og farger" , "Mediespørringer" eller "Flerkolonneoppsett" er i "kandidat"-fasen, og anses som rimelig stabile, ved slutten av 2011, og deres implementeringer i de forskjellige nettleserne er merket med samme motorprefikser. [ 28 ]

CSS4

Det er ingen integrert spesifikasjon av CSS4, da spesifikasjonen er delt inn i flere separate moduler som håndterer nivåer uavhengig.

Moduler som bygde på CSS nivå 2 ting startet på nivå 3. Noen av dem har nådd nivå 4 eller nærmer seg nivå 5. Andre moduler som definerer helt ny funksjonalitet, som Flexbox, har blitt utpekt som nivå 1 og noen av de nærmer seg nivå 2.

CSS Working Group publiserer noen ganger "øyeblikksbilder", som er en samling av hele moduler og deler av andre utkast som anses som stabile nok til å implementeres av nettleserutviklere. Så langt har fem av disse "nåværende beste praksis"-dokumentene blitt publisert som notater, i 2007, 2010, 2015, 2017 og 2018.

Siden disse spesifikasjonene er ment for utviklere, har det vært en økende etterspørsel etter lignende, men forfatterorienterte referansedokumenter, som vil presentere statusen til interoperable implementeringer samtidig som de er dokumentert av nettsteder som "Kan jeg bruke..." og MDN Web Dokumenter. En gruppe kalt W3C Community Group ble etablert tidlig i 2020 for å diskutere og definere slike ressurser. Selve typen versjonering er også oppe til debatt, noe som betyr at dokumentet, når det først er produsert, kanskje ikke kalles "CSS4".

Støtte fra nettlesere

Hver nettleser bruker en annen gjengivelsesmotor for å gjengi nettsider, og CSS-støtten er ikke helt lik på tvers av noen av gjengivelsesmotorene. Siden nettlesere ikke bruker CSS på riktig måte, har mange programmeringsteknikker blitt utviklet for å kunne brukes av en spesifikk nettleser (ofte kjent som CSS-hack eller CSS-filtre ). Adopsjonen av nye funksjoner i CSS hemmes av mangelen på støtte i store nettlesere. For eksempel har Internet Explorer vært trege med å legge til støtte for noen CSS3-funksjoner, noe som har hindret bruken av disse funksjonene og skadet nettleserens rykte blant utviklere. [ 29 ]​ [ 30 ]​ For å sikre en konsistent opplevelse for brukerne deres, tester nettutviklere noen ganger sidene sine på tvers av flere nettlesere, operativsystemer og nettleserversjoner. Økende utviklingstid og kompleksitet. Ulike verktøy som BrowserStack er bygget for å redusere kompleksiteten ved vedlikehold av nettsider.

I tillegg til de nevnte testverktøyene, vedlikeholder mange nettsteder nettleserstøttelister for CSS-spesifikke egenskaper, inkludert CanIUse og Mozilla Developer Network . I tillegg definerer CSS3 mange spørringer , blant annet er direktivet gitt @supportssom lar utviklere spesifisere nettlesere med støtte for en spesifikk funksjon direkte i CSS. [ 31 ] CSS-kode som ikke støttes av eldre versjoner av en nettleser, leveres noen ganger via polyfills i JavaScript. Disse metodene tilfører kompleksitet til utviklingsprosjekter, og som et resultat definerer selskaper ofte en liste over de forskjellige versjonene av nettlesere som støttes og som ikke støttes.

Ettersom nettsteder tar i bruk nye kodestandarder som er inkompatible med eldre nettlesere, blir disse nettleserne fratatt tilgang til mange av ressursene på nettet (noen ganger med vilje). Mange av de mest populære sidene på Internett er ikke bare visuelt stygge i eldre nettlesere på grunn av dårlig CSS-støtte, de fungerer ikke i det hele tatt, hovedsakelig på grunn av utviklingen av JavaScript og andre nettteknologier. [ 32 ]

Begrensninger

Noen av de kjente begrensningene for nåværende CSS-funksjoner er:

Utvelgere kan ikke forfremmes CSS tilbyr for øyeblikket ikke en måte å velge overordnet til et element som tilfredsstiller noen kriterier. [ 33 ] CSS Level 4 Selectors, som fortsatt er i Working Draft-kvalitet, har foreslått en selector, men bare som en del av en annen selector. [ 34 ] Et mer avansert velgerskjema (som XPath ) kan muliggjøre mer sofistikerte stilark. CSS-arbeidsgruppens hovedgrunner for å avvise forslag om velgere nedenfra og opp er relatert til nettleserens ytelse og økende gjengivelsesfeil. [ 35 ] Dynamiske pseudoklasser kan ikke kontrolleres Dynamiske pseudoklasser (som :hover) kan ikke kontrolleres eller deaktiveres fra nettleseren, noe som gjør dem utsatt for misbruk av banner- eller popup -designere . [ 36 ] Kan ikke navngi CSS-stiler Det er ingen måte å navngi en CSS-stil, som vil tillate klientsideskript å referere til regelen selv om velgeren endres. Stiler fra én regel kan ikke inkluderes i en annen CSS-stiler må noen ganger dupliseres på tvers av flere regler for å oppnå ønsket effekt, noe som forårsaker ekstra vedlikehold og krever mer testing. Noen CSS-funksjoner ble foreslått for å løse dette, men (fra februar 2016) er ingenting implementert ennå. [ 37 ] Kan ikke velge spesifikk tekst uten å endre markeringen I tillegg til pseudoelementet :first-letterkan du ikke velge et spesifikt tekstområde uten å bruke tagger som <span>.

Løste begrensninger

Det er også begrensninger som allerede er løst:

vertikalt justert Mens horisontal justering generelt er lett å kontrollere, er vertikal justering ofte ikke-intuitiv, eller helt umulig. Enkle oppgaver, som å sentrere et element vertikalt eller å sette en bunntekst nederst er svært vanskelig. Flexible Box Module forbedrer denne situasjonen betraktelig , og vertikal justering er mye enklere og støttes i alle gjeldende nettlesere. Eldre nettlesere har ikke disse funksjonene (hovedsakelig Internet Explorer 9 og eldre) og støttes for øyeblikket ikke av produsentene. [ 38 ] fravær av uttrykk Det er ennå ikke et standardalternativ for å spesifisere egenskapsverdier som et enkelt uttrykk (som margin-left: 10% – 3em + 4px;). Dette kan være nyttig i mange tilfeller, for eksempel å beregne antall kolonner i en tabell. Internet Explorer versjoner 5 til 7 støtter en proprietær utvidelse expression()[ 39 ] med lignende funksjonalitet . expression()det støttes ikke lenger av Internet Explorer 8 og utover, bortsett fra i kompatibilitetsmoduser. Denne beslutningen ble tatt for å forbedre "standardoverholdelse, nettleserytelse og av sikkerhetsgrunner." [ 39 ] Imidlertid har en kandidatanbefaling calc()for å overvinne denne begrensningen blitt publisert av CSS WG og støttes nå av de fleste moderne nettlesere. [ 40 ] Manglende erklæring av tekstkolonner Selv om det allerede er mulig å implementere dette i CSS3-spesifikasjonen (ved hjelp av modulen column-count), er lag med mange kolonner vanskelige å implementere med CSS 2.1. [ 41 ] Med CSS 2.1 gjøres prosessen ved hjelp av flytende elementer, som gjengis forskjellig i forskjellige nettlesere, størrelser, skjermformer og operativsystemer. Nå støtter alle moderne nettlesere denne funksjonen til CSS3 på en eller annen måte. [ 42 ]

Fordeler

På den annen side er noen fordeler ved å bruke CSS:

Separasjon av innhold og presentasjon CSS gjør det enkelt å publisere innhold i flere visningsformater basert på nominelle parametere. Disse inkluderer eksplisitte brukerpreferanser, forskjellige nettlesere , typen enhet som brukes til å se innholdet (en PC eller en smarttelefon ), geografisk plassering eller andre variabler. Konsistens på nettstedet Når CSS brukes effektivt, når det gjelder arv og cascading, kan et globalt stilark brukes til å style et helt nettsted. Hvis disse stilene må endres senere, kan endringene gjøres bare ved å endre reglene i det globale stilarket. Før CSS var dette mye vanskeligere, dyrere og mer tidkrevende. Båndbredde Et internt eller eksternt stilark spesifiserer stilen for et sett med HTML-elementer valgt etter klasse, type eller arv. Dette er mer effektivt enn å gjenta informasjon for hver forekomst av elementet. Et eksternt stilark lagres vanligvis i nettleserens cache , og kan brukes på flere sider uten å lastes inn på nytt, noe som reduserer dataoverføringen over nettverket. sideformatering Med en enkel endring på en enkelt linje kan stilarket for samme side endres. Dette gir fordeler for tilgjengelighet, samt gjør det mulig å tilpasse nettstedet til ulike enheter. tilgjengelighet Uten CSS utformet webdesignere vanligvis sidene sine med elementer som tabeller som gjorde tilgjengeligheten vanskelig for andre brukere, og trakk ned visse bruk av dokumenter av nettlesere rettet mot personer med noen sensoriske begrensninger.

CSS-rammeverk

CSS-rammeverk er biblioteker forberedt for å tillate forenkling og større samsvar med standardene for utforming av nettsider som bruker CSS-språket. Noen av de vanligste CSS-rammeverkene er Foundation , Blueprint , Bootstrap , Cascade Framework og Materialize . Som i programmeringsbiblioteker i skriptspråk, er CSS-rammeverk vanligvis innebygd som eksterne CSS-stilark referert til med <link>. Dette gir et stort antall klare alternativer for design og layout av en nettside. Selv om mange rammeverk allerede er publisert, bruker noen designere dem mest for rask prototyping, eller for læringsformål, og foretrekker å bygge sin egen CSS-kode for hånd. [ 43 ]

Se også

Referanser

  1. ^ "W3C CSS2.1-spesifikasjon for regelsett, deklarasjonsblokker og velgere" . World Wide Web Consortium . Hentet 20. juni 2009 .  Spesifikasjoner for CSS2.1 (på engelsk)
  2. ↑ "CSS-utviklerveiledning" . Mozilla utviklernettverk . Hentet 21. oktober 2016 . 
  3. ↑ "Fremtidens nettbaserte mobilapper som bruker HTML 5, CSS og JavaScript" . www.htmlgoodies.com . Hentet 21. oktober 2016 . 
  4. ↑ "HTML & CSS - W3C" . www.w3.org . Hentet 21. oktober 2016 . 
  5. ↑ RFC 2318 . IETF . (mars 1998)
  6. ^ "Fossen" (på engelsk) . W3C . 12. april 2016. 
  7. ^ "Arv" (på engelsk) . W3C . 12. april 2016. 
  8. ↑ «Posisjoneringsordninger» (på engelsk) . W3C . 12. april 2016. 
  9. ^ a b Lie, Hakon W (10. oktober 1994). Cascading HTML-stilark – et forslag . CERN . Hentet 25. mai 2014 . 
  10. ↑ abcdLie , Håkon Wium ; _ Bos, Bert (1999). Cascading Style Sheets, design for nettet . Addison Wesley. ISBN 0-201-59625-3 . Hentet 23. juni 2010 .  
  11. ↑ "Cascading Style Sheets, nivå 1" . World Wide Web Consortium. 
  12. ^ abc Bos , Bert ( 14. april 1995). "Enkle stilark for SGML og HTML på nettet" . World Wide Web Consortium . Hentet 20. juni 2010 . 
  13. ↑ abc " Cascading Style Sheets " . Universitetet i Oslo. Arkivert fra originalen 4. oktober 2014 . Hentet 3. september 2014 . 
  14. ^ a b Petrie, Charles; Cailliau, Robert (november 1997). "Intervju Robert Cailliau om WWW-forslaget: "Hvordan det virkelig skjedde. " " . Institutt for elektro- og elektronikkingeniører . Arkivert fra originalen 6. januar 2011 . Hentet 18. august 2010 . 
  15. ↑ Bos, Håkon Wium Lie, Bert (1999). Cascading style sheets: designe for nettet (2. utgave). Harlow, Essex, England: Addison-Wesley. ISBN  0-201-59625-3 . 
  16. ↑ Bos, Bert (31. mars 1995). "Strømbasert stilarkforslag" . Hentet 3. september 2014 . 
  17. ↑ Nielsen, Henrik Frystyk (7. juni 2002). "Libwww hackere" . World Wide Web Consortium . Hentet 6. juni 2010 . 
  18. ^ "Yves Lafon" . World Wide Web Consortium . Hentet 17. juni 2010 . 
  19. ^ "W3C-teamet: teknologi og samfunn" . World Wide Web Consortium. 18. juli 2008 . Hentet 2011-01-22 . 
  20. ↑ Lou Montulli ; Brendan Eich ; Scott Furman ; Donna Converse ; Troy Chevalier (22. august 1996). "JavaScript-baserte stilark" . World Wide Web Consortium . Hentet 23. juni 2010 . 
  21. ↑ a b W3C : CSS1-spesifikasjon (på engelsk)
  22. ↑ "CSS2-spesifikasjon" (på engelsk) . W3C . 1998. 
  23. ↑ CSS 2.1 ble utgitt som en anbefalingskandidat 25. februar 2004.
  24. ↑ W3C : CSS2.1 (W3C foreslått anbefaling )
  25. ↑ W3C publiserer CSS2.1-standarden (på engelsk)
  26. ^ a b Bos, Bert (18. februar 2011). "Beskrivelser av alle CSS-spesifikasjoner" . World Wide Web Consortium . Hentet 3. mars 2011 .  Beskrivelse av alle CSS-spesifikasjoner, av W3C (på engelsk)
  27. ↑ Bos, Bert (26. februar 2011). CSS gjeldende arbeid . World Wide Web Consortium . Hentet 3. mars 2011 .  Nåværende arbeider i CSS (på engelsk)
  28. ↑ Etemad, Elika (12. desember 2010). "Cascading Style Sheets (CSS) Snapshot 2010" . World Wide Web Consortium . Hentet 3. mars 2011 .  CSS-definisjoner (2010)
  29. ↑ Clemente Laboreo, Daniel. "Pop-up for IE-brukere" . http://www.danielclemente.com . Hentet 12. november 2017 . 
  30. ↑ "CSS3-løsninger for Internet Explorer – Smashing Magazine" . Smashing Magazine (på amerikansk engelsk) . 28. april 2010 . Hentet 12. oktober 2016 . 
  31. ↑ "Bruk av funksjonsspørringer i CSS ★ Mozilla Hacks – webutviklerbloggen" . hacks.mozilla.org . Hentet 12. oktober 2016 . 
  32. ^ "Ser på nettet med Internet Explorer 6, en siste gang" . Ars Technica . Hentet 12. oktober 2016 . 
  33. ↑ Molly Holzschlag (januar 2012). "Syv ting mangler fortsatt fra CSS" . .net Magazine. Arkivert fra originalen 5. mars 2017 . Hentet 12. november 2017 . 
  34. ^ "Velgere nivå 4 - Bestemme emnet for en velger" . W3.org. Arkivert fra originalen 17. august 2013 . Hentet 13. august 2013 . 
  35. ↑ Snook, Jonathan (oktober 2010). "Hvorfor har vi ikke en foreldrevelger" . snook.ca. Arkivert fra originalen 18. januar 2012 . Hentet 12. november 2017 . 
  36. ↑ "Rene CSS-popups" . meyerweb.com. Arkivert fra originalen 9. desember 2009 . Hentet 19. november 2009 . 
  37. ↑ Tab Atkins Jr. "CSS-anvendelsesregel" . GitHub. Arkivert fra originalen 22. februar 2016 . Hentet 27. februar 2016 . 
  38. ↑ "Støtteslutt for Internet Explorer" . Microsoft . Hentet 27. februar 2016 . 
  39. ^ a b "Om dynamiske egenskaper" . msdn.microsoft.com . Hentet 20. juni 2009 . 
  40. ↑ "Kan jeg bruke... Støttetabeller for HTML5, CSS3, etc." . CanIUse.com. Arkivert fra originalen 4. mars 2016 . Hentet 27. februar 2016 . 
  41. ↑ "CSS Multi-Column Layout Module" . World Wide Web Consortium . Hentet 1. mai 2011 . 
  42. ↑ "Kan jeg bruke... Støttetabeller for HTML5, CSS3, etc." . CanIUse.com . Hentet 27. februar 2016 . 
  43. ^ Cederholm, Dan; Ethan Marcotte (2009). Håndlaget CSS: Mer skuddsikker webdesign . Nye ryttere. s. 114. ISBN  978-0-321-64338-4 . Hentet 19. juni 2010 . 

Eksterne lenker

  • CSS Snapshot 2015 . W3C (på engelsk) . Hentet 10. desember 2015 .   – Dette dokumentet samler i et enkelt dokument alle spesifikasjonene som utgjør den nåværende tilstanden til CSS i 2015.
  • "Cascading Style Sheets (CSS) Snapshot 2010" . W3C (på engelsk) . Hentet 23. juli 2014 .   – Inkluderer lenker til spesifikasjoner.
  • Sammenligning av CSS-gjengivelse i forskjellige motorer (Wikipedia på engelsk)
  • [1] CSS3 Introduksjon
  • Dette verket inneholder en delvis oversettelse hentet fra « Css » av Wikipedia på engelsk, nærmere bestemt denne versjonen , utgitt av utgiverne under GNU Free Documentation License og Creative Commons Attribution-ShareAlike 3.0 Unported License .