Mehr Spass mit CSS3 in Webkit und Safari

Anmerkung vorne weg: dieser Artikel enthält Demonstrationen von CSS-Techniken, die weder in allen Webbrowsern schon noch in RSS-Readern jemals funktionieren werden.

Am weitesten bei der Implementierung von CSS 3D Transformationen sind Webkit (der Browser), Safari4 und mobile Safari (iPhone OS 3). In meiner Chrome 5.0.322.2dev-Version auf dem Mac funktioniert es noch nicht, sehr wohl aber im iPhone-Simulator. In der folgenden Demo (die nur Nutzer der genannten Browser live sehen können, für die anderen gibt’s ein Video) wird eine einfache 3D Transformation gezeigt, basierend auf zwei Bildern, von denen eines um 180° auf der Y-Achse gedreht wurde, und dann werden auf „onclick“ beide Ebenen gedreht. Bitte nicht nachmachen: den onlick-Event habe ich zu Demozwecken inline definiert, sowas macht man nicht. Und so sieht das ganze aus:

Jay und Bob
Jay und Bob

Nebenbei, die Bilder sind übrigens aus Clerks II, ein von mir dringend empfohlener Streifen über die soziale Lage in den USA. Hier jedoch zunächst als Beweis sozusagen der HTML-Code auf dem der Trick beruht:

[html]<div id="flip-container">
<div class="card" onclick="jQuery(this).toggleClass(‚flipped‘);">
<div class="front face">
<img src="img/00009-620×353.png" alt="Jay und Bob" />
</div>
<div class="back face">
<img src="img/00014-620×353.png" alt="Jay und Bob" />
</div>
</div>
</div>[/html]

Und hier das CSS mit allen Erklärungen in den Kommentaren.

[css]#flip-container {
display: none; /* unsichtbar, stattdessen ist .video zu sehen */
position: relative;
width: 620px;
height: 353px;
z-index: 1;
}

/*
* Hier die Magic, Teil 1:
* mit diesem CSS-Mediaquery wird auf die Fähigkeit
* geprüft, CSS 3D darstellen zu können
* siehe auch: http://reference.sitepoint.com/css/mediaqueries
*/
@media all and (-webkit-transform-3d) {

.video {display:none;} /* Video ausblenden */

#flip-container {
cursor: pointer;
display: block; /* ausgeblendeten Container einblenden */
-webkit-perspective: 800; /* unser Betrachtungsabstand zum Objekt, 200 wäre sehr nah, 1200 weit weg… */
}

.card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d; /* weitere Möglichkeit: "flat", aber dann wäre der schöne Effekt des Drehens weg */
-webkit-transition: -webkit-transform 1s; /* Dauer einer Drehung */
}

.face.back {
/*
* Magic Teil 2:
* Das zweite Bild wird an der Y-Achse um 180° gedreht und ist dann hinter dem ersten Bild.
*/
-webkit-transform: rotateY(180deg);
}

.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* gibt an, welches der beiden Bilder zu sehen ist, hier: das HINTERE ist versteckt */
}

.card.flipped {
/*
* Der Magic dritter Teil:
* per onclick wird die Klasse .flipped an das Element gesetzt,
* die Transformation läuft ab, mit dem Zeitweit der Klasse .card, also 1s
*/
-webkit-transform: rotateY(180deg);
}

} /* Ende: @media */[/css]

10 ways to make Internet Explorer

At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it’s not surprising that IE can’t handle them correctly. Luckily, a few tricks can make your life easier..

ie-css3.js

ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Ich will das nicht!!1!

@font-face considered harmful?

Nachdem sich die Kunde von den Möglichkeiten des Fontembedding nun reichlich verbreitet hat, tauchen leider die ersten Problme auf. Steve Sounders hat einige Quellen zu Problemen beim Fontembedding zusammengefasst und eigene Untersuchungen angestellt, unbedingt lesen bitte, auch wenn ich hier kurz die unliebsamen Fakten zusammenfasse: im Bereich high performance websites muss man wohl von @font-face zunächst mal Abstand nehmen.

Natürlich ist es mal wieder die Internet-Explorer-Familie, die extreme Perdormanceprobleme aufweisen, aber auch sämtliche andere Browser bekleckern sich im Umgang mit der noch recht jungen Technologie kaum mit Ruhm. FOUTflash of unstyled text ist dabei noch das kleinste Problem, wenn die Fontdateien nicht schnell genug vom Server geliefert werden. In IEs wirkt sich das noch schlimmer aus: bis zum Download des Fonts zeigt Bill Gates Rache gar nichts an. In anderen Browsern bleiebn nur die Textteile, die mit @font-face gerendert werden sollen unsichtbar, Firefox zeigt die Ausweichschrift(en) an.

Solchen (und den anderen im Text genannten) Performancefallen kann man natürlich mit Caching, Zipping und ähnlichzen Techniken begegnen. Ob man sich aber den Aufwand leisten will, bereits zum jetzigen Zeitpunkt, ich stelle das mal in Frage…

Geolocating Webbrowser

Hmm, obwohl George Orwells 1984 praktisch schon vor der Tür steht finde ich immer wieder gefallen an mobilen Webanwendungen und damit natürlich auch Dinge wie HTML5 Geolocating im Webbrowser mit Javascript. Über eine Ssssst… einfache API erfährt man namlich bei Firefox 3.5 und Safari 3.0 (auf dem iPhone), wo sich der eben Browsende gerade befindet, und zwar u.a. mit den Werten geografische Länge und Breite und Höhe, sowie Richtung und Geschwindigkeit. Das funktioniert bei Geräten mit GPS ernsthaft, ansonsten werden Einwahlpunkt und ähnliches herangezogen. Cooles Feature, my ass.

Embedden Sie jetzt!

fontatfirefox

Mit @font-face lassen sich Schriften in Webseiten einbetten. Machen Sie das!

Ok, es ist soweit, mit dem neuen Firefox 3.5 (und Safari 4 und Opera 10beta), steht immer mehr Nutzern unserer Websites Fontembeddingdownloading1 zur Verfügung. Damit widerum steht der flächendeckenden Umsetzung typographisch ordentlich gestylter Websites nicht mehr viel im Weg, ausser natürlich die IE-Familie, aber die ignorieren wir hier einfach einmal.2

Embedden Sie jetzt! weiterlesen

No sniffing please

Nur ganz kurz:

It is entirely possible to encounter IE8 sending the IE7 User Agent string to the server while using the IE8 Standards Mode rendering engine; conversely, you can encounter the IE8 User Agent string while rendering in IE7’s engine.

If there ever was an argument against merely sniffing the User Agent string to base your code off of, this would be it.

Faruk Ateş: IE8 and the X-UA-Compatible situation