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]

Web Inspector Updates

A number of exciting new features have been added to the Web Inspector since our last update. Today we would like to highlight some of those features! […] If you would like to play with most of these features you will need to be running a recent WebKit Nightly.

@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…

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

Safari 4

Hurra, ein neuer Browser zum Testen. Gestern legte Apple die Betaversion des Safari 4 vor, was mich, wohl aufgrund meiner umzugsbedingten Netzfreizeitabstinenz, ziemlich überrascht hat. 150 neue Features verspricht uns Apple, viel beeindruckender jedoch ist der erste Eindruck, den man bekommt, wenn man den Browser startet und damit die ersten Seiten ansurft. Um es kurz zu machen: es mir völlig egal, ob die Tabs oben sitzen, wenn Webseiten in einer derartigen Geschwindigkeit gerendert werden. Halleluja, das geht fix, schön und smooth. So drei bis vier Mal schneller als der neueste Firefox, würd‘ ich tippen. Gefällt mir.

Um mal doch über Features zu sprechen: die »Top Sites« sind eine schöne Sache, richtg praktisch. Auch sonst stehen da interessante, neue Dinge auf der Featurelist: ARIA-Support, endlich Fullpagezoom, CSS Effects, CSS Canvas, 100/100 im Acid3-Test, HTML5-Offline Support, Javascript Debugger und Profiler und so fort…

Für den Developer in mir, ist es natürlich wichtiger Safari 4 und 3 nebeneinander betreiben zu können.

Achja, très chic: die Safari-Site ist in HTML5.

Web Inspector Redesign

It has been nine months since our last Web Inspector update and we have a lot of cool things to talk about. If you diligently use the Web Inspector in nightly builds, you might have seen some of these improvements, while other subtle changes might have gone unnoticed. Der Webinspector holt auf.