Cascading Style Sheets

Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Sie ist ein sogenannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.

Cascading Style Sheets
CSS-Logo
Dateiendung: .css
MIME-Type: text/css
Entwickelt von: World Wide Web Consortium
Art: Stylesheet-Sprache
Standard(s): Level 1 (Recommendation)
Level 2 (Recommendation)
Level 2 Revision 1 (Recommendation)
Website: http://www.w3.org/Style/CSS/

Grundlagen

CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie). Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Verlauf komplexere Module hinzugefügt, mit denen z. B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können.

Elemente eines Dokumentes können aufgrund verschiedener Eigenschaften identifiziert werden. Dazu zählen neben dem Elementnamen (z. B. a für alle Hyperlinks), ihrer ID und ihrer Position innerhalb des Dokumentes (z. B. alle Bildelemente innerhalb von Linkelementen) auch Details wie Attribute (z. B. alle Linkelemente, deren href-Attribut mit www.example.com beginnen) oder die Position in einer Menge von Elementen (z. B. das siebte Element einer Liste). Mit CSS-Anweisungen können für jede solcher Elementegruppen Vorgaben für die Darstellung festgelegt werden. Diese Festlegungen können zentral erfolgen, auch in separaten Dateien, so dass sie leichter für andere Dokumente wiederverwendet werden können. Außerdem enthält CSS ein Vererbungsmodell für Auszeichnungsattribute, das die Anzahl erforderlicher Definitionen vermindert.

Mit CSS können für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorgegeben werden. Das ist nützlich, um z. B. die Verweisadressen von Hyperlinks beim Drucken aufzuführen, und um für Geräte wie PDAs und Mobiltelefone, die kleine Displays oder eine geringe Bildauflösung haben, Darstellungen anzubieten, die schmal genug und nicht zu hoch sind, um auf solchen Geräten lesbar zu bleiben.

CSS ist die Standard-Stylesheet-Sprache im World Wide Web. Früher übliche, darstellungsorientierte HTML-Elemente wie font oder center gelten als „veraltet“ (englisch obsolete), das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden.[1] So gelten diese u. a. seit HTML 4 (1997) als „unerwünscht“ und mit HTML5 als missbilligt (englisch deprecated).[2]

Geschichte und Versionen

Anfänge

Einen ersten Vorschlag für Web-Stylesheets gab es 1993, mehrere weitere folgten bis 1995. Am 10. Oktober 1994 veröffentlichte Håkon Wium Lie, ein Mitarbeiter von Tim Berners-Lee am CERN, den ersten Vorschlag für „Cascading HTML style sheets“,[3] die er später abgekürzt als „CHSS“ bezeichnet.[4] Bert Bos arbeitete zu dieser Zeit an der Implementierung eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, CSS gemeinsam zu entwickeln. Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, die Erfinder von CSS brachten aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg und innerhalb eines einzigen Stylesheets darüber entscheiden, welche CSS-Formatierung auf das betreffende Element angewendet werden sollen.

Nach der Präsentation von CSS durch Lie auf der Konferenz „Mosaic and the Web“ in Chicago 1994 und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Lie und Bos arbeiteten mit anderen Mitgliedern in diesem Rahmen an CSS weiter. Im Dezember 1996 wurde die CSS Level 1 Recommendation publiziert.

CSS2

CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis Anfang 2010 wurde diese Empfehlung allerdings von keinem verbreiteten Webbrowser vollständig umgesetzt. Bereits ab 2002 hat das W3C an der überarbeiteten Version CSS Level 2 Revision 1 (CSS 2.1) gearbeitet.[5] Die Erfahrungen mit CSS2 wurden hier aufgenommen, Unstimmigkeiten korrigiert und manche Teiltechniken gestrichen, die in verschiedenen Browsern nicht korrekt umgesetzt worden waren. Grundlegend neue Fähigkeiten wurden nicht eingebaut. Am 7. Juni 2011 wurde CSS 2.1 als fertige Empfehlung (Recommendation) veröffentlicht.[6] Inzwischen (2014) verarbeiten die meisten Webbrowser CSS 2.1 weitgehend korrekt, nur wenige Teiltechniken werden nicht vollständig unterstützt. Im April 2016 wurde der erste öffentliche Arbeitsentwurf von CSS 2.2 veröffentlicht.[7]

CSS3

