Ich weiß ja nicht, wie ihr es mit Weihnachten haltet, aber ich mag es. Die Familie ist da, jeder kriegt Geschenke und es gibt wahnsinnig viel lecker Essen UND DAS DREI TAGE LANG! (Bis auf die Geschenke versteht sich.. obwohl.. wäre auch mal cool eigentlich ) Kommen wir zum eigentlichen Thema des Tages: CSS Transitions!

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

(Opera unterstützt noch nicht alle Properties, IE erst ab Version 10)

Animationen bei Mouse-Hover

Prinzipiell dient Transition dazu eine Änderung am Styling eines Elements zu verlängern. Natürlich kennen wir alle schon die Peusoklasse :hover und auch, dass wir damit Eigenschaften des Normalzustandes überschreiben können. Transition greift genau an diesem Punkt an. Wir können bestimmen, wie lang diese Änderung dauert, welche Eigenschaften davon betroffen sind, ob es eine Pause gibt, bevor die Änderung beginnt und das Muster, in der sie abläuft (dazu wird eine Bézierkurve benutzt). Es entsteht eine kurze Animation.

Syntax

Die Kurzform lautet transition, danach folgen bis zu vier Werte, die gleichzeitig auch als einzelne Befehle benutzt werden können, ähnlich wie das bei padding oder background auch der Fall ist.

1. transition-property – gibt an, welche Eigenschaft animiert werden soll, Default ist all
2. transition-duration – ein dezimaler Wert in Sekunden, der für die Länge der Transition steht, Default ist 0s (0 Sekunden, also keine Transition sichtbar)
3. transition-timing-function – mehrere Schlüsselwörter möglich, eigenen Kurven-Beschreibungen möglich, Default ist ease
4. transition-delay – Länge der Pause in Sekunden bis Transition beginnt, Default ist 0s

Da der Standard bisher nicht zu 100% fertig ist, unterstützen alle Browser Transition mit dem jeweils bekannten Prefix. An einem Beispiel wollen wir erreichen, dass sich die Textfarbe eines Links bei Mouse-Over innerhalb einer Sekunde von Blau zu Rot ändert.

CSS

1
2
3
4
5
6
7
8
9
10
11

a {
	color:blue;
	-moz-transition:all 1s ease 0s; /*Firefox*/
	-webkit-transition:all 1s ease 0s; /*Safari + Chrome*/
	-o-transition:all 1s ease 0s; /*Opera*/
	-ms-transition:all 1s ease 0s; /*Internet Explorer*/
	transition:all 1s ease 0s; /*W3C Standard*/
}
a:hover {
	color:red;
}

Man könnte auch nur transition:1s schreiben und den Rest den Defaultwerten überlassen aber ein Beispiel sollte ausführlicher sein. Der Effekt bliebe übrigens der gleiche, wenn wir ausschließlich transition-duration (samt allen Prefixes) verwenden würden, weil im Beispiel nur die Rede von einer Sekunde ist.

Was vielleicht noch erwähnenswert ist..

• die Transition-Eigenschaften schreibt man immer in den Selector ohne Pseudoklasse
• und der Wert für transition-duration sollte immer zwischen 0s und 1s liegen

Alles, was länger dauert, bringt dem User nicht das Geringste und die Webseite wirkt dadurch nur unglaublich träge.

Ergebnis

Bewege die Maus über diesen Link

Wie wir leicht sehen, läuft der Wechsel von Blau nach Rot in einer Sekunde ab und nicht wie normal sofort nachdem die Maus über dem Element schwebt.

Dadurch, dass es viele Properties gibt, die durch Transition beeinflusst werden können, gibt es extrem viele Möglichkeiten schöne und sinnvolle Effekte zu erzielen. Auch ich benutze es an einigen Stellen.. dem Weiterlesen-Button, Bilderrahmen, den Social Media Buttons links, das Einblenden des Text-Overlays bei verwandten Artikeln usw.

Fazit

CSS Transitions sind eine prima Sache zum Spielen und ausprobieren. Einige nervige Javascript-Lösungen lassen sich komplett damit ersetzen und User haben das Gefühl es mit einer edlen, unaufdringlichen Website zu tun zu haben.

CSS Transition Demo

Ich habe auch noch eine weitere Demo geschrieben, die zeigt, was man alles so animieren kann. Trotzdem ist auch sie nur die Spitze des Eisberges, ich bin sicher, dass ihr euch noch viel tollere Beispiele ausdenken werdet.

Viel Spaß also beim Experimentieren und da es unwahrscheinlich ist, dass ich dieses Jahr noch einen Artikel schreibe, wünsche ich euch schonmal einen guten Start ins neue Jahr (das wäre dann schon 2012)!

HTML5 in progress

Nach langer Pause melde ich mich mal wieder zurück. Ja, mir gehts gut, ich war nur ziemlich abgelenkt und hatte daher wenig Lust zu Schreiben.

