CSS3 als Untermenge von HTML5 bietet viele tolle Neuerungen. Aufgrund der fehlenden Spezifikationen braut hier jedoch jeder Browser sein eigenes Süppchen. Was für Vorteile CSS3 dennoch bietet und wie die Nachteile mit den richtigem Tool ausgeglichen werden können soll dieser Vortrag von Alberto Assmann exemplarisch zeigen.

1. CSS3 Produktiv nutzen
Alberto Assmann I 03.11.2011
© 2011 Mayflower GmbH

2. It‘se me...
I Jahrgang 1991
I Auszubildender zum Fachinformatiker
für Anwendungsentwicklung
I Seit 2010 bei der Mayflower GmbH
I PHP Erfahrung seit 2006
I OXID eShop Certified Engineer
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 2

3. Die Motivation
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 3

4. Die Motivation
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 4

5. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 5

6. CSS3 ist Neu...
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 6

7. Beispiel
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 7

8. CSS3 ist wie ein Zaubertrank
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 8

9. Zutaten
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 9

10. Animationen (Animations):
animation-name: fall, fade;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: ease-out;
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 10

11. Farbverläufe (Gradients):
background-image: linear-gradient(
bottom,
rgb(71,117,252) 32%,
rgb(100,153,255) 66%,
rgb(42,97,97) 83%
);
Browser
Unterstützung -webkit -webkit -moz -ms -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 11

12. Hintergrundgröße (Background-size):
background-size: 50% 25%;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 12

13. Bilderrand (Border-image):
border-image: url(pikachu.png) 49 41 repeat;
Browser
Unterstützung -webkit -webkit -moz -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 13

14. Runde Ecken (Border-radius):
border-radius: 5px 5px 5px 5px;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 14

15. Schatten (Box-shadow):
box-shadow: 5px 5px 5px #000000;
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 15

16. Textspalten (Column-count):
column-count: 4;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 16

17. Farbigkeit (HSLa, RGBa):
Color: hsla(0,100%,50%,0.4);
Background-color:
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 17

18. Worttrennung (Hyphen):
Ut enim ad minim veniam, quis
hyphens: auto; nostrud exer­citation ullamco laboris
nisi ut aliquip ex ea com­modo
consequat
Browser
Unterstützung -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 18

19. Mehrere Hintergrundbilder (Multiple backgrounds):
background-image:
url(sheep.png),
url(betweengrassandsky.png);
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 19

20. Deckkraft (Opacity):
Opacity: 0.5;
Browser
Unterstützung filter: alpha(opacity=50)
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 20

21. Text überlauf (text-overflow):
Buffer Overflow because off...
text-overflow: ellipsis-word;
Browser
Unterstützung -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 21

22. Textschatten (text-shadow):
Text-shadow: 10px 10px 3px #666;
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 22

23. Umformungen (Transform):
transform:
scale(0.6)
rotate(33deg)
translateX(136px)
translateY(-45px)
skewY(-16deg);
transform-origin:
32%
0%;
Browser
Unterstützung -webkit -webkit -moz -ms -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 23

24. Übergänge (Transitions):
Div:hover {
transition:
rotate(360deg)
scale(2.0)
rotate(-90deg);
}
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 24

25. Verschiedene Druiden – verschiedene Tränke:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 25

26. Das richtige Tool:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 26

27. SASS
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 27

28. /** CSS */
.content-navigation {
border-color: #3bbfce;
}
/** SASS */
.content-navigation
border-color: #3bbfce
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 28

29. $color: #3bbfce
.content-navigation
border-color: $color
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 29

30. /** CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
/** SASS */
table.hl
margin: 2em 0
td.ln
text-align: right
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 30

31. @mixin round-corners($radius)
-moz-border-radius: $radius
-webkit-border-radius: $radius
-khtml-border-radius: $radius
border-radius: $radius
@include round-corners(5px)
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 31

32. /** CSS */
div.foo {
border: 3px;
div.foo:hover {
color: #FF0000;
}
}
/** SASS */
div.foo
border: 3px
&:hover
color: #FF0000
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 32

33. Berechnungen:
I Größenberechnung (Bsp.: 2px + $width)
I Farbberechnung
I Stringkonkatenation
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 33

34. Kontrollstrukturen:
I @if/@else
I @for
I @each
I @while
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 34

35. Compiliertes CSS?
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 35

36. sass –watch foo.scss:foo.css
sass –watch /var/www/app/public/css
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 36

37. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 37

38. SASS Framework:
I Vordefinierte Mixins
I Reset
I Textools
I Farbtools
I Als gem verfügbar
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 38

39. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 39

40. http://css2sass.heroku.com/
http://blog.mayflower.de/archives/74
5-Agiles-CSS.html#extended
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 40

41. Unter dem Strich:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 41

42. Vielen Dank für Ihre Aufmerksamkeit!
Referent Alberto Assmann
Alberto.assmann@mayflower.de
+49 931 35965 1 164
Mayflower GmbH
Pleichertorstr. 2
97070 Würzburg
© 2011 Mayflower GmbH

43. Quellen
I http://www.karzauninkat.com/Goldhtml/
I http://schokoladen-kunst.de
I http://www.foxplex.com/components/uploads/qpcll5zh-CSS3_Logo.jpg
I http://www.geo-reisecommunity.de/bild/405784/altes-Auto
I http://www.normansblog.de/demos/browser-support-checklist-css3/
I http://www.asterix.com/news-de/unter-der-lupe/
I http://www.normansblog.de/css3-im-detail-background-size/
I http://www.normansblog.de/css3-im-detail-border-image/
I http://www.normansblog.de/css3-im-detail-columns/
I http://www.normansblog.de/css3-im-detail-multiple-backgrounds/
I http://www.spiegel.de/fotostrecke/fotostrecke-21123-3.html
I http://www.ahnungslos.ch/wp-content/uploads/2009/12/schmuck.jpg
I http://sass-lang.com http://xkcd.com/303/
I http://www.welt.de/politik/deutschland/article3660279/Erst-friedlich-dann-Krawall.html
I http://portfo.li/umaar/841377-motivational-programming-posters-redux-the-code-strikes-back
I http:// www.elbuhari.at/html1/images/stories/fragen.jpg
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 43