css3 workshop part5: workarounds, überblick, weiterführende links
in diesem workshop stelle ich einige neuerungen in css3 vor. natürlich werde ich hier nicht sämtliche neue funktionen aufgreifen, weshalb ich mich auf funktionen beschränke, die mir bei der täglichen arbeit, dem coden von websites, am meisten helfen.
in part5 schlage ich abschließend zum workshop als all-round lösung für die ie 6-8 das sogenannte pie.htc vor. ich beginne allerdings grade erst damit erfahrungen über das handling zu sammeln. außerdem gibt es noch eine kurzübersicht über alle vorgestellten funktionen und eine praktische linkliste mit weiterführenden inhalten.
workaround for ie: pie.htc
mit der pie.htc kann man die IE’s 6-8 erweitern und so einige wichtige css3-features für diese lieblinge aktivieren.
die wichtigsten unterstützten features sind:
- border-radius
- box-shadow
- border-image
- multiple background images
- rgba color
- verläufe
einbindung
- wird eingebunden über: behavior: url(css/PIE.htc); (Pfad immer relativ zum HTML-File)
- so präzise wie möglich einsetzen, d.h. niemals auf body oder *! (das skript allein verlangsamt den IE schon genug.)
- immer noch zusätzlich zu -moz und -webkit die standard-konforme w3c-angabe benutzen, sonst greift PIE nicht.
weitere infos und download: http://css3pie.com/
überblick
browser-prefixes
| -khtml- | prefix für veraltete webkit-versionen |
| -moz- | prefix für mozilla browser |
| -webkit- | prefix für webkit-versionen |
| -ms- | prefix für microsoft browser ab version 8.0 |
| -o- | prefix für opera |
| -ms- | prefix für microsoft browser ab version 8.0 |
| -icab- | prefix für den icab browser |
selektoren und pseudo-klassen
| a[href^="..."] {} | alles beginnend mit (…) auswählen |
| a[href$="..."] {} | alles endend mit (…) auswählen |
| div[id*="..."] {} | jedes element das (…) enthält auswählen |
| :nth-child(xn) {} | jedes x-te element auswählen |
| :nth-child(xn+x) {} | jedes x-te element auswählen, vom x-ten ausegehend |
| :last-child {} | das letze element auswählen |
| :nth-last-child(2) {} | das vorletze element auswählen |
| :not([class*="..."]) {} | alles auswählen was nicht klasse (…) ist |
css3-tags kurzübersicht
| ergebnis | tag |
| rgb und transparenz | color:rgba(255,255,255,0.9); |
| farbverläufe | -moz-linear-gradient(top, #950023, #F09983); -webkit-linear-gradient(top, #950023, #F09983); -webkit-gradient(linear, 0% 0%, 0% 100%, from(#950023),to(#F09983)); |
| box-schatten | box-shadow: 5px 5px 10px #999; |
| text-schatten | text-shadow: 1px 1px 1px #000; |
| abgerundete ecken | border-radius: 20px; |
| border-colors | border-colors: #000 #f00 #0f0 #00f; |
| border-grafiken | border-image: url(images/border.png) 23 34 23 34 stretch stretch; |
| mehrspaltiger textfluss | column-count: 3; column-gap: 20px; |
| transformation | transfom: scale(.6) rotate(20deg) skew(25deg 10deg); |
| transition | transition: background-color 3s 0s ease-in; |
| animation | -webkit-animation-name: track; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; @-webkit-keyframes track { 0% { margin-top:0px; } 100% { margin-top:100px; } } |
weiterführende links
css3 workarounds
- css3pie
- RGBa & HSLa for Internet Explorer
- RGBa & HSLa for Internet Explorer
- CSS3 pseudo-class selectors for Internet Explorer
- ie-css3 (ähnlich wie pie aber mit text-shadow)
- weitere lösungsansätze von smashing magazine
vertiefende workshops
- allerhand css3 workarounds für die ie’s
- schicke css3 buttons
- schicke polaroid-gallery
- weitere tolle bildergalerie mit polaroids
- mehr zum thema selektoren
- mehr zum thema pseudo-klassen
- netter screencast zum thema css3
generatoren
- ein allround css3 generator
- ein simpler css3-button-generator
- border-image-generator
- generator für css3 corners
textstrukturierung
- alles rund um textfluss und spalten
- zum thema ungewünschte wort/zeilenumbrüche
- über white-spaces