Seit 2000 ist CSS Level 3 in der Entwicklung.[8] Hier werden die Entwicklungen weiter vorangetrieben, die bereits mit CSS2 begonnen wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, womit einzelne Teiltechniken (beispielsweise Steuerung der Sprachausgabe oder Selektoren) in eigenen Versionsschritten entwickelt werden können. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und wird wohl auch in Zukunft noch eine Alternative zu XML-basierten Stylesheet-Sprachen wie XSL-FO sein. Derzeit veröffentlichte und breit unterstützte Standards sind unter anderem CSS Color Level 3, CSS Namespaces, Selectors Level 3 und Media Queries. Neben diesen Modulen stehen weitere Elemente zur Diskussion, etwa ein Layout-Modul und verschiedene Grafikfilter.[9] Moderne Browser unterstützen heute (2014) bereits viele CSS3-Module,[10] wenngleich nur für wenige Teile bereits eine Empfehlung (Recommendation) durch das W3C vorliegt.[9]

Im Frühjahr 2012 wurde berichtet, das W3C arbeite bereits an einem Nachfolger von CSS3, der mit der Versionsnummer 4 veröffentlicht werden solle.[11] Im September 2012 haben Vertreter der CSS-Arbeitsgruppe des W3C jedoch klargestellt, dass es keine Versionsnummer 4 geben soll: „There will never be a CSS4“.[12] Vielmehr soll die künftige Entwicklung des Standards darin bestehen, dass die einzelnen CSS-Module unter eigenen Versionsnummern weiterentwickelt werden können, während der Gesamtstandard den Namen CSS3 oder einfach CSS behalten soll.[12]

Syntax

Der Aufbau von CSS-Anweisungen

Selektor1 [, Selektor2 [, ] ] {
    Eigenschaft-1: Wert-1;
    
    Eigenschaft-n: Wert-n[;]
}
/* Kommentar */
/* In eckigen Klammern stehen optionale Angaben */

Eine CSS-Anweisung (englisch rule) gibt an, dass für festgelegte Teile eines Dokuments eine Kombination von bestimmten Eigenschaften gelten soll. Geschrieben wird sie als eine durch Kommata getrennte Aufzählung von Selektoren („Für diese Typen von Teilen …“), gefolgt in geschweiften Klammern von einer semikolongetrennten Liste von Eigenschafts-Deklarationen („… nimm die folgenden Eigenschaften!“). Jede Eigenschaftsdeklaration besteht aus der Bezeichnung der Eigenschaft, einem Doppelpunkt, und dem Wert, den sie annehmen soll. Nach der letzten Eigenschaftsdeklaration ist vor der schließenden, geschweiften Klammer ein abschließendes Semikolon erlaubt, aber nicht notwendig.

Um diese Teile einer Anweisungen herum ist Leerraum frei verwendbar. Häufig schreibt man den Doppelpunkt ohne Zwischenraum hinter den Eigenschaftsnamen, jede Eigenschaftsdeklaration in eine eigene Zeile, und schließt auch die letzte Eigenschaft mit einem Semikolon. So kommt es bei späteren Änderungen weniger leicht zu Syntaxfehlern.

Ein Stylesheet darf beliebig viele solcher Anweisungen enthalten. Die folgende Tabelle enthält eine vollständige Übersicht aller Selektoren, mit denen Elemente (meist HTML-Elemente) ausgewählt werden können.

Selektoren

Ein Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Satz an CSS-Deklarationen mit seinen Darstellungsvorgaben auf das Element angewendet wird. Solche Bedingungen beschreiben eindeutig, welche Eigenschaften (Typ, Klasse, ID, Attribut oder Attributwert) Elemente haben müssen oder in welchem Kontext sie im Dokument stehen müssen (Existenz eines bestimmten übergeordneten Elementes oder eines Vorgängerelementes bestimmten Typs), damit die Darstellungsvorgaben für sie gelten sollen. In einem Selektor können mehrere Auswahlkriterien verknüpft sein.