Jedenfalls dachte ich, wir sollten mal einen Blick auf ein neues HTML5 Form Element werfen: Das progress Element. Wie der Name schon sagt, kann man damit einen Fortschritt abbilden, meistens im Zusammenhang mit einem Formular. Dabei ist das geläufigste Beispiel ein Checkout in einem Internet-Shop, bei dem in der Regel mehrere Schritte nötig sind, bis die Ware verschickt wird.

Browserunterstützung

Browser
ab Version	6	–	11	6	–

Das Element ist Teil einer ganzen Reihe von neuen HTML-Tags und wird daher noch nicht von allen Browsern unterstützt. In Chrome und Opera geht es schon seit geraumer Zeit und Firefox wird ab Version 6 (kommt am 16.08.) vollständigen Support bieten. Leider hat auch das Update auf 5.1 bei Safari keine Unterstützung mitgebracht und beim IE weiß man nicht, ob und wann es überhaupt kommt.

Syntax

Um ein einfaches progress Element zu erzeugen reicht es, wenn ihr das bisschen Code benutzt:

HTML

1

<progress>in progress</progress>

Das erzeugt dann einen Fortschrittsbalken mit einer, je nach Browser, Standardbreite und einem Aussehen, das sich am Betriebssystem orientiert.

in progress

Wie ihr seht, ist das der Zustand, bei dem ein genauer Fortschritt ungewiss ist, man weiß nur, dass etwas im Gange ist. Der Text innerhalb des Elements ist zugleich ein Fallback für ältere Browser und für die Accessibility des Tags zuständig. Schaut man sich das Element also im IE an, sieht man nur den Text “in progress”, nicht aber einen Fortschrittsbalken.

Will man nun zeigen, dass etwas zu 25% abgeschlossen ist, muss man das dem Element in Form von Attributen sagen. progress hat derzeit zwei mögliche Attribute (abgesehen natürlich von class, id, style etc., die jedes Element besitzen kann).

1. max, der Maximalwert, entspricht 100% der Breite des Fortschrittsbalkens
2. value, der derzeitige Stand des Fortschrittsbalkens, kleiner-gleich max

Damit lassen sich jetzt z. B. diese drei Balken produzieren:

HTML

1
2
3

<progress value="0.5">50%</progress>
<progress value="25" max="100">25 aus 100</progress>
<progress value="800" max="1000">800</progress>

50%
25 aus 100
800

Wer will, kann das ganze auch per JavaScript animieren, dazu muss man nur den Wert von value überschreiben.

Styling per CSS

Zu aller erst sei gesagt, dass es sich hier um ein Inline-Element handelt, ähnlich dem img Tag. padding, margin, vertical-align und width haben also alle eine Wirkung auf unseren Fortschrittsbalken. Daneben gibt es noch Experimente mit Pseudo-Elementen wie ::-moz-progress-bar oder ::-webkit-progress-value (nur wenn -webkit-appearance auf none gestellt ist). Mozilla benutzt auch -moz-orient, um das Element auf den Kopf zu stellen.

Nun ja, das soll es dazu gewesen sein. Habt ihr das neuen Element schon benutzt? Könnt ihr euch vielleicht noch andere Anwendungsfälle vorstellen? Die Comments stehen euren Gedanklichen Ergüssen frei zur Verfügung!

Mit Firefox 5 hat Mozilla gestern den ersten Browser innerhalb des neuen Rapid Release Cycle herausgegeben. Drei Monate nach Version 4 ist es nur logisch, dass sich die Änderungen in Grenzen halten. Von nun an heißt es: “Alle sechs Wochen ein neuer Firefox!”

CSS-Enthusiasten müssen im Prinzip nur wissen, dass Animationen jetzt unterstützt werden, wie das geht, erfahrt ihr auf der MDN-Seite.

Neue Updatepolitik

Worauf ich in diesem Artikel eigentlich eingehen möchte, ist das geänderte Release-Modell. Immer wieder lese ich Kommentare in diversen Foren (heise.de, golem.de etc.) von genervten Usern, die sich darüber aufregen, dass jetzt aller sechs Wochen eine neue Major-Version rauskommt und man doch “mit Updaten gar nicht mehr hinterher kommen würde” und “es ja eigentlich keine Major-Version sein dürfte, sondern höchstens ein Minor/Point-Release”.

Leute.. kommt mal bitte klar.

Chrome Dev-Channel: Versionnummer ist bei 14 angekommen

1. Ihr müsst aufhören in Versionsnummern zu denken. Ab jetzt heißt es einfach nur noch Firefox, ohne Nummer hinten dran. Bei Chrome zählt auch keiner mehr mit und es stört auch keinen. Dank Silent Updates hat der Großteil der Nutzer stets die aktuelle Version auf dem Rechner. Auch Firefox lädt das Update im Hintergrund und installiert es beim nächsten Start. Unter Windows hängt es von der Einstellung innerhalb der UAC ab, ob und wie viel der Nutzer davon mitbekommt.

