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.
Hier findest Du unsere CSS-Referenz.
Die wichtigsten Collections sind:
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.
- Künstliche Intelligenz: Die Herausforderung, Maschinentext von Menschentext zu unterscheiden - 2. November 2023
- Einstieg in ChatGPT und KI: Ein faszinierender Blick in die Welt der künstlichen Intelligenz - 25. Juli 2023
- Produktbilder die verkaufen! So optimierst du deine Amazon-Bilder für mehr Konversionen - 25. Juli 2023
