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

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.

Da steigen einem mitunter die Tränen in die Augen, wenn man nach ein bis zwei Stunden endgültig realisiert hat, das man sich um bloody fuckin’ Internet Explorer – welche Version auch immer – keine Gedanken zu machen braucht. Wooohooo!

Her mit den Childselektoren, den Pseudoklassen und runden Ecken!

Und sch… auf SEO.

Ach, was für ein befreiendes Gefühl. Muss man mal gemacht haben. Schade, dass es so kurz war.

Beim chinesischen Firefox ist eigentlich alles anders. Aber die Chinesen surfen ja auch anders.

Im Moment wird zwar nur das offene Ogg-Format unterstützt, weitere Formate kann man sich allerdingsleicht vorstellen. Und je nach Willen der Zusammenarbeit der Lizenzinhaber sicherlich auch umsetzbar. Jedenfalls mit…

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
    Your browser does not support the <code>video</code> element.
</video>

… ist in windeseile ein Videoplay umsetzt, der Ogg-Videos abspielt und sich mit Javascript auch steuern lässt.

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.

Und sich gleichzeitig einen, wie ich finden muss, technisch ziemlich ansprechenden Browser auf den Rechner laden, vor allem wenn man Windows-User ist gibt es eigentlich keine wirklichliche Alternative, IMHO.

Wen meine übliche Werbeeinblendung für Firefox nicht überzeugt, der mag auch gerne den Field Guide to Firefox 3 zur Hand nehmen, dort erfährt man alles, was am neuen Firefox dran ist…

Update: Öhhh… war wohl zu naheliegend.

Update, 21:51 MESZ: Thanks to overwhelming demand we’ve passed through 14,000 downloads a minute! This will put us well into the tens of millions of downloads in a 24 hour period if we can sustain it. Each download is about 7MB so that’s around 13 Gigabits/s of just download traffic. mozdev center… :)

Via Cute Overload.

Alex Faarborg stellt hier die neuen Standard-Themes vor—und da kann man nun sagen: nochmal Glück gehabt. Ich meine, ist man mit OS X-Version noch einigermassen zufrieden, die Windows Versionen sind ja grausam! Also diese Multifunktionspfeilbedienelemente sind wirklich häßlich.

Da hat man bei OS X wenigsten das Glück, kleine Buttons auswählen zu können. Allerdings: die gewünschte Funktionalität wird damit auch nicht erreicht. Ich teste FF3 jetzt seit Beta3: »Male, wie oft ich das Rückwärts-Vorwärts-History-Button-Monstrum benutzt habe seitdem: 2«. Einmal zum testen nach der Installation, und nach einem Update. Der Rest geht per Tastenkombi.

Alex sieht das natürlich anders:

The overall goal of the Firefox 3 visual refresh was visually integrating with the platform, while still maintaining a unique identity and presence by using the keyhole form for the navigation controls.

blog.mozilla.com

Was man bei Firefox versucht: sich dem OS anzupassen und trotzdem einen eigenen Look zu bewahren. bei Peter Kröner diskutiert man gerade, warum Safari für Windows gar nicht geht—dort macht man es nämlich genau anders: man versucht die fremde Oberfläche in das fremde OS zu exportieren (aus wirtschaftlich-strategischen Gründen wie ich meine). Wie würde die Apple-Gemeinde schreien, würde jemand den XP-Look nach OS X zu exportieren suchen…

Ich halte ja fast das eine, wie das andere für fraglich: natürlich sollte Firefox nicht genauso aussehen wie Safari, aber Usability-Dummheiten begehen, nur um einen eigenen Look zu behalten? Ich weiß ja nicht…

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.