Muster Bedeutung: selektiert … Eingeführt in Definition Erläuterung
einfache Selektoren
* jedes Element CSS2 Universal selector Universalselektor
E jedes Element vom Typ E CSS1 Type selectors Typselektor
.c jedes Element der Klasse c (analog [class~='c']) CSS1 Class selectors Klassenselektor
#myid das Element mit der ID „myid“. CSS1 ID selectors ID-Selektor
[foo] Elemente, deren „foo“-Attribut gesetzt ist (unabhängig vom Wert) CSS2 Attribute selectors Attributpräsenz
[foo=bar] Elemente, deren „foo“-Attribut mit dem Wert „bar“ gesetzt ist CSS2 Attributwerte
[foo~=bar] Elemente, deren „foo“-Attribut das Wort „bar“ enthält (z. B. „bar“ oder „bar quz“, nicht aber „barquz“) CSS2
[foo|=bar] Elemente, deren „foo“-Attribut die Zeichenfolge „bar“ ist oder mit der Zeichenfolge „bar-“ beginnt CSS2
[foo^=bar] Elemente, deren „foo“-Attribut mit der Zeichenfolge „bar“ beginnt CSS3 Substring matching attribute selectors Teilübereinstimmungen
[foo$=bar] Elemente, deren „foo“-Attribut mit der Zeichenfolge „bar“ endet CSS3
[foo*=bar] Elemente, deren „foo“-Attribut die Zeichenfolge „bar“ enthält CSS3
Kombinatoren
E F alle Elemente F, die Nachfahren eines Elements E sind CSS1 Descendant selectors Nachfahrenselektor
E > F alle Elemente F, die ein Kind eines Elements E sind CSS2 Child selectors Kindselektor
E ~ F alle Elemente F, die einen Vorgänger E auf gleicher Ebene haben CSS3 General sibling combinator Geschwisterselektor
E + F alle Elemente F, die einen direkten Vorgänger E auf gleicher Ebene haben CSS2 Adjacent sibling combinator Nachbarselektor
Pseudoklassen
:link noch nicht besuchte Verweise CSS1 link pseudo-classes Pseudoklassen :link und :visited
:visited bereits besuchte Verweise CSS1
:active das Element, das gerade angeklickt ist CSS1 dynamic pseudo-classes Pseudoklassen :hover, :active und :focus
:hover das Element, über dem sich der Mauszeiger befindet CSS2
:focus das Element, das den Fokus (z. B. durch die Tabulatortaste) erhalten hat CSS2
:lang() Elemente, deren Sprache über das Attribut „lang“ festgelegt wurde CSS2 language pseudo-class Pseudoklasse :lang()
:target das Element, das Ziel des gerade eben angeklickten Verweises ist CSS3 target pseudo-class Pseudoklasse :target
:enabled Elemente in Benutzeroberflächen, die auswählbar sind CSS3 :enabled and :disabled pseudo-classes Pseudoklassen :enabled, :disabled und :checked
:disabled Elemente in Benutzeroberflächen, die gesperrt sind CSS3
:checked Elemente von Benutzeroberflächen, die angewählt sind CSS3 :checked pseudo-class
:not(foo) Elemente, für die „foo“ nicht zutrifft CSS3 negation pseudo-class Pseudoklasse :not()
strukturelle Pseudoklassen
:first-child Elemente, die das erste Kind ihres Elternelementes sind CSS2 :first-child pseudo-class Pseudoklasse :first-child
:last-child Elemente, die das letzte Kind ihres Elternelementes sind CSS3 :last-child pseudo-class Pseudoklasse :last-child
:nth-child(…) Elemente, die beispielsweise das n-te Kind ihres Elternelementes sind CSS3 :nth-child() pseudo-class Pseudoklasse :nth-child()
:nth-last-child(…) Elemente, die beispielsweise das nt-letzte Kind ihres Elternelementes sind CSS3 :nth-last-child() pseudo-class Pseudoklasse :nth-last-child()
:only-child Elemente, die das einzige Kind ihres Elternelementes sind CSS3 :only-child pseudo-class Pseudoklasse :only-child
:first-of-type Elemente, die das erste Element dieses Typs ihres Elternelementes sind CSS3 :first-of-type pseudo-class Pseudoklasse :first-of-type
:last-of-type Elemente, die das letzte Element dieses Typs ihres Elternelementes sind CSS3 :first-of-type pseudo-class Pseudoklasse :last-of-type
:nth-of-type(…) Elemente, die das n-te Element dieses Typs ihres Elternelementes sind CSS3 :nth-of-type() pseudo-class Pseudoklasse :nth-of-type()
:nth-last-of-type(…) Elemente, die das nt-letzte Element dieses Typs ihres Elternelementes sind CSS3 :nth-last-of-type() pseudo-class Pseudoklasse :nth-last-of-type()
:only-of-type Elemente, die das einzige Element dieses Typs ihres Elternelementes sind CSS3 :only-of-type pseudo-class Pseudoklasse :only-of-type
:root Wurzelelement CSS3 :root pseudo-class Pseudoklasse :root
:empty Elemente, die keine Kinder haben CSS3 :empty pseudo-class Pseudoklasse :empty
Pseudoelemente
::first-line erste Zeile des formatierten Textes CSS1 ::first-line pseudo-element Pseudoelement ::first-line
::first-letter erstes Zeichen des formatierten Textes CSS1 ::first-letter pseudo-element Pseudoelement ::first-letter
foo::before erzeugt ein Element am Anfang des Elements „foo“ (und wählt es aus) CSS2 ::before and ::after pseudo-elements Pseudoelemente ::before und ::after
foo::after erzeugt ein Element am Ende des Elements „foo“ (und wählt es aus) CSS2

Beispiel

Boxmodell-detail
Das CSS-Box-Modell

CSS-Code:

p.info {
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 2em;
	padding: 1em;
	border: 3px solid red;
	background-color: #f89;
	display: inline-block;
}
p.info span {
	font-weight: bold;
}
p.info span::after {
	content: ": ";
}

HTML-Code:

<p class="info">
	<span>Hinweis</span>
	Sie haben sich erfolgreich angemeldet.
</p>

Die HTML-Tags <p> und </p> definieren den dazwischen stehenden Text als einen Absatz. Diesem wird die Klasse „info“ mit ihren CSS-Darstellungvorgaben zu Schrifttyp, Rahmen etc. zugewiesen. Von einem CSS-kompatiblen Browser wird der Absatz daher folgendermaßen dargestellt:

Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.

Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.

Hier werden die Deklarationen allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert info besitzen. Ohne das p im Selektor wären alle Elemente der Klasse info betroffen, ohne das .info wären alle p-Elemente betroffen. span-Elemente innerhalb solcher Absätze werden in Fettschrift dargestellt; dahinter wird mit dem Pseudoelement ::after ein Doppelpunkt erzeugt.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und das Kombinieren verschiedener Stylesheets, wobei die letzte Eigenschaftsdeklaration für ein Element vorher getroffene Deklarationen der gleichen Eigenschaft mit anderem Wert für dieses Element überschreibt. Diese können aus verschiedenen Quellen stammen: vom Autor des Stylesheets, vom Browser (User Agent) oder vom Benutzer. Hierbei werden zuerst die Angaben vom Browser, dann die vom Benutzer und schließlich die vom Autor umgesetzt.

CSS-Hacks

Eine Anwendung von CSS-Syntax bei der Gestaltung von Weblayouts sind sogenannte CSS-Hacks. Sie werden benutzt, um Unterschiede bei der Darstellung von Weblayouts in verschiedenen Browsern auszugleichen oder CSS-Anweisungen für bestimmte Webbrowser gesondert zuzuweisen oder auszuschließen. Der Begriff Hack bezeichnet dabei nichtstandardisierte CSS-Befehle, mit denen die Interpretationsschwäche eines Webbrowsers ausgenutzt wird, der diese Anweisungen entweder interpretiert oder ignoriert. Damit können Schwachstellen von Webbrowsern ausgeglichen werden, um möglichst in jedem Webbrowser das gleiche Ergebnis angezeigt zu bekommen.

Ein CSS-Hack kombiniert z. B. fehlerhaft angegebene Selektoren mit zusätzlichen Zeichen oder enthält Anweisungen, die bestimmte Webbrowser nicht kennen. Ein bekanntes Beispiel für einen CSS-Hack ist der sogenannte Star-HTML-Hack. Das *-Zeichen dient als Universal-Selektor und ist vor dem Selektor html sinnlos.

CSS-Code-Beispiel:

p { background-color: blue; }
* html p { background-color: red; }

In diesem Fall würden zunächst alle Browser die p-Elemente mit einem blauen Hintergrund darstellen. Lediglich der Internet Explorer vor Version 7 interpretiert auch die zweite Zeile und färbt die Absätze rot, obwohl <html> kein Eltern-Element besitzt, auf das * zutreffen könnte.

Kombination mit HTML oder XHTML

Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:

Als externes Stylesheet für eine (X)HTML-Datei (link-Element)
<link rel="stylesheet" type="text/css" href="beispiel.css" />
Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung)
<?xml-stylesheet type="text/css" href="beispiel.css" ?>
Als internes Stylesheet in einer (X)HTML-Datei (style-Element)
<head>
	<title>Dokument mit Formatierungen</title>
	<style type="text/css">
		body { color: purple; background-color: #d8da3d; }
	</style>
</head>
Innerhalb von (X)HTML-Tags (style-Attribut)
<span style="font-size: small;">Text</span>

Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code. CSS selbst ermöglicht durch den @import-Befehl das Einbinden von weiteren externen Stylesheets.

<head>
	<title>Beispiel</title>
	<style type="text/css">
		@import url(url_des_stylesheets);
	</style>
</head>

Es gibt drei Varianten, Stylesheets mit einem link-Element einzubinden. Sie unterscheiden sich darin, wie zwingend die Stylesheets berücksichtigt werden:

Dauerhafte Stylesheets (persistent)
<link rel="stylesheet" type="text/css" href="beispiel.css" />

Wenn man ein Stylesheet so einbindet, wird es auf jeden Fall verwendet.

Bevorzugte Stylesheets (preferred)
<link rel="stylesheet" type="text/css" href="beispiel.css" title="IrgendeinTitel" />

Sollte man diese Einbindung verwenden, wird das Stylesheet verwendet, bis der Benutzer ein anderes auswählt.

Alternative Stylesheets (alternate)
<link rel="alternate stylesheet" type="text/css" href="beispiel.css" title="IrgendeinTitel" />

Wird das Stylesheet so mit dem HTML-Dokument verknüpft, muss der Benutzer ausdrücklich wählen, es zu verwenden. Das wirkt sich in den meisten Browsern aus (z. B. Internet Explorer, Firefox, Opera und Konqueror). Somit wird diese Funktion von den meist benutzten Browsern implementiert. Außerdem sollte ein „alternate stylesheet“ nur in Verbindung mit einem anderen, fest eingebundenen verwendet werden, damit es auch nur eine echte Alternative ist.

Alternativ ist es auch möglich das Stylesheet dynamisch mittels JavaScript einzubinden, dabei kann es jedoch passieren, dass der Inhalt während des Ladevorgangs für kurze Zeit noch ohne den Stil dargestellt wird, was als Flash of Unstyled Content störend auffallen kann.

Medienspezifische Stylesheets

Es ist auch möglich, für verschiedene Medien verschiedene Stylesheets einzubinden, um zum Beispiel die Gestaltung beim Drucken oder auf Handy-Displays zu regulieren. Diesen Zweck erfüllt das Attribut media. In dieses Attribut werden die Parameter notiert, die für dieses Stylesheet gelten sollen.

Parameter Bedeutung
all Stylesheet gilt für alle Ausgabegeräte
speech (CSS2: aural) aurale Ausgabegeräte (z. B. Screenreader)
braille Blindenschriftfähige Ausgabegeräte
embossed Blindenschriftfähige Drucker
handheld Handhelds (Palmtops, PDAs, WinCE-Geräte)
print Drucker
projection Video-Beamer, Overhead-Projektoren
screen Bildschirme
tty Ausgabegeräte mit feststehenden Zeichentypen (z. B. Fernschreiber, Terminals oder auch ältere Mobiltelefone)
tv TV-Geräte
Beispiel für einen @media-Befehl innerhalb einer CSS-Datei
@media print {
	body {
		color: black;
		background-color: white;
	}
	h1 {
		font-size: 14pt;
	}
	.navigation {
		display: none;
	}
}

Durch mehrere @media-Befehle lassen sich innerhalb einer CSS-Datei oder eines <style>-Blocks verschiedene Ausgabegeräte ansprechen.

Beispiel für ein media-Attribut beim Einbinden einer CSS-Datei
<link rel="stylesheet" type="text/css" href="beispiel.css" media="print" />
Beispiel für ein media-Attribut eines <style>-Blocks
<style type="text/css"  media="print">
	body {
		color: black;
		background-color: white;
	}
	h1 {
		font-size: 14pt;
	}
	.navigation {
		display: none;
	}
</style>

Da viele moderne Smartphones den Typ handheld nicht unterstützen und stattdessen die Stilvorgaben von screen nutzen, ist man hier auf „Eigenschaftsspezifische Stylesheets“ (Media Queries) angewiesen.

Eigenschaftsspezifische Stylesheets (Media Queries)

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden. Verfügbare Geräteeigenschaften sind zum Beispiel:

  • Breite und Höhe des Browserfensters
  • Breite und Höhe des Gerätes
  • Orientierung (Quer- oder Hochformat)
  • Bildschirmauflösung

Vor allem im Bereich der mobilen Webprogrammierung werden Media Queries bereits jetzt häufig eingesetzt, um die Webseite ideal an das aktuell verwendete Gerät anzupassen.

Im folgenden Beispiel werden Elemente mit CSS-Anweisungen versehen. Diese Anweisungen gelten für das gesamte Dokument. Anschließend wird eine Media Query eingesetzt, die greift, sobald die Breite des Browserfensters kleiner als 1025 Pixel ist. In diesem Fall ändern sich die Eigenschaften, die vorher allgemein definiert wurden bzw. gelten zusätzliche Eigenschaften.

#inhalt {
	width: 800px;
}

@media screen and (max-width: 1024px) {
	#inhalt {
		width: 600px;
	}

	aside {
		display: none;
	}
}

Siehe auch

Literatur

  • Ingo Chao, Corina Rudel: Fortgeschrittene CSS-Techniken. 3. Auflage. Galileo Computing, Bonn 2012, ISBN 978-3-8362-1695-1 (Detailreiche und anspruchsvolle Erklärung von CSS-Interna).
  • Florence Maurice: CSS3: Die neuen Features für fortgeschrittene Webdesigner. 2. Auflage. dpunkt.verlag, Heidelberg 2013, ISBN 978-3-86490-118-8 (Neuerungen in CSS3).

Weblinks

