CSS3 • Neue Stile | mediaevent.de

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 Anpassung von Webseiten an alle Arten von Geräten. Die @supports-Regel stellt ohne den Einsatz von Feature Detection per Javascript / Modernizr fest, ob der Browser bestimmte Eigenschaften unterstützt.

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 wichtige Erweiterungen: Media Queries, ein neues Box-Modell und die @supports-Regel.

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.

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 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.

	Firefox, Opera, Webkit, iOS	IE10 / IE11
display:flex	Ja	Ja
CSS Embed Fonts	Ja	Ja
CSS Gradients	Ja	Ja
CSS Box Shadow	Ja	Ja
CSS Text Shadow	Ja	Ja
CSS Text Columns	Ja	Ja
CSS Transitions	Ja	Ja

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.