CSS 3

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die zur Beschreibung der Präsentation eines in einer Auszeichnungssprache wie HTML geschriebenen Dokuments verwendet wird. CSS ist neben HTML und JavaScript ein Eckpfeiler der Technologie des World Wide Web.

CSS wurde entwickelt, um die Trennung von Präsentation und Inhalt, einschließlich Layout, Farben und Schriftarten, zu ermöglichen. Diese Trennung kann die Zugänglichkeit von Inhalten verbessern, mehr Flexibilität und Kontrolle bei der Spezifikation von Präsentationsmerkmalen bieten, die gemeinsame Nutzung von Formatierungen durch mehrere Webseiten ermöglichen, indem die relevanten CSS in einer separaten .css-Datei spezifiziert werden, was die Komplexität und Wiederholung des strukturellen Inhalts reduziert, und die .css-Datei in den Cache stellen, um die Ladegeschwindigkeit der Seiten zu verbessern, die die Datei und ihre Formatierung gemeinsam nutzen.

Durch die Trennung von Formatierung und Inhalt ist es auch möglich, dieselbe Auszeichnungsseite in verschiedenen Stilen für unterschiedliche Darstellungsmethoden darzustellen, z.B. auf dem Bildschirm, in gedruckter Form, per Sprache (über einen sprachbasierten Browser oder ein Bildschirmlesegerät) und auf taktilen Geräten mit Braille-Schrift. CSS verfügt auch über Regeln für eine alternative Formatierung, wenn der Inhalt auf einem mobilen Gerät aufgerufen wird.

Die Geschichte von CSS

Die Entwicklung von HTML, CSS und dem DOM fand in einer Gruppe statt, dem HTML Editorial Review Board (ERB). Anfang 1997 wurde das ERB in drei Arbeitsgruppen aufgeteilt: die HTML Working Group unter dem Vorsitz von Dan Connolly vom W3C, die DOM Working Group unter dem Vorsitz von Lauren Wood von SoftQuad und die CSS Working Group unter dem Vorsitz von Chris Lilley vom W3C.

CSS wurde erstmals am 10. Oktober 1994 von Håkon Wium Lie vorgeschlagen, der zu dieser Zeit mit Tim Berners-Lee am CERN zusammenarbeitete. Zur gleichen Zeit wurden mehrere andere Stylesheet-Sprachen für das Web vorgeschlagen, und die Diskussionen auf öffentlichen Mailinglisten und innerhalb des World Wide Web Consortiums führten zur Veröffentlichung der ersten W3C CSS-Empfehlung (CSS1) im Jahr 1996. Insbesondere ein Vorschlag von Bert Bos war einflussreich; er wurde Mitverfasser von CSS1 und gilt als Miterfinder von CSS.

Die CSS-Spezifikation der Stufe 2 (CSS 2) wurde vom W3C entwickelt und im Mai 1998 als Empfehlung veröffentlicht. Als Obermenge von CSS 1 enthält CSS 2 eine Reihe neuer Funktionen wie absolute, relative und feste Positionierung von Elementen und z-index, das Konzept der Medientypen, Unterstützung für akustische Stylesheets (die später durch die CSS 3 Sprachmodule ersetzt wurden) und bidirektionalen Text sowie neue Schrifteigenschaften wie Schatten. CSS Level 2 Revision 1, oft auch als „CSS 2.1“ bezeichnet, behebt Fehler in CSS 2, entfernt schlecht unterstützte oder nicht vollständig interoperable Funktionen und ergänzt die Spezifikation um bereits implementierte Browser-Erweiterungen.

Was unterscheidet CSS 3 von CSS 2.1?

Im Gegensatz zu CSS 2, das eine einzige große Spezifikation ist, in der verschiedene Funktionen definiert sind, ist CSS 3 in mehrere separate Dokumente unterteilt, die „Module“ genannt werden. Jedes Modul fügt neue Funktionen hinzu oder erweitert die in CSS 2 definierten Funktionen, wobei die Abwärtskompatibilität gewahrt bleibt. Die Arbeit an der CSS-Stufe 3 begann etwa zur gleichen Zeit wie die Veröffentlichung der ursprünglichen CSS 2-Empfehlung. Die ersten CSS 3-Entwürfe wurden im Juni 1999 veröffentlicht.

Aufgrund der Modularisierung haben die verschiedenen Module unterschiedliche Stabilität und Status:

Einige Module haben den Status einer Candidate Recommendation (CR) und gelten als mäßig stabil. In der CR-Phase wird den Implementierungen empfohlen, die Präfixe der Hersteller wegzulassen.

