CSS3 hat Javascript durch transition, transform und animation entlastet. Effekte wie border-radius und box-shadow ersparen den Browsern die Anfragen nach Grafiken und bringen kürzere die Ladezeiten.
Media Queries mit der @media-Regel – die Abfrage nach der Geräteklasse – sind der wichtigste Schritt für die angepasste Darstellung von Webseiten auf allen Geräten.
CSS3 teilt CSS in Module – CSS-Selektoren sind ein Modul, CSS Color und Background, Fonts und Positionierung sind weitere Module. Insgesamt gibt es über 50 Module. Die Einteilung in Module macht das große Feld der CSS-Eigenschaften handlicher: Module können nachgeschoben werden, wenn neue Geräte auf dem Markt kommen.
Allen voran stehen zwei wichtige Erweiterungen: Media Queries und ein neues Box-Modell.
Media Queries und display:flex
Media Queries passen das Layout an das Gerät an und erzeugen ein responsives Design für Handys, Tabletts, Drucker und Desktop-Monitore.
- Media Queries erweitern die @media-Regeln um die Abfrage nach der Größe des Viewports, der Größe des Monitors und nach der Orientierung des Geräts.
- CSS display: flex geht einen neuen Weg bei der Positionierung und verteilt Elemente entlang der horizontalen oder vertikalen Achse. Dabei entsteht ein Layout-Raster – ein CSS Grid –, das flexibler, sicherer und einfacher ist als die Positionierung mit float und display:inline-block.
Flexbox
Flexbox
Flexbox
.fbox { width:90% }
@media only screen and (min-width:720px) {
.fbox { width: 30%; margin: 1em 0 }
#fbox {
display:flex;
justify-content: space-between;
}
}
box-sizing: border-box
Zu den Fallen, in die jeder Einsteiger in CSS tappt, gehört das Box Modell. Welche Gründe das W3 auch immer für die komplizierte und inkonsistente Berechnung von Höhe und Breite einer Box mit padding und border hatte …
CSS3 bringt das box-sizing-Regel: Mit box-sizing: border-box verhalten sich HTML-Blöcke wie man es erwartet.
<div id="box">
<div class="box"><h5>Box1</h5></div>
<div class="box"><h5>Box2</h5></div>
<div class="box"><h5>Box3</h5></div>
</div>
#box { text-align: center }
.box { box-sizing: border-box;
width: 90px; height: 90px;
display:inline-block; vertical-align: top;
}
.box:nth-child(1) { padding:10px; border:10px solid gainsboro;}
.box:nth-child(2) { padding:20px; background-color: silver; color: white}
.box:nth-child(3) { border:20px solid gray}
Box1
Box2
Box3
- CSS3-Selektoren wie nth-child geben einen direkten Zugriff auf verschachtelte HTML-Elemente ohne CSS-Klassen.
border-radius, gradient, animation
Kleine Effekte geben der Seite mehr Charakter. Diese Effekte sind Klassiker, aber sie konnten in CSS2 nur mit Bildern und Javascript ins Leben gerufen werden.
- Transition, Transform und Animation übernehmen Aufgaben, die zuvor Javascript vorbehalten waren.
- CSS3 ergänzt die einfachen RGB-Farben und Hex-Farben um Transparenz.
- CSS gradient, box-shadow und text-shadow setzen Verläufe, Text-Effekte und Schlagschatten für Texte und Boxen.
- border-radius und background-size bringen abgerundete Ecken, mehrere Hintergrundbilder, Bilder für die schlichte CSS-Eigenschaft border.
border-radius:50% erzeugt einen Kreis ohne Bitmap-Bilder und Javascript. Die @keyframes-Regel setzt die Animation in Gang und radial-gradient erzeugt die Reflexion.
@keyframes play {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cssCircle { width: 160px; height: 160px; border-radius:50%;
animation-name:play;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background-image: radial-gradient(
circle closest-corner at 70px 70px,
hsl(90,30%,86%) 0%,
hsl(90,30%,60%) 99%);
}
Welche CSS3-Stile kann ich heute nutzen?
Seit April 2014 unterstützt Microsoft Windows XP und IE8 nicht mehr. IE9 implementierte die Standards für das Web schon umfassend – wenn man bedenkt, dass IE 9 bereits im Februar 2010 in den aktiven Dienst getreten ist.
| Firefox, Opera, Webkit, iOS | IE9 | IE10 | |
|---|---|---|---|
| display:flex | Ja | N | Ja |
| CSS Round Corners | Ja | Ja | Ja |
| CSS Embed Fonts | Ja | Ja | Ja |
| CSS Gradients | Ja | * | Ja |
| CSS Box Shadow | Ja | Ja | Ja |
| CSS Text Shadow | Ja | Ja | Ja |
| CSS Text Columns | Ja | Ja | Ja |
| HSL, HSLA, RGBA Farben | Ja | Ja | Ja |
| CSS Transitions | Ja | N | Ja |
Die Liste ist nur eine grobe Übersicht. Details sieht man am besten auf CANIUSE nach.
Conditional Comments und Browser-Präfix
Conditional Comments für Internet Explorer ermöglichen einen Fallback auf CSS2.1 und erlauben den Ersatz von CSS3-Stilen durche einfache Konstrukte für das Schlusslicht unter den Browsern.
Anfangs müssen viele CSS3-Stile mit Browser-eigenem Präfix angesprochen werden – z.B. display:-webkit-flex statt display:flex für die Webkit-basierten Browser wie Chrome, Safari und Konqueror.