2. Das Testen einer Seite in jeder neuen Version ist praktisch Zeitverschwendung. Die meisten Entwickler (ich meine jetzt Frontend also HTML+CSS-Gedöns) arbeiten mit HTML 4 bzw. XHTML und CSS 2.1. Also alles, was der Acid2-Test auch überprüft. Diesen Test besteht Firefox seit Version 3.5 und seitdem hat sich daran auch nichts geändert. Man brauch also keine Angst haben, dass ein Layout, das im Firefox 3.5 erstellt wurde, in Firefox 4, 5, 6 oder 7 ganz plötzlich anders aussehen wird. Seit Version 4 hat Firefox einen HTML5-Parser und beherrscht die wichtigsten CSS3-Neuheiten, neue Versionen können also nichts verschlimmern, im Gegenteil, sie komplettieren nur den Support. Nutzt man JS-Frameworks wie jQuery, sollte es auch hier zu keinerlei Problemen kommen. Ein Update auf die neueste jQuery-Version kann natürlich nicht schaden.

3. Durch den neuen Release-Cycle wird es nicht mehr Updates geben als vorher. Bisher gab es auch etwa alle 5-6 Wochen einen Minor-Release, der diverse Bug- und Securityfixes enthielt. Jetzt zählt es halt ganzzahlig hoch – so what?

Release Channels

Für alle, die es noch nicht mitbekommen haben, möchte ich auch nochmal erwähnen, dass es jetzt mehrere Release-Channel von Firefox gibt. Insgesamt sind das vier.

• Nightly – diese Builds werden jeden Tag aus dem mozilla-central Repository gebaut und sind nicht vom QA-Team überprüft worden (derzeit Version 7)
• Aurora – sind tägliche Builds aus dem mozilla-aurora Repository, das aller 6 Wochen mit dem mozilla-central Repository gesynct wird (derzeit Version 6)
• Beta – Builds, die aus dem mozilla-beta Repository kommen, sie werden vom QA-Team weitreichend geprüft (derzeit noch Version 5)
• Release – diese Builds (mozilla-release Repository) bekommen alle Nutzer angeboten, sie sind vom QA-Team abgesegnet

Firefox Channel-Auswahl

Am 5. Juli rutscht alles eine Version nach, wer darüber auf dem neuesten Stand bleiben will, sollte den offiziellen Blog Future Releases (eng.) lesen. Eine Übersicht mit allen Downloadlinks hat Mozilla auch erstellt. Oh und übrigens wird die mobile Variante für Android Handys jetzt immer mit geupdated. Thunderbird ist ebenfalls auf besten Wege auf diesen Zug aufzuspringen, erste Versionen sind schon verfügbar.

Was haltet ihr vom neuen Firefox und dem neuen Update-System? Nervig oder nützlich? Seht ihr Gefahren oder überwiegen die Vorteile? Lasst es mich wissen.

Problem?

Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben ). Jedenfalls bin ich neulich erst auf einen richtig schönen Fix für ein bekanntes Problem bezüglich der Darstellung von Buttons im IE gestoßen.

Kennt ihr das: Ihr habt einen Button oder ein Submit-Input und gebt dem etwas Padding und schon zerschießt es euch im IE das halbe Formular, weil dieser Browser denkt, er müsse den Dicken markieren, indem er den Padding-Wert verdoppelt?

Na dann seit ihr hier goldrichtig!

Das Problem

Wir haben also einen button oder ein input mit dem type="submit" (der Bug betrifft beides gleichermaßen) auf unserer Seite, was der tut ist uns an dieser Stelle reichlich egal.

HTML

1

<button>Button</button>

Normalerweise rate ich immer dazu die Buttons so zu lassen, wie sie sind und so wenig wie möglich am Styling zu ändern. Natürlich kommt es jedoch vor, dass sie dadurch nicht richtig ins “Corporate Design” einer Firma “fitten”. Und da Kunde==König immer wahr ist, muss man hier und da etwas nachhelfen, dass die Buttons auch zum Rest passen. Sehr häufig muss dazu beispielsweise links und rechts das Padding erhöht werden, damit das alles nicht so zusammengeklatscht aussieht.

CSS

1
2
3

button {
	padding:3px 10px;
}

Alles gut denkt man, aber beim X-Browser-Test macht man schnell große Augen: Im IE6 und IE7 sind es nicht nur 10 Pixel links und rechts sondern mindestens doppelt so viele. Hier ein Vergleich:

Die türkisen Linien sind nachträglich eingezeichnet worden..

Die Lösung

In solchen Momenten möchte man am liebsten in die Tastatur beißen oder die Maus durch die Gegend werfen (@Wireless-Maus-User: tut es nicht!). Aber das ist gar nicht nötig, denn die Lösung ist ganz einfach, nahezu trivial.

