Wer ist die Flitzpiepe da überhaupt?

• Sven Wolfermann, 34 - Freelancer aus Berlin
• CSS3 Adventskalender
• schreibt für das Webstandards-Magazin
• Twitter: @maddesigns
• Web: http://maddesigns.de

CSS3 Logo

Welche CSS3-Eigenschaften werden heute schon umfassend unterstützt?

• border-radius
• box-shadow
• Content-Generierung mit Pseudo-Elementen
• Webfonts
• linear-gradient
• transition

border-radius

runde Ecken! YEAH!!!!111elf

border-radius

• border-radius: 20px;
• border-radius: 10px 40px;
• 
• border-radius: 10px 40px 40px 10px;
• 
• border-radius: 10px / 40px;

border-radius » Box vergrößern

• border-radius: 50px;
• 
• border-radius: 50%;
• 

border-radius » browserspezifische Präfixe

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
      	

• border-radius: 4px;
  verstehen alle modernen Browser und der IE9

border-radius » Browser-Support

• Chrome

  na klar

• Firefox

  ab Version 4, etwas buggy in 3.6

• Opera

  ab Version 11.5

• Safari

  mit border etwas buggy bei Prozentwerten

• Internet Explorer

  ab Version 9

border-radius » Browser-Support

”Aber mein IE7 zeigt keine runden Ecken!“

muss er auch nicht!

Es gibt keinen guten (einfachen) Weg dem IE6-8 runde Ecken beizubringen. Die bessere Alternative ist runde Ecken weg zu lassen!

Der Informationsgehalt eines Textes wird durch die runden Ecken nicht besser.

Browsermarkt in Europa

box-shadow

Schatten - Whoohoo!

box-shadow » browserspezifische Präfixe?

-webkit-box-shadow: 2px 2px 5px black;
-moz-box-shadow: 2px 2px 5px black;  /* FF 3.6 */
box-shadow: 2px 2px 5px black;
      	

• -webkit-box-shadow ist für iPhone & Android noch nötig
• -webkit-box-shadow: 2px 2px 5px black; box-shadow: 2px 2px 5px black;
• -webkit-box-shadow: inset 2px 2px… box-shadow: inset 2px 2px 5px black;

box-shadow » anderer Offset / Spread-Wert

• box-shadow: 0px 0px 10px black;
• 
• box-shadow: 0px 0px 10px 10px black;
• 
• box-shadow: 0px 15px 10px -10px black;
• 
• box-shadow: inset 0px 15px 10px -10px…
• 

multiple Schatten

• box-shadow: 0px 10px 5px red, 10px 0px 5px blue, 0px -10px 5px green, -10px 0px 5px purple;
• 
• mehrere Schatten mit Komma trennen

• multiple border mit box-shadow

• box-shadow: 0 0 0 5px red, 0 0 0 10px blue, 0 0 0 15px green, 0 0 0 20px purple;

box-shadow » Cross-Browser Rendering

box-shadow ist nicht ”gleichmäßig“ implementiert, die Browserhersteller haben das Rendering für Ihre Engine angepasst

Übersicht der verschiedenen Implementationen

box-shadow » Browser-Support

• Chrome

  sowieso

• Firefox

  ab Version 4, seit 3.5 mit -moz-Präfix

• Opera

  ab Version 10.5

• Safari

  ab Version 5.1, seit 3.1 mit -webkit-Präfix

• Internet Explorer

  ab Version 9

Content-Generierung

mit :before und :after Pseudo-Elementen

Ein praktischen Beispiel für :before und :after

• 
• Wie funktioniert das?

Ein praktischen Beispiel für :before und :after

h3 {
  background-color: #68af21;
  color: white;
  font-size: 36px;
  padding: 20px;
  position: relative;
  border-radius: 12px;
}

h3:before {
  content: "\0020";
  position: absolute;
  width: 0; 
  height: 0;
  z-index: 2;

  bottom: -40px;
  left: 50px;

  border-top-color: #68af21;
  border-style: solid;
  border-width: 20px;
}

      	

1. Content-Generierung mit :before
   Hinweis: zur Visualisierung wird der Inhalt der Demo rot eingefärbt

2. Positionierung

3. Zuweisung von border

:before & :after » Browser-Support

• Chrome

  das

• Firefox

  können

• Opera

  alle

• Safari

  Browser

• Internet Explorer

  sogar ab Version 8!

Web-Fonts

in your @font-face (© Jake Archibald)

Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt

• Das klingt doch gut!

• zu schön um wahr zu sein...

• @font-face {
   font-family: 'DINBold';
   src: url("din-bold-webfont.eot");
   src: url("din-bold-webfont.eot?#iefix") format("embedded-opentype"),
        url("din-bold-webfont.woff") format("woff"), 
        url("din-bold-webfont.ttf") format("truetype"), 
        url("din-bold-webfont.svg#DINBold") format("svg");
  }

• um Gottes Willen...
• 

Font-Face Zuweisung

font: 48px/1.4 'Gloria Hallelujah', cursive;
      	

normale Schrift

Schrift mit Webfont

