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:

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:

<div id="flip-container">
    <div class="card" onclick="jQuery(this).toggleClass('flipped');">
        <div class="front face">
            <img src="img/00009-620x353.png" alt="Jay und Bob" />
        </div>
        <div class="back face">
            <img src="img/00014-620x353.png" alt="Jay und Bob" />
        </div>
    </div>
</div>

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

#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 */

→

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. FOUT – flash 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…

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 Fontembeddingdownloading¹ 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.²

Und so geht’s

Das obige Beispiel nutzt das Embedding, der Code dafür sieht ungefähr so aus:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz, sans-serif;
	text-shadow: 1px 1px 1px #eee;
}

Der genutzte Font ist die unter CC Lizenz stehende Kaffeesatz. Der Code ist vielleicht nicht ganz selbst erklärend: mit @font-face legen wir selbst eine Font fest, den Namen der font-family kann man dabei frei wählen, ein dem Font nahe stehender Name empfiehlt sich natürlich. Als src wird der Pfad zum OTF- oder TTF-File angegeben, danach noch das format. Fertig. Damit steht uns die font-family „Kaffeesatz” zur weiteren Nutzung zu Verfügung. Das H1 macht auch gleich Gebrauch davon, noch ein wenig versüsst mit etwas CSS3-text-shadow (wenn wir auf den IE sch…sen, dann aber richtg).

Mehr Gewicht, bitte

Folgendes ist zu beachten: wir haben bis hier nur den Font für die font-weight normal definiert. Wollen wir eine bolde Schrift, muss ein Font dafür embedded werden, und zwar bspw. so:

@font-face {
    font-family: Kaffeesatz;
    font-weight: normal;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: bold;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}
h1 {
	font: normal 3em/120% Kaffeesatz,sans-serif;
	text-shadow: 1px 1px 1px #eee;
}
h2 {
    font: bold 2em/120% Kaffeesatz, sans-serif;
    text-transform: uppercase;
}

In diesem Falle würden die H2s bold gesetzt, da wir hierfür YanoneKaffeesatz-Bold.otf embedded haben. Ähnliches können wir nun auch mit font-style: italic anstellen.

Nochmal zurück zur Fettung: Safari kann einige Fettungsstufen mehr anzeigen als Firefox. Unterstützt wird eine genauere Abstufung des Fettungsgrades, wenn man bspw. einen Font hat die Kaffeesatz. Das kann dann so aussehen:

@font-face {
    font-family: Kaffeesatz;
    font-weight: 100;
    src: url(fonts/YanoneKaffeesatz-Thin.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 300;
    src: url(fonts/YanoneKaffeesatz-Light.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 400;
    src: url(fonts/YanoneKaffeesatz-Regular.otf) format('opentype');
}
@font-face {
    font-family: Kaffeesatz;
    font-weight: 700;
    src: url(fonts/YanoneKaffeesatz-Bold.otf) format('opentype');
}

Das geht sicherlich auch mit keywords wie „light” oder „bolder” etc.

Das Fontrendering unterscheidet sich mitunter, links Firefox, rechts Safari 4 (Mac).

Fonts von der Platte zuerst

Was ja auch angehen kann, ist dass man eher einen Font nutzen möchte, der sowieso schon lokal vorhanden ist und nur wenn dieser nicht vorhanden ist, will man einen Download anbieten. Geht auch, wie man bei John Dagget nachlesen kann, mit der Eigenschaft „local”:

@font-face {
  font-family: NeueHelvetica;
  src: local("Helvetica Neue"),
       local("HelveticaNeue"),
       url(fonts/MgOpenModernaRegular.ttf);
}

Hier sind zwei local angegeben, über diese Liste wird iteriert, genauso wie in der normalem font-family Zuweisung, wo die Schriften durch Kommata getrennt werden (das diese Zusammenstellung von Namen nicht immer ganz einfach ist, lesen wir bei Herrn Preidel).

Und nun?

Natürlich sollte man nur Schriften nehmen, die man auch fürs embedding benutzen darf, sonst gibt’s schnell Lizenzärger. Hier gibt’s ein paar freie Schriften, die das ausdrücklich zulassen. Ach ja und zum guten Schluss, sollte man font-size-adjust auf keinen Fall vergssen.

Updates

¹⁾ Von „Embedding“ zu sprechen ist eigentlich nicht richtig, weil der Font tatsächlich auf den Rechner des Nutzers heruntergeladen wird. Das schlägst sich natürlich auch in der Größe der Website nieder und ist auch für die Lizenzfrage nicht unerheblich.

²⁾ Na gut, ich hab noch einen Link aus meinen Bookmarks geangelt, der mehr in Sachen IE verrät.

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.

→

→

→

→

In short, competition in the Mac web browser space is strong and getting stronger. Firefox isn’t just a great web browser, but it’s a pretty good Mac web browser, too.

daringfireball.net

Afterwards, John Gruber switched back to Safari. Schade.