Alles, was wir tun müssen, ist eine Zeile CSS mehr zu schreiben:

CSS

1
2
3
4

button {
	overflow:visible;
	padding:3px 10px;
}

Durch overflow:visible hört der IE auf, mehr Padding zu vergeben als eigentlich gewollt. Das Schöne daran ist, dass er 100% valide ist und keinerlei Nachteile hat. Der Tag ist damit gerettet und alle können quietschvergnügt nach Hause gehen!

Frontend-Developer 1:0 Internet Explorer

Nach über einem Jahr Alpha- und Beta-Phase hat Mozilla gestern erfolgreich seinen längst überfälligen Firefox 4 released! Das Äußere wurde komplett umgekrempelt, unter der Haube hat sich einiges getan und die Featureliste ist lang. Ich will euch zeigen, was genau man als ausgefuchster Langzeitnutzer (Wortspiel har har) oder Neuein- bzw. Umsteiger von der neuen Version so zu erwarten hat und welche Auswirkungen sie speziell für erfahrene Nutzer hat.

Die Jungs und Mädchen von Mozilla haben sich einiges einfallen lassen, um so einen großen Release auch gebührend zu feiern. Unter anderem hat man einen schönen Download-Zähler gebaut, der anzeigt wie viel Downloads pro Minute und von welchem Fleck auf der Erde diese getätigt werden.

Firefox Mosaik

Auch für Twitter hat man etwas ganz Spezielles gebaut. Jeder, der den Hashtag #fx4 tweetet, wird kurzfristig als eine Kachel in einem großen Firefox-Mosaik dargestellt. Man kann nach sich und anderen suchen und bekommt dann die jeweilige Kachel mit dem Tweet angezeigt – lustige Idee.

Geschwindigkeit

Ein großer Punkt auf der Agenda war die Geschwindigkeit in allen Bereichen zu verbessern. Dazu hat man bspw. an der Startzeit geschraubt, die bei mir bei 8s (kalt) und und ca. 1,5s (warm) liegt. Das ist etwas mehr als doppelt soviel wie Chrome. Hier hat Firefox noch Potential nach oben und Mozilla weiß das auch, Geschwindigkeit und Leichtigkeit bleiben die wichtigsten Punkte für die Zukunft. Weiterhin werkelt neben Gecko 2.0, dem ein schneller HTML5-Parser verabreicht wurde, noch die blitzschnelle JavaScript Engine JägerMonkey. Besonders auf JavaScript-lastigen Seiten wie Twitter und Facebook ist ein spürbarer Unterschied auszumachen. Wer Bock auf Benchmarks hat, kann sich auf firefox.com/performance den Unterschied zur 3.6 anschauen.

Außerdem gibt es noch die Hardwarebeschleunigung, die ähnlich wie im IE9 und Chrome 10 Webinhalte unter Benutzung der GPU auf die Sprünge helfen soll. Vorrangig geht es dabei um Canvas-Inhalte (Spiele), Scrollen von Webseiten und dem Anschauen von Videos. Damit einher geht auch das veränderte Schriftbild, das den meisten am Anfang etwas seltsam vorkommen wird. Ohne jetzt zu sehr in die Tiefe gehen zu wollen, verweise ich euch auf diesen Artikel über DirectWrite (5 Seiten), der schön erklärt, warum wieso und überhaupt. Nur soviel sei gesagt: Es ist nicht schlecht und man gewöhnt sich relativ schnell daran. Microsoft arbeitet wohl auch an Verbesserungen dahingehend.

User Interface + Customize = User Experience!

Der zweite große Punkt ist die Frage, wie man Firefox um sinnvolle Funktionen erweitern kann, um den Nutzern ein bestmögliches Surferlebnis zu gewährleisten. Dazu hat man sich ALLERHAND lustige Sachen ausgedacht, ich werde mal einige vorstellen und zu jedem einen kleinen Kommentar verfassen..

Tab Management

Alle Tabs befinden sich jetzt oberhalb der Lesezeichen- und Adresstoolbar. Unter Windows Vista und 7 schließen sie dadurch (wenn das Fenster maximiert ist) bündig mit dem Fensterrand ab. Unter Windows XP, Mac OS und Linux ist das nicht immer der Fall. Zwar sind auch hier die Tabs oben, es ist aber immer noch eine Titelleiste vorhanden. Vorteil ist, dass man Tabs besser trifft, wenn man die Maus einfach nur schnell nach oben schiebt. Kleiner Nachteil besteht für Leute, die neue Tabs durch einen Doppelklick im Tabstrip geöffnet haben. Diese Funktion gibt es nicht mehr, es ist jedoch möglich mit dem Neuen-Tab-Button (Tab mit dem großen “Plus” drauf) ODER über Mittelklick, also einen Klick auf das Mausrad, neue Tabs zu erstellen.

