Sven Wolfermann

CSS3 & Responsive Web

Twittern: @maddesigns #mmt28 #css3
Multimediatreff 28 - Köln, 03.12.2011

Wer ist die Flitzpiepe da überhaupt?

Sven Wolfermann - Certified TYPO3 Integrator

CSS3 Logo

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

border-radius

runde Ecken! YEAH!!!!111elf

border-radius

border-radius » Box vergrößern

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 » Browser-Support

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;
      	

box-shadow » anderer Offset / Spread-Wert

multiple Schatten

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

We can drop vendor prefixes for box-shadow, background-clip, border-radius in CSS now.
Divya Manian (Opera)

Content-Generierung

mit :before und :after Pseudo-Elementen

Ein praktischen Beispiel für :before und :after

Ein praktischen Beispiel für :before und :after

Die Überschrift

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

The Shapes of CSS — http://l.maddesigns.de/p5Q08r

:before & :after » Browser-Support

Web-Fonts

in your @font-face (© Jake Archibald)

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

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

aktueller Overhead für alle Browser

.gradient { 
	
  background-color: yellow; /* Fallback Color */
  background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue));
  background: -webkit-linear-gradient(top, yellow 0%, blue 100%); 
  background:    -moz-linear-gradient(top, yellow 0%, blue 100%); 
  background:     -ms-linear-gradient(top, yellow 0%, blue 100%); 
  background:      -o-linear-gradient(top, yellow 0%, blue 100%); 
  
  /* aktueller W3C Standard, bisher nicht implementiert */
  background:         linear-gradient(to bottom, yellow 0%, blue 100%);
  
}

linear-gradient

linear-gradient — mehrstufig (stop-color)

linear-gradient — harte Kanten

linear-gradient — harte Kanten

linear-gradient — harte Kanten

CSS3 Patterns Gallery by Lea Verou

Gradienten in CSS3

weitere Verlaufsfunktinen

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

Gradients » Browser-Support

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
} 
      	

ohne CSS3
mit CSS3 transition

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

CSS3 animation

jetzt kommt Bewegung ins Spiel!

Ähnlichkeiten zwischen CSS transition und animation

Die Unterschiede von CSS animation zu transition

@-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/)

Umsichtig mit den Animationen vorgehen!

Animation » Browser-Support

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

Nachteile

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

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!