« Zurück zur Übersicht
Headerbild für Blog-Beitrag CSS3

Mit CSS3 Websites gestalten

Mit CSS3 Websites gestalten

CSS ist heutzutage ein sehr wichtiges Instrument für die Gestaltung von Websites. Auch wenn viele CMS-Systeme die Einrichtung einer Site erleichtern, so benötigt man für die Detailanpassung immer noch Kenntnisse in CSS. HTML und CSS stehen in enger Verbindung mit dem W3C, dem World Wide Web Konsortium. Das Gremium befasst sich mit der Erarbeitung der Standards und Spezifikationen für die verschiedensten Formate. Das W3C ist dafür verantwortlich, dass sich der neue CSS3 Standard durchgesetzt hat.

Nahezu alle neuen Browser unterstützen diese Version. Der Vorteil von CSS3 besteht darin, dass sich Änderungen und Neuerungen damit besser umsetzen lassen. Die Darstellung von Websites sieht wesentlich besser aus als mit den älteren Versionen. Gerade auf Tablets und Smartphones zeigt sich die Stärke von CSS3. Die Sites werden schneller geladen, was natürlich einen enormen Pluspunkt für die mobile Optimierung darstellt. Das beste CSS funktioniert selbstverständlich nicht ohne HTML. Kurz gesagt ist HTML dafür zuständig, die Struktur einer Site zu erfassen und zu regeln. Es geht darum festzulegen, ob es sich bei einem einzelnen Bestandteil um einen Absatz, eine Überschrift oder ein Aufzählungszeichen handelt. Mit CSS hingegen wird die Darstellung der Inhalte festgelegt. Hierzu zählen das Layout, die Farben und die Typografie.

Inhaltsbild 2 Blog-Beitrag CSS3

Welche Browser unterstützen CSS3?

Firefox gehört mit zu den beliebtesten Internetbrowsern. Er kann die gängigsten CSS3-Formate sinnvoll umsetzen. Die neuen technischen Möglichkeiten wie Mehrspaltenlayouts, Transformationen und Übergänge stellen für den Browser kein Problem dar. Microsoft hat mit jeder Weiterentwicklung des Internet Explorers die Umsetzung von CSS3 verbessert. Mittlerweile ist Microsoft beim Browser Edge angelangt, der mit dem neuen Format kompatibel ist und den IE11 ersetzt. Viele Personen benutzen aber noch ältere Versionen, die vom Konzern nicht mehr mit Updates versorgt werden und CSS3 daher noch nicht unterstützen.

Safari und Chrome gehören zu den Anwendungen, welche CSS3 am besten umsetzen können. Beide Browser setzen auf diesen fortschrittlichen Standard. Gerade Google bietet viele seiner Produkte an, die gleich auf die neue Version bauen. Opera ist ein kostenloser Browser, bei dem der Werbeblocker standardgemäß integriert ist. Er ist für Mac, Linux und Windows erhältlich und reicht von der Geschwindigkeit an die anderen Browser heran. Zahlreiche Erweiterungen sorgen dafür, dass der Nutzer weitere nützliche Funktionen einrichten kann. Seine Vorteile spielt Opera vor allem auf Smartphones aus. Das Programm unterstützt CSS3 ab Opera Presto 2.6.

Die wichtigsten Neuerungen für die Websitegestaltung

Eine neue Funktion stellen die CSS3-Fonts dar. Damit ist es möglich, jede beliebige Schriftart in die Website einzubetten. Früher war die Darstellung einer Nichtstandardschrift nur möglich, wenn der Nutzer sich diese zuvor auf seinen PC geladen hatte. Eine Einschränkung bei den CSS3-Fonts gibt es allerdings noch. Wie bereits beschrieben, bilden ältere Browserversionen die neuen Formate nicht ab. Eine weitere Neuerung stellen die Media Queries dar, mit deren Hilfe unterschiedliche Formatierungen je nach Bildschirmgröße zur Anwendung kommen. Im Klartext bedeutet dies, dass beim Zugriff auf eine Website über ein Smartphone kleinere Stilangaben aktiviert werden.

Ein weiterer Vorteil von CSS3 ist, dass Hintergrundbilder damit besser gesteuert werden können. Mit dem Befehl „background-size“ kann die Größe von Hintergrundbildern angegeben werden. Außerdem lassen sich einem Bild mehrere Hintergrundbilder zuordnen. Der Befehl legt ebenfalls fest, an welcher Stelle (am Rahmen, Inhalt, Innenabstand) das Hintergrundbild ausgerichtet werden soll. Des Weiteren können mit CSS3 die Zeilenumbrüche und Blöcke sinnvoller gestalten werden. Ein zusätzlicher wichtiger Punkt ist, dass sich Animationen ganz ohne die Verwendung von JavaScript erstellen lassen. Dies ist vor allem von Vorteil, wenn Nutzer die Verwendung von JavaScript ausgeschaltet oder blockiert haben. Die Animationen werden trotzdem aufgerufen und sind nicht von JavaScript abhängig.

Inhaltsbild 1 Blog-Beitrag CSS3

Die Anwendung von CSS3 im Alltag

CSS3 kommt im beruflichen Alltag immer mehr zur Anwendung. Die meisten CMS-Systeme und Designvorlagen bauen bereits darauf auf. Wie bereits beschrieben, setzt Google in vielen seiner Anwendungen ebenfalls auf die neuen Effekte. Es zeigt sich aber auch, dass viele Websites noch zum Teil auf den ganz alten Funktionen basieren. Viele befürchten immer noch Nachteile bei der Darstellung der Inhalte, da (wie bereits beschrieben) die älteren Browserversionen CSS3 nicht unterstützen. Doch überwiegen die Vorteile von CSS3 auf jeden Fall. Dies zeigt sich vor allem daran, dass CSS3 seine Pluspunkte bei der Darstellung von mobilen Inhalten ausspielt. Da immer mehr Menschen von ihren Mobiltelefonen auf die Inhalte von Websites zugreifen, ist es eigentlich unerlässlich, dass sich CSS3 zunehmend etabliert.

Die Mehrheit der Anwender setzt eigentlich schon voraus, dass die Websites grafisch und inhaltlich sehr gut aufbereitet sind und dabei gleichzeitig flüssig laufen. Sie möchten außerdem keine JavaScript Anwendungen mehr öffnen, welche die Ladezeit unnötig verzögern. Die weitere Entwicklung in den nächsten Jahren lässt sich nur schwer voraussagen. Sicher ist allerdings, dass der Trend zunehmend in Richtung Verbesserung der Ladezeit und der Darstellung geht. So wird es in der nächsten Zeit auch eine Weiterentwicklung bei CSS geben, damit die neuen Anforderungen besser in die Realität umgesetzt werden können. Es bleibt abzuwarten, welche neue Funktionen dann auf uns zukommen.