Vortragsfolien: HTML5 & CSS3

Wer möchte hat, kann sich die Folien meines Vortrags zum Thema HTML5 & CSS3 anschauen. Der Vortrag soll Lust auf die neuen Technologien machen und zeigt auf, welche Möglichkeiten sich dabei bieten. Aufgrund der zeitlichen Begrenzung, konnte ich leider nicht zu sehr ins Detail gehen. Über Feedback würde ich mich trotzdem freuen!

Oh übrigens werden IE-User kein großes Vergnügen an den Folien haben, auch iPad-User könnten Probleme haben, für euch gibts daher eine vereinfachte Version der Slides.

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.

Canery - Version 14

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!

Hätte ich noch länger gewartet, wäre bald wieder Advent gewesen aber so passt es schon noch.. seht es einfach als eine Art Serie von Artikeln und nicht mehr als Adventskalender an. Ok, worum geht es heute? Ganz kurz und bündig: resize. Diese CSS3 Eigenschaft erlaubt es dem User ohne Einsatz von Javascript Block-Level Elemente in ihrer Größe zu manipulieren. Ich werde euch zeigen, was damit alles möglich ist, wo es Sinn macht und was man beachten sollte.

Browserunterstützung

Browser
ab Version	4.0	3.0	–	1.0	–

Unterstützung gibt es bisher von Webkit- und künftigen Geckoversionen. Anders sieht es in Opera 11 und Internet Explorer 9 aus, hier fehlt jeglicher Support bisher.

Also, was macht resize nun genau? Wir als Entwickler können bestimmten, wie User die Größe, sprich Höhe und Breite, eines Blocks verändern können. Dazu stehen uns fünf mögliche Werte zur Verfügung:

1. none, das Element kann nicht verändert werden (Default, außer bei textarea)
2. both, Höhe und Breite können verändert werden (Default bei textarea)
3. horizontal, nur die Breite kann verändert werden
4. vertical, nur die Höhe kann verändert werden
5. inherit, erbt den Wert vom Elternelement

resize ist für textarea-Elemente standardmäßig auf both gesetzt, alle anderen Elemente müssen zwei Bedingungen erfüllen:

• sie dürfen kein inline-Element sein (nur inline-block, block und replaced elements sind erlaubt)
• die Eigenschaft overflow darf nicht auf visible gesetzt sein

Ist eine der beiden Bedingungen nicht erfüllt, greift resize nicht!

Beispiele

Okay, damit wissen wir jetzt, was wir zu tun haben. Als erstes Beispiel nehmen wir eine textarea zur Hand:

HTML

1

<textarea cols="20" rows="3"></textarea>

Ergebnis

Benutzer von Chrome, Safari und Firefox 4 sollten jetzt in der Lage sein, die Box zu vergrößern, indem sie auf den kleinen Marker unten rechts klicken und ihn verschieben. Damit kann man wunderbar das Layout einer Seite zerstören, eventuell hat der ein oder andere das schon auf anderen Seiten bemerkt.

Jetzt wollen wir erreichen, dass die Textbox nur in der Höhe änderbar ist. Dazu benutzen wir resize:

CSS

1
2
3

textarea {
	resize:vertical;
}

Ergebnis

Es hat geklappt, die Textbox kann jetzt nicht mehr in ihrer Breite, sondern nur noch in ihrer Höhe geändert werden, damit lässt sich schonmal wesentlich weniger “Schaden” anrichten.

Okay, probieren wir das ganze jetzt mit einem div. Dazu müssen wir, wie oben schon beschrieben, neben der resize Eigenschaft auch overflow verändern:

HTML

1

<div class="resize"></div>

CSS

1
2
3
4
5
6
7

div.resize {
	border:2px solid orange;
	height:100px;
	overflow:hidden;
	resize:both;
	width:200px;
}

Ergebnis

Und siehe da, wir haben den gleichen Effekt auch für ein stinknormales div erzielt – viel Spaß beim Basteln!

Heute ist zwar schon der 24. aber hier kommt erst das 15. Türchen. Ich wünsche euch und euren Familien ein schönes Fest und hoffe ihr vergebt mir meinen Rückstand bezüglich des Adventskalenders. Natürlich werde ich versuchen ihn trotz allem noch dieses Jahr zu komplettieren, wir werden sehen, ob das klappt. Die letzten Tage ist wenig passiert, da ich durch diverse Geburtstagsfeiern nie Zeit hatte. Jetzt geht es aber auf jeden Fall mit text-overflow weiter, das hauptsächlich deswegen so selten benutzt wird, da es erst offiziell mit CSS3 Einzug in die Webwelt hält.

Browserunterstützung

Browser
ab Version	7	1.3	11.0	1.0	6.0

Die von Microsoft stammende Eigenschaft wird mittlerweile von allen Browsern außer Firefox unterstützt (es gibt aber schon einen Bug dafür ). Opera unterstützt sie seit Version 11, in Version 9-10 wurde aber noch die Präfix-Variante benutzt (-o-text-overflow).

