Rozšíření | .css |
---|---|
Typ MIME | text/css |
Vyvinul | Pracovní skupina CSS ( in ) |
Počáteční verze | 17. prosince 1996 |
Webové stránky |
www.w3.org/Style/CSS drafts.csswg.org |
Tyto kaskádových stylů , běžně nazývaná CSS of English kaskádových stylů , vytvoří programovací jazyk , který popisuje prezentaci dokumentů HTML a XML . Tyto standardy definující CSS jsou publikovány World Wide Web Consortium (W3C). CSS, který byl zaveden v polovině 90. let 20. století , se široce používal ve webovém designu a ve 2. letech 20. století byl dobře podporován webovými prohlížeči .
Koncept šablony stylů je přítomen od začátku World Wide Web : první webový prohlížeč WorldWideWeb umožňuje formátování dokumentů pomocí toho, co by se dnes považovalo za „šablonu uživatelských stylů“. Podobně prohlížeče Viola v roce 1992 a Harmony v roce 1993 používají podobný mechanismus k určení vykreslení písem , barev nebo zarovnání textu.
Nejedná se však o styly určené autorem dokumentu. V počátečních letech HTML také postrádalo prvky prezentace, takže v prohlížečích rostl tlak na to, aby autorům umožňovali určit rozložení samotných webových stránek, a to v přístupu odvozeném z elektronické tiskové publikace .
To bylo v této souvislosti v roce 1994 - 1995 , aby zcela nový Netscape Navigator představil první prezentaci HTML prvků na podnět Marc Andreessen , zatímco první návrhy na externí styly se objevily současně:
Vzhled CSS reaguje na přání „nabídnout alternativu k vývoji HTML ze strukturovacího jazyka na prezentační jazyk“.
Současně byla otevřena také třetí vývojová cesta: transformační jazyk DSSSL dokumentů SGML vyvinutý Jamesem Clarkem naznačuje možnost nejen stylového jazyka, který je nejen popisný, ale přibližuje se skutečnému programovacímu jazyku . Po této cestě následuje Netscape, který v roce 1996 navrhl W3C „JavaScript-Based Style Sheets“ (JSSS), implementovaný Netscape Navigator 4 v roce 1997 .
Počátky CSS jsou proto spojeny se třemi hlavními možnostmi:
První navrhované kaskádové šablony stylů HTML, které vytvořil Håkon Wium Lie, upoutají pozornost Dave Raggetta , který byl poté hlavním editorem navrhované specifikace HTML 3.0. Zastánce čistě strukturálního HTML podpořil vydání pracovního dokumentu CHSS, aby mohl být představen a diskutován na druhé mezinárodní konferenci o WWW ( Mosaic and the Web , Chicago, 1994). Upravil také pomocí prohlížeče Håkon Lie the Arena , aby tento jazyk otestoval, a předvedl to na třetí WWW konferenci v roce 1995.
Ve stejné době se Bert Bos , který v té době pracoval na prohlížeči Argo , který W3C předložil svůj vlastní „ Stream-based Style Sheet Návrh “ (SSP), rozhodl spojit své úsilí s úsilím Håkon Lie. Bert Bos a Håkon Lie, kteří vyvinuli SSP s myšlenkou použitelnosti nejen na HTML, ale také na jiné značkovací jazyky, se tohoto cíle chopili a učinili z něj jednu z klíčových charakteristik toho, co se poté správně říká CSS.
Vzhledem k existujícím alternativám je proto rozhodující další aspekt CSS: CSS je prvním jazykem, který zahrnuje myšlenku „kaskády“ ( kaskádové šablony stylů ), to znamená možnost stylu „dokumentu zděděno z více "stylů". To umožňuje rozhodovat mezi několika konkurenčními zdroji formátování prvku, a proto reaguje na potřebu komponovat mezi stylistickými preferencemi autorů a uživatelů.
World Wide Web Consortium (W3C) byla uvedena do provozu v roce 1995, a mailing list www-styl byl vytvořen. Ve stejném roce se v Paříži konal „workshop stylů W3C“ rozhodující pro budoucnost CSS. Zejména potvrzuje přání zachovat šablony stylů v jednoduché formě, což vylučuje hypotézu JSSS Netscape. Kromě toho Thomas Reardon (Microsoft) oznamuje podporu budoucí CSS v budoucích verzích Internet Exploreru : proto, když W3C vytváří na konci roku „ HTML Editorial Review Board “ (HTML ERB), aby ratifikovaly budoucí HTML, Specifikace DOM a CSS, Netscape, zastoupený Lou Montulli , se konečně připojí k projektu CSS pod vedením Berta Bosa a Håkon Lie.
Na rozdíl od softwaru nejsou specifikace CSS vyvíjeny v po sobě jdoucích verzích, což by umožňovalo prohlížeči odkazovat se na konkrétní verzi. CSS je vyvíjen pomocí „levels“, což nutí každou novou úroveň integrovat předchozí, a každá implementace je kompatibilní s předchozí: CSS1 je proto vyvinut jako podmnožina CSS2, která je sama vyvinuta jako podmnožina CSS3. To částečně vysvětluje pomalost normativního postupu CSS.
Konečná specifikace CSS1 byla zveřejněna 17. prosince 1996 a definovala přibližně padesát vlastností. CSS1 je definován jako „jednoduchý mechanismus šablony stylů, který umožňuje autorům a čtenářům připojit styly (…) k dokumentu HTML“. Tato jednoduchost se promítá do volby jazyka, který lze snadno číst a psát přímo jeho lidskými uživateli, a terminologie odpovídající běžnému použití v počítačovém vydávání. Možná volba vyjádření CSS v syntaxi XML nebo SGML, která je pravidelně zmiňována, aby se zabránilo implementaci nového režimu syntaktické analýzy, je proto definitivně vyloučena.
CSS1 nepopisuje pouze svou vlastní gramatiku : tato první úroveň skutečně popisuje gramatiku, která má umožnit dalším úrovním přidávat nové funkce, a zároveň umožňuje čtení těchto budoucích seznamů stylů původními implementacemi. Tyto nové funkce nebudou původními implementacemi pochopeny, ale mohou být jako takové identifikovány a ignorovány. CSS tak zaručuje jeho zpětnou kompatibilitu .
CSS1 v zásadě definuje typografické vlastnosti vykreslování textu: písma (fonty), barvu, velikost písma, váhu , mezery, ohraničení a správu značek seznamu.
O „rozvržení“ tedy zatím není pochyb: vlastnost float, která bude následně značně využívána pro celkové rozvržení CSS webových návrhů, je pak koncipována pouze jako prostředek k umístění lokálně, vedle ní, malé části obsah, například obrázek, a zbytek textu. Vzhledem k problematickým implementacím CSS1 zůstává prozatím tablenejběžnějším řešením pro autory webového obsahu únos prvku HTML za účelem zpracování celkového rozvržení.
V roce 1996 byl Internet Explorer 3.0 prvním komerčním prohlížečem, který částečně implementoval CSS, zatímco se stále ještě formuluje. Tato raná implementace vedená Chrisem Wilsonem neodpovídá konečné specifikaci. V roce 1997, Internet Explorer 4.0 se zrodil nový renderovací engine , Trident , na počátku vegetačního ale problematické podporu CSS v různých verzích tohoto prohlížeče ve Windows, a to až do Internet Explorer 7 v ceně.
Netscape Navigator 4.0 ho následoval v roce 1997, a to navzdory své historické neochotě vůči CSS: v souvislosti s válkami prohlížečů bylo hlavní zabránit tomu, aby se Microsoft dokázal prosadit jako prohlížeč nejvíce vyhovující. Tato rychlá implementace založená na interních metodách JavaScriptu se však nakonec ukázala být omezená a velmi nespolehlivá. Netscape Navigator 4.0 také přináší implementaci JSSS, která bude bez povšimnutí. Abychom dosáhli skutečné implementace CSS1, budeme si muset počkat na nový vykreslovací modul Gecko z projektu Mozilla .
V roce 1998, kdy války prohlížečů mezi Netscape a Microsoftem skončily, dosáhla Opera 3.5, jejíž Håkon Lie se mezitím stal technickým ředitelem, úplnější implementaci CSS1 usnadněnou vydáním první „Testovací sady“ pro kaskádové styly (CSS) úrovně 1 “vytvořené primárně Ericem Meyerem pro W3C. Přítomnost těchto testovacích sad se ukazuje jako hlavní výhoda jak pro implementace v prohlížečích, tak pro osvojení technik CSS autory (poskytnutím podrobných příkladů vlastností a jejich hodnot).
A konečně, pod vedením Tanteka Çelika , byl v březnu 2000 spuštěn Internet Explorer 5.0 pro Macintosh založený na Tasmanu , konkrétním vykreslovacím modulu, který nesouvisí s Tridentem, prvním prohlížečem, který plně (přes 99%) podporuje CSS1. Aby zajistil kompatibilitu s předchozími postupy kódování specifickými pro každou implementaci („polévka značky“), a umožnil správné zobrazení webových dokumentů, ať už respektují standardy CSS a HTML, nebo ne, je také prvním, kdo implementuje techniku přepínání doctype . Později byl přijat všemi prohlížeči a později se stal jedním z klíčů postupné implementace CSS: skutečně umožňuje prohlížeči zachovat si staré proprietární implementace z důvodů kompatibility, přičemž má možnost volby podle syntaxe deklarace typu dokumentu stránky, pro režim vykreslování vyhovující novým standardním implementacím.
Během tohoto období na konci 90. let byl webový design primárně závislý na použití HTML jako formátu prezentace. Porážka Netscape na konci válek prohlížečů, obnova, která následovala prostřednictvím projektu Mozilla, vzhled IE5 Mac a v menší míře vývoj Internet Exploreru Windows 5.x, nicméně na začátku 2000s , začala nová etapa ve vývoji postupů při navrhování webových stránek autory: tyto prohlížeče skutečně umožňují ukázat, že od historických praktik pocházejících z dob válek prohlížeče, směšovací struktury a prezentace lze ve skutečnosti upustit ve prospěch přístupu na základě stylů a obecnějšího respektování webových standardů (ve smyslu HTML a CSS). Jeffrey Zeldman , spoluzakladatel Web Standards Project a zakladatel A List Apart (in) v roce 1998, se poté jeví jako symbolická postava tohoto hnutí na podporu standardů . Je také inspirací pro „hybridní“ designový přístup, který využívá techniky CSS a dočasně zůstává v rámci formátování dokumentů na základě prezentačních tabulek.
CSS2, uspěchané ambiceAby byly splněny potřeby, které první specifikace CSS1 ještě nepokrývala, byl CSS v roce 1997 přidělen k nové pracovní skupině v rámci W3C, které předsedal Chris Lilley . V roce 2007 do této skupiny patřili zástupci společností Apple , Google , IBM , Microsoft , Adobe , Mozilla Foundation a Opera .
Druhá úroveň CSS, která byla vydána jako doporučení v květnu 1998 , značně rozšiřuje teoretické možnosti kaskádových stylů, zejména s přibližně 70 dalšími vlastnostmi. Kromě typografického formátování textu zahájeného pomocí CSS1:
Toto funkční bohatství však ve svých implementacích splňuje pouze omezenou ozvěnu:
Je uvedeno několik příčin, které vysvětlují tyto potíže a pomalost implementací CSS2:
Zpětná vazba od implementace CSS2 vedla pracovní skupinu W3C CSS k tomu, aby od roku 2001 napsala revidovanou verzi CSS 2.1 („ CSS úroveň 2, revize 1 “) na základě toho, co bylo ve skutečnosti přijato různými prohlížeči. Cíle tohoto přezkumu jsou:
CSS 2.1 opravuje CSS2 v mnoha bodech detailu, odstraňuje určité části úplně nebo zčásti (vokální styly definované pod „ zvukovým “ typem média , styly tisku, písma ke stažení, z nichž jsou přesvědčivější definice do budoucna odmítnuty. CSS3) a vysvětluje to na základě zjištění aktualizovaných během implementací (pokročilá správa plovoucích bloků pomocí „formátovacích kontextů“).
Po vyzkoušení 8 po sobě jdoucích verzí je CSS 2.1 v červenci 2007 doporučeným kandidátem, tedy standardem, který musí implementace dodržovat.
V roce 2007 žádný prohlížeč ve skutečnosti nedokončil integraci CSS 2.1: toto by bylo implementováno na 56% Internet Explorer 7, 91% Firefox 2 a 94% Opera 9. Kromě toho má pouze část grafických prohlížečů úspěšně prošly nebo zachováno jako cíl Acid2 testu , který byl zahájen v roce 2005 podle standardů Project Web , na podnět Håkon Lie, a to zejména na podporu provádění výběru CSS 2.1 funkcionalit které jsou považovány za hlavní nezbytný pokrok: polohování prvky během zobrazení, zobecnění modelu vykreslování tabulky na všechny prvky, obsah generovaný pomocí CSS. Profesionální použití CSS proto zůstává omezeno na jeho libovolnou podmnožinu určenou běžnými implementacemi.
Vývoj třetí úrovně kaskádových stylů začal současně s CSS 2.1 již v roce 1999.
CSS3 se stává „modulárním“ s cílem usnadnit jeho aktualizace, ale také jeho implementaci uživatelskými agenty se stále rozmanitějšími kapacitami a potřebami (grafické prohlížeče, mobilní prohlížeče, hlasové prohlížeče). Prohlížeče tak mohou implementovat podmnožiny CSS3.
Míra pokroku CSS3 se proto liší podle modulů a stupně priority, které jim dává pracovní skupina CSS. V roce 2007 se nejpokročilejší moduly (doporučení kandidátů) týkají:
V ostatních případech mohou moduly dosáhnout fáze doporučení kandidáta, ale následně budou vráceny zpět do fáze pracovního dokumentu kvůli obtížím aktualizovaným po výzvě k provedení. To je například případ typografického modulu „CSS Text“.
Podobně se implementace liší podle strategií a potřeb různých prohlížečů:
Nizozemský programátor Jori Koolstra navrhl v roce 2002 pojem dynamických kaskádových stylů .
Někteří členové pracovní skupiny pro CSS, stejně jako weboví vývojáři, nastolili problém pomalého vývoje CSS3:
V roce 2008 nebyl W3C považován za dokončený žádný modul, a implementace v prohlížečích je proto okrajová, často jako test, podobně jako funkce -moz-xxx motoru Gecko , jehož předpona omezuje použití pouze na prohlížeče založené na Gecko.
Psaní čtvrté úrovně kaskádových šablon stylů začíná v roce 2010 spolu s moduly CSS 3.
Některé moduly jsou zmrazeny nebo právě probíhají, jsou spuštěny koncepty, které nadále rozšiřují možnosti těchto modulů. Práce se proto provádí navíc k předchozí vrstvě nebo dokonce odebráním spodní vrstvy pro selektory.
Jedním z hlavních cílů CSS je umožnit formátování mimo dokumenty. Je například možné popsat pouze strukturu dokumentu v HTML a popsat celou prezentaci v samostatné šabloně stylů CSS. Styly se aplikují na poslední chvíli ve webovém prohlížeči návštěvníků prohlížejících dokument. Toto oddělení poskytuje řadu výhod, které umožňují zlepšit přístupnost , snadněji změnit prezentaci a snížit složitost architektury dokumentu.
Výhody šablon stylů jsou tedy různé:
CSS umožňuje definovat vykreslení dokumentu podle vykreslovacího média a jeho schopností (typ monitoru nebo hlasového zařízení ), možností prohlížeče ( text nebo grafika), stejně jako preferencí jeho uživatele.
Šablony stylů lze rozlišit pro následující média podle CSS2.1:
Specifikace CSS2.1 teoreticky předpokládá další typy médií, ale nejsou implementovány uživatelskými agenty: braillea embossedpro braillské tablety a embosery, stejně jako ttypro dálnopisníky .
V každém médiu jsou styly prezentace určené autorem dokumentu kombinovány s výchozími nastaveními agenta uživatele a výchozími nastaveními a preferencemi uživatele a jeho osobní konfigurací.
Schopnosti přijímače mohou autoři vzít v úvahu a jsou určeni pro uživatelské agenty implementující modul CSS3 „ media queries “: to umožňuje podmínit zohlednění šablony stylů omezeními, která se týkají zejména rozlišení nebo schopnost obnovit barvy.
Kaskáda stylů„Kaskáda“ je kombinací různých zdrojů stylů aplikovaných na stejný dokument podle jejich příslušného stupně priority. Lze kombinovat různé kaskádové režimy:
Vykreslení stylového dokumentu je určeno pojmy box and flow. Renderovací modul CSS vytváří „strukturu formátování“ odrážející logický strom dokumentu . Každý prvek této struktury generuje jednu nebo více zón vybavených konfigurovatelnými vlastnostmi zobrazení nebo vykreslení řeči. Zobrazení nebo čtení probíhá z toku polí postupně generovaných pro každý prvek, jak se zobrazuje v lineárním pořadí struktury formátování.
V závislosti na případu tyto různé typy krabic:
Vlastnosti použitelné pro boxy CSS jsou vyjádřeny ve formě párů propriété: valeur.
Vlastnosti jsou označeny anglickými nástrojovými slovy, například „ width “, „ font-size “ nebo „ voice-volume “.
Hodnoty mohou být v závislosti na případu vyjádřeny pomocí jednotek standardizovaných jinde nebo klíčových slov specifických pro CSS. Například barvu pozadí nebo textu lze vyjádřit pomocí modelu RGB nebo klíčových slov černá, modrá, fuchsiová atd.
Vlastnosti CSS byly vytvořeny na základě kompromisu mezi dvěma protichůdnými omezeními: usnadněním uživatelským agentům číst seznamy stylů vynásobením jednotlivých vlastností nebo usnadněním psaní autorům pomocí menšího počtu kombinovaných vlastností. Například poloha obrázku na pozadí je určena jedinou vlastností ( background-position), která kombinuje hodnoty úsečky i souřadnice, a nikoli dvěma samostatnými vlastnostmi. Podobně existují zkrácené vlastnosti, které autorům umožňují zjednodušit psaní řady vlastností: zkratka fontumožňuje například shrnout do jednoho pravidla všechny vlastnosti písma, velikosti, výšky řádku, velikosti písmen, váhy a kurzívy. Použití znaku „/“ však činí analýzu šablon stylů uživatelskými agenty mnohem složitější.
Selektory a bloky pravidelVlastnosti jsou seskupeny podle bloků pravidel, oddělených složenými závorkami {}. Každému bloku předchází selektor označující konstrukční prvky, na které musí být příslušné vlastnosti použity:
/*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; } CSSOOObjektově orientovaný CSS (anglicky OOCSS ) je metoda vytvořená v roce 2009 na modelu objektově orientovaného programování , která umožňuje opakované použití jeho stylů v několika kontextech.
BEMBEM (Block, element, modifier) je technika psaní CSS vynalezená v roce 2010, spočívající ve deklaraci stylů ve formě stromové struktury pro zlepšení výkonu. Příklad:
.product { &-productLabel { ... } &-productPicture { ... } }Pozn .: ampersand (&) představuje nadřazený objekt v Sass a LESS .
Obsah souboru 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>Obsah souboru 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; }Otevření souboru HTML v prohlížeči zobrazí styly nakonfigurované pomocí souboru CSS.
CSS zpočátku usiloval o nezávislost mezi strukturou a prezentací dokumentu.
To znamená, že CSS Zen Garden místo , vytvořený v roce 2003 by Dave Shea (en) , má za cíl demonstrovat možnosti svobodně modifikování zobrazená ztvárnění téže webové stránce, jen díky CSS a bez jakékoli změny svého kódu HTML.: v prosinci 2006 představila 986 různých návrhů své domovské stránky. Většina těchto návrhů je však zcela nebo zčásti založena na nahrazení textového obsahu stránky obrázky CSS, které ji reprodukují obohacením jejího vzhledu: grafická svoboda je vždy částečně založena na transformaci textu na obrázky. Na druhou stranu zůstává CSS Zen Garden stylovým cvičením omezeným na jeden dokument se strukturou spojenou se sémanticky neutrálními prvky a atributy, které slouží pouze k podpoře selektorů CSS.
I když existuje mnoho příkladů dokumentů HTML, pro které bylo vyvinuto více šablon stylů, existuje jen několik příkladů obecných šablon stylů, které jsou nezávislé na struktuře dokumentu. Příkladem toho jsou výchozí styly uživatelských agentů, ale omezené na jednoduché typografické efekty bez definice rozložení. Šablony stylů jsou obecně úzce závislé na struktuře dokumentu, který má být stylizován, a je obtížné je znovu použít v odlišně strukturovaných dokumentech. Tato potenciální nezávislost stylů na konkrétní struktuře dokumentů je využívána spíše vytvářením vzorů HTML CSS.
Obecněji :
CSS podporuje přístupnost webové stránky tím, že v konečném důsledku dává uživateli kontrolu nad vykreslením dokumentu v jeho prohlížeči: je tak možné jej přizpůsobit omezením nebo preferencím týkajícím se například velikosti zobrazení znaků nebo barev. Oddělováním struktury a prezentace podporuje CSS také psaní sémantických strukturovaných dokumentů, které jsou potenciálně použitelnější pro technické pomůcky: svoboda prezentace prvků názvu umožňuje například přísně respektovat jejich formální hierarchické pořadí. zase umožňuje technickým pomocníkům sestavit splavný obsah. A konečně, CSS tím, že dává autorům prostředky k obohacení formátování textu, umožňuje omezit použití textů vkládaných do obrázků.
Některá použití CSS však mohou také ohrozit přístupnost obsahu:
Metody aplikace směrnic o přístupnosti webového obsahu (například RGAA , UWEM ) proto definují pravidla pro použití stylů CSS.
CSS reaguje na přání mít jednoduchý formát prezentace, a to jak ve své funkčnosti, tak ve své syntaxi, s cílem podpořit přímou manipulaci autory a uživateli. Tuto jednoduchost však zpochybňuje několik faktorů:
Rámečky CSS jsou předem připravené knihovny, jejichž cílem je umožnit snadnější a standardizovanější styling webových stránek pomocí jazyka kaskádových stylů. Zahrnují Blueprint , Bootstrap , Cascade Framework a Foundation . Stejně jako programovací jazyk a skriptovací knihovny jsou rámce CSS obvykle začleněny jako externí listy CSS odkazované v HTML „<head>“. Poskytují řadu připravených možností pro webový design a rozvržení. Ačkoli mnoho z těchto rámců již bylo vydáno, někteří autoři je používají primárně pro rychlé prototypování nebo pro učení a dávají přednost „ručně“ vytvořenému CSS, který je vhodný pro každý publikovaný web bez souvisejících nákladů na design, údržbu a stahování. . ve stylu webu.
Jak se zvětšuje velikost zdrojů CSS použitých v projektu, musí vývojový tým často rozhodnout o společné metodice návrhu, aby byly organizovány. Cíle jsou snadný vývoj, snadná spolupráce během vývoje a výkon šablon stylů nasazených v prohlížeči. Mezi oblíbené metodiky patří OOCSS (Object Oriented CSS), ACSS (Atomic CSS), oCSS (Organic Cascading Style Sheet), SMACSS (Scalable and Modular Architecture for CSS) a BEM (Block, Element, Modifier).