Udvidelse | .css |
---|---|
MIME-type | text/css |
Udviklet af | CSS-arbejdsgruppe ( i ) |
Oprindelig version | 17. december 1996 |
Websteder |
www.w3.org/Style/CSS drafts.csswg.org |
De Cascading Style Sheets , almindeligvis kaldet CSS af engelsk Cascading Style Sheets , danner et computersprog , der beskriver indgivelse af dokumenter HTML og XML . De standarder , der definerer CSS offentliggøres af World Wide Web Consortium (W3C). Introduceret i midten af 1990'erne blev CSS meget brugt i webdesign og godt understøttet af webbrowsere i 2000'erne .
Konceptet stilark har været til stede fra begyndelsen af World Wide Web : den første WorldWideWeb -webbrowser gør det muligt at formatere dokumenter ved hjælp af det, der i dag betragtes som et "brugerformatark". Ligeledes bruger browserne Viola i 1992 og Harmony i 1993 en lignende mekanisme til at bestemme gengivelsen af skrifttyper , farver eller tekstjustering.
Dette er dog ikke stilarter bestemt af dokumentets forfatter. HTML også mangler præsentation elementer i sine tidlige år, så der var et stigende pres for browsere til at tillade forfattere til at bestemme layout af websider selv , i en tilgang stammer fra elektronisk print publikation. .
Det var i denne sammenhæng i 1994 - 1995 , at den splinternye Netscape Navigator introducerede de første HTML-præsentationselementer på initiativ af Marc Andreessen , mens de første forslag til eksterne stilarter optrådte samtidigt:
Udseendet af CSS reagerer på et ønske om at "tilbyde et alternativ til udviklingen af HTML fra et strukturerende sprog til et præsentationssprog".
En tredje udviklingssti var også åben på samme tid: DSSSL-transformationssproget for SGML- dokumenter , udviklet af James Clark , antyder muligheden for et stilsprog, der ikke kun er beskrivende og nærmer sig et reelt sprog . Denne sti følges af Netscape, som i 1996 foreslog W3C "JavaScript-baserede stilark" (JSSS), implementeret af Netscape Navigator 4 i 1997 .
Oprindelsen af CSS er derfor knyttet til tre store muligheder:
Den første foreslåede Cascading HTML Style Sheets lavet af Håkon Wium Lie holder opmærksomheden på Dave Raggett , som dengang var hovedredaktør for den foreslåede HTML 3.0-specifikation. En tilhænger af rent strukturel HTML opfordrede han til offentliggørelse af et CHSS-arbejdsdokument, så det kunne præsenteres og drøftes på den anden internationale konference om WWW ( Mosaic and the Web , Chicago, 1994). Han ændrede også med Håkon Lie Arena- browseren for at teste dette sprog og demonstrerede det på den tredje WWW-konference i 1995.
Samtidig besluttede Bert Bos , der arbejdede på Argo- browseren på det tidspunkt , og som havde indsendt sit eget " Stream-based Style Sheet Proposal " (SSP) til W3C , at slutte sig til hans indsats med Håkon Lie. Efter at SSP er udviklet med tanken om at være anvendelig ikke kun til HTML, men også til andre markup-sprog, tager Bert Bos og Håkon Lie dette mål op og gør det til et af nøgleegenskaberne i det, der derefter bliver CSS korrekt sagt.
Et andet aspekt af CSS er derfor afgørende i lyset af eksisterende alternativer: CSS er det første sprog, der inkluderer ideen om "cascade" ( cascading style sheet ), det vil sige muligheden for, at stilen til et dokument er arvet fra flere "stilark". Dette gør det muligt at skille mellem flere konkurrerende kilder til formatering af et element og svarer derfor på behovet for at komponere mellem stilistiske præferencer hos forfatterne og brugerne.
Den World Wide Web Consortium (W3C) blev taget i brug i 1995, og www-stil postlisten den blev oprettet. Samme år blev der afholdt et “W3C-stilarkværksted” i Paris, der var afgørende for fremtiden for CSS. Især bekræfter det ønsket om at holde stilarkene i en enkel form, hvilket udelukker Netscapes JSSS-hypotese. Derudover annoncerer Thomas Reardon (Microsoft) den fremtidige understøttelse af CSS i fremtidige versioner af Internet Explorer : Derfor, når W3C opretter i slutningen af året " HTML Editorial Review Board " (HTML ERB) for at ratificere den fremtidige HTML, DOM- og CSS-specifikationer, Netscape, repræsenteret af Lou Montulli , slutter sig endelig til CSS-projektet ledet af Bert Bos og Håkon Lie.
I modsætning til software er CSS-specifikationer ikke udviklet i på hinanden følgende versioner, hvilket gør det muligt for en browser at henvise til en bestemt version. CSS er udviklet af "niveauer", som tvinger hvert nyt niveau til at integrere det forrige, og hver implementering er kompatibel med det forrige: CSS1 er derfor udviklet til at være en delmængde af CSS2, som selv er udviklet til at være en delmængde af CSS3. Dette forklarer delvist langsomheden ved den normative udvikling af CSS.
Den endelige CSS1-specifikation blev offentliggjort den 17. december 1996 og definerede omkring halvtreds ejendomme. CSS1 er defineret som en "enkel stilarkmekanisme, der gør det muligt for forfattere og læsere at vedhæfte typografier (...) til HTML-dokumentet". Denne enkelhed oversættes til valget af et sprog, der let kan læses og skrives direkte af dets menneskelige brugere, og af en terminologi, der er i overensstemmelse med almindelig anvendelse i computerudgivelse. Det mulige valg af at udtrykke CSS i en XML- eller SGML-syntaks, der regelmæssigt nævnes for at undgå implementeringen af en ny tilstand for syntaktisk analyse, er derfor definitivt udelukket.
CSS1 beskriver ikke kun sin egen grammatik : dette første niveau beskriver faktisk en grammatik, der er beregnet til at give efterfølgende niveauer mulighed for at tilføje nye funktioner, samtidig med at de originale implementeringer muliggør læsning af disse fremtidige stilark. Disse nye funktioner forstås ikke af de originale implementeringer, men kan identificeres som sådan og ignoreres. CSS garanterer således dets bagudkompatibilitet .
CSS1 definerer i det væsentlige de typografiske gengivelsesegenskaber for tekst: skrifttyper (skrifttyper), farve, skriftstørrelse, vægt , afstand, kanter og styring af listemarkører.
Der er derfor endnu ikke tale om "layout": ejendommen float, som efterfølgende vil blive brugt i vid udstrækning til det overordnede CSS-layout af webdesign, er derefter kun tænkt som et middel til at placere en lille del af den lokalt, side ved siden af den. indhold, f.eks. et billede, og resten af teksten. I betragtning af de problematiske CSS1-implementeringer er kapring af HTML-elementet tabletil at håndtere det overordnede layout stadig den mest almindelige løsning for webindholdsforfattere.
I 1996 var Internet Explorer 3.0 den første kommercielle browser, der delvist implementerede CSS, mens den stadig er under formulering. Denne tidlige implementering, ledet af Chris Wilson, stemmer ikke overens med den endelige specifikation. I 1997 så Internet Explorer 4.0 fødslen af en ny gengivelsesmotor , Trident , ved oprindelsen af den voksende, men problematiske support til CSS i de forskellige versioner af denne browser under Windows, op til Internet Explorer 7 inkluderet.
Netscape Navigator 4.0 fulgte trop i 1997 på trods af sin historiske modvilje mod CSS: i forbindelse med browserkrigene var det vigtigste at undgå, at Microsoft kunne hævde sig selv som den browser, der var mere kompatibel. Imidlertid viser denne hurtige implementering, baseret på interne JavaScript- metoder , i sidste ende at være begrænset og meget upålidelig. Netscape Navigator 4.0 bringer også en JSSS-implementering, som ikke følger med. Vi bliver nødt til at vente på den nye Gecko- gengivelsesmotor fra Mozilla-projektet for at opnå en ægte implementering af CSS1.
I 1998, da browserkrigene mellem Netscape og Microsoft sluttede , opnåede Opera 3.5, hvoraf Håkon Lie i mellemtiden var blevet teknisk direktør, en mere komplet implementering af CSS1, lettet ved udgivelsen af den første "Test-suite" til Cascading Style Sheets (CSS) niveau 1 ”oprettet primært af Eric Meyer til W3C. Tilstedeværelsen af disse testpakker viser sig at være en stor fordel både for implementeringer i browsere og for forfatternees anvendelse af CSS-teknikker (ved at give detaljerede eksempler på egenskaberne og deres værdier).
Endelig under ledelse af Tantek Çelik , Internet Explorer 5.0 til Macintosh, der blev lanceret i marts 2000 , baseret på Tasman , en specifik gengivelsesmotor, der ikke er relateret til Trident, er den første browser, der fuldt ud (over 99%) understøtter CSS1. For at sikre kompatibilitet med de tidligere kodningsmetoder, der er specifikke for hver implementering ("tag suppe"), og for at tillade korrekt visning af webdokumenter, uanset om de respekterer CSS og HTML-standarder eller ej, er han også den første til at implementere doktype-skifteteknikken . Senere vedtaget af alle browsere blev dette senere en af nøglerne til den progressive implementering af CSS: det giver faktisk browseren mulighed for at beholde gamle proprietære implementeringer af kompatibilitetsårsager, samtidig med at det har mulighed for at vælge i henhold til syntaksen for dokumenttypedeklarationen på siden til en gengivelsestilstand, der overholder nye standardimplementeringer.
I denne periode i slutningen af 1990'erne var webdesign primært afhængig af brugen af HTML som præsentationsformat. Netscapes nederlag i slutningen af browser-krigene, fornyelsen, der fulgte via Mozilla-projektet, udseendet af IE5 Mac og i mindre grad udviklingen af Internet Explorer Windows 5.x, dog i starten af 2000'erne , begyndte et nyt stadium i udviklingen af forfatteres udvikling af webstedsdesign: disse browsere gør det faktisk muligt at vise, at historisk praksis, der stammer fra browserkrigstidspunktet, blanding af struktur og præsentation, faktisk kan opgives til fordel for en tilgang baseret på stilark og mere generel respekt for webstandarder (i betydningen HTML og CSS). Jeffrey Zeldman , medstifter af Web Standards Project og grundlægger af A List Apart (in) i 1998, fremtræder derefter som den symbolske figur af denne bevægelse for at fremme standarder . Han er også inspirationen til en “hybrid” designtilgang, der udnytter CSS-teknikker, mens han midlertidigt forbliver inden for rammerne af formatering af dokumenter baseret på præsentationstabeller.
CSS2, forhastede ambitionerFor at imødekomme de behov, som den første CSS1-specifikation endnu ikke dækkede, blev CSS i 1997 tildelt en ny arbejdsgruppe inden for W3C med Chris Lilley som formand . I 2007 omfattede denne gruppe repræsentanter fra Apple , Google , IBM , Microsoft , Adobe , Mozilla Foundation og Opera .
Udgivet som en anbefaling i maj 1998 udvider det andet niveau af CSS betydeligt de teoretiske muligheder for kaskade stilark, især med omkring 70 yderligere ejendomme. Ud over den typografiske formatering af teksten startet med CSS1:
Denne funktionelle rigdom møder dog kun et begrænset ekko i implementeringerne:
Flere årsager er nævnt for at forklare disse vanskeligheder og langsommigheden af CSS2-implementeringer:
Feedback fra implementeringen af CSS2 fik W3C CSS-arbejdsgruppen til at skrive fra 2001 en revideret version CSS 2.1 (" CSS niveau 2, revision 1 ") på baggrund af, hvad der faktisk blev vedtaget af de forskellige browsere. Formålet med denne gennemgang er:
CSS 2.1 korrigerer CSS2 på mange detaljeringspunkter, fjerner visse sektioner helt eller delvist (de vokale stilarter defineret under " lyd " medietypen , udskrivningsformaterne, de skrifttyper, der kan downloades, hvoraf de mere overbevisende definitioner afvises til fremtiden CSS3), og forklarer det baseret på fund opdateret under implementeringer (avanceret styring af flydende blokke via "formateringskontekster").
Efter at have haft 8 på hinanden følgende versioner er CSS 2.1 i juli 2007 en kandidatanbefaling, det vil sige den standard, som implementeringer skal følge.
I 2007 havde ingen browser faktisk afsluttet integrationen af CSS 2.1: dette ville blive implementeret med 56% af Internet Explorer 7, 91% af Firefox 2 og 94% af Opera 9. Derudover har kun en del af de grafiske browsere bestået eller bibeholdt som mål Acid2- testen , der blev lanceret i 2005 af Web Standards Project på initiativ af Håkon Lie, især for at fremme implementeringen af et valg af CSS 2.1-funktioner, der anses for at være de vigtigste nødvendige fremskridt: positionering af elementer under visning, generalisering af tabelgengivelsesmodellen til alle elementer, indhold genereret via CSS. Professionel brug af CSS er derfor fortsat begrænset til en vilkårlig delmængde deraf, bestemt af almindelige implementeringer.
Udviklingen af det tredje niveau af kaskadestilark begyndte allerede i 1999 sammen med CSS 2.1.
CSS3 bliver "modulært" for at lette opdateringerne, men også implementeringen af brugeragenter med stadig mere forskellige kapaciteter og behov (grafiske browsere, mobile browsere, stemmebrowsere). Browsere kan således implementere undersæt af CSS3.
Derfor varierer graden af fremskridt for CSS3 alt efter modulerne og den prioritetsgrad, som CSS-arbejdsgruppen giver dem. I 2007 vedrører de mest avancerede moduler (kandidatanbefalinger):
I andre tilfælde kan moduler nå til kandidatanbefalingsfasen, men derefter bringes tilbage til arbejdsdokumentfasen på grund af vanskeligheder, der er opdateret efter indkaldelsen til implementering. Dette er for eksempel tilfældet med typografimodulet “CSS Text”.
Ligeledes varierer implementeringer alt efter forskellige browsers strategier og behov:
En hollandsk programmør, Jori Koolstra, foreslog i 2002 forestillingen om dynamiske kaskadestilark .
Nogle medlemmer af CSS-arbejdsgruppen såvel som webudviklere rejste spørgsmålet om CSS3's langsomme fremskridt:
I 2008 blev intet modul betragtet som færdigt af W3C, og implementeringen i browsere er derfor marginal, ofte som en test, ligesom funktionerne -moz-xxx i Gecko-motoren , hvis præfiks begrænser brugen til kun Gecko-baserede browsere.
Skrivningen af det fjerde niveau af cascading-stilark begynder i 2010 sammen med CSS 3-modulerne.
Nogle moduler er nedfrosset eller i færd med at blive sådan, der lanceres kladder for at fortsætte med at udvide mulighederne for sidstnævnte. Arbejdet udføres derfor ud over det forrige lag eller endda ved at tage det nederste lag til vælgerne.
Et af de vigtigste mål for CSS er at tillade formatering uden for dokumenter. Det er for eksempel muligt kun at beskrive strukturen i et dokument i HTML og at beskrive hele præsentationen i et separat CSS-stilark. Styles anvendes i sidste øjeblik i webbrowseren for besøgende, der ser dokumentet. Denne adskillelse giver en række fordele, der gør det muligt at forbedre tilgængeligheden , ændre præsentationen lettere og reducere kompleksiteten af arkitekturen i et dokument.
Således er fordelene ved stilark flere:
CSS giver dig mulighed for at definere gengivelsen af et dokument i henhold til gengivelsesmediet og dets kapaciteter ( skærmtype eller stemmeenhed ), browserens ( tekst eller grafik) samt brugerens præferencer.
Styleark kan differentieres for følgende medier i henhold til CSS2.1:
Andre typer medier er teoretisk forudset i CSS2.1-specifikationen, men implementeres ikke af brugeragenter: brailleog embossedtil punktskriftstabletter og embossere såvel som ttytil teleprintere .
I hvert medium kombineres præsentationsformaterne, der er bestemt af dokumentets forfatter, med standardindstillingerne for brugeragenten og dem, der stammer fra brugerens præferencer og personlige konfiguration.
Modtagerens muligheder kan tages i betragtning af forfatterne, der er beregnet til brugeragenter, der implementerer CSS3 " medieforespørgsler " -modulet : Dette gør det muligt at betingelse for, at der tages hensyn til et stilark til begrænsninger, der især vedrører opløsningen eller evne til at gendanne farver.
Kaskade af stilarter"Kaskaden" er kombinationen af forskellige kilder til stilarter anvendt på det samme dokument i henhold til deres respektive prioritetsgrad. Forskellige kaskadetilstande kan kombineres:
Gengivelsen af et stilfuldt dokument bestemmes af begreberne box and flow. CSS-gengivelsesmotoren etablerer en "formateringsstruktur", der afspejler dokumentets logiske træ . Hvert element i denne struktur genererer en eller flere zoner udstyret med konfigurerbare display- eller talegengivelsesegenskaber. Visningen eller læsningen finder sted fra strømmen af felter, der successivt genereres for hvert element, da det vises i den lineære rækkefølge af formateringsstrukturen.
Afhængigt af tilfældet er disse forskellige typer kasser:
De karakteristika, der gælder for CSS-felter, udtrykkes i form af par propriété: valeur.
Egenskaber er mærket med engelske værktøjsord som " bredde ", " skriftstørrelse " eller " stemmevolumen ".
Værdierne kan, afhængigt af tilfældet, udtrykkes ved hjælp af enheder, der er standardiseret andetsteds, eller nøgleord, der er specifikke for CSS. For eksempel kan en baggrunds- eller tekstfarve udtrykkes ved hjælp af RGB- modellen eller nøgleordene sort, blå, fuchsia osv.
CSS-egenskaber er blevet etableret baseret på et kompromis mellem to modsatte begrænsninger: hvilket gør det lettere for brugeragenter at læse typografiark ved at multiplicere individuelle egenskaber eller gøre det lettere for forfattere at skrive ved hjælp af et mindre antal kombinerede egenskaber. For eksempel bestemmes placeringen af et baggrundsbillede af en enkelt egenskab ( background-position), der kombinerer både abscissa- og ordinatværdier og ikke af to separate egenskaber. På samme måde er der forkortede egenskaber, der gør det muligt for forfattere at forenkle skrivningen af en række egenskaber: genvejen fonttillader f.eks. At opsummere i en enkelt regel alle egenskaberne for skrifttype, størrelse, liniehøjde, store og små bogstaver. Imidlertid gør brugen af "/" -tegnet parsing af typografiark af brugeragenter meget mere kompliceret.
Vælgere og regelblokkeEgenskaberne er grupperet efter regelblokke, afgrænset af seler {}. Hver blok indledes med en vælger, der angiver de strukturelle elementer, som de pågældende egenskaber skal anvendes på:
/*Je suis un commentaire qui commente le code et qui ne fait rien*/ body { /*Couleur de fond : */ background-color: green; } p { /*Couleur du texte : */ color: red; /*Taille du texte en px (pixel) : */ font-size: 20px; } button { /*Contour : */ outline: none; /*Bordure*/ border: none; /*Couleur de fond : */ background-color: black; /*Couleur de texte : */ color: white; } /*Hover veut dire au survol d'un bouton*/ button:hover { /*Couleur de fond : */ background-color: green; } /*Selection veut dire à la selection du texte*/ *::selection { /*Couleur de fond : */ background-color: black; /*Couleur du texte : */ color: white; } CSSOOObjektorienteret CSS (på engelsk OOCSS ) er en metode oprettet i 2009 efter modellen af objektorienteret programmering , der gør det muligt at genbruge dens stilarter i flere sammenhænge.
BEMBEM (Block, element, modifier) er en CSS-skriveteknik, der blev opfundet i 2010 og består i at erklære stilarter i form af en træstruktur for at forbedre ydeevnen. Eksempel:
.product { &-productLabel { ... } &-productPicture { ... } }NB: ampersand (&) repræsenterer det overordnede objekt i Sass og LESS .
Indholdet af filen index.html :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"/> <title>Exemple html et css</title> </head> <body> <button class="btn" id="btn1">Premier bouton</button><br/><br/> <button class="btn" id="btn2">Deuxième bouton</button><br/><br/> <button class="btn" id="btn3">Troisième bouton</button> </body> </html>Indhold i filen style.css :
.btn { height: 50px; color: white; font-size: 20px; cursor: pointer; transition: background-color 2s; outline: none; border: none; } *::selection { background-color: lightgreen; color: darkblue; } .btn:hover { transition: background-color 2s; } #btn1 { background-color: lightgreen; } #btn1:hover { background-color: darkgreen; } #btn2 { background-color: lightblue; } #btn2:hover { background-color: darkblue; } #btn3 { background-color: red; } #btn3:hover { background-color: orange; }Åbning af HTML-filen i en browser viser de typografier, der er konfigureret med CSS-filen.
CSS stræbte oprindeligt efter at være uafhængig mellem struktur og præsentation af et dokument.
Således er CSS Zen Garden-webstedet , oprettet i 2003 af Dave Shea (en) , beregnet til at demonstrere muligheden for frit at ændre den viste gengivelse af den samme webside kun takket være CSS og uden nogen ændring af dens kode. HTML: i december 2006 præsenterede den 986 forskellige designs til sin hjemmeside. Imidlertid er de fleste af disse designs helt eller delvist baseret på erstatning af sidens tekstindhold med CSS-billeder, der gengiver det ved at berige dets udseende: grafisk frihed er altid delvist baseret på transformation af tekst til billeder. På den anden side forbliver CSS Zen Garden en stiløvelse begrænset til et enkelt dokument med en struktur kombineret med semantisk neutrale elementer og attributter, som kun tjener til at understøtte CSS-vælgere.
Selv om der er mange eksempler på HTML-dokumenter, hvor flere stilark er blevet udviklet, er der kun få eksempler på generiske typografiark, der er uafhængige af dokumentstrukturen. Standardbrugeragentformater er et eksempel på dette, men begrænset til enkle typografiske effekter uden layoutdefinition. Generelt er typografiark nøje afhængig af strukturen i det dokument, der skal styles, og er vanskelige at genbruge på forskellige strukturerede dokumenter. Det er mere gennem oprettelsen af HTML CSS-mønstre, at denne potentielle uafhængighed af stilarter over for den specifikke struktur af dokumenter udnyttes.
Mere generelt :
CSS fremmer tilgængeligheden af en webside ved i sidste ende at give brugeren kontrol over gengivelsen af et dokument i sin browser: det er således muligt at tilpasse det til begrænsninger eller præferencer vedrørende f.eks. Skærmstørrelse på tegn eller farver. Ved at adskille struktur og præsentation fremmer CSS også skrivning af semantiske strukturerede dokumenter, potentielt mere anvendelige af tekniske hjælpemidler: friheden til præsentation af titelelementerne gør det f.eks. Muligt nøje at respektere den formelle hierarkiske rækkefølge af disse. igen giver tekniske hjælpemidler mulighed for at etablere en navigerbar indholdsfortegnelse. Endelig ved at give forfattere midlerne til at berige formateringen af teksten gør CSS det muligt at begrænse brugen af tekster, der er sat i billeder.
Dog kan nogle anvendelser af CSS også kompromittere tilgængeligheden af indhold:
Metoderne til anvendelse af direktiver om tilgængelighed på webindhold (f.eks. RGAA , UWEM ) definerer derfor regler for brug af CSS-stilarter.
CSS reagerer på et ønske om at have et simpelt præsentationsformat, både i dets funktionalitet og i sin syntaks, for at fremme direkte manipulation af forfattere og brugere. Denne enkelhed sættes imidlertid i tvivl af flere faktorer:
CSS-rammer er forberedte biblioteker, der er beregnet til at muliggøre lettere, mere standardkompatibel styling af websider ved hjælp af sproget i kaskadestilark. De inkluderer Blueprint , Bootstrap , Cascade Framework og Foundation . Ligesom programmeringssprog og scriptbiblioteker er CSS-rammer normalt indarbejdet som eksterne .css-ark, der henvises til i HTML "<head>". De giver en række færdige muligheder for webdesign og layout. Selvom mange af disse rammer er blevet frigivet, bruger nogle forfattere dem primært til hurtig prototyping eller til læring og foretrækker "håndlavet" CSS, som er passende for alle udgivne websteder uden de tilknyttede omkostninger til design, vedligeholdelse og download. Frem for mange ubrugte funktioner. . i stil med webstedet.
Da størrelsen på CSS-ressourcer, der bruges i et projekt, øges, skal et udviklingsteam ofte beslutte en fælles designmetode for at holde dem organiseret. Målene er nem udvikling, let samarbejde under udvikling og ydeevne for stilark, der er implementeret i browseren. Populære metoder inkluderer OOCSS (Object Oriented CSS), ACSS (Atomic CSS), oCSS (Organic Cascading Style Sheet), SMACSS (Scalable and Modular Architecture for CSS) og BEM (Block, Element, Modifier).