Eine Webdesignerin bei der Arbeit an ihrem Computer in einem modernen Büro
Bildnachweis: monkeybusinessimages/iStock/Getty Images
Die ursprüngliche Cascading Style Sheets-Spezifikation sowie die viel neuere CSS3-Revision sind Technologien, die verwendet werden, um HTML-Webseiten zu verbessern und zu formatieren. CSS wurde ursprünglich entwickelt, um die Präsentationsschicht einer Webseite effizienter zu handhaben als Formatierung mit HTML, die nie dazu gedacht war, den komplexen Aufbau des zeitgenössischen Webs zu bewältigen. Da CSS2 eine allgemein akzeptierte Erweiterung von CSS1 ist, impliziert der Begriff CSS ohne Nummer die Aufnahme von CSS2. Die CSS3-Spezifikation befindet sich (Stand Juli 2014) noch in der Entwicklung, daher müssen Webentwickler berücksichtigen, dass die Funktionsunterstützung von Browser zu Browser unterschiedlich ist.
CSS3 ist abwärtskompatibel mit CSS
CSS3 ist ein Update von CSS2, das die Kompatibilität mit allen CSS-Features aufrechterhält – CSS3 verwirft keinen CSS-Code. Der CSS3-Code wurde entwickelt, um Webseiten besser aussehen zu lassen und schneller zu laden sowie die Entwicklungszeit zum Erstellen von Seiten im Browser eines Benutzers zu verkürzen. CSS3 macht das Webdesign weniger abhängig von Bilddateien für Seitendesignelemente und reduziert die Dateiübertragungsanforderungen und die Downloadzeit, indem weniger Bilder verwendet werden. CSS1 konzentrierte sich auf die Formatierung des Erscheinungsbilds, während CSS2 Positionierungsfunktionen für Text und Objekte hinzufügte. Ältere Browserversionen wie IE 9 und frühere Versionen unterstützen die zusätzlichen Funktionen von CSS3 nicht weitestgehend, was zusätzliche Entwicklungszeit erfordern kann, um den CSS-Fallback-Code zu pflegen.
Video des Tages
CSS3 fügt abgerundete Ecken und Verläufe hinzu
Vor CSS3 mussten Webentwickler Bilddateien entwerfen, um Dinge wie abgerundete Ecken für strukturelle Grenzen und Hintergrundbildverläufe hinzuzufügen; CSS3 enthält vergleichbare Funktionen, die mit wenigen Codezeilen hinzugefügt werden können. In CSS muss ein Webentwickler einen Rahmen oder Farbverlauf entwerfen, auf den Bildserver hochladen, das Bild auf der Seite platzieren und mithilfe von CSS den Rahmen richtig positionieren. In CSS3 kann der Webentwickler mit Code wie ".roundBorder{border-radius: 10px;}" etwas Ähnliches erreichen. Hintergrundverläufe sind etwas komplizierter und erfordern unterschiedlichen Code für verschiedene Browser. Ein Weiß-zu-Schwarz-Verlauf für Chrome und IE verwendet beispielsweise Code wie ".gradBG{background: liner-gradient (white, black);}".
CSS3 fügt Animationsfunktionen und Texteffekte hinzu
CSS3 verfügt über eine Handvoll Funktionen, die in CSS nicht vorhanden sind, um das Aussehen Ihrer Seitenelemente zu verbessern. Mit CSS3 können Webentwickler Text mit einem Textschatten versehen, um das Lesen zu erleichtern oder visuelles Flair zu verleihen, und können Zeilenumbrüche in längeren Wörtern erzwingen, damit sie in Spalten mit Zeilenumbruch passen. Vor CSS3 mussten Webentwickler Animationen in Skriptsprachen wie JavaScript und jQuery programmieren. CSS3 fügt der Designebene mehrere Animationsfunktionen hinzu. Das W3C arbeitet noch an einem Standard für Webanimationen, um Kompatibilitätsprobleme zwischen den verschiedenen Animationstechniken zu lösen.
CSS3 definiert Textspalten
CSS3 fügt die Möglichkeit hinzu, Textabschnitte in mehrere Spalten aufzuteilen, um sie wie eine Zeitung zu lesen. In der CSS2-Spezifikation haben Webentwickler Schwierigkeiten, mehrspaltige Textabschnitte zu erstellen, da der Standard nicht für die automatische Aufteilung von Text ausgelegt ist. Insbesondere bei Websites mit Responsive Design, einer Entwicklungstechnik, die Inhalte basierend auf dem Bildschirmauflösung des Geräts anzeigen, können Personen mit größeren Monitoren Schwierigkeiten haben, Textzeilen zu lesen, die sich über das gesamte Bildschirm.