Mit text-overflow können wir bestimmen, wie ein Text, der aufgrund seiner Länge nicht in sein Elternelement passt, abgeschnitten wird. Es werden für diese Eigenschaft nur drei Werte akzeptiert:

1. ellipsis, Text endet mit drei Punkten “…” (U+2026, …)
2. clip, der Text hört einfach auf, wie abgeschnitten (Defaultwert)
3. <string>, eine Zeichenkette, mit der der Text abgeschnitten werden soll, wird noch von keinem Browser unterstützt!

Beispiel

Wie immer, zeige ich euch das Ganze natürlich an einem Beispiel, denkt daran, dass ihr den Effekt in Firefox nicht sehen könnt. Als Versuchskaninchen dient uns diesmal eine Liste, mit der Artikel angeteasert werden sollen.

HTML

1
2
3
4
5
6
7
8

<ul>
<li><h3>Post 1</h3>
<p>Lorem ipsum dolor sit amet.</p></li>
<li><h3>Post 2</h3>
<p>Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.</p></li>
<li><h3>Post 3</h3>
<p>Lorem ipsum dolor sit amet, sed diam nonumy eirmod.</p></li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

ul {
	list-style:none;
	margin:10px 0;
	overflow:hidden;
}
li {
	background-color:#eee;
	border:1px solid #aaa;
	float:left;
	margin-right:20px;
	padding:5px;
	width:140px;
}

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

  Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.

• Post 3

  Lorem ipsum dolor sit amet, sed diam nonumy eirmod.

Damit erhalten wir drei gleiche Boxen. Das ist zwar ganz gut aber noch nicht schön. Schön wäre es, wenn die Boxen auch gleich hoch wären, dazu müssen wir den Text kürzen und das ist wiederum der Punkt, an dem uns text-overflow zu Hilfe kommt.

Als erstes müssen wir die Zeilenumbrüche mit white-space:nowrap verhindern – ohne dem geht es nicht! Danach müssen wir den Paragraphen innerhalb der Listenelemente ein overflow:hidden verpassen, damit zu langer Text nicht über das Element hinaus gerendert wird. Zum Schluss kommt noch text-overflow:ellipsis dazu. Das CSS der li-Tags wird also um folgenden Code erweitert:

zusätzliches CSS

1
2
3
4
5
6
7

li {
	white-space:nowrap;
}
li p {
	overflow:hidden;
	text-overflow:ellipsis;
}

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam voluptua.

• Post 3

  Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Und siehe da (!=Firefox) die Boxen haben alle die gleiche Höhe und die Posts werden automatisch abgeschnitten und enden mit drei Punkten, ganz ohne PHP. Schöne Sache wie ich finde.. so und nun wünsche ich allen Lesern ein ruhiges Weihnachtsfest und eine schöne Bescherung.

Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

Unterstützt ab Internet Explorer 3.0, das sagt glaub ich alles. Man kann die Eigenschaft also bedenkenlos einsetzen, sie funktioniert ausnahmslos in jedem Browser.

Erfahrene Webdeveloper nutzen diese Technik relativ häufig um beispielsweise Text zu verstecken oder um einen Absatz eingerückt beginnen zu lassen. Für Anfänger jedoch erschließt sich der richtige Gebrauch von text-indent meist etwas zu spät. Deswegen sei hier nochmal darauf hingewiesen, dass man damit nur einzeilige Texte bzw. die erste Zeile eines Textes beeinflussen kann.

Als Werte sind positive wie negative Längenangaben und prozentuale Angaben erlaubt.

Beispiele

Beispiel Nummer eins gebraucht text-indent zur Einrückung von Absatzanfängen, als Basis dient uns folgender Code:

HTML

1
2
3
4

<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. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

Man beachte, wie die erste Zeile des Absatzes um 2em eingerückt wird, die anderen Zeilen aber nicht.

Deswegen sollte man text-indent auch niemals in Menüs/Navigationen verwenden, sollte nämlich doch mal ein Menüpunkt umbrechen, ist nur die obere Zeile eingerückt, nicht aber der Rest des Textes. In solchen Fällen ist padding zu bevorzugen.

Nächstes Beispiel: Wie in Türchen #3 angedeutet, wird text-indent gern zum verstecken von Text verwendet, speziell wenn es um Image-Replacement geht. Wollen wir doch noch mal nachsehen, wie genau das funktioniert. Wir nehmen wieder den Absatz von oben und fügen noch ein span-Tag ein, dass wir mit einem Bild (in diesem Fall der Schriftzug meines Blogs) ersetzen wollen..

HTML

1
2
3
4

<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. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

.logo {
	background:transparent url(normansblog_logo.png) no-repeat 0 0;
	display:inline-block; /*damit height und width greift*/
	height:29px; /*Höhe des Bildes*/
	text-indent:-9999px;
	vertical-align:bottom;
	width:150px; /*Breite des Bildes*/
}

Ergebnis

Soviel dazu, text-indent ist also eine nützliche Sache, die man im Hinterkopf behalten sollte.

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!