Ein kleiner Blick auf CSS, Session auf dem Barcamp Mainz 2011

1. CSS3
Jens Grochtdreis

4. Welche Lücke füllt CSS3?

5. Moving from hacks to
solution
http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/

6. neue Layoutmodelle
mehr Möglichkeiten mit Rahmen und Hintergründen
Verringerung des
Grafikeinsatzes
Animationen
neue Selektoren

7. Transparenz
mit rgba() runde Ecken
Verläufe (gradient)
Transitions
media-queries
calc() mehrere Spalten

8. Die Vorteile
‣ Weniger Schmuckbilder werden benötigt.
‣ Weniger Javascript wird benötigt.
‣ Animationen und Transitionen sind mittels CSS
schneller, als mittels Javascript.
‣ Es wird seltener Code nur für Optik benötigt,
der Quellcode schmaler und lesbarer.

9. Die Nachteile
Es gibt keine!

10. Naja, vielleicht einen kleinen

11. Evolution, nicht Revolution

12. ‣ CSS3 baut auf CSS2 auf
‣ Browser ignoriert einfach unbekannte
Eigenschaften: graceful degredation
‣ Gibt echte Lösungen für immer
wiederkehrende Designprobleme

13. Kann ich CSS3 schon heute
nutzen?

14. JEIN

15. Manche neuen Eigenschaften
Text implementiert.
sind in keinem Browser

16. Funktioniert das
auch im IE?
http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg

17. http://www.findmebyip.com/litmus/

18. http://www.findmebyip.com/litmus/

19. Microsoft ist der Bremsklotz
des Fortschritts

20. Aber nur, wenn wir uns
bremsen lassen!

21. Alte IE-Versionen ...
http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg

22. http://workdiary.de/

23. Der IE ist der schwarz-weiss
Fernseher des Web
IE bis Version 8 moderne Browser
http://home.snafu.de/wumpus/rdfmu46.jpg http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg

24. konkreter, sinnvoller
Anwendungsfall

25. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html

26. runde Ecken

27. Runde Ecken auch für Bilder

28. Unterschiedliche Rundungen
http://jsfiddle.net/Flocke/5uQX5/

29. Runde Ecken für IE ≤ 8
http://www.vertexwerks.com/tests/sidebox/

30. Wartungshölle
‣ Für jede Farbe eine eigene Grafik (auch für hover bei
Links!)
‣ Runde Ecken auf Verläufen oder Transparenzen sind ganz
übel als Grafik
‣ Jede Änderung und Anpassung geschieht in Photoshop/
Fireworks
‣ Viele Requests
‣ Keine Skalierung

31. http://jsfiddle.net/Flocke/9mgm7/

32. Rom, die Frisur hält
‣ Auch für Bilder!
‣ Auch auf Verläufen!
‣ Auch in em oder %!
‣ Schatten für Bilder
‣ maximale Flexibilität!

33. Schatten

34. box-shadow
http://jsfiddle.net/Flocke/FSH99/

36. text-shadow
http://jsfiddle.net/Flocke/BzAg7/

37. http://www.bountybev.com/

38. Verläufe

39. Verlauf -
gibt es auch für den IE
http://jsfiddle.net/Flocke/jGFWk/

40. Einfacher Verlauf mit
Alternativen
http://jsfiddle.net/Flocke/jGFWk/ http://www.colorzilla.com/gradient-editor/

41. Buttons mit CSS3

42. http://www.webdesignerwall.com/demo/css-buttons.html

43. Eigenschaften für Buttons
‣ border-radius
‣ rgba()
‣ text-shadow
‣ box-shadow
‣ linear-gradient
‣ background
‣ ...

44. http://lab.simurai.com/css/buttons/

45. Animationen und
Transitionen

46. http://forabeautifulweb.com/

47. http://farukat.es/ http://jsfiddle.net/Flocke/KHSsg/

48. http://jsfiddle.net/Flocke/s2N4q/

49. http://anthonycalzadilla.com/css3-ATAT/index.html

50. http://www.anthonycalzadilla.com/

51. Transform

52. http://media.24ways.org/2009/14/3/index.html http://24ways.org/2009/going-nuts-with-css-transitions

53. Diverse Transformationen
http://jsfiddle.net/Flocke/rdnyd/

54. http://jsfiddle.net/Flocke/uSVN5/ http://www.wait-till-i.com/2011/08/17/css-challenge-90-degree-turned-headings-in-css3-with-a-fallback/

56. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/