App-Tabs und Tabs On Top im Einsatz (Windows 7)

Dazugekommen sind sogenannte App-Tabs, das sind bis auf ihr Favicon geschrumpfte Tabs, die immer offen bleiben. Um einen App-Tab zu erstellen reicht ein Rechtsklick auf einen Tab und das Auswählen von “Als App-Tab anpinnen”. Werden innerhalb von App-Tabs externe Links angeklickt, so werden sie in einem neuen Tab geöffnet. Sie können außerdem nicht per STRG + W geschlossen werden (Shortcut zum Schließen von Tabs, in allen Browsern übrigens..).

Für Leute mit vielen gleichzeitig geöffneten Tabs, gibt es jetzt Panorama. Damit lassen sich Tabs sehr bequem per Drag & Drop gruppieren, wobei dann immer nur eine Gruppe aktiv sein kann. Die Funktion wird entweder über STRG+Umschalt+E oder den Panorama Button geöffnet oder geschlossen. App-Tabs bleiben übrigens in allen Gruppen erhalten.

Panorama - sehr intuitiv gelöst

Einige Verbesserungen wie dem verzögerten Wachstum der Tabs, wenn andere Tabs geschlossen werden oder den neuen Animationen der Tab-Sortierung (beides wie in Chrome, Opera oder IE), haben es leider nicht mehr in dieses Release geschafft.

Änderungen an den Toolbars

Wer sich fragt, wo denn der Home-Button sowie der Stop- und der Reload-Button hin sind, der sollte mal einen Blick nach rechts werfen. Dort finden sich alle Elemente wieder. Der Home-Button ist rüber gewandert und Stop, Go und Reload wurden zu einem einzigen Button verschmolzen, der sich sehr elegant in die Adresszeile einfügt.

Bäumchen wechsle dich!

Es gibt außerdem jetzt die Möglichkeit von Paste & Go bzw. Paste & Search, wobei URLs oder Begriffe in der Zwischenablage direkt eingefügt und danach sofort die Aktion der Adress- bzw. Suchleiste in Gang gesetzt wird. Leider habe ich dafür noch keine Shortcuts entdecken können, sonst würde ich das sicherlich öfter benutzen.

Übrigens ist die Lesezeichenleiste standardmäßig versteckt. Der Button ganz rechts mit dem Stern kann jedoch dazu genutzt werden die geliebte Leiste wieder einzublenden und fungiert darüber hinaus als Lesezeichen-Menü/-Manager.

Die neue Addon Toolbar

Viele Leute stören sich auch an der fehlenden Statusbar. Ich vermisse das hässliche Ding bisher keine Minute. Ziellinks werden in der unteren Ecke angezeigt, für Addons gibt es die neue Addon-Bar, die schnell mit STRG+Umschalt+7 ein- und ausgeblendet werden kann, und für laufende Downloads nutzt man entweder ein gutes Addon oder die Windows 7 Integration mitsamt Download-Fortschrittsanzeige in der Taskleiste (Tabvorschau und Jumplists funktionieren natürlich auch).

Ein weiterer Punkt ist der neue Firefox-Button oben links. Der erscheint, wenn man die Menüleiste ausblendet und vereint alle wichtigen Menüeinträge zu einem Super-Menü. Von hier aus kommt man in die Optionen, den Addon-Manager, dem About/Update-Dialog und allen anderen Punkten, die einem das klassische Menü auch geliefert hat.

Firefox Button mit ausgeklappten Menü

Mir persönlich ist der Button etwas zu sperrig, deshalb nutze ich Movable Firefox Button, ein Addon, dass es mir erlaubt den Button als wesentlich kleinere Version irgendwo in eine der Toolbars zu packen. So haben meine Tabs mehr platz und ich bin das klobige Ding los ohne an Funktionalität zu verlieren.

Movable Firefox Button - toll!

Addon Manager

Komplett überholt wurde der Addon Manager, der jetzt mit STRG+Umschalt+A aufgerufen werden kann. Innerhalb des Managers verschwinden alle unrelevanten Toolbars. Erweiterungen, Plugins, Themes, hier findet sich alles schön sortiert und farbliche angenehm hervorgehoben. Addons werden auch weiterhin automatisch im Hintergrund geupdated, man bekommt jetzt aber keine Benachrichtigung mehr wann das passiert – Stichwort: Silent Update.

Der überarbeitete Addon Manager

Link: Rechtsklick -> Im neuen Tab öffnen??

Ja, das ist jetzt nicht mehr an zweiter Stelle im Context-Menü sondern gleich an erster.. hat mich auch 2-3 Tage gebraucht, bis das wieder richtig funktioniert hat. Hintergrund ist, dass Öffnen im neuen Tab viel öfter benutzt wird als Öffnen im neuen Fenster und nach dem Motto “Wichtige Dinge kommen zuerst” wurden die beiden einfach vertauscht, so dass jetzt das wichtigere an erster Stelle steht.

