→

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

→

→

-moz-background-size

Da ist Mozilla ja etwas hinterher gewesen, denn die Größe des Hintergrundbildes anzupassen gestatten andere Browser schon länger (Opera ab 9.5, Safari3 und Konqueror). Dabei lässt sich das Hintergrundbild von der -moz-background-origin auf verschiedene Arten vergrößern und/oder verkleinern. Neben Angaben in Länge oder Prozent, sind auch Schlüsselwörter wie auto, contain (so groß wie möglich, wenn das Bild kleiner als die Größe des Container ist) und cover (so klein wie möglich, wenn das Bild größer ist) erlaubt. Die letzten beiden Schlüsselwörter sind bisher firefoxproprietär.

image-rendering

Passend dazu wird die Eigenschaft image-rendering eingeführt, eine Analogie zu Microsofts -ms-interpolation-mode. Während man bei M$ aber zwischen bicubic und nearest-neighbour wählen kann, bietet Mozilla vier Werte an: auto, optimizeQuality, optimizeSpeed und -moz-crisp-edges. Wobei im Moment zumindest gilt: auto = optimizeQuality und optimizeSpeed = -moz-crisp-edges. Jedenfalls soll damit dem Browser eine Renderingmethode für vergrößerte oder verkleinerte Bilder an die Hand gegeben werden.

-moz-linear/radial-gradient

Ebenfalls neu und im Hintergrund tätig sind -moz-linear-gradient und -moz-radial-gradient. Firefox stellt damit die Möglichkeit zur Verfügung, Farbverläufe zu generieren, die sich in der Verlaufsrichtung genauso beeinflussen lassen, wie in den Verlaufslänge. Außerdem können beliebig viele Vias bzw color-stops agebeben werden, d.h. man kann auch (wenn man das will) Regebogenverläufe erzielen. Democode dazu:

background: -moz-linear-gradient(left, right,
    from(red),
    color-stop(16%, orange),
    color-stop(32%, yellow),
    color-stop(48%, green),
    color-stop(64%, blue),
    color-stop(80%, indigo),
    to(violet));

Neben den Farbschlüsselwörtern funktionieren natürlich auch Hexoces, rgb() und (Achtung!) auch rgba(), also auch Transparenzen.

Dieses Feature gibt es übrigens auch schon bei anderen Browsern, nämlich seit IE 5.5 als filter: progid:DXImageTransform.Microsoft.Gradient() und auch in Safari 4, als -webkit-gradient(linear,…) (man ist sich mal wieder nicht über die Syntax einig).

Weitere Mediaqueries

Bereits ab Version 3.5 unterstützt Firefox die CSS3 media queries, womit man Stylesheets anhand bestimmter Eigenschaften des Mediums auswählen kann, auf dem eine Website angezeigt wird. Einige Berühmtheit hat dieses Feature bereits durch das iPhone erlangt, denn mit <link media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" rel="stylesheet"/> kann man eben ein Medium ansteuern, dessen maximale Darstellungsbreite 480px ist, also bspw. das iPhone. Solche queries kann man über viele Eigenschaften machen, bspw. Farbtiefe, Seitenverhältnis des Bildschirms, dessen Höhe und Breite, die Höhe und Breite des Viewports und einige mehr.

Firefox ab 3.6 kann noch ein paar mehr, mozilla spezifische Queries verstehen und auswerten. Damit lassen sich tatsächlich sehr spezielle Dinge über das genutzte Medium erfahren, zum Beispiel, ob die Website unter einem ungethemeten Windows angezeigt wird (moz-windows-classic) oder unter OS X mit „Graphite” Erscheinungsbild (-moz-mac-graphite-theme) oder eben – und das wirds m.M. nach interessant – ob ein Touchscreen vorliegt: -moz-touch-enabled. Mit letzterm könnte man bspw. auch für Touchscreens das normale CSS verwenden, aber Buttons einfach ein wenig vergrößert darstellen. Da ist noch einiges drin… zur Zeit aber nur proprietär für Firefox.

:indeterminate

Ich geb hier mal zu, dass ich nicht wusste, dass man mit Javascript seit Firefox 3.2 eine Checkbox den Zustand „indeterminate” zuweisen kann document.getElementById(”check1″).indeterminate = true;, oder was es damit auf sich hat (wenn man das Beispiel sieht, ist alles klar). Ab FF3.6 kann man diesen Zustand über eine CSS-Pseudoklasse nutzen, also bspw. die Hintergrundfarbe des Checkbox ändern.

WOFF

Und last but not least unterstützt Firefox 3.6 das Fontformat WOFF (Web Open Font Format). WOFF erklärt sich so:

WOFF (Web Open Font Format) is a new web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.

developer.mozilla.org

Ich sag mal Erik Spiekermann befürwortet das neue Format und es sieht so aus, als das dies der Weg aus der Linzenzfalle beim einbetten von Schriften via @font-face ist.

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…

Youtube droppt den IE6. Coole Schau.

Via TechCrunch (ausnahmsweise).

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.

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.

farukat.es

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

→

Trotzdem habe ich mich bemüht, dass mein Blog im IE6 funktioniert. Auf der Arbeit investieren wir viel viel Zeit darauf. Dort kommen noch rund 14% der Besucher mit dem alten IE.

Ob dieser Useranteil nun aus Versehen mit dem IE6 daher kommt, oder Admins sich weigern IE7 oder 8 im Firmennetz freizugeben – vielleicht weil das uralte Intranet sonst nicht mehr funktioniert, oder das uralte geklaute Windows nicht upgedatet werden darf… man weiss es nicht. Für einen Teil der IE6-User hilft vielleicht ein Hinweis?

Eines Tages dann brauchen wir keine Zeit mehr in IE6 stecken. Dann können wir uns mal richtig um IE7 und 8 kümmern.

Am liebsten schaue ich mir meine eigene Seite übrigens im Safari (4 Beta) an.

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.

→

→

There’s constant discussion about whether or not to continue support for IE6, and the only reason ever given these days in favor of supporting that browser is its market share. That market share is diminishing, and we’ve already reached the second beta of IE8, so let’s start dropping it already. Make the argument against supporting IE6, to your clients, your boss, your team—whoever needs to hear it, keep applying pressure and don’t back down.

superfluousbanter.org

Amen.

→

Das Google Online Security Blog berichtet über die Update-Faulheit der Browsernutzer: man hat dazu auch Zahlen:

Over the past 18 months, the study also shows, a maximum of 83.3% of Firefox users were using the latest major version of the web browser and also had all current patches installed (i.e. latest minor version). Only 56.1% and 47.6% of Opera and Internet Explorer users, respectively, were similarly utilizing fully-patched web browsers. Apple users are no better: since the public release of Safari 3, only 65.3% of users operate the latest Safari version.

googleonlinesecurity.blogspot.com

Niederschmetternd.