http://www.google.com/webfonts

http://www.fontsquirrel.com/

@font-face Generator

Hintergrundverlauf

background: linear-gradient();

linear-gradient — mehrstufig (stop-color)

• von 0 zu 50% zu 100%

  -webkit-linear-gradient(top, orange 0%,
                               red 50%,
                               orange 100%
                               );
  

• von orange » red » blue

  -webkit-linear-gradient(top, orange 0%,
                               red 50%,
                               blue 100%
                               );
  

linear-gradient — harte Kanten

• Verlaufshintergrund als Faux-Column nutzen

• 
  

  -webkit-linear-gradient(left, #184070 0%,
                                #184070 20%,
                                #819fd6 20%,
                                #819fd6 80%,
                                #184070 80%,
                                #184070 100%);
  

linear-gradient — harte Kanten

• 
  

  -webkit-linear-gradient(left, #184070 0%,
                                #184070 50%,
                                #819fd6 50%,
                                #819fd6 100%);
  

• background-size: 100px 100px;
  

linear-gradient — harte Kanten

• 
  

  -webkit-linear-gradient(-45deg, #184070  25%, 
                                #819fd6 25%, 
                                #819fd6 50%, 
                                #184070  50%, 
                                #184070  75%, 
                                #819fd6 75%, 
                                #819fd6 100%);
  background-size: 100px 100px;
  

Gradienten in CSS3

weitere Verlaufsfunktinen

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

repeating-linear-gradient(red, blue 20px, red 40px);
repeating-radial-gradient(red, blue 20px, red 40px);

Gradients » Browser-Support

• Chrome

  mit -webkit-Präfix

• Firefox

  mit -moz-Präfix

• Opera

  mit -o-Präfix

• Safari

  mit -webkit-Präfix

• Internet Explorer

  erst ab Version 10 mit -ms-Präfix

Wie soll man damit umgehen?

Verwenden!

Zugegeben ist es die Präfix-Hölle!

Für den Internet Explorer auf PNG-Bilder zurückgreifen

Online-Tools verwenden:

http://www.colorzilla.com/gradient-editor/

CSS3 transition

Übergänge zwischen dynamischen Pseudoklassen steuern

CSS Transitions » Überblick Einzeleigenschaften

transition-property
welche Eigenschaft wird verändert, z.B. background-color, opacity, … oder all – also alle Eigenschaften gleichzeitig

transition-duration
Die Dauer der Veränderung – Angabe einer Zeit für alle oder kommagetrennt je “transition-property” Eigenschaft

transition-timing-function
Bézierkurve á la jQuery Animation, also ob die Animation gleichmäßig abläuft linear oder ease-Kurven.

transition-delay
Eine Verzögerung der Veränderung, sozusagen bis die Animation beginnt

Transition zwischen Pseudoklassen

dynamische Pseudoklassen

:hover, :active, :focus, :target, :link, :visited, :disabled, ...

aber auch zwischen @media-Queries

Eigenschaften animieren

mit Kurzschreibweise und allen Browser-Präfixen

.box {  
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
       -o-transition: all 1s ease;
          transition: all 1s ease;
}
.box:hover { 
  background-color: #184070
} 
      	

bestimmte Eigenschaften animieren

a.transition1 {  
  -webkit-transition: color 1s ease-out;
  /* weitere Browser Varianten */
}
a.transition2 {  
  -webkit-transition: background-color 1s ease-out;
  /* weitere Browser Varianten */
}
a:hover { 
  background-color: red;
  color: white;
}

ohne CSS3 color animiert background-color animiert

CSS Transition » Tools

Ceaser - CSS Easing Animation Tool (matthewlein.com/ceaser/)

cubic-bezier.com (cubic-bezier.com)

Link-Tipps

CSS Transitions 101 (www.webdesignerdepot.com/2010/01/css-transitions-101/)

Let the Web move you — CSS3 Animations and Transitions (www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/)

Transition » Browser-Support

• Chrome

  mit -webkit-Präfix

• Firefox

  mit -moz-Präfix

• Opera

  mit -o-Präfix

• Safari

  mit -webkit-Präfix

• Internet Explorer

  erst ab Version 10 mit -ms-Präfix

CSS3 animation

jetzt kommt Bewegung ins Spiel!

Ähnlichkeiten zwischen CSS transition und animation

• Beide animieren die Veränderung der CSS-Eigenschaft über einen bestimmten Zeitraum
• Beide haben eine Laufzeit
• Beide haben eine optionale Verzögerung
• Beide verfügen über einen Timing-Funktion mit den gleichen Werten (cubic-bezier)

Die Unterschiede von CSS animation zu transition

• Animationen können beliebig oft wiederholt werden
• Animationen können vorwärts und rückwärts laufen
• Animationen können eine beliebige Anzahl von definierten Zwischenstufen "Keyframes" haben. Transitions haben nur einen definierten Anfang- und Ende-Status.
• Mit Transition kann auf eine zu animierende Eigenschaft reduziert werden. Bei Animation müssen jeweils neue Keyframe-Sets dafür definiert werden.

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
  }
}
.animation {
  -webkit-animation: pulse 1s ease 0s alternate none infinite;
     -moz-animation: pulse 1s ease 0s alternate none infinite;
          animation: pulse 1s ease 0s alternate none infinite;
}
.animation:hover {
  -webkit-animation-play-state:paused;
     -moz-animation-play-state:paused;
          animation-play-state:paused;
}
		

Animation Eigenschaften

Shorthand:

  /* plus prefix */
  animation: pulse 1s ease 0s alternate none infinite;
      	

Einzeleigenschaften

animation-name: pulse
animation-duration: 1s
animation-timing-function: ease
animation-delay: 0s
animation-direction: alternate
animation-fill-mode: none
animation-iteration-count: infinite

CSS Animation » Tools (fertige "Libraries" mit Keyframe-Sets)

Animate.css (daneden.me/animate/)

Animatable (leaverou.github.com/animatable/)

Animation » Browser-Support

• Chrome

  mit -webkit-Präfix

• Firefox

  mit -moz-Präfix

• Opera

  ???

• Safari

  mit -webkit-Präfix

• Internet Explorer

  erst ab Version 10 mit -ms-Präfix

Responsive Web

Auf Umgebung und Engeräte reagieren

Responsive Web

unzähle Geräte mit unterschiedlichsten Bildschirmgrößen

CSS3 @media-Queries

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops */
@media only screen 
and (min-width : 1024px) {
/* Styles */
}
      	

CSS3 @media-Queries

get auch bei extern eingebundenen Files

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">
      	

für höhere Auflösung optimiertes CSS - iPhone4

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">
      	

Layout für kleine Bildschirmgrößen linearisieren

@media screen and (max-width: 600px) {
  header,
  footer,
  .main {
    float: none;
    width: auto;
  }
}
      	

keine statische Bildgrößen

img { max-width: 100%; }
      	

Beispiel-Gelerien - mediaqueri.es

Beispiel-Gelerien - mediaqueri.es

Vorteile

• niedriger Entwicklungsaufwand, weil das gleiche HTML als Basis dient.
• einfach für bestehende Seiten optimieren

Nachteile

• Alle Resource werden geladen, auch wenn sie nicht angezeigt werden (display:none)
• um so größer die Website, desto schwieriger kann es werden
• speziell entwickelte Webapps können im Einzelfall besser sein

Lösungsansätze für Bildgrößenproblematik

CSS3-Ansatz von Nicolas Gallagher

http://nicolasgallagher.com/responsive-images-using-css3/

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">
      	

Responsive Images

https://github.com/filamentgroup/Responsive-Images

<img src="small.jpg?full=large.jpg"> 
      	

@media » Browser-Support

• Chrome

  japp

• Firefox

  jo

• Opera

  ja

• Safari

  na klar

• Internet Explorer

  ab Version 9

Lösung für IE7/IE8

respond.js - https://github.com/scottjehl/Respond

ist mittlerweile auch in modernizr integriert

technische Lösungen sind vorhanden - Designer, Konzepter und Berater müssen an das Responsive Web herangeführt werden

CSS - der nächste Schritt

Coding mit SASS & Compass

SASS & Compass als Metasprache für CSS

SASS (Syntactically Awesome Stylesheets) bietet neue Möglichkeiten für CSS, z.B. Variablen, Verschachtelung oder Code-Snippets

SASS & Compass

Compass ist ein Framework, dass SASS erweitert und z.B. eigene Code-Snippets mitbringt

zudem bietet Compass ein umfangreiche Funktionen, die das Schreiben von CSS erleichtern

SASS kompiliert zu sauber strukturiertem CSS

Nutzung von Variablen und Nesting (Verschachtelung)

/* style.scss */

$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;

nav {
  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;
  li {
    float: left;
    width: $navbar-width/$items - 10px;
  }
  a {
    background-color: lighten($navbar-color, 20%);
    &:hover {
      background-color: lighten($navbar-color, 10%);
    }
  }
}

kompiliertes CSS

nav {
  width: 800px;
  border-bottom: 2px solid #ce4dd6; }
nav li {
  float: left;
  width: 150px; }
nav a {
  background-color: #e5a0e9; }
nav a:hover {
  background-color: #d976e0; }
      	

Compass CSS3 Mixins

.box { @include border-radius(4px); }

schönes Feature

automatische Spriting

public/images/icon/new.png
public/images/icon/edit.png
public/images/icon/save.png
public/images/icon/delete.png
      	

@import "icon/*.png";
@include all-icon-sprites;
      	

.icon-sprite,
.icon-delete,
.icon-edit,
.icon-new,
.icon-save   { background: url('/images/icon-s34fe0604ab.png') no-repeat; }

.icon-delete { background-position: 0 0; }
.icon-edit   { background-position: 0 -32px; }
.icon-new    { background-position: 0 -64px; }
.icon-save   { background-position: 0 -96px; }
      	

http://compass-style.org/help/tutorials/spriting/

”Wer SASS & Compass nicht probiert hat, kann nicht darüber urteilen.”

Danke für die Aufmerksamkeit!