CSS3 – Neue CSS-Stile

CSS – immer in Bewegung

Seit CSS3 von den Browsern auf breiter Front unterstützt wird, wächst CSS wie junges Holz. Die wichtigsten Erweiterungen gegenüber CSS2 sind Media Queries, ein neues Box-Modell und die @supports-Regel, von CSS Animationen mal ganz abgesehen.

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 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;
   }
}

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

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

Schon am 12. Januar 2016 hat Microsoft den Support für IE 10 eingestellt. IE11 kann ganz gut 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", 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.