Öffnen in neuem Tab steht jetzt oben

Übrigens! Firefox erkennt jetzt nicht-verlinkte Links auch als Links und offeriert uns gerade genannte Context-Einträge nachdem wir den Link markiert haben. Oftmals sieht man sowas in Foren oder z. B. auf Twitter, wenn jemand vergessen hat ein http:// vor die URL zu setzen. Finde ich eine recht nützliche Sache.

Firefox Sync

Synchronisation ist derzeit ein großes Thema, das Schlagwort Cloud ist in aller Munde. Speziell für Browser scheint daher im Moment kein Weg an Sync-Lösungen vorbei zu gehen. Mozilla hat einen eigenen Dienst entwickelt, der Lesezeichen, Passwörter, Einstellungen, Chroniken und Tabs auf mehreren Rechnern und sogar auf Mobilgeräten (auf denen Firefox oder Firefox Home läuft) zu synchronisieren. Dabei verschlüsselt Firefox die zu übertragenen Daten, sodass sie für keinen einsehbar auf den Mozilla-Servern liegen. Wem das trotzdem zu unsicher ist, kann sich auch einen eigenen Server einrichten. Ich nutze das, um Daten zwischen Zuhause und meinem Rechner auf Arbeit zu syncen, so habe ich meine gewohnte Surf-Umgebung bei mir, egal wo ich mich befinde. In späteren Versionen sollen auch Addons und deren Einstellungen synchronisiert werden können.

Fazit

Mozilla macht einen großen Schritt nach vorn. Das war äußerst wichtig, hat man doch zuletzt viele Nutzer zurecht an Chrome verloren. Man kann vielleicht noch nicht in jeder Hinsicht mit dem Primus in Sachen Geschwindigkeit gleichziehen aber dafür den Vorsprung um einiges wieder verkürzen. Firefox 4 war ein immens großes Projekt, das eigentlich schon hätte Ende letzten Jahres fertig sein müssen. Jetzt stellt Mozilla den Entwicklungszyklus um und erhofft sich dadurch noch schneller und flexibler zu werden. Die Konkurrenz bleibt natürlich auch nicht stehen, IE9 hatte letzte Woche seinen großen Auftritt und von Googles Chrome gibts mittlerweile auch schon die Nummer 10. Es stehen uns also noch viele interessante Neuerungen für die Zukunft ins Haus, es ist so spannend wie nie!

PS

Toolbars anpassen

An alle, die sich an das neue Aussehen von Firefox nicht gewöhnen können oder wollen: Es gibt extra die Möglichkeit alles so zu verändern, bis es einem gefällt. Gerade was die Anordnung von Icons oder Toolbars angeht.. einfach mal Rechtsklick auf eine Toolbar und den Punkt “Anpassen…” wählen. Jetzt könnt ihr Elemente auf den Toolbars per Drag & Drop verschieben, hinzufügen oder entfernen – es ist wirklich einfach, probiert es aus!

Auch an diesem wundervollen Abend gilt es einmal mehr ein Türchen im Adventskalender zu öffenbaren, diesmal verbirgt sich dahiner.. cursor! Mit dieser tollen Eigenschaft ist es uns möglich, das Bild des Mauszeigers zu ändern, wenn dieser über bestimmte Elemente unserer Webseite fährt bzw. ruht.

Browserunterstützung

Browser
ab Version	1.0	1.2	7.0	1.0	4.0

cursor hat sehr viele mögliche Werte, angefangen vom normalen Pfeil, über eine Hand, bis hin zu einer Sanduhr kann man so ziemlich alles damit machen. Die Unterstützung an der Browserfront ist sehr gut, einige extravagante Icons sind allerdings erst in höheren Versionen nutzbar bzw. abhängig vom jeweiligen Betriebssystem.

Von der Syntax her ist cursor ganz einfach aufgebaut und kann auf jedes Elemente angewendet werden. Nach der Eigenschaft folgt einfach eines der vielen Schlüsselwörter. Man kann auch eigene Cursor verwenden, hierzu benötigt man jedoch eine .cur-Datei (eine besondere Form des .ico Formats). Diese bindet man dann über url(pfad-zur-cursor-datei) ein.

CSS

1
2
3
4
5
6
7
8
9

abbr {
	cursor:help;
}
.wait {
	cursor:wait;
}
.hide-cursor {
	cursor:none;
}

Beispiele

Im Folgenden werde ich mal einige Werte auflisten, wenn ihr über den Listeneintrag fahrt, werden ihr sehen, wie sich euer Mauszeiger verändert.

• default
• none
• help
• pointer
• progress
• wait
• crosshair
• move
• n-resize

