CSS

Die Abkürzung CSS wird für den englischen Begriff Cascading Style Sheets verwendet, der übersetzt so viel wie gestufte Gestaltungsbögen bedeutet. Inzwischen kommt CSS auf der überwiegenden Mehrzahl der Websites zur Anwendung und ist auch ein fester Bestandteil der Content Management Systeme geworden. Der Vorteil von CSS ist, dass die eigentlichen Inhalte von den Anweisungen zur Darstellung im Browser getrennt verwaltet werden können. Innerhalb der Cascading Style Sheets können die HTML-Angaben ganz normal beispielsweise für die Kennzeichnung von Überschriften verwendet werden. Dass in der Bezeichnung der Begriff „Cascading“ enthalten ist, hat einen guten Grund: CSS arbeitet mit einem Vererbungssystem, welches die mehrfache Hinterlegung von Angaben zur Darstellung überflüssig macht. Damit tragen die Cascading Style Sheets zur Verringerung des für eine Website benötigten Speichervolumens bei.

Wie ist CSS entstanden und wie hat es sich entwickelt?

Die erste Version von CSS entstand aus der Zusammenarbeit von Hakon Wium Lie und Bert Bos, die damals an unterschiedlichen Arten der Auszeichnung des Layouts von Websites arbeiteten. Von Hakum Wium Lie, der damals für das Institut CERN tätig war, stammt der Vorgänger „Cascading HTML Style Sheets“, auch kurz CHSS genannt. Bert Bos konzentrierte sich bei seiner Entwicklung einer Style-Sheet-Programmiersprache auf den Browser Argo. Lie präsentierte seine Ergebnisse im Jahr 1984 in Chicago bei der Konferenz „Mosaic and the Web“. Ein Jahr später wurde die erste Version von CSS an gleicher Stelle von beiden Entwicklern vorgestellt. Damit gerieten Bert Bos und Hakon Wium Lie ins Blickfeld des World Wide Web Consortiums (W3C).

1996 wurde der erste Standard für CSS veröffentlicht. Allerdings fand er bei den Entwicklern der Browser kaum Beachtung, was auch für die im Jahr 1998 publizierte zweite Version gilt. Erst ab 2010 waren die meisten Browser in der Lage, Websites korrekt darzustellen, die von den Experten für professionelles Webdesign in CSS programmiert worden waren. Im Juni 2011 erschien mit der Version 2.1 ein überarbeiteter Standard für CSS, der nur noch die Elemente enthielt, die zu dieser Zeit von allen gängigen Browsern unterstützt wurden. Derzeit (Stand Janaur 2015) wird an der dritten Version gearbeitet. Wissenswert für jeden Programmierer und Webdesigner ist, dass es nach den bisherigen Aussagen des W3C für CSS keine Version 4 geben soll.

Was bedeuten die Selektoren bei CSS?

Die Selektoren sind bei CSS dafür zuständig, genau anzugeben, welche Eigenschaften für bestimmte Bereiche eines Dokuments bzw. einer Website gelten sollen. Ihre Aufgaben zeigen sich bei WordPress sehr deutlich. Hier können beispielsweise unterschiedliche Angaben zum Aufbau von Inhalten gemacht werden, die als Seite, als Kurzmitteilung oder als Artikel angelegt werden. Die Themes übernehmen im Rahmen der Vererbung die von WordPress selbst festgelegten Eigenschaften oder überschreiben diese. Innerhalb eines Selektors können mehrere Eigenschaften festgelegt werden. Dabei werden die Selektoren in verschiedene Gruppen gegliedert:

• einfache Selektoren
• Kombinatoren
• Pseudoklassen
• strukturelle Pseudoklassen
• Pseudoelemente

Um eine mit CSS programmierte Website für alle Browser im Interesse der Usability in einer identischen Qualität darstellbar zu machen, werden die so genannten CSS-Hacks verwendet. Die Bezeichnung Hacks ist davon abgeleitet, dass von den Programmierern eine Schwachstelle bei der Interpretation des Quellcodes durch die Browser ausgenutzt wird, um sie mit Befehlen zu „füttern“, die nicht im verbindlichen Standard für CSS enthalten sind.

Was bewirkt das media-Attribut bei CSS?

Die Webdesigner und Programmierer müssen heute beachten, dass Websites nicht länger nur vom klassischen PC oder Notebook aus aufgerufen werden können. Bei der Darstellung müssen auch die technischen Daten der Displays von Smartphones und Tablets sowie die Fähigkeiten der mobilen Browser mit beachtet werden. Die dafür notwendigen Angaben zur unterschiedlichen Darstellung finden sich bei CSS in den media-Attributen.

Die Angabe „all“ bewirkt eine einheitliche Darstellung auf allen Arten von Ausgabegeräten. Mit der Kennzeichnung „tv“ wird das Layout an das Können der Displays von Fernsehgeräten angepasst. Dieses Attribut wird künftig an Bedeutung gewinnen, denn immer mehr Fernsehgeräte bringen Internetfähigkeiten mit. Wer seine Website sehbehinderten Menschen zugänglich machen möchte, sollte sich mit der bei CSS möglichen Verwendbarkeit des Attributs „braille“ beschäftigen, denn dieses führt dazu, dass eine Website auch auf einem speziellen Ausgabegerät für Blindenschrift angezeigt werden kann.

Für die Anpassung des Layouts an die Art des Ausgabegeräts sind bei CSS die so genannten Media Queries zuständig. Sie prüfen vor der Übermittlung der Website-Daten, welche Größe das jeweilige Browserfenster und das Display des verwendeten Ausgabegeräts haben. Beim Display wird außerdem die maximale Bildschirmauflösung abgefragt. Auch können die Media Queries von CSS erkennen, ob das Display im Hoch- oder Querformat im Einsatz ist. Dieser Aspekt kommt bei Smartphones und Tablets mit Lagesensor zum Tragen.

Interessiert? Erfahren Sie mehr zum Thema "CSS" - kontaktieren Sie uns jetzt