Einzelnachweise

  1. HTML 4.0 Specification, W3C Recommendation. Appendix A: Changes between HTML 3.2 and HTML 4.0, A.1.2 Deprecated elements. W3C, 18. Dezember 1997, abgerufen am 15. November 2014 (englisch).
  2. HTML5 Differences from HTML4, W3C Working Draft. 3.5 Obsolete Elements. W3C, 18. September 2014, abgerufen am 15. November 2014 (englisch).
  3. Håkon Wium Lie: Cascading HTML style sheets -- a proposal. 10. Oktober 1994, abgerufen am 13. Oktober 2014 (englisch).
  4. Håkon Wium Lie: Cascading Style Sheets. (Nicht mehr online verfügbar.) Universität Oslo, 2005, archiviert vom Original am 4. Oktober 2014; abgerufen am 13. Oktober 2014 (englisch, Doktorarbeit von H. W. Lie). i Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
  5. Cascading Style Sheets, level 2 revision 1. W3C Working Draft 2 August 2002. W3C, 2. August 2002, abgerufen am 6. Oktober 2014 (englisch).
  6. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C Recommendation 07 June 2011. W3C, 7. Juni 2011, abgerufen am 6. Oktober 2014 (englisch).
  7. Cascading Style Sheets, level 2 revision 2 (CSS 2.2) Specification. W3C First Public Working Draft 12 April 2016. W3C, 12. April 2016, abgerufen am 1. Juli 2016 (englisch).
  8. CSS3 introduction W3C Working Draft, 14. April 2000. In: w3.org. W3C, abgerufen am 8. Juli 2010 (englisch).
  9. a b CSS current work & how to participate. CSS specifications. W3C, 25. September 2014, abgerufen am 6. Oktober 2014 (englisch).
  10. Can I use ___? 28. September 2014, abgerufen am 6. Oktober 2014 (englisch).
  11. Nicolai Schwarz: CSS4: So sieht die Zukunft des Webstandards aus. In: t3n Magazin. 5. September 2012, abgerufen am 21. November 2012.
  12. a b Tob Atkins: A Word About CSS4. 5. September 2012, abgerufen am 8. September 2014 (englisch).
CSS-Framework

Ein CSS-Framework ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes Webdesign mit CSS.

Die meisten CSS-Frameworks bieten als Basis ein Grid-Gestaltungsraster sowie einige grundlegende Gestaltungselemente wie Schaltflächen, Menüs und Eingabefelder. Größere Frameworks bieten zudem noch JavaScript-basierte Funktionen, welche die Gestaltungselemente um zusätzliche, aber in der Regel optionale Funktionalitäten erweitern (Unobtrusive JavaScript).

CSS-Frameworks können unterschiedliche Funktionen anbieten:

Die Hauptfunktion ist meist ein Grid-System, besonders auch für Responsive Webdesign. Diese unterscheiden sich inden möglichen Grundbreiten des Viewports und eventuelle Breakpoints,

der Verwendung von Pixel (px), der aktuellen Schriftgröße (em) oder prozentualen Werten für Breitenangaben,

der Anzahl der Spalten und Reihen,

der relativen oder absoluten Verschachtelung von Elementen und

der Art und Weise der Media Queries.

Vor allem größere Frameworks bieten auch zahlreiche graphische Elemente wie

Webtypografie,

Icon-Sets in CSS-Sprites oder Icon-Fonts,

Styling für Dropout-Menüs, Tooltips, Schaltflächen, Elemente von Webformularen und

Elemente für grafische Benutzeroberflächen wie Akkordeon, Registerkarten, Galerien oder Modal-Fenster (Lightbox).

Zusätzlich bieten viele Frameworks CSS Anpassungen, beispielsweise

Reset-Stylesheets zur Vereinheitlichung der Formatierungen,

oft verwendete CSS-Hilfsklassen (left, hide) oder

Equalizer, um Inhalte auf gleiche Höhe zu bringen.Größere CSS-Frameworks verwenden CSS-Interpreter wie Sass, Less oder Stylus.

Einige weit verbreitete Beispiele sind Bootstrap, YAML, Foundation, UIkit, Skeleton oder Semantic UI.

CSS-Sprites

CSS-Sprites bezeichnet eine einzelne Grafikdatei, die mehrere Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren.

Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.

Dokumentiert wurde diese Technik vermutlich das erste Mal 2004 im englischsprachigen Online-Magazin A List Apart, eine Website, die sich an Webdesigner richtet. Bekannte Websites wie Google, XING, Amazon oder Facebook nutzen diese Technik.

Eine Alternative zu Sprites sind Icon Fonts.

CSSTidy

CSSTidy ist ein Open-Source-Parser und Optimierer für Cascading Style Sheets, der von Florian Schmitz entwickelt wurde. Es sind Versionen in C++ und PHP verfügbar. Der Name leitet sich von HTML Tidy ab, da CSSTidy das Ziel anstrebt, das CSS-Pendant zu HTML Tidy zu sein. Derzeit besitzt CSSTidy die Fähigkeit, einige häufig vorkommende Fehler zu berichtigen (wie z. B. fehlende Einheiten oder Semikolons) und den CSS-Code umzuformatieren und zu komprimieren.