Eine komplette Übersicht mit allen möglichen Werten gibt es unter anderem im MDN. Wie ihr sicherlich schon richtig vermutet, kann man cursor dazu nutzen, um damit allerhand Blödsinn anzustellen. Das ist natürlich nicht der Sinn des Erfinders. Vielmehr würde ich mir wünschen, dass bei anklickbaren Elemente (in Zeiten von jQuery und Co. kann das ja alles sein) ein Pointer-Cursor erscheint, und bei Dialogboxen/Fenstern entsprechend ein Move-Cursor.

Für erklärende Elemente, wie das abbr-Tag beispielsweise, sollte man cursor:help setzen, damit der User weiß: “Ah, hier wird mir etwas erklärt, hier bekomme ich Hilfe.” Kleine Dinge, die die Usability einer Seite aber entscheidend beeinflussen können, aber bitte nutzt es in Maßen!

Und, hattet ihr was leckeres in euren selbstverständlich geputzten Schuhen? Wenn nicht, gibts hier wieder etwas, was eure Laune eventuell anheben kann. Hinter Türchen Nummer sechs haben wir heute overflow:hidden, das viele im Zusammenhang mit Verstecken von Inhalt bzw. Scrollbalken kennen werden. Es gibt aber noch einen anderen Anwendungsfall…

Browserunterstützung

Browser
ab Version	1.0	1.1	4.0	1.0	4.0

Die Eigenschaft overflow wird von allen Browsern beherrscht, im IE6 gibts allerdings ein kleines Problem, wenn der Wert visible gesetzt ist. Demnach vergrößert er das Element, damit der Inhalt hinein passt. Dadurch verhalten sich height/width wie min-height/min-width. Uns interessiert aber nur ganz speziell der Fall von overflow:hidden und da gibts keine Probleme.

Normalerweise setzt man diese Eigenschaft ja dazu ein, um überstehenden Text auszublenden oder um zu verhindern, dass Scrollbalken erscheinen. Ein schöner Nebeneffekt ist aber, dass Elemente mit overflow:hidden ihren gefloateten Inhalt “clearen”.

Beispiele

Am besten wir schauen uns das mal an einem Beispiel an. Folgender Aufbau: Ein Container hat eine nach links floatende Box als Inhalt. Dadurch fällt der Container in sich zusammen und alle nachrückenden Inhalte rücken nach oben.

HTML

1
2
3
4

<div class="container">
	<div class="box">Box</div>
	Container
</div>

CSS

1
2
3
4
5
6

.box {
	float:left;
	height:100px;
	margin-right:10px;
	width:100px;
}

Ergebnis

Seht ihr was ich meine? Das sieht doof aus und oftmals will man das gar nicht.

Um das zu vermeiden, kann man jetzt dem nachrückenden Inhalt z. B. ein clear:both geben. Das löst zwar das Problem mit dem Text neben der Box, aber nicht die Höhe unseres Containers. Jetzt kommt aber overflow:hidden ins Spiel, das wir dem Container verpassen müssen:

CSS

1
2
3

.container {
	overflow:hidden;
}

Ergebnis

Siehe da, alles bestens, die floatende Box wird wieder komplett vom Container umschlossen. Dabei brauchen wir nicht einmal zusätzliches Markup wie beispielsweise ein Clear-Div.

Short and simple, schönen Tag noch und bis morgen.

Komm grad zurück vom JK2-Zocken und hab dabei wohl etwas die Zeit vergessen, aber hier nun Türchen Nummer fünf mit.. Word-Wrap! Schonmal das Problem gehabt, dass in Mock-Ups die Überschriften der Widgets alle schön gepasst haben aber im Real-Betrieb dann so lange Wörter beinhalten (ich liebe Deutschland für seine zusammengesetzten Substantive), dass sie übers Widget hinausragen? Ja? Dann ist word-wrap genau das Richtige für euch.

Browserunterstützung

Das schöne an word-wrap ist, dass man bedenkenlos einsetzen kann und es, obwohl Teil der CSS3 Spezifikation, von allen Browsern unterstützt wird. Vermutlich liegt das daran, dass es ursprünglich von Microsoft kommt (daher auch Support in IE6).

Browser
ab Version	3.5	1.0	10.5	1.0	5.5

Es hat zwei Werte aus denen man wählen kann, wobei letzteres das Interessantere von beiden ist:

1. normal, der Defaultwert lange, Wörter bleiben lang und werden nicht umgebrochen
2. break-word, Wörter, die zu lang sind werden einfach umgebrochen und ragen somit nicht mehr über ihr Elternelement hinaus

Beispiel

Kommen wir ohne große Umwege zu einem Beispiel, wir wollen word-wrap ja auch mal in Aktion sehen. Prinzipiell kann man diese Eigenschaft natürlich jedem Element geben, es bietet sich aber an, es gleich dem body-Tag zu verpassen, dann wirkt es sich gleich auf die ganze Seite aus. Zunächst aber ein Beispiel, wie es ohne word-wrap aussieht:

Beispiel ohne Word-Wrap

