CSS, HTML und Javascript mit {stil}

CSS3 – Neue CSS-Stile

CSS Eigenschaften neu in CSS3

CSS3 entlastet Javascript durch transition, transform und animation. Effekte wie border-radius und box-shadow entlasten die Browser um Anfragen nach Grafiken und damit die Ladezeiten.

Media Queries – 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:-webkit-flex;
      display:-ms-flexbox;
      display:flex;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
   }
}

box-sizing: border-box

Zu den Fallen, in die jeder Einsteiger in CSS hineinfällt, 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-Boxen 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.

Liste der CSS3-Module beim W3C.

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.