Mein Vortrag zum Thema CSS für Fortgeschrittene auf dem WordCamp 2015 in Berlin

1. A kind of Magic -
CSS für Fortgeschrittene
WordCamp 2015 Berlin
Christoph Daum

2. Christoph
Daum
Head of IT bei UNIQ
www.un-iq.de
www.christoph-daum.de

4. Bad Practice
Bildwechsel per JavaScript
Bildwechsel ohne Sprite
Falsche Bildformate
Nicht optimierte Grafiken
Verläufe/Schatten als Grafik

5. CSS für Fortgeschrittene
1.CSS-Sprites
2.Icon-Fonts
3.Retina/HiRes Optimierung
4.Anregungen zur Vertiefung

6. CSS-Sprites
Was sind das
eigentlich, und was
bringen sie mir

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

9. CSS-Sprites im Überblick
Beliebige Farben
Weniger Dateiaufrufe
Geringe Dateigröße
Kein „Flackern“ bei
Bildwechseln
Nicht (automatisch)
Retina-Optimiert
Animationen
komplex/gewöhnungsbe
dürftig
Vorteile Nachteile

10. Icon-Fonts
Web-Fonts die verrückt
spielen

11. Icon-Fonts
Icon-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

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

13. Beispiele
Font Awesome
Eine der bekanntesten Icon Font
http://fontawesome.io/
Ligature Symbols
Icon Font die Ligaturen nutzt
http://kudakurage.com/ligature_symbols/
Fontello
Webservice zum erstellen individueller Icon Fonts
http://fontello.com

16. Retina
Optimierung
Webseiten für die
schönsten Displays
rausputzen
Bildquelle: html5-mobile.de

17. Retina Optimierung
Icon-Fonts
Responsive Images
Media Queries
-webkit-image-set
SVG

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

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

20. Vielen Dank
c.daum@me.com
www.christoph-daum.de

21. Fragen?