CSS3 – Neue CSS-Stile

Media Queries und responsives Webdesign

Media Queries passen das Layout an den ViewPort – das Browserfenster – 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, Größe des Monitors und der Orientierung des Geräts.
• Um Bilder an die Größe des Viewports und den Platz im Layout anzupassen, liefert das HTML img-Tag mit srcset und sizes verschieden große Versionen der Bilddatei und überlässt den Browser die Wahl einer passenden Bildgröße.

Positionieren: flex und grid

CSS display: flex und display: grid gehen neue Wege bei der Positionierung und verteilen Elemente entlang der horizontalen oder vertikalen Achse oder in einem tabellenähnlichen Raster. Dabei entsteht ein Layout-Raster – ein CSS Grid –, das flexibler, sicherer und einfacher ist als die Positionierung mit float und display:inline-block.

.fbox { width:90% }

@media only screen and (min-width:720px) {
   .fbox { width: 30%; margin: 1em 0 }
   #fbox {
      display:flex;
      justify-content: space-between;
   }
}

Mit der breiten Unterstützung von display:flex und display:grid hat das Content Management System WordPress seinen alten Editor durch den Gutenberg-Editor ersetzt, der dem Autor flexible moderne Layouts ohne HTML und CSS-Kenntnisse eröffnet.

CSS Animationen

Mit CSS3 sind Animationen nicht mehr Sache für Javascript, sondern haben ein einfaches Gerüst in CSS. Die Spannbreite der CSS-Animationen reicht von einfachen weichen Übergängen bis hin zu vollständigen Slideshows, die sich ohne Javascript realisieren lassen.

Kleine Effekte geben der Seite mehr Charakter und reagieren auf Aktionen des Benutzers. Diese Effekte sind Klassiker, aber sie konnten in CSS2 nur mit Bildern und Javascript ins Leben gerufen werden.

Hinter den Animationen – vom einknickenden Hamburger-Symbol bis zum weichen Hinuntergleiten des Navigationsmenü – stecken nur HTML und CSS. Und auch der Delfin dreht seine Runden mit purem CSS.

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}

• CSS3-Selektoren wie nth-child geben einen direkten Zugriff auf verschachtelte HTML-Elemente ohne CSS-Klassen.

border-radius, gradient, animation

• 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 nutzen?

Schon am 12. Januar 2016 hat Microsoft den Support für IE 10 eingestellt. IE11 kann noch etwas mithalten, Microsoft EDGE gehört in die Liga der modernen Browser.

Die Liste ist nur eine grobe Übersicht. Details sieht man am besten auf CANIUSE nach.

Liste der CSS3-Module beim W3C.

Browser-Präfix und @supports-Regel

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 (inzwischen zwar "Blink"-basiert, aber immer noch mit webkit-Präfix), Safari und Konqueror.

Heute führt die @supports-Regel eine elegante Abfrage direkt im CSS durch, so dass moderne Stile für moderne Browser eingesetzt werden können und alte Browser mit einem angemessenen Ersatz beliefert werden.

Internet Explorer hingegen stammt aus dem Jahr 2012 und beherrscht nur einen Bruchteil der Eigenschaften aus CSS3 nach dem aktuellen Standard. Zwar sind die meisten der CSS3-Eigenschaften auch in IE11 vorhanden, aber sie entsprechen noch dem frühen Standard, haben andere Bezeichnungen und brauchen den -ms-Browser-Präfix.