Jetzt im Vergleich dazu der gleiche Text mit break-word:

CSS

1
2
3

body {
	word-wrap:break-word;
}

Beispiel mit Word-Wrap

Der Text wird zwar ohne Bindestrich umgebrochen, dafür ragt nichts mehr aus der Box heraus, was uns unter Umständen das Layout kaputt machen könnte. In Zusammenarbeit mit overflow:hidden geht außerdem der überstehende Text nicht mehr verloren.

So.. und für morgen versuche ich wieder pünktlich zu sein.

Heute bin ich extra früh aufgestanden (ja – um 9:00 Uhr ist sehr früh) um euch einen neuen Eintrag im Adventskalender zu schreiben. Naja jedenfalls gehts heute um das kleine Wort transparent, das – wie ihr sicherlich wisst – an sich nichts Neues ist. ABER in der Verbindung mit dem anderen kleinen Wort color durchaus etwas Neues darstellt.

Browserunterstützung

Browser
ab Version	3.0	3.1	10.0	1.0	9.0

Ja transparent sollte euch zumindest schon einmal begegnet sein.. vermutlich im Zusammengang mit background oder ganz speziell als background-color. Außerdem kann man es auch als border-color benutzen, beides geht seit CSS2.

Als Wert für Color allerdings ist es erst in CSS3 “erlaubt”, deswegen ist die Unterstützung im IE auch recht dürftig. Nichtsdestotrotz will ich euch die Vorzüge dieser Variante nicht vorenthalten.

Beispiel

Viele von euch kennen sicherlich das leidige Thema Image Replacement. Jens Meiert hat mal eine Übersicht mit so ziemlich allen bis dato bekannten Methoden auf- und vorgestellt (kann ich nur empfehlen mal zu lesen), mit denen man Text durch Bilder ersetzen kann. Seine, ich nenne es jetzt mal Favoriten sind demnach die..

[...] Phark-Methode, bedingt durch ihre Einfachheit, und SIIR, bedingt durch ihr Potential [...]

Da die Phark-Methode die einzige von beiden ist, die ausschließlich mit CSS zu realisieren ist, ist sie mein Favorit.

Wie ich vor einer ganze Weile bei Twitter schonmal schrieb, hat color:transparent im Prinzip einen richtig guten Anwendungsfall: Die prima Phark-Methode wird sauberer, indem text-indent wegfällt. Also lautet der Code für halbwegs gutes Image Replacement in guten Browsern ab jetzt so (zumindest bei mir):

HTML

1

<h1>Firefox</h1>

CSS

1
2
3
4
5
6

h1 {
	background:url(firefox.png);
	color:transparent;
	height:150px;
	width:150px;
}

Ergebnis

Firefox

Von der Schrift “Firefox” ist nichts mehr zu sehen, außer man markiert die ganze Überschrift. Übrigens könnte man auch rgba(0,0,0,0) nehmen, quasi das Äquivalent zu transparent.

Der Fallback im IE ist die Farbe Schwarz, was aber Mozilla nicht davon abhält es einzusetzen. Schönen dritten Dezember noch!

So da ihr jetzt hoffentlich euren echten Adventskalender für heute schon geplündert habt, gibts jetzt noch das zweite Türchen des CSS-Kalenders. Weniger süß, dafür umso informativer.

Diesmal gehts um die Eigenschaft Text-Transform, die es uns ermöglicht Groß- und Kleinschreibung eines Textes zu verändern.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

text-transform gibt es schon seit CSS1 Zeiten und wird von allen Browsern unterstützt. Sie wird allerdings meiner Erfahrung nach recht wenig benutzt, bzw. erst spät von “CSS-Neulingen” entdeckt, dabei ist kann sie ziemlich nützlich sein.

Die Syntax der Eigenschaft erlaubt neben none und inherit genau drei Werte, die von uns von Bedeutung sind:

1. capitalize, alle Wörter im Text beginnen mit einem Großbuchstaben
2. uppercase, alle Buchstaben eines Textes werden zu Großbuchstaben
3. lowercase, alle Wörter beginnen mit kleinen Buchstaben, auch Satzanfänge und Substantive

Schauen wir uns die Beispiele an.

Beispiele

Als Ausgangsbasis wird uns folgender Text, der genauso im Quellcode steht, dienen:

1
2
3

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua.</p>

text-transform: capitalize

1
2
3

.capitalize {
	text-transform:capitalize;
}

jedes Wort muss groß anfangen

text-transform: uppercase

1
2
3

.capitalize {
	text-transform:uppercase;
}

alles großgeschrieben

text-transform: lowercase

1
2
3

.capitalize {
	text-transform:lowercase;
}

alles kleingeschrieben

Ich denke, dass gerade die Fälle capitalize und uppercase bei Überschriften, Titeln oder Einleitungssätzen von Nutzen sein können.
Das wars für heute, bis morgen!