A kind of magic - CSS für Fortgeschrittene

A kind of Magic -CSS für

FortgeschritteneWordCamp 2015 BerlinChristoph Daum

Christoph DaumHead of IT bei UNIQ

www.un-iq.dewww.christoph-daum.de

Bad Practice

Bildwechsel per JavaScript

Bildwechsel ohne Sprite

Falsche Bildformate

Nicht optimierte Grafiken

Verläufe/Schatten als Grafik

CSS für Fortgeschrittene

1.CSS-Sprites

2.Icon-Fonts

3.Retina/HiRes Optimierung

4.Anregungen zur Vertiefung

CSS-SpritesWas sind das eigentlich, und was bringen sie mir

CSS-SpritesCSS-Sprites bezeichnet eine einzelne Grafikdatei, die viele Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.

Quelle: https://de.wikipedia.org/wiki/CSS-Sprites

CSS-Sprites im Überblick

Beliebige Farben

Weniger Dateiaufrufe

Geringe Dateigröße

Kein „Flackern“ bei Bildwechseln

Nicht (automatisch) Retina-Optimiert

Animationen komplex/gewöhnungsbedürftig

Vorteile Nachteile

Icon-FontsWeb-Fonts die verrückt spielen

Icon-FontsIcon-Fonts sind Webfonts, die Icons statt Buchstaben darstellen und vor allem als funktionale Piktogramme verwendet werden. Sie sind ein Alternative zu reinen Bilddatei oder CSS-Sprites. Da Icon-Fonts meist als Vektorschriften angelegt werden, können diese grafisch skalieren und haben eine geringere Dateigröße als Pixel-Icons.

Quelle: https://de.wikipedia.org/wiki/Webtypografie#Icon-Fonts

Icon-Fonts im Überblick

Vektorbasiert

Größenwechsel

Farbwechsel

Geringe Dateigröße

Nur Einfarbig*

Mehrere Dateiformate notwendig

Darstellung Browser/OS abhängig

Vorteile Nachteile

* Mit Tricks bis zu 3 Farben plus Hintergrund

BeispieleFont AwesomeEine der bekanntesten Icon Fonthttp://fontawesome.io/

Ligature SymbolsIcon Font die Ligaturen nutzthttp://kudakurage.com/ligature_symbols/

FontelloWebservice zum erstellen individueller Icon Fontshttp://fontello.com

Retina OptimierungWebseiten für die schönsten Displays rausputzen

Bildquelle: html5-mobile.de

Retina Optimierung

Icon-Fonts

Responsive Images

Media Queries

-webkit-image-set

SVG

Anregungen zur Vertiefung

CSS Minify Data URIs Responsive Images

SVG Sprites CSS Animations CSS Transitions

Pointer-Events CSS Gradients Sprite Animation mit step()

Multiple Box-Shadows rem calc vw,vh,min,vmax

Links• http://caniuse.com/

• https://css-tricks.com

• http://lea.verou.me/

• http://leaverou.github.com/animatable

• http://lesscss.org/

• http://sass-lang.com/

• http://forecastfont.iconvau.lt/

• http://generatewp.com

Vielen Dankc.daum@me.comwww.christoph-daum.de

Fragen?