CR
design, web

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

vertiefende workshops

generatoren

textstrukturierung

weitere anwendungsgebiete und kurioses

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>