Module	Specification title	Status	Date
css3-background	CSS Backgrounds and Borders Module Level 3	Candidate Rec.	Dec 2020
css3-box	CSS basic box model	Candidate Rec.	Dec 2020
css-cascade-3	CSS Cascading and Inheritance Level 3	Recommendation	Feb 2021
css3-color	CSS Color Module Level 3	Recommendation	Jun 2018
css3-content	CSS3 Generated and Replaced Content Module	Working Draft 2	Aug 2019
css-fonts-3	CSS Fonts Module Level 3	Recommendation	Sep 2018
css3-gcpm	CSS Generated Content for Paged Media Module	Working Draft	May 2014
css3-layout	CSS Template Layout Module	Note	Mar 2015
css3-mediaqueries	Media Queries	Recommendation	Jun 2012
mediaqueries-4	Media Queries Level 4	Candidate Rec.	Jul 2020
css3-multicol	Multi-column Layout Module Level 1	Working Draft	Feb 2021
css3-page	CSS Paged Media Module Level 3	Working Draft	Oct 2018
selectors-3	Selectors Level 3	Recommendation	Nov 2018
selectors-4	Selectors Level 4	Working Draft	Nov 2018
css3-ui	CSS Basic User Interface Module Level 3 (CSS3 UI)	Recommendation	Jun 2018

Browser-Kompatibilität von CSS3

Jeder Webbrowser verwendet eine Layout-Engine, um Webseiten zu rendern, und die Unterstützung für CSS-Funktionen ist bei den verschiedenen Browsern nicht einheitlich. Da die Browser CSS nicht perfekt verarbeiten, wurden zahlreiche Codierungstechniken entwickelt, um bestimmte Browser mit Umgehungslösungen zu unterstützen (allgemein als CSS-Hacks oder CSS-Filter bekannt). Die Übernahme neuer CSS-Funktionen kann durch mangelnde Unterstützung in den wichtigsten Browsern behindert werden. So hat beispielsweise der Internet Explorer viele CSS 3-Funktionen nur langsam unterstützt, was die Akzeptanz dieser Funktionen verlangsamte und dem Ruf des Browsers bei den Entwicklern schadete.

Um ein konsistentes Erlebnis für ihre Benutzer zu gewährleisten, testen Webentwickler ihre Websites häufig auf mehreren Betriebssystemen, Browsern und Browserversionen, was die Entwicklungszeit und Komplexität erhöht. Tools wie BrowserStack wurden entwickelt, um die Komplexität der Pflege dieser Umgebungen zu verringern.

Zusätzlich zu diesen Testtools gibt es viele Websites, die Listen der Browserunterstützung für bestimmte CSS-Eigenschaften führen, darunter CanIUse und das Mozilla Developer Network. Darüber hinaus definiert CSS 3 Feature-Queries, die eine @supports-Direktive bereitstellen, mit der Entwickler Browser mit Unterstützung für bestimmte Funktionen direkt in ihrem CSS ansprechen können.

CSS, das von älteren Browsern nicht unterstützt wird, kann manchmal auch mit JavaScript-Polyfills eingefügt werden, d.h. mit JavaScript-Code, der dafür sorgt, dass sich die Browser konsistent verhalten. Diese Workarounds und die Notwendigkeit, Fallback-Funktionen zu unterstützen, können die Komplexität von Entwicklungsprojekten erhöhen. Daher definieren Unternehmen häufig eine Liste von Browserversionen, die sie unterstützen und nicht unterstützen.

In der Webentwicklung ist ein Polyfill ein Code, der eine Funktion auf Webbrowsern implementiert, die diese Funktion nicht unterstützen. Meistens handelt es sich dabei um eine JavaScript-Bibliothek, die einen HTML5- oder CSS-Webstandard implementiert. Dabei handelt es sich entweder um einen etablierten Standard (der von einigen Browsern unterstützt wird) auf älteren Browsern oder um einen vorgeschlagenen Standard (der von keinem Browser unterstützt wird) auf bestehenden Browsern.

Da Websites neuere Codestandards verwenden, die mit älteren Browsern nicht kompatibel sind, kann diesen Browsern (manchmal absichtlich) der Zugriff auf viele Ressourcen im Web verwehrt werden.

Viele der beliebtesten Websites im Internet sind auf älteren Browsern aufgrund der schlechten CSS-Unterstützung nicht nur optisch beeinträchtigt, sondern funktionieren überhaupt nicht, was zum großen Teil auf die Entwicklung von JavaScript und anderen Webtechnologien zurückzuführen ist.