Ist das nicht Unsinn?

… habe ich gestern noch gedacht, als ich den dramatischen Aufruf von Daniel Glazman gelesen und verlinkt habe. Das was Glazman in ernsthaftester Browserwarrhetorik an die Wand malt, die Beerdigung des CSS-Webstandards durch -webkit, ist das wirklich die Realität?

Zunächst einmal die Fakten. Scheinbar ist es so, dass Webentwickler weltweit zu dämlich oder zu faul sind, die für neue und experimentelle Funktionen vorgesehenen Browserprefixe richtig einzusetzen. Offenbar ist bei vielen mit dem Einsatz von -webkit Schluss, dass es auch noch -o, -moz, -khtml und -ms gibt, wissen sie nicht, oder es interessiert sie nicht. Zunächst mal: das müssen ja ein paar schöne Deppen sein, die sowas tun. Nur für einen Browser zu entwickeln, das wäre ja ziemlicher Schwachsinn.

Tatsächlich ist es so, dass viele denken, dass Webkit-Browser die einigen Browser sind, für die man im mobilen Web entwickeln muss. das ist natürlich falsch. Und Webkit ist ja nicht mal ein Browser. Oder ein Browserhersteller (schließlich heissen die Kürzel vendor-prefixex). Eigentlich gibt es gar nicht den einen Webkit:

There are, to my latest count, Safari desktop, Safari iOS, Chrome desktop, Chrome Android, Android WebKit (in various flavours), BlackBerry WebKit, Nokia WebKit (in various flavours), Samsung Dolfin, LG WebKit, Palm Webkit, NetFront WebKit, Obigo WebKit, and UC WebKit. Thirteen browsers, eleven vendors — or fourteen, if you count the Android vendors separately. PPK

Womit Glazman nun droht ist, dass die anderen Browserhersteller anfangen werden, auch -webkit als Präfix zu benutzen (so sie die entsprechende Funktionalität denn anbieten können). Das wäre nun das Ende des Webstandards CSS. Ist es das? Wirklich? Oder ist es vielmehr das Ende der Idee Hersteller-Präfix, die sich in der Praxis offenbar nicht bewährt hat. Der Himmel wird uns wohl nicht auf den Kopf fallen. Und Webkit wird auch nicht die Weltherrschaft an sich reissen.

Vielleicht ist es einfach Zeit, die vendor-prefixes zumTeufel zu jagen und ein beta-Präfix einzufühen, wie PPK es vorschlägt?

Nebenbei bemerkt: das im Laufe der Debatte Lea Verou fälschlicherweise beschuldigt wurde der Präfixfaulheit Vorschub zu leisten… das ist ja fast schon lächerlich.

Making love to webkit

Steven Wittens hat seine Website Acko.net (Hackery, Math & Design) mit einem Parallax-Header ausgestattet, der, zumindest in Webkit-Browsern (mein Chrome steigt nach kurzem probieren allerdings aus), schon einmal einen schönen Ausblick in die Zukunft des Webdesign bietet. Ob das wirklich schön ist, steht auf einem anderen Blatt: CSS3-Transforms sind ja ein wenig das neue Blink-Tag.

Via.

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]