Erweiterung | .css |
---|---|
Mime Typ | text/css |
Entwickelt von | CSS-Arbeitsgruppe ( in ) |
Erste Version | 17. Dezember 1996 |
Websites |
www.w3.org/Style/CSS Drafts.csswg.org |
Die Cascading Style Sheets , allgemein als CSS der englischen Cascading Style Sheets bezeichnet , bilden eine Computersprache , die die Präsentation von Dokumenten in HTML und XML beschreibt . Die Standards , die CSS definieren, werden vom World Wide Web Consortium (W3C) veröffentlicht. CSS wurde Mitte der 1990er Jahre eingeführt und wurde im Webdesign weit verbreitet und in den 2000er Jahren von Webbrowsern gut unterstützt .
Das Konzept des Stylesheets ist seit den Anfängen des World Wide Web präsent : Der erste WorldWideWeb -Webbrowser ermöglicht die Formatierung von Dokumenten mit dem, was man heute als „User Stylesheet“ bezeichnen würde. Ebenso verwenden die Browser Viola im Jahr 1992 und Harmony im Jahr 1993 einen ähnlichen Mechanismus, um die Wiedergabe von Schriftarten , Farben oder Textausrichtung zu bestimmen .
Dies sind jedoch keine Stile, die vom Autor des Dokuments festgelegt wurden. HTML fehlt auch Präsentationselemente in den ersten Jahren, so dass es wachsenden Druck für Browser Autoren zu ermöglichen , das Layout zu bestimmen Webseiten selbst , in einem Ansatz von abgeleiteten elektronischer Druck Veröffentlichung. .
In diesem Zusammenhang führte der brandneue Netscape Navigator 1994 - 1995 auf Initiative von Marc Andreessen die ersten HTML-Präsentationselemente ein , während gleichzeitig die ersten Vorschläge für externe Stile erschienen:
Das Erscheinen von CSS entspricht dem Wunsch, "eine Alternative zur Evolution von HTML von einer Strukturierungssprache zu einer Präsentationssprache anzubieten".
Gleichzeitig war auch ein dritter Entwicklungspfad offen: Die von James Clark entwickelte DSSSL-Transformationssprache von SGML- Dokumenten legt die Möglichkeit einer Stilsprache nahe, die nicht nur beschreibend ist, sondern sich einer echten Programmiersprache annähert . Diesem Weg folgt Netscape, das 1996 dem W3C die „JavaScript-Based Style Sheets“ (JSSS) vorschlug , die 1997 von Netscape Navigator 4 implementiert wurden .
Die Ursprünge von CSS sind daher mit drei großen Möglichkeiten verbunden:
Die ersten vorgeschlagenen Cascading HTML Style Sheets von Håkon Wium Lie erregen die Aufmerksamkeit von Dave Raggett , der damals der Hauptherausgeber der vorgeschlagenen HTML 3.0-Spezifikation war. Als Befürworter von rein strukturellem HTML regte er die Veröffentlichung eines CHSS-Arbeitsdokuments an, damit es auf der zweiten internationalen Konferenz zum WWW vorgestellt und diskutiert werden konnte ( Mosaic and the Web , Chicago, 1994). Er modifizierte mit Håkon Lie auch den Arena- Browser , um diese Sprache zu testen, und demonstrierte sie auf der dritten WWW-Konferenz 1995.
Zur gleichen Zeit beschloss Bert Bos , der zu dieser Zeit am Argo- Browser arbeitete und seinen eigenen „ Stream-based Style Sheet Proposal “ (SSP) beim W3C eingereicht hatte , seine Bemühungen mit denen von Håkon Lie zu verbinden. SSP wurde mit der Idee entwickelt, nicht nur auf HTML, sondern auch auf andere Auszeichnungssprachen anwendbar zu sein, Bert Bos und Håkon Lie greifen dieses Ziel auf und machen es zu einem der Schlüsselmerkmale dessen, was dann richtig zu CSS wird.
Ein weiterer Aspekt von CSS ist daher angesichts bestehender Alternativen entscheidend: CSS ist die erste Sprache, die die Idee von "Cascade" ( Cascading Style Sheet ) beinhaltet, also die Möglichkeit, den Stil "eines Dokuments" zu gestalten von mehreren "Stylesheets" geerbt. Dies ermöglicht es, zwischen mehreren konkurrierenden Quellen für die Formatierung eines Elements zu arbitrieren, und reagiert damit auf die Notwendigkeit, zwischen den stilistischen Vorlieben der Autoren und der Benutzer zu komponieren.
Das World Wide Web Consortium (W3C) wurde 1995 in Betrieb genommen und die Mailingliste im WWW-Stil erstellt. Im selben Jahr fand in Paris ein für die Zukunft von CSS entscheidender „W3C-Stylesheet-Workshop“ statt. Insbesondere bestätigt es den Wunsch, die Stylesheets in einer einfachen Form zu halten, was die JSSS-Hypothese von Netscape ausschließt. Außerdem kündigt Thomas Reardon (Microsoft) die zukünftige Unterstützung von CSS in zukünftigen Versionen des Internet Explorers an : Wenn das W3C also Ende des Jahres das " HTML Editorial Review Board " (HTML ERB) einrichtet, um das zukünftige HTML zu ratifizieren, DOM- und CSS-Spezifikationen, Netscape, vertreten durch Lou Montulli , schließt sich schließlich dem CSS-Projekt unter der Leitung von Bert Bos und Håkon Lie an.
Im Gegensatz zu Software werden CSS-Spezifikationen nicht in aufeinanderfolgenden Versionen entwickelt, die es einem Browser ermöglichen würden, auf eine bestimmte Version zu verweisen. CSS wird von "Ebenen" entwickelt, die jede neue Ebene zwingen, die vorherige zu integrieren und jede Implementierung mit der vorherigen kompatibel zu sein: CSS1 wird daher als Teilmenge von CSS2 entwickelt, die selbst als Teilmenge von . entwickelt wird CSS3. Dies erklärt zum Teil die Langsamkeit der normativen Weiterentwicklung von CSS.
Die endgültige CSS1-Spezifikation wurde am 17. Dezember 1996 veröffentlicht und definiert etwa fünfzig Eigenschaften. CSS1 ist definiert als „einfacher Stylesheet-Mechanismus, der es Autoren und Lesern ermöglicht, Stile (…) an das HTML-Dokument anzuhängen“. Diese Einfachheit führt zu der Wahl einer Sprache, die von ihren menschlichen Benutzern leicht gelesen und geschrieben werden kann, und einer Terminologie, die den üblichen Verwendungen in der Computerveröffentlichung entspricht. Die Möglichkeit, CSS in einer XML- oder SGML-Syntax auszudrücken, die regelmäßig erwähnt wird, um die Implementierung einer neuen Art der syntaktischen Analyse zu vermeiden, ist daher definitiv ausgeschlossen.
CSS1 beschreibt nicht nur seine eigene Grammatik : Diese erste Ebene beschreibt tatsächlich eine Grammatik, die es nachfolgenden Ebenen ermöglichen soll, neue Funktionalitäten hinzuzufügen, während gleichzeitig das Lesen dieser zukünftigen Stylesheets durch die ursprünglichen Implementierungen ermöglicht wird. Diese neuen Funktionen werden von den ursprünglichen Implementierungen nicht verstanden, können aber als solche identifiziert und ignoriert werden. CSS garantiert somit seine Abwärtskompatibilität .
CSS1 definiert im Wesentlichen die typografischen Wiedergabeeigenschaften von Text: Schriftarten (Fonts), Farbe, Schriftgröße, Gewicht , Abstände, Rahmen und Verwaltung von Listenmarkierungen.
Von "Layout" kann also noch keine Rede sein: Die Eigenschaft float, die später ausgiebig für das gesamte CSS-Layout von Webdesigns verwendet wird, ist dann nur noch dazu gedacht, lokal daneben einen kleinen Teil der Inhalt, z. B. ein Bild, und der Rest des Textes. Angesichts der problematischen CSS1-Implementierungen tablebleibt die Entführung des HTML-Elements zur Handhabung des Gesamtlayouts vorerst die gebräuchlichste Lösung für Autoren von Webinhalten.
1996 war der Internet Explorer 3.0 der erste kommerzielle Browser, der CSS teilweise implementierte, während es noch in der Entwicklung ist. Diese frühe Implementierung unter der Leitung von Chris Wilson entspricht nicht der endgültigen Spezifikation. 1997 wurde mit dem Internet Explorer 4.0 eine neue Rendering-Engine , Trident, geboren , die den Ursprung der wachsenden, aber problematischen Unterstützung von CSS in den verschiedenen Versionen dieses Browsers unter Windows bis hin zum Internet Explorer 7 war.
Netscape Navigator 4.0 zog 1997 nach, trotz seiner historischen Zurückhaltung gegenüber CSS: Im Kontext der Browserkriege ging es vor allem darum, zu verhindern, dass sich Microsoft als der Browser mit der konformsten durchsetzen konnte. Diese überstürzte Implementierung, basierend auf internen JavaScript- Methoden , erweist sich jedoch letztendlich als begrenzt und sehr unzuverlässig. Netscape Navigator 4.0 bringt auch eine JSSS-Implementierung mit, die unbeachtet bleiben wird. Wir müssen auf die neue Gecko- Rendering- Engine aus dem Mozilla-Projekt warten , um eine echte Implementierung von CSS1 zu erreichen.
1998, als die Browserkriege zwischen Netscape und Microsoft zu Ende gingen, erreichte Opera 3.5, dessen technischer Leiter inzwischen Håkon Lie geworden war, eine vollständigere Implementierung von CSS1, erleichtert durch die Veröffentlichung der ersten "Testsuite". für Cascading Style Sheets (CSS) Level 1 “, in erster Linie von Eric Meyer für das W3C erstellt. Das Vorhandensein dieser Testsuiten erweist sich sowohl für Implementierungen in Browsern als auch für die Aneignung von CSS-Techniken durch die Autoren (durch Bereitstellung detaillierter Beispiele der Eigenschaften und ihrer Werte) als großer Vorteil.
Schließlich, unter der Führung von Tantek elik , ist der Internet Explorer 5.0 für Macintosh, der im März 2000 auf den Markt gebracht wurde und auf Tasman basiert , einer spezifischen Rendering-Engine, die nichts mit Trident zu tun hat, der erste Browser, der CSS1 vollständig (über 99%) unterstützt. Um die Kompatibilität mit den für jede Implementierung spezifischen früheren Codierungspraktiken (die „Tag-Suppe“) zu gewährleisten und um eine korrekte Anzeige von Webdokumenten zu ermöglichen, unabhängig davon, ob sie CSS- und HTML-Standards einhalten oder nicht, implementiert er als erster die Doctype-Switching- Technik . Später von allen Browsern übernommen, wurde dies später zu einem der Schlüssel zur progressiven Implementierung von CSS: Es ermöglicht dem Browser tatsächlich, alte proprietäre Implementierungen aus Kompatibilitätsgründen beizubehalten, während er die Möglichkeit hat, sich gemäß der Syntax der Dokumenttypdeklaration zu entscheiden der Seite für einen Wiedergabemodus, der neuen Standardimplementierungen entspricht.
In dieser Zeit der späten 1990er Jahre war das Webdesign hauptsächlich auf die Verwendung von HTML als Präsentationsformat angewiesen. Die Niederlage von Netscape am Ende der Browserkriege, die Erneuerung, die über das Mozilla-Projekt folgte, das Erscheinen von IE5 Mac und in geringerem Maße die Entwicklung von Internet Explorer Windows 5.x, jedoch zu Beginn der 2000er Jahre , begann eine neue Etappe in der Entwicklung von Website-Design-Praktiken durch Autoren: Diese Browser ermöglichen es tatsächlich zu zeigen, dass historische Praktiken aus der Zeit der Browserkriege, die Struktur und Präsentation mischen, tatsächlich zugunsten eines Ansatzes aufgegeben werden können basierend auf Stylesheets und genereller Beachtung von Webstandards (im Sinne von HTML und CSS). Jeffrey Zeldman , Mitbegründer des Web Standards Project und Gründer von A List Apart (in) im Jahr 1998, erscheint dann als die emblematische Figur dieser Bewegung zur Förderung von Standards . Er ist auch die Inspiration für einen „hybriden“ Designansatz, der sich CSS-Techniken zu Nutze macht, während er vorübergehend im Rahmen der Formatierung von Dokumenten auf der Grundlage von Präsentationstabellen bleibt.
CSS2, überstürzte AmbitionenUm die Bedürfnisse zu erfüllen, die die erste CSS1-Spezifikation noch nicht abdeckte, wurde CSS 1997 einer neuen Arbeitsgruppe innerhalb des W3C unter dem Vorsitz von Chris Lilley zugewiesen . Im Jahr 2007 umfasste diese Gruppe Vertreter von Apple , Google , IBM , Microsoft , Adobe , der Mozilla Foundation und Opera .
Als Empfehlung im Mai 1998 veröffentlicht , erweitert die zweite CSS-Stufe die theoretischen Möglichkeiten der Cascading Stylesheets erheblich, insbesondere um rund 70 zusätzliche Eigenschaften. Zusätzlich zu der mit CSS1 initiierten typografischen Formatierung des Textes:
Dieser Funktionsreichtum stößt jedoch in seinen Implementierungen nur auf ein begrenztes Echo:
Mehrere Ursachen werden genannt, um diese Schwierigkeiten und die Langsamkeit der CSS2-Implementierungen zu erklären:
Rückmeldungen aus der Implementierung von CSS2 veranlassten die CSS-Arbeitsgruppe des W3C, ab 2001 eine überarbeitete Version von CSS 2.1 („ CSS Level 2, Revision 1 “) zu schreiben , die auf der Grundlage dessen basiert, was tatsächlich von den verschiedenen Browsern übernommen wurde. Die Ziele dieser Überprüfung sind:
CSS 2.1 korrigiert CSS2 in vielen Detailpunkten, entfernt bestimmte Abschnitte ganz oder teilweise (die unter dem Medientyp " aural " definierten Gesangsstile , die Druckstile, die herunterladbaren Schriftarten, von denen die überzeugenderen Definitionen für die Zukunft abgelehnt werden CSS3) und erklärt es anhand von Erkenntnissen, die während der Implementierung aktualisiert wurden (erweiterte Verwaltung von Floating-Blöcken über „Formatierungskontexte“).
Nach 8 aufeinanderfolgenden Versionen ist CSS 2.1 im Juli 2007 eine Kandidatenempfehlung, dh der Standard, dem Implementierungen folgen müssen.
Im Jahr 2007 hatte noch kein Browser die Integration von CSS 2.1 abgeschlossen: Dies würde zu 56 % von Internet Explorer 7, 91 % von Firefox 2 und 94 % von Opera 9 implementiert. Darüber hinaus verfügt nur ein Teil der grafischen Browser über den Acid2- Test , der 2005 vom Web Standards Project auf Initiative von Håkon Lie ins Leben gerufen wurde, erfolgreich bestanden oder als Ziel beibehalten wurde , um insbesondere die Implementierung einer Auswahl von CSS 2.1-Funktionen zu fördern, die als der wichtigste notwendige Fortschritt angesehen werden: Positionierung von Elemente während der Anzeige, Verallgemeinerung des Tabellen-Rendering-Modells auf alle Elemente, über CSS generierte Inhalte. Die professionelle Nutzung von CSS bleibt daher auf eine willkürliche Teilmenge davon beschränkt, die durch gängige Implementierungen bestimmt wird.
Die Entwicklung der dritten Ebene der Cascading Stylesheets begann bereits 1999 neben CSS 2.1.
CSS3 wird „modular“, um seine Aktualisierungen zu erleichtern, aber auch seine Implementierung durch Benutzeragenten mit immer unterschiedlicheren Kapazitäten und Bedürfnissen (Grafikbrowser, mobile Browser, Sprachbrowser). Browser können somit Teilmengen von CSS3 implementieren.
Daher variiert der Fortschritt von CSS3 je nach Modul und der Priorität, die ihnen von der CSS-Arbeitsgruppe eingeräumt wird. Im Jahr 2007 betreffen die fortgeschrittensten Module (Kandidatenempfehlungen):
In anderen Fällen können Module die Phase der Kandidatenempfehlung erreichen, später jedoch aufgrund von Schwierigkeiten, die nach der Aufforderung zur Umsetzung aktualisiert wurden, wieder in die Phase der Arbeitsdokumente gebracht werden. Dies ist beispielsweise beim Typografie-Modul „CSS-Text“ der Fall.
Ebenso variieren die Implementierungen je nach den Strategien und Anforderungen verschiedener Browser:
Ein niederländischer Programmierer, Jori Koolstra, schlug 2002 das Konzept dynamischer Cascading Style Sheets vor .
Einige Mitglieder der CSS-Arbeitsgruppe sowie Webentwickler haben das Problem des langsamen Fortschritts von CSS3 angesprochen:
Im Jahr 2008 wurde kein Modul vom W3C als abgeschlossen angesehen, und die Implementierung in Browsern ist daher marginal, oft als Test, wie die -moz-xxx-Funktionen der Gecko-Engine , deren Präfix die Verwendung auf Gecko-basierte Browser beschränkt.
Das Schreiben der vierten Ebene der Cascading Style Sheets beginnt im Jahr 2010, neben den CSS 3-Modulen.
Einige Module sind eingefroren oder befinden sich noch im Aufbau, es werden Entwürfe veröffentlicht, um die Möglichkeiten der letzteren weiter zu erweitern. Die Arbeit erfolgt daher zusätzlich zur vorherigen Ebene oder sogar indem die untere Ebene für die Selektoren verwendet wird.
Eines der Hauptziele von CSS ist es, die Formatierung außerhalb von Dokumenten zu ermöglichen. Es ist beispielsweise möglich, nur die Struktur eines Dokuments in HTML zu beschreiben und die gesamte Präsentation in einem separaten CSS-Stylesheet zu beschreiben. Stile werden im letzten Moment im Webbrowser der Besucher angewendet, die das Dokument anzeigen. Diese Trennung bietet eine Reihe von Vorteilen, die es ermöglichen, die Zugänglichkeit zu verbessern , die Darstellung einfacher zu ändern und die Komplexität der Architektur eines Dokuments zu reduzieren.
Daher sind die Vorteile von Stylesheets vielfältig:
Mit CSS können Sie das Rendering eines Dokuments gemäß den Rendering-Medien und seinen Fähigkeiten (Typ des Monitors oder Sprachgeräts ), denen des Browsers ( Text oder Grafiken) sowie den Präferenzen seines Benutzers definieren.
Stylesheets können nach CSS2.1 für folgende Medien unterschieden werden:
Andere Medientypen sind theoretisch in der CSS2.1-Spezifikation vorgesehen, werden aber nicht von Benutzerprogrammen implementiert: brailleund embossedfür Braille-Tabletts und -Präger sowie ttyfür Fernschreiber .
In jedem Medium werden die vom Autor des Dokuments festgelegten Präsentationsstile mit den Standardeinstellungen des Benutzeragenten und denen, die aus den Präferenzen und der persönlichen Konfiguration des Benutzers abgeleitet werden, kombiniert.
Die Fähigkeiten des Empfängers können von den Autoren berücksichtigt werden, die für Benutzeragenten bestimmt sind, die das CSS3-Modul " Medienabfragen " implementieren : Dies ermöglicht es, die Berücksichtigung eines Stylesheets an Einschränkungen insbesondere hinsichtlich der Auflösung oder der Fähigkeit, Farben wiederherzustellen.
Kaskade von StilenDie "Kaskade" ist die Kombination verschiedener Stilquellen, die auf dasselbe Dokument angewendet werden, entsprechend ihrem jeweiligen Prioritätsgrad. Verschiedene Kaskadenmodi können kombiniert werden:
Die Darstellung eines stilvollen Dokuments wird durch die Konzepte von Box und Flow bestimmt. Die CSS-Rendering-Engine erstellt eine "Formatierungsstruktur", die den logischen Baum des Dokuments widerspiegelt . Jedes Element dieser Struktur erzeugt eine oder mehrere Zonen, die mit konfigurierbaren Anzeige- oder Sprachwiedergabeeigenschaften ausgestattet sind. Die Anzeige oder das Lesen erfolgt aus dem Fluss von Kästchen, die nacheinander für jedes Element erzeugt werden, wie es in der linearen Reihenfolge der Formatierungsstruktur erscheint.
Je nach Fall diese verschiedenen Arten von Boxen:
Die auf CSS-Boxen anwendbaren Eigenschaften werden in Form von Paaren ausgedrückt propriété: valeur.
Eigenschaften werden mit englischen Werkzeugwörtern wie „ width “, „ font-size “ oder „ voice-volume “ beschriftet .
Die Werte können je nach Fall mit an anderer Stelle standardisierten Einheiten oder CSS-spezifischen Schlüsselwörtern ausgedrückt werden. Zum Beispiel kann eine Hintergrund- oder Textfarbe mit dem RGB- Modell oder den Schlüsselwörtern schwarz, blau, fuchsia usw. ausgedrückt werden .
CSS-Eigenschaften wurden auf der Grundlage eines Kompromisses zwischen zwei gegensätzlichen Einschränkungen entwickelt: Erleichterung des Lesens von Stylesheets für Benutzerprogramme durch Multiplikation einzelner Eigenschaften oder Erleichterung für Autoren durch Verwendung einer geringeren Anzahl kombinierter Eigenschaften. Zum Beispiel wird die Position eines Hintergrundbildes durch eine einzelne Eigenschaft ( background-position) bestimmt, die sowohl Abszissen- als auch Ordinatenwerte kombiniert, und nicht durch zwei separate Eigenschaften. Ebenso gibt es verkürzte Eigenschaften, die es Autoren ermöglichen, das Schreiben einer Reihe von Eigenschaften zu vereinfachen: Die Verknüpfung fontermöglicht es beispielsweise, alle Eigenschaften von Schriftart, Größe, Zeilenhöhe, Groß-/Kleinschreibung, Gewichtung und Kursivschrift in einer einzigen Regel zusammenzufassen. Die Verwendung des Zeichens "/" macht jedoch das Parsen von Stylesheets durch Benutzerprogramme viel komplexer.
Selektoren und RegelblöckeDie Eigenschaften sind nach Regelblöcken gruppiert, die durch geschweifte Klammern {} begrenzt sind. Jedem Block ist ein Selektor vorangestellt, der die Strukturelemente bezeichnet, auf die die betreffenden Eigenschaften angewendet werden müssen:
/*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; } CSSOOObjektorientiertes CSS (auf Englisch OOCSS ), ist eine Methode, die 2009 nach dem Modell der objektorientierten Programmierung erstellt wurde und es ermöglicht, ihre Stile in mehreren Kontexten wiederzuverwenden.
BEMBEM (Block, Element, Modifier) ist eine 2010 erfundene CSS-Schreibtechnik, die darin besteht, Stile in Form einer Baumstruktur zu deklarieren, um die Leistung zu verbessern. Beispiel:
.product { &-productLabel { ... } &-productPicture { ... } }Hinweis: Das kaufmännische Und (&) steht für das übergeordnete Objekt in Sass und LESS .
Inhalt der Datei 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>Inhalt der Datei 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; }Beim Öffnen der HTML-Datei in einem Browser werden die mit der CSS-Datei konfigurierten Stile angezeigt.
CSS hatte ursprünglich den Anspruch, unabhängig zwischen Struktur und Präsentation eines Dokuments zu sein.
So soll die 2003 von Dave Shea (en) erstellte CSS Zen Garden-Site die Möglichkeit demonstrieren, das angezeigte Rendering derselben Webseite nur dank CSS und ohne Änderung des Codes frei zu ändern. im Dezember 2006 präsentierte sie 986 verschiedene Designs für ihre Homepage. Die meisten dieser Designs basieren jedoch ganz oder teilweise auf der Ersetzung des textlichen Inhalts der Seite durch CSS-Bilder, die ihn reproduzieren, indem sie ihr Erscheinungsbild bereichern: Die grafische Freiheit basiert immer teilweise auf der Umwandlung von Text in Bilder. Auf der anderen Seite bleibt CSS Zen Garden eine auf ein einzelnes Dokument beschränkte Stilübung mit einer Struktur gekoppelt mit semantisch neutralen Elementen und Attributen, die nur dazu dienen, CSS-Selektoren zu unterstützen.
Während es viele Beispiele für HTML-Dokumente gibt, für die mehrere Stylesheets entwickelt wurden, gibt es nur wenige Beispiele für generische Stylesheets, die unabhängig von der Dokumentstruktur sind. Ein Beispiel hierfür sind Standardstile für Benutzeragenten, die jedoch auf einfache typografische Effekte ohne Layoutdefinition beschränkt sind. Im Allgemeinen hängen Stylesheets stark von der Struktur des zu formatierenden Dokuments ab und sind bei unterschiedlich strukturierten Dokumenten nur schwer wiederzuverwenden. Diese potentielle Unabhängigkeit von Stilen gegenüber der spezifischen Struktur von Dokumenten wird mehr durch die Erstellung von HTML-CSS-Mustern ausgenutzt.
Allgemeiner :
CSS fördert die Barrierefreiheit einer Webseite, indem es dem Benutzer letztendlich die Kontrolle über die Darstellung eines Dokuments in seinem Browser gibt: So ist es möglich, es an Einschränkungen oder Präferenzen wie beispielsweise die Anzeigegröße von Zeichen oder Farben anzupassen. Durch die Trennung von Struktur und Präsentation fördert CSS auch das Schreiben von semantisch strukturierten Dokumenten, die durch technische Hilfsmittel potentiell besser nutzbar sind: Die Freiheit der Präsentation der Titelelemente ermöglicht es beispielsweise, deren formale hierarchische Ordnung strikt einzuhalten. , was ermöglicht wiederum technischen Hilfsmitteln, ein navigierbares Inhaltsverzeichnis zu erstellen. Schließlich ermöglicht CSS, indem es Autoren die Möglichkeit gibt, die Formatierung des Textes zu bereichern, die Verwendung von Texten in Bildern einzuschränken.
Einige Verwendungen von CSS können jedoch auch die Zugänglichkeit von Inhalten beeinträchtigen:
Die Methoden zur Anwendung von Richtlinien zur Barrierefreiheit von Webinhalten ( RGAA , UWEM zum Beispiel) definieren daher Regeln für die Verwendung von CSS-Stilen.
CSS entspricht dem Wunsch nach einem einfachen Präsentationsformat, sowohl in seiner Funktionalität als auch in seiner Syntax, um die direkte Manipulation durch Autoren und Benutzer zu fördern. Diese Einfachheit wird jedoch durch mehrere Faktoren in Frage gestellt:
CSS-Frameworks sind vorgefertigte Bibliotheken, die ein einfacheres, standardkonformeres Styling von Webseiten unter Verwendung der Sprache von Cascading Style Sheets ermöglichen sollen. Dazu gehören Blueprint , Bootstrap , Cascade Framework und Foundation . Wie Programmiersprachen- und Skriptbibliotheken werden CSS-Frameworks normalerweise als externe .css-Blätter eingebunden, auf die in HTML "<head>" verwiesen wird. Sie bieten eine Reihe von vorgefertigten Optionen für Webdesign und Layout. Obwohl viele dieser Frameworks veröffentlicht wurden, verwenden einige Autoren sie hauptsächlich für das Rapid Prototyping oder zum Lernen und bevorzugen "handgefertigtes" CSS, das für jede veröffentlichte Site ohne die damit verbundenen Design-, Wartungs- und Downloadkosten geeignet ist . im Stil der Website.
Wenn die Größe der in einem Projekt verwendeten CSS-Ressourcen zunimmt, muss sich ein Entwicklungsteam oft für eine gemeinsame Designmethodik entscheiden, um sie organisiert zu halten. Die Ziele sind einfache Entwicklung, einfache Zusammenarbeit während der Entwicklung und Leistung der im Browser bereitgestellten Stylesheets. Beliebte Methoden sind OOCSS (Object Oriented CSS), ACSS (Atomic CSS), oCSS (Organic Cascading Style Sheet), SMACSS (Scalable and Modular Architecture for CSS) und BEM (Block, Element, Modifier).