Die derzeitige Version von CSSTidy ist 1.3. Dies ist laut Ersteller die letzte Version – das Projekt wurde fallengelassen und der Ersteller sucht(e) einen neuen Instandhalter für das Projekt.Die PHP-Version wurde getrennt gepflegt und enthält weiterhin Fehlerbehebungen und verbesserte Unittests.Für den Download C++-Version verlinkt Florian Schmitz inzwischen auf ein weiter gepflegtes Projekt bei Github.

CSS Animations

CSS Animations ist ein Modul für Cascading Style Sheets (CSS), das die Animation von XML-Elementen ermöglicht.

Cross-Browser

Cross-Browser bezeichnet die Fähigkeit von in Webseiten eingebetteten Inhalten (insbesondere Cascading Style Sheets (CSS) und JavaScript), unabhängig vom jeweiligen Browsertyp und Betriebssystem die gleiche Ausgabe zu erzeugen beziehungsweise sich weitestgehend identisch zu verhalten.

Float (CSS)

Float (engl. (im Wasser) treiben, schweben) ist eine CSS-Eigenschaft, bei der Elemente andere Elemente um sich herumfließen lassen. Ein beliebtes Einsatzgebiet sind Texte, in welche eine Grafik eingefügt wird, ohne dass dadurch unschöne Absätze oder Zeilenumbrüche entstehen. Unabhängig davon, ob die vertikale Ausrichtung nach links oder rechts erfolgt, muss das zu umfließende Objekt im Quelltext zuerst aufgeführt werden.

Herstellerpräfix

Als Herstellerpräfix (auch Browserpräfix oder Vendorpräfix) bezeichnet man eine kurze Zeichenkette, die Browserhersteller den eigentlichen Bezeichnern voranstellen, wenn sie experimentelle Funktionen implementieren. Ursprünglich wurden sie in CSS eingesetzt, sind inzwischen aber auch in anderen Bereichen der Web-Entwicklung verbreitet.

Håkon Wium Lie

Håkon Wium Lie (* 1965 in Halden, Norwegen) ist ein norwegischer Informatiker und Manager.

Lie arbeitete am CERN zusammen mit Tim Berners-Lee, dem Schöpfer des Webs selbst, und erfand dort CSS.Am 10. Oktober 1994 stellte er in dem Artikel Cascading HTML style sheets – a proposal das Konzept der CSS vor. Seit 1995 arbeitet Lie im Rahmen des World Wide Web Consortium (W3C) an der Fortschreibung der W3C-Empfehlungen zu CSS.Von 1999 bis 2016 war er Chief Technical Officer (CTO) bei Opera Software, wo er unter anderem an der Weiterentwicklung der Cascading Style Sheets (CSS) arbeitete.

Less (Stylesheet-Sprache)

Less (englisch für weniger) ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. Less ist eine Obermenge von CSS, das heißt, ein CSS-Code ist gleichzeitig auch gültiger Less-Code. Less wird zu CSS kompiliert.

Linktext

Als Linktext, Verweistext oder Ankertext bezeichnet man Text, der in einem Hypertext-Dokument als Hyperlink fungiert. Der Text ist mit einem Verweis auf eine Zieladresse (Link) verbunden. Linktext und Zieladresse werden bei einem Hyperlink separat angegeben.

Der Linktext wird meist farbig und/oder unterstrichen dargestellt, vorzugsweise so, dass er sich vom normalen Textbild deutlich abhebt. Bereits besuchte Links werden teilweise in einer weiteren Farbe angezeigt.

Quirks-Modus

Der Quirks-Modus (von englisch „quirk“ = Eigenart, Macke) ist ein Kompatibilitätsmodus in verschiedenen Programmen, der Fehler früherer Versionen oder vergleichbarer Programme simuliert.

Reset-Stylesheet

Ein Reset-Stylesheet (oder auch: CSS Reset) ist eine Sammlung von Stylesheet-Definitionen, die Formatierungen für HTML-Elemente vereinheitlichen oder zurücksetzen.

Responsive Webdesign

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD, englisch responsive ‚reagierend‘) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.

Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Website betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

Sass (Stylesheet-Sprache)

Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die als CSS-Präprozessor mit Variablen, Schleifen und vielen anderen Funktionen, die Cascading Style Sheets (CSS) nicht mitbringen, die Erstellung von CSS vereinfacht und die Pflege großer Stylesheets erleichtert. Sie wurde ursprünglich beeinflusst von der Auszeichnungssprache YAML, von Hampton Catlin entworfen und von Natalie Weizenbaum entwickelt.

Nach der Fertigstellung der initialen Version setzte Weizenbaum zusammen mit Chris Eppstein die Arbeit an Sass fort und implementierte mit SassScript eine einfache Scriptsprache zum Gebrauch innerhalb von Sass-Dateien. Neben der unter MIT-Lizenz für viele Plattformen verfügbaren kommandozeilenbasierten Compilersoftware haben sich weitere Verarbeitungsprogramme etabliert.

