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.
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
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 exercitation ullamco laboris
nisi ut aliquip ex ea commodo
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
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
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
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
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