Neben der ursprünglichen an YAML angelehnten Sass-Syntax unterstützt Sass auch die neuere und heute weiter verbreitete SCSS-Syntax, die sich an der klassischen CSS-Schreibweise orientiert.

Slicen

Slicen oder Slicing (vom englischen slice für „Scheibe“ und to slice in der Bedeutung von „in Scheiben schneiden“, „aufteilen“) ist ein Verfahren im Screen- und vor allem im Webdesign. Dabei wird ein Bild in mehrere kleinere zerteilt. Diese Teilbilder werden dann im Markup lückenlos nebeneinander gesetzt, sodass die fertige Konstruktion wieder aussieht wie das ganze Bild. Die Webseite zeigt also nicht eine große Grafik, sondern mehrere kleinere Teilgrafiken, die zusammen wie eine größere Grafik aussehen.

Ein Hauptgrund für das Zerteilen großer Bilder in Segmente war, dass dadurch einzelne Webseiten schneller in den Browser geladen wurden.

Stylus (Stylesheet-Sprache)

Stylus ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten.

Der Stylus-Quellcode wird serverseitig zu CSS kompiliert.

Der Compiler ist in JavaScript für die Plattform Node.js geschrieben.

Web Standards Project

Web Standards Project (kurz: WaSP) war eine Gruppe von professionellen Webseiten-Entwicklern, die eine breite Unterstützung der Standards des World Wide Web Consortiums im World Wide Web verfolgten. Gegründet durch George Olsen, Glenn Davis und Jeffrey Zeldman im Jahr 1998 war das Ziel der Entwickler, führende Browserhersteller wie etwa Microsoft mit dem Internet Explorer davon zu überzeugen, die definierten Standards, darunter auch HTML, Cascading Stylesheets und ECMAScript, einzuhalten. Nachdem die Unterstützung der Standards seitens der Hersteller immer weiter befolgt wurde, versteht sich die Organisation heute als bildende und lehrende Organisation. Ein bekanntes Projekt ist die Acid-Testreihe für Webbrowser.

Am 1. März 2013 verkündete das Web Standards Project seine Auflösung.

Webfarbe

Webfarben sind Farben, die für die Gestaltung von Webseiten eingesetzt werden. Die Spezifikationen der Webbrowser bieten die darstellbaren Farbvorgaben hexadezimal oder dezimal zu bezeichnen oder die browsereigenen Farbbezeichnungen zu nutzen.

World Wide Web Consortium

Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der Techniken im World Wide Web. Es wurde am 1. Oktober 1994 am MIT Laboratory for Computer Science in Cambridge (Massachusetts) gegründet.

Das W3C ist eine Mitgliedsorganisation. Gründer und Vorsitzender ist Tim Berners-Lee, der als Erfinder des World Wide Web gilt. Das W3C entwickelt technische Spezifikationen und Richtlinien in einem ausgereiften, transparenten Prozess, um maximalen Konsens über den Inhalt technischer Protokolle, hohe technische und redaktionelle Qualität und Zustimmung durch das W3C und seine Anhängerschaft zu erzielen.Beispiele für durch das W3C standardisierte Technologien sind HTML, XHTML, XML, RDF, OWL, CSS, SVG und WCAG.

Der Sitz des Deutsch-Österreichischen Büros ist seit Januar 2011 am Deutschen Forschungszentrum für Künstliche Intelligenz (DFKI) in Berlin.

Standards des World Wide Web Consortiums
Empfehlungen

ActivityPub • ARIACanonical XML CDF • CSS • DOM Geolocation API HTMLHTML5InkML ITSJSON-LD MathML OWL P3P • PLS • PNG RDFRDF-Schema RIFSCXML SISR SKOS SMILSOAP SRGS SSML SVGSPARQLTimed TextTurtleVoiceXML WSDLXForms XHTMLXHTML+RDFaXInclude XLink XMLXML BaseXML-EncryptionXML EventsXML Information Set XML NamespaceXML SchemaXML SignatureXPathXPointerXProcXQuery XSL XSL-FO XSLT (Elemente)

Logo des World Wide Web Consortiums
Arbeitsentwürfe
und Kandidaten

CCXMLCURIESMIL TimesheetssXBL • WICD • XFrames XBL • XHTML+MathML+SVG • XMLHttpRequest

Anmerkungen

XAdES XFDLXHTML+SMIL XUP

Richtlinien

Web Content Accessibility Guidelines • Multimodal Interaction Activity • Markup Validation Service

Initiativen

Web Accessibility Initiative

In anderen Sprachen

This page is based on a Wikipedia article written by authors (here).
Text is available under the CC BY-SA 3.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.