Bessere Formulare dank HTML5 und CSS3 - iX 09/2012

Mit Hilfe meines Arbeitgebers das MedienKombinat ist es mir möglich gewesen, einen Artikel in der Septemberausgabe der Fachzeitschrift iX zu veröffentlichen. Im Artikel geht es um HTML5 Fomulare, deren Styling mit CSS3 und den Vorteilen für mobile Endgeräte. Wer Interesse hat, kann mittlerweile alles online nachlesen.

Ich bedanke mich bei allen Beteiligten und wünsche euch viel Spaß damit. Wenn es Fragen dazu gibt, könnt ihr die hier oder im Forum der iX stellen.

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 (veraltet), 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!

Damit die Vorweihnachtszeit nicht zu langweilig wird, habe ich mir gedacht ich biete euch einen kleinen Adventskalender in Form von 24 Artikeln an. Das heißt, euch erwartet ab heute jeden Tag ein Beitrag zum Thema: Selten benutzte CSS Properties.

Dabei lernt ihr nützliche CSS Properties kennen, von denen ihr bisher vielleicht nicht einmal wusstet, dass es sie gibt. Den Anfang macht heute Box-Sizing.

Browserunterstützung

Die Eigenschaft box-sizing dient zur Steuerung des CSS Box-Models. Das normale W3C-Box-Model besteht aus Width×Height + Padding + Border + Margin. Dabei werden Padding, Border nicht mit bei der Breiten- bzw. Höhenberechnung berücksichtigt. Mit box-sizing kann man dieses Verhalten jedoch ändern und so das “alte” Box-Model des IE6 (Quirks Mode) nutzen.

Browser
ab Version	1.0	3.0	7.0	1.0	8.0

Da eine CSS3-Eigenschaft ist, wird sie noch nicht von allen Browsern in ihrer eigentlichen Schreibweise unterstützt. Gecko- und Webkit-Engines benutzen noch sogenannte Vendor-Prefixes. Als mögliche Werte stehen zwei (für Firefox drei) zur Auswahl:

1. content-box (Default-Wert), spiegelt das W3C-Box-Model wider
2. border-box, damit wird Padding und Border-Width in die Breiten- und Höhenberechnung eingebunden
3. padding-box (nur Firefox), hierbei wird lediglich das Padding mit einberechnet

Eine Zuweisung per CSS würde demnach folgendermaßen aussehen:

1
2
3
4
5

.box-sizing {
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari, Chrome */
	box-sizing:border-box; /* IE8, Opera */
}

Beispiele

Unten stehende Boxen haben die gleichen folgenden CSS-Eigenschaften und unterscheiden sich ausschließlich durch ihr Box-Model. (Ihr könnt es gerne mit Firebug o.ä. nachprüfen )

1
2
3
4
5
6
7
8

.box {
	background-color:#eee;
	border:10px solid #aaa;
	height:60px;
	margin:10px;
	padding:10px;
	width:350px;
}

Wie ihr seht, sind die Boxen unterschiedlich lang, obwohl wir beiden eine Width von 350px gegeben haben. box-sizing mit dem Wert border-box berechnet die Breite (bzw. Höhe) also aus Width (Height) + Padding + Border und nicht wie das normale Box-Model nur aus Width (Height).

Besonders nützlich wird die Eigenschaft, wenn man eine Textarea auf 100% Breite ziehen will und gleichzeitig aber Padding vergeben möchte. Probieren wir es aus:

Die erste Textarea geht 20 Pixel über den Rand hinaus, die zweite verhält sich besser – dank box-sizing!

Und damit wäre Türchen #1 auch schon wieder verputzt, freut euch auf morgen.

IE rafft es nicht!

Heute habe ich mal wieder über etwas gestaunt, das der Internet Explorer nicht kann. Folgendes Szenario: Ihr habt ein Bild auf dem unter anderem ein Schriftzug steht, z. B. “Jetzt hier Registrieren!”. Weil die Schrift mit tollen Effekten und dergleichen ausgestattet ist, bindet ihr sie direkt ins Bild ein. Im Frontend wird das Bild über ein img-Tag ausgegeben und soll jetzt verlinkt werden. “Ok..”, dachte ich mir, “..leg ich halt einen transparenten Link darüber!” – Denkste!

Hier erst einmal ein Beispiel, damit ihr auch versteht, was ich meine. Wie nehmen ein Bild und einen Link und packen einen Wrapper darum. Der Wrapper bekommt position:relative, damit wir den Link per position:absolute über das Bild schieben können. Der Link soll natürlich transparent sein, wir wollen ja nicht irgendwie das Bild “übermalen” sondern nur einen anklickbaren Bereich schaffen, also wird der Text versteckt.

Problembeispiel (alle IE-Versionen)

HTML

1
2
3
4

<div class="wrapper">
	<img src="http://www.getfirebug.com/img/firebug-logo.png" alt="Bild"/>
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

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

.wrapper {
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

Link

Ich habe die wichtigen Bereiche nochmal hervorgehoben, der blaue Rahmen umrandet den Wrapper, der rote den Link.

Natürlich ist diese Denkweise nicht verkehrt, sie hat nur einen Haken: In allen von mir getesteten Versionen des Internet Explorers (IE6-9) hat das nicht funktioniert! Im IE kann man den Link einfach nicht anklicken, alle anderen Browser haben damit absolut kein Problem.

Ich dachte erst es liegt daran, dass das Bild den Link im IE irgendwie überdeckt, weil ich kein z-index benutze. Dann habe ich versucht den Text über padding-top und overflow-hidden zu verstecken und dachte der IE eventuell damit besser zurecht. Nichts hat geholfen.. wenn ich den Text nicht versteckte, konnte man nur den Text anklicken, nicht aber den Rest der klickbaren Fläche. Erst als ich das Bild aus dem Quellcode entfernt hatte, konnte man ganz plötzliche die komplette transparente Fläche anklicken.

Natürlich war ich schon wieder kurz vorm Platzen.

Lösung

Ein ähnliches Problem mit nicht anklickbaren Links hatte ich zwar schon mal im IE6 aber ich hätte nie gedacht, dass IE8 und 9 hier immer noch solche Probleme haben. Aber was soll’s, eine Lösung musste her und es gibt zwei Wege, wie man das Problem umgehen kann..

1. das Bild nicht als img-Tag einbinden, sondern dem Wrapper/Link als background-image zuweisen
2. dem Link ein transparentes Hintergrundbild verpassen

In meinem Fall war letztere Variante günstiger, ich würde aber prinzipiell eher zu Variante eins raten, da sie sauberer ist. Und ja, sobald der Link eine Hintergrundfarbe oder ein Hintergrundbild bekommt, kann man ihn auch im IE anklicken, verrückte Welt oder?

Beispiel mit Lösungsvariante 1

HTML

1
2
3

<div class="wrapper">
	<a href="http://www.getfirebug.com">Link</a>
</div>

CSS

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

.wrapper {
	background:transparent url(http://www.getfirebug.com/img/firebug-logo.png) repeat 0 0;
	height:89px;
	position:relative;
	width:293px;
}
a {
	height:70px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	width:185px;
	top:0;
}

Ergebnis

So klappts auch im IE!

PS: Firebug 1.6 wurde heute veröffentlicht, schnell runterladen oder updaten und die Beispiele damit untersuchen!

Bax-Shadow wird dazu verwendet einem Element einen oder mehrere Schlagschatten zu verleihen. Allerdings verhält sich Box-Shadow etwas anders als das uns schon bekannte Text-Shadow. In diesem Teil erfahrt ihr, wie man Box-Shadow richtig benutzt und was für ein Potential diese Property hat.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Syntax

Box-Shadow ist ähnlich aufgebaut wie Text-Shadow, unterscheidet sich aber in einigen wesentlichen Dingen. Allen voran können wir noch nicht auf browserspezifische Präfixe verzichten, d. h. dass Webkit-Browser und aktuelle Firefox-Versionen Box-Shadow noch mit ihren jeweiligen Kürzeln implementiert haben.

Der Code für einen normalen, cross-browser-kompatiblen Schlagschatten lautet daher wie folgt:

1
2
3
4
5

div.boxshadow {
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Firefox - alte Syntax */
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Safari, Chrome - alte Syntax */
	box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* alle neuen Browser, W3C Standard */
}

Wie bei text-shadow auch, stehen auch hier die Werte für Verschiebung entlang der X-Achse, Verschiebung entlang der Y-Achse, Schattengröße und Schattenfarbe. (Da alle Browser, die Box-Shadow unterstützen auch den RGBa-Farbraum darstellen können, bietet es sich an, diesen hier gleich mal zu verwenden.)

Obiger Code erzeugt dieses Bild:

Ebenso können wir bei box-shadow mehrere Schatten durch Komma getrennt angeben:

1
2
3
4
5
6

div.moreboxshadows {
	/*Lila, Gruen, Gelb*/
	-moz-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	-webkit-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
}

Man beachte, dass der Schatten, der an erster Stelle steht, auch “oben auf” liegt. Das heißt, er ist dem Betrachter am nächsten. In diesem Fall ist der gelbe Schatten ganz unten, darüber wird der grüne und zum Schluss der lila Schatten gezeichnet. Durch die RGBa-Farbwerte kommt es außerdem zur Mischung der Farben.

Zwei weitere (optionale) Parameter

Box-Shadow hat aber noch zwei weitere Parameter, der erste ist inset. Ist inset gesetzt, verläuft der Schatten nach innen statt nach außen. Ein Beispiel:

1
2
3
4
5

div.innerboxshadow {
	-moz-box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 0 10px #000;
	box-shadow:inset 0 0 10px #000;
}

Der andere Parameter ist ein vierter Pixel-Wert, der den Grad der Überfüllung des Schattens angibt – auch negative Werte sind erlaubt! Damit kann man den Schatten kräftiger/schwächer erscheinen lassen. Verdeutlicht nochmal am allerersten Beispiel:

1
2
3
4
5

div.strongboxshadow {
	-moz-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
}

Durch alle sechs Parameter haben wir im Prinzip die gleichen Möglichkeiten zum Erstellen eines Schattens, die wir auch aus Photoshop kennen.

Einstellungen Schlagschatten in Photoshop

Box-Shadow funktioniert übrigens ganz wunderbar im Zusammenspiel mit Border-Radius und es lassen sich zusammen mit weiteren CSS3 Properties allerhand schöne Dinge anstellen. Ein gutes Beispiel sind Buttons:

Fazit

Soweit zu den eher spektakulären visuellen Neuerungen, die mit CSS3 und den neuen Browserversionen Einzug halten werden. Einiges davon ist heute schon ohne große Bedenken einsetzbar und wird in Zukunft gehäuft anzutreffen sein. Box-Shadow ist da keine Ausnahme und meiner Meinung nach ein sehr Nützliches Tool, um schnell und unproblematisch diverse Schatteneffekte zu erzeugen. Das alles spart uns Zeit und wiedereinmal Bandbreite, denn wo sonst aufwändige Grafiken für Schatten erstellt werden mussten, kommt jetzt nur noch ein Dreizeiler zum Einsatz. Schöne neue Welt. Mit diesem Teil endet die CSS3 im Detail-Reihe, ich hoffe ihr konntet einiges mitnehmen und nutzt das Gelernte.

FILMSTARTS.de Suchplugin

Wenn ihr wie ich oft Infos zu Filmen im Netz sucht, gibt es dafür diverse Seiten. Der ein oder andere von euch benutzt vielleicht FILMSTARTS.de (im weiteren einfach nur Filmstarts genannt). Und je häufiger ihr die Seite besucht oder nach bestimmten Filmen suchen wollt, desto notwendiger wird ein Suchplugin für Firefox. Da Filmstarts aber sein Design und seine Seitenstruktur geändert hat, funktionieren die bisherigen Suchplugins nicht mehr richtig. Also habe ich mir eines dieser Plugins angepasst und teile es mit euch.

Klickt einfach auf folgenden Link und wählt dann in der Suchleiste von Firefox die neue Suchmaschine aus.

Das wars auch schon, mehr gibts nicht zu tun, viel Spaß beim Suchen.

Update: Es hatte sich noch ein Fehler eingeschlichen, der dazu führte, dass Umlaute in der Anfrage nicht ordentlich kodiert bei Filmstarts angekommen sind. Dieser Fehler ist jetzt behoben!

Wie der Name schon vermuten lässt, wird es möglich sein, bzw. ist es schon möglich, beliebigen Text einen Schatten zu verleihen. Das hat natürlich hauptsächlich ästhetische Vorzüge, kann aber unter Umständen sogar die Lesbarkeit verbessern oder zumindest dem Benutzer helfen, bestimmte Texte eher wahrzunehmen. Text-Shadow ist keinesfalls mehr eine Technik von morgen, im Gegenteil, schon heute trifft man (meist unbewusst) schattierten Text auf vielen Webseiten an.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Text-Shadow ist ganz simpel und kommt sogar schon ohne browserspezifische Präfixe aus. D.h. alle oben genannten Browser unterstützen text-shadow in seiner finalen Form.

1
2
3

div.textshadow {
	text-shadow:10px 10px 3px #666;
}

Wie wir sehen können, hat text-shadow vier Parameter:

1. X-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der X-Achse verschoben wird (nach links/rechts versetzt). Negative Werte sind erlaubt.
2. Y-Abstand: Dieser Längenwert gibt an, wie weit der Schatten entlang der Y-Achse verschoben wird (nach unten/oben versetzt). Negative Werte sind erlaubt.
3. Größe: Ein weiterer Längenwert, der angibt, wie weit sich der Schatten ausbreiten soll. Ein Wert von 0 erzeugt einen sehr harten Schatten, je höher der Wert, desto unschärfer wird er.
4. Farbe: Hier kann man jeden in CSS erlaubten Farbwert einsetzen (auch RGBa!).

Obiger Code erzeugt dieses Bild:

Man kann das Ganze aber auch noch weiter treiben und mehrere Schatten erzeugen. Dazu werden hinter dem ersten Schatten einfach noch weitere deklariert und mit Komma voneinander getrennt.

1
2
3

div.moreshadows {
	text-shadow:10px 10px 0 #aaa,-10px -10px 3px #f00,0 0 10px #00f;
}

Ihr seht, damit kann man auch ne ganze Menge dummes Zeug fabrizieren aber dazu ist Text-Shadow nicht gedacht. Hier mal ein paar schöne Beispiele, wie man Text-Shadow richtig einsetzen kann.

a) Gravur-Effekt 1

b) Gravur-Effekt 2

c) Schlagschatten

Fazit

Schaut euch eure Lieblingsseiten im Internet mal genauer an. Ich wette, da gibt es einige, die bereits Text-Shadow verwenden. Auch ich nutze es auf diesem Blog. Der Text in der Sidebar hat einen diffusen Schatten, damit er leichter auf dem dunklen Hintergrund zu lesen ist, die Artikelüberschriften haben einen schwachen Schlagschatten und die Ähnliche Artikel-Box benutzt den Gravur-Effekt 1. Text Shadow ist für mich ein nützliches Werkzeug geworden um Text besser und schöner hervorzuheben. Weitere Pluspunkte sammelt Text-Shadow mit der breiten Unterstützung an der Browser-Front und der schlanken Syntax. Viel Spaß!

Columns oder zu deutsch Spalten gibt es schon eine Ewigkeit. Uns allen sind sie aus den klassischen Printerzeugnissen wie Zeitungen und Magazinen bekannt. Prinzipiell machen sie nichts anderes als Text in schmalere Spalten aufzuteilen.

Der Vorteil des mehrspaltigen Satzes als Textgestaltung liegt darin, dass insbesondere bei großformatigem Papier die Zeilenlänge kurz gehalten wird [...]

… und damit die Lesbarkeit des Textes erhöht wird. Durch CSS3 haben Webdesigner nun die Möglichkeit, diese Art des Satzes auch in Webseiten anzuwenden.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Columns haben mehrere Eigenschaften, die wir uns im Einzelnen anschauen werden. Gecko- und Webkitbrowser haben die Technik wieder mit ihren Präfixen implementiert.

column-count

column-count gibt die Anzahl der Spalten an, in die der Text aufgeteilt werden soll.

1
2
3
4
5
6
7

div.columns {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari, Chrome */
	column-count:2; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

Folgender Fließtext wird durch obigen Code in zwei Spalten aufgeteilt. Die Breite einer Spalte wird immer aus der Breite des Elternelements durch die Anzahl der Spalten berechnet.

column-width

Anstatt eine feste Anzahl Spalten anzugeben, kann man auch eine ungefähre Breite einer Spalte deklarieren. Dabei wird die Spaltenanzahl automatisch errechnet. Ihr versteht sicherlich, dass es wenig Sinn macht column-count und column-width gleichzeitig zu verwenden..

1
2
3
4
5
6
7

div.columns {
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari, Chrome */
	column-width:100px; /* Opera, IE, W3C Standard */
	border:4px solid #adf;
	padding:10px;
}

column-gap

Das ist natürlich noch nicht alles, mit column-gap könnt ihr den Abstand zwischen den Spalten festlegen..

1
2
3
4
5
6
7
8
9
10

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-gap:7em;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-gap:7em;
	column-count:2; /* Opera, IE, W3C Standard */
	column-gap:7em;
	border:4px solid #adf;
	padding:10px;
}

column-rule

.. und mit column-rule zieht ihr zwischen den Spalten eine Linie. Der Befehl hat genau wie border folgende drei Parameter:

1. column-rule-width, die Breite der Linie
2. column-rule-style, der Stil der Linie (solid, dashed, dotted, etc.)
3. column-rule-color, die Farbe der Linie

1
2
3
4
5
6
7
8
9
10

div.columns {
	-moz-column-count:2; /* Firefox */
	-moz-column-rule:4px dashed #adf;
	-webkit-column-count:2; /* Safari, Chrome */
	-webkit-column-rule:4px dashed #adf;
	column-count:2; /* Opera, IE, W3C Standard */
	column-rule:4px dashed #adf;
	border:4px solid #adf;
	padding:10px;
}

Verfeinerung

Nochmals verstärkt wird der Effekt, wenn man zusätzlich text-align:justify anwendet.

Fazit

So, damit wisst ihr nun alles über Columns und wie man sie verwendet. Besonders schön an ihnen finde ich die Tatsache, dass Browser, die die Technik noch nicht beherrschen, einfach auf die “normale” Darstellungsweise zurückfallen (Paragraphen untereinander statt nebeneinander). Ein sinnvolles Einsatzgebiet sind natürlich News-Portale, die sehr breit sind. Auf solchen Seiten lohnt es sich lange Artikel in kürzere Spalten zu teilen um die Lesbarkeit zu verbessern. Ich wünsche wie immer viel Spaß!

options verstecken ist gar nicht so einfach, auch nicht mit jQuery

Diese Woche musste ich auf Arbeit im Zusammenhang mit einem Projekt ein Formular umsetzen, dass eine Besonderheit hatte: Es bestand aus zwei Selectboxen, die voneinander abhängig waren. D.h. wenn man mit einer Selectbox etwas ausgewählt hat, sollten sich die Optionen der zweiten Selectbox ändern (wegfallen oder dazu kommen). Ich habe mir daraufhin mit jQuery eine Funktion geschrieben, die das für mich erledigt.

Ohne mir groß etwas dabei zu denken, nutzte ich die hide()-Funktion, die jQuery standardmäßig mitbringt. Alles funktionierte einwandfrei in Firefox und da ich davon ausgegangen bin, dass das JavaScript-Framework Cross-Browser-kompatibel ist, teste ich die Funktion nicht in anderen Browsern und kümmerte mich stattdessen erstmal um das Layout. Als alles fertig war, freute ich mich, rechnete meine Zeit ab und widmete mich anderen Tickets.

Gestern Mittag dann erhielt ich den Hinweis, dass die Auswahl der Selectboxen im IE7 nicht funktioniert. Gut dachte ich mir.. schaust es dir mal an.. und tatsächlich: egal was ausgewählt wurde, die zweite Selectbox blieb mit allen Optionen befüllt, es tat sich nichts.

Verdammter Internet Explorer!

.. schoss mir durch den Kopf. Also öffnete ich Opera, Chrome und Safari und testete das Formular dort – wieder nichts. In keinem Browser (außer Firefox) funktionierte die Auswahl. Langsam wurde ich etwas nervös..

Wie löse ich das Problem jetzt ohne viel Aufwand?!

Ich überlegte kurz und dann viel mir die Lösung ein, anstatt die option-Tags zu verstecken, musste ich sie nur deaktivieren. Also hab ich die hide()-Funktion mit attr(‘disabled’,'disabled’) ausgetauscht und schon gings. Yay, der Tag war gerettet!

Merke:

Niemals options versuchen zu verstecken, das funktioniert nicht in allen Browsern, einfach nur deaktivieren!

Wieder etwas dazu gelernt!

Bei dieser Technik geht es prinzipiell darum eine Grafik als border für jedes beliebige Element zu benutzen. Was das soll? Nun ja, manche Leute mögen es bunt und lassen sich ausgefallene Rahmen einfallen. Damit man nicht mehrere Hintergrundbilder deswegen zurecht schneiden muss, hält nun mit CSS3 border-image Einzug.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Vorbereitung

Die Basis bildet natürlich eine Grafik. Diese muss so aufgebaut sein, dass sie aus neun Bereichen besteht: vier Ecken, vier Kanten und der Mitte, hier dargestellt durch Pikachus.

Syntax

Kommen wir also zur Sache, wie schon aus vorhergehenden Teilen bekannt, haben die Browser unterschiedliche Präfixe, so auch bei border-image.

1
2
3
4
5
6
7
8

div.borderimage {
	border-style:solid;
	border-width:49px 41px;
	-moz-border-image:url(pikachu.png) 49 41 repeat; /* Firefox */
	-webkit-border-image:url(pikachu.png) 49 41 repeat; /* Safari, Chrome */
	-o-border-image:url(pikachu.png) 49 41 repeat; /* Opera */
	border-image:url(pikachu.png) 49 41 repeat; /* W3C Standard */
}

Wichtig ist, dass border-style einen wert ungleich none hat und mit border-width könnt ihr die Breite des Rahmes bestimmen, in meinem Fall sind die Werte die Maße eines Pikachus. Damit sollten wir ungefähr so eine Box bekommen:

Div mit Pikachu-Border

Kurze Erklärung, welcher Teil hier was bewirkt.. mit der URL gibt man natürlich den Pfad zum Bild an. Danach folgen die beiden Werte für die Rahmenbreite. Hier können 1-4 Werte stehen, ein Wert für jede Seite. In diesem Fall ist ein Pikachu 41 Pixel breit und 49 Pixel hoch. Als letztes folgt noch ein Schlüsselwort, von denen es genau drei Stück zur Auswahl gibt:

1. repeat – das Bild wird einfach wiederholt
2. stretch – die Kantenstücke werden auf die volle Breite bzw. Höhe gestreckt
3. round – die Kantenstücke werden etwas verzogen damit kein Pikachu abgeschnitten werden muss

Obiges Beispiel benutzt repeat, hier nun eins mit round…

(Webkit-Browser scheinen mit round im Moment wohl ein Problem zu haben.)

… und eins mit stretch…

Fazit

Jo, so geht das. Ich geb zu, das Pikachu-Beispiel ist vielleicht nicht gerade realistisch, zeigt aber was für einen Unfug man mit der neuen Technik treiben kann. Border-Image ist keine große Revolution, vereinfacht aber doch einige Dinge und vermindert auf jeden Fall die Anzahl an Grafiken, die man für aufwendige Rahmen bräuchte. Ich wünsch euch viel Spaß beim Ausprobieren.

IE9 Preview

Das ist sie also, die erste offizielle Vorschau auf den IE9. Microsoft hat gestern oder so das Programm zum Download freigegeben und erhofft sich damit viel Feedback, um das Produkt weiter zu verbessern – man hat also dazugelernt.

Mit dem neuen Internet Explorer hat Microsoft etliches vor, endlich will man zu den anderen Browsern aufschließen, sie sogar teilweise überholen. Warum auch nicht, bis der IE9 erscheint, werden sich auch die anderen Browser verbessert haben. Um erste Erfolge vorzuweisen, hat man gleich ein paar Statistiken und Demos auf die Startseite gepackt. Diese sind natürlich mit Vorsicht zu genießen aber im Großen und Ganzen kann man davon ausgehen, dass der Internet Explorer um einiges schneller geworden ist – besonders beim Verarbeiten von JavaScript und im Grafik-Rendering.

Gute Neuigkeiten

Nennen wir doch mal ein paar Fakten:

1. besteht Acid2
2. 55 Punkte in Acid3
3. alle CSS3 Selectoren werden unterstützt
4. Boder-Radius und RGBa wird unterstützt
5. Hardwarebeschleunigung für 2D Animationen
6. schnelles Javascript
7. ein bisschen HTML5 Support
8. Unterstützung für SVG

Das klingt zugegeben alles sehr verlockend und ich freue mich über die CSS3 Unterstützung, je mehr davon im endgültigen Code enthalten ist, desto besser. Hoffen wir, dass die Auflistung nicht die endgültige Feature-List bleiben wird und noch einige Dinge wie z.B. Box-Shadow, Text-Shadow und video-Support in der fertigen Version vorfinden werden.

Qualität der Preview Version

Die (nicht vorhandene) GUI des IE9.

Ich weiß, man sollte an eine frühe Alpha keine hohen Erwartungen stellen aber etwas mehr Mühe hätten sich die Typen aus Redmond schon geben können.. keine Adressleiste, keine Tabs.. Hallo?! Naja vielleicht bin ich auch nur von den Firefox Alphas verwöhnt aber so kann man den IE sicherlich nicht auf seine Alltagstauglichkeit hin testen.

Besonders nervig ist der Wegfall der Adresszeile, will man die Seite wechseln muss man über Page->Open ein Fenster öffnen, in dem man die URL eintragen kann – überflüssig zu sagen, dass das widerlichst und umständlich ist.

Adresszeile mal anders..

Außer dem Aussehen ist mir das Textrendering negativ aufgefallen. Es erinnert mich stark an das von Safari 3: Die Schrift sieht etwas matschig und unleserlich aus. Ich habe keine Ahnung, ob das so gewollt ist oder ob es nur ein böser Nebeneffekt der Hardwareunterstützung ist. Mal sehen, wie sich das weiterentwickelt.

Fazit

Alles ganz lustig und prima aber es bedarf doch noch etwas mehr als das, um bei den großen Jungs mitspielen zu können. Microsoft scheint mir aber auf dem richtigen Weg zu sein. Moderne Standards werden eingebaut und die Schnelligkeit wurde stark verbessert. Das ist aber nicht alles, Sicherheit, Privatsphäre und gute Bedienbarkeit sind mindestens genauso wichtig. Mal sehen, welche Antwort der IE9 zum Thema Erweiterungen parat haben wird.

Auf jeden Fall ist es ein Schritt in die richtige Richtung. Ich denke auch, dass Mircosoft noch viel Zeit in seinen neuen Browser investieren wird und er dadurch ein würdiger Nachfolger zum bereits recht guten IE8 darstellen kann. Wir werden sehen, was die Zeit bringt. Bis dahin viel Spaß mit der Vorabversion.

Strata 3.7 Nightly

Mit der gestern veröffentlichten zweiten Alpha von Firefox 3.7 bringt Mozilla einige Neuerungen ins Programm, dazu zählen unter anderem das placeholder-Attribut (auf das ich später noch genauer eingehen werde), Performance- und Security-Verbesserungen, CSS-Support für -moz-image-rect() sowie Änderungen am User Interface (UI). Letzteres äußert sich im Wegfall eines Navigationsbuttons. Stopp und Neuladen wurden zu einem Button verschmolzen. Browser wie Opera, Safari oder Chrome fahren schon lange auf dieser Schiene, nun zieht Firefox nach.

Neuer Look in Nightly Builds

Wer die täglich aktualisierten Nightly Builds benutzt, kann live miterleben, wie sich das Aussehen des Browsers nach und nach verändert. Das vor langer Zeit angekündigte Re-Design für Version 3.7/4.0 wird derzeit umgesetzt, befindet sich aber noch in einer recht frühen Phase. Im Moment sind die neuen Buttons schon integriert, Adress- und Suchleiste wurden ebenfalls verändert. Hier mal ein Bild zum Vergleich:

Oben: altes Design (3.0 - 3.6), Unten: neues Design (3.7a3pre vom 04.03.2010)

Ich bin gespannt wie es mit deutlich mehr Aero Glass aussehen wird. Wann es soweit sein wird, kann derzeit niemand genau sagen aber die Fortschritte sehen aus meiner Sicht schon ziemlich gut aus.

HTML5: Placeholder Attribut

Vielleicht könnt ihr euch noch an den Artikel jQuery One-Liners erinnern, speziell an den Teil mit dem Suchfeld. Der vorbelegte Inhalt verschwindet sobald man mit der Maus in das Feld klickt, bleibt es leer und man verlässt es wieder, wird das Feld erneut befüllt.

Genau dieses Verhalten wird durch das placeholder-Attribut nachgestellt. Allerdings braucht es dafür kein Javascript mehr, der Browser erledigt es ganz von allein. Hier ein Beispiel (Achtung: funktioniert nur mit Safari, Chrome und Firefox 3.7a2):

Eine ganz nette Sache, die auf meiner Seite zwar invalide ist (habe noch nicht auf HTML5 umgestellt), für die Zukunft aber ein nützliches Attribut darstellt.

Entschuldigt die enorme Verzögerung aber ich hatte bisschen Prüfungsstress und viel Arbeit, sodass mir dann die Motivation gefehlt hat noch diese Artikel zu schreiben. Sei’s drum, heute gehts um eine nützliche Technik, mit der man runde Ecken erstellen kann. Früher musste man immer mindestens zwei Grafiken erstellen, um einer Box runde Ecken zu verpassen – das wird sich jetzt ändern. Border-Radius wird euch gefallen, es erspart einem sehr viel Arbeit und wird von den meisten Browsern schon ganz gut unterstützt.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Einsatzgebiete

Sogenannte “runde Ecken” spielen in heutiger Zeit eine immer größere Rolle, alle modernen UIs benutzen sie an nahezu allen Elementen. Manchmal recht großzügig, dann wieder nur mit der Lupe zu erkennen, ein gutes Beispiel sind aktuelle Windows Versionen (Vista oder 7), die extrem viel Aufwand in diese Richtung betreiben. Folgender Screen soll das einmal illustrieren..

Ein Fenster in Windows 7 hat viele runde Ecken: der Fensterrahmen, die Buttons oben rechts, der Rahmen um die markierte Festplatte, etc.

Warum? Weil runde Ecken angenehmer anzusehen sind und das ganze Design etwas auflockern. Fenster mit richtigen Ecken, wie bei Windows 2000 und davor, wirken heutzutage altbacken und hässlich.

Syntax

Border-Radius wird von den Browsern durch unterschiedliche Präfixe unterstützt.

1
2
3
4
5

div.rounded {
-moz-border-radius:10px; /* Firefox - alte Syntax */
-webkit-border-radius:10px; /* Safari, Chrome - alte Syntax */
border-radius:10px; /* alle neuen Browser, W3C Standard */
}

Diese Anweisungen bewirken, dass die Ecken eines divs mit der Klasse rounded abgerundet werden. Folgendes Beispiel, hat zur Verdeutlichung der Rundungen zusätzlich eine Schwarze Border bekommen.

border-radius kann aber nicht nur mit einem Wert gesteuert werden. Maximal sind 4 Werte möglich, wobei jeder davon ein Ecke kontrolliert, im Uhrzeigersinn beginnend mit der links oben. Folgender Code bewirkt z.B., dass nur die beiden Ecken oben abgerundet werden, die unten bleiben eckig.

1
2
3
4
5

div.rounded_up {
-moz-border-radius:10px 10px 0 0; /* Firefox - alte Syntax */
-webkit-border-radius:10px 10px 0 0; /* Safari, Chrome - alte Syntax */
border-radius:10px 10px 0 0; /* alle neuen Browser, W3C Standard */
}

Natürlich kann man auch “unterschiedlich runde Ecken” machen, indem man einfach verschiedene Werte benutzt, hier gilt: Probieren geht über Studieren.

Safari spackt hier noch etwas rum. Es kommt mit 4 Werten nicht klar und ignoriert deswegen den Befehl. Da es aber die selbe Engine wie Chrome nutzt, wird sich hier demnächst bestimmt eine Besserung einstellen. Bis es soweit ist, kann man sich diesen Artikel auf CSS3.info mal durchlesen.

Update: Mit Safari 5 sollte alles funktionieren.

Fazit

Ein wahnsinnig mächtiger Befehl, Border-Radius lässt uns schnell und komfortabel Rundungen an allen Elementen erstellen. Das lästige Zuschneiden von Grafiken und der damit verbundene Aufwand über CSS-Formatierungen (Stichwort: Sliding Doors) entfällt vollständig. Das spart mal wieder jede Menge Traffic und Zeit beim Aufbau einer Seite. Viel Spaß damit!

Dieses mal erwarten euch lineare und radiale Farbverläufe (engl. gradients) in CSS, mit deren Hilfe wir einige ganz hübsche Effekte erzielen können. Benutzt werden sie überall dort, wo wir eine url() angeben können. In den folgenden Beispielen werden wir sie aber im Zusammenhang mit background verwenden, indem wir statt einem Hintergrundbild den gewünschten Verlauf angeben.

Achtung, ich verwende im Artikel noch die alte Syntax. Sobald ich Zeit habe, werde ich den Text updaten. Bis dahin lest bitte folgende Dokumentation zu Farbverläufen (MDN).

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Prinzipiell muss man zwischen zwei Arten von Farbverläufen unterscheiden:

1. Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
2. Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4
5
6
7

div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

Anmerkung: Das Firefox Logo im Vordergrund wird als zusätzlicher Background eingebunden, siehe Teil 2.

Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder radial, welche angeben um welchen Typ von Verlauf es sich handelt. Firefox bietet 2 separate Funktionen dafür an, Safari/Chrome nutzen eine Funktion für beide Typen. Es folgen dann der Start- bzw. Endpunkt und somit die Richtung des Verlaufs. Zu guter Letzt werden noch die Farbcodes für Start- und Endfarbe benötigt.

Bei den Webkit-Browsern erscheint mir dir Syntax insgesamt etwas komplizierter. Also es kann sein, dass es auch kürzer geht aber ich bin ehrlich gesagt froh, dass ich überhaupt einen funktionierenden Verlauf mit Safari hinbekommen habe.

Update 1: Mittlerweile hat Webkit die Syntax an die von Gecko angepasst, auch Opera unterstützt ab Version 11.10 lineare Verläufe mit einem eigenen Prefix.

Update 2: Die heute herausgegebene Platform Preview des Internet Explorer 10 unterstützt beide Arten von Verläufen.

Update 3: Opera 12 11.6 unterstützt radiale Verläufe per Prefix.

Radialer Verlauf

1
2
3
4
5
6
7

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-radial-gradient(center, #fff, #adf); /* Safari, Chrome */
background:-o-radial-gradient(center, #fff, #adf); /* Opera */
background:-ms-radial-gradient(center, #fff, #adf); /* IE */
background:radial-gradient(center, #fff, #adf); /* W3C Standard */
}

Um einen radialen Verlauf zu bekommen, gehen wir genauso vor wie oben. Im Firefox ist es ganz einfach: Startpunkt, Startfarbe, Endfarbe. Webkit bereitet mir etwas Kopfzerbrechen.. soweit ich das verstanden habe, muss man hier zwei Kreise angeben mit jeweils einem Startpunkt und den Radius des Kreises, sowie Start- und Endfarbe.

Ich will das jetzt mal nicht weiter vertiefen und euch verwirren. Am besten ihr lest euch mal die Spezifikationen durch. Zwei Artikel im MDN erklären sowohl linear-gradient als auch radial-gradient (beides auf Englisch).

Fazit

Background Gradients könnten in Zukunft recht interessant werden. Lineare Verläufe werden heutzutage bereits auf fast allen Webseiten eingesetzt (Hintergründe, Buttons). Radiale Verläufe machen sich sicherlich gut, um bestimmte Sachen zu highlighten. Der größte Vorteil ist, dass somit keine Grafiken mehr gebraucht werden, die sinnlos Zeit und Bandbreite vergeuden. Die Syntax ist zwar nicht die einfachste aber mit etwas Geduld und Übung lernt man sie schon kennen. Ich hoffe, dass Webkit hier trotzdem nochmal nachbessert und die Funktion irgendwie vereinfacht. Mit Firefox hingegen kommt man recht schnell ans Ziel.

Lange Rede, kurzer Sinn: Probiert euch am besten selbst mal an den Verläufen, kombiniert eventuell das Ganze dann noch mit mehreren Backgrounds und/oder Background-Size und ihr werdet auf einige lustige Ergebnisse stoßen. Viel Spaß.

Firefox 3.7a1

Dieser Artikel wurde mit der neuen Version verfasst.

Mozilla Developer Preview 3.7 Alpha 1 ist die offizielle Bezeichnung des Programms, das sich ganz ohne Probleme parallel zum “normalen” Firefox installieren und testen lässt. Derzeit ist alles noch auf Englisch und die meisten Add-ons sind wie immer nicht kombatibel. Abhilfe schafft nur der Add-on Compatibility Reporter, der zwar momentan selbst noch nicht kompatibel ist, aber funktioniert, wenn man ihn in Version 3.6 installiert.

Die erste Seite nach dem Start gratuliert uns zu unserer Entscheidung und erklärt kurz, was sich in der Alpha alles geändert hat. Demnach arbeiten die Entwickler an neuen CSS-Features (transition, image-rect) und Techniken wie SVG(-Animations) und WebGL, das es ermöglichen soll 3D-Szenen direkt im Browser rendern zu lassen. Diese Sachen befinden sich aber alle noch in einer frühen Phase und haben noch einen mehr oder weniger langen Weg bis zur vollständigen Implementierung vor sich. Trotz allem steigt die Punktzahl im Acid3-Test um zwei Punkte auf 96 Zähler.

Der Windows 7 – Support ist zurückgekehrt. Sowohl Tabvorschau als auch Jumplists (mit häufig besuchten Internetseiten) funktionieren meistens problemlos.

Über Firefox 3.7a1

Vom neuen Design für alle Betriebssysteme ist bislang noch recht wenig zu sehen, einzige Neuerung: Stop- und Reload-Button sind verschmolzen. Aber das ist nicht weiter verwunderlich, wurden doch erst vor kurzem die dazu nötigen Bugs gefiled. Möglich wäre auch, dass Mozilla bis zur Version 4.0 Anfang-Mitte nächsten Jahres damit wartet.

Im dritten Teil werden wir eine weitere Möglichkeit unter die Lupe nehmen, die es uns erlaubt background noch weiter zu manipulieren. Dabei soll es uns um das Ändern der Größe des Hintergrundes gehen. Kurz gesagt, wir reden über background-size.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Syntax

Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

1
2
3
4
5

div.bg_size {
	-moz-background-size:50% 25%; /* Firefox */
	-webkit-background-size:50% 25%; /* Safari, Chrome */
	background-size:50% 25%; /* Opera, IE, W3C Standard */
}

Die beiden Werte sind entweder Prozentangaben (prozentuale Breite und Höhe des Elements mit dem Hintergrund) oder Längenangaben in px, em oder sonstwas, dann gibt man direkt die Breite und Höhe des Hintergrundbildes an.

background-size:50% 25%

background-size:100px 10em

Neben diesen Möglichkeiten können wir aber auch noch zwischen den Schlüsselwerten contain und cover wählen. Contain skaliert das Bild so groß wie möglich aber noch so klein, dass es vollständig in das Element passt. Cover hingegen skaliert das Bild so klein es geht aber füllt das Element vollständig aus.

Die nachfolgenden Anweisungen funktionieren nicht in Safari. Dieser nutzt noch eine alte Implementierung, die kein cover oder contain beinhaltet.

Update: Seit Version 5 (08.06.2010) besteht das Problem in Safari nicht mehr.

background-size:contain

background-size:cover

Fazit

An sich ist das eine schöne Sache aber die Implementierung ist noch nicht in allen modernen Browsern gleich.. von daher seh ich noch keinen wahnsinnig großen Vorteil. Es macht sicherlich Sinn, wenn man Vektorgrafiken als Hintergrundbilder benutzt, dann kann man diese wunderbar verlustlos skalieren. Für cover oder contain gibt es sicherlich mehr Anwendungsfälle, z.B. gibt es Seiten, die derzeit recht aufwändig versuchen ihr Hintergrundbild immer auf 100% Fensterbreite zu ziehen. Mit background-size:cover ist das jetzt kein Problem mehr.

Einmal müssen wir noch über Backgrounds reden, das nächste Mal geht’s nämlich um Background-Gradients, danach geht es dann mit Bordern weiter.

Diesmal geht es um die Möglichkeit einem Element mehrere Hintergrundbilder zu vergeben. Bisher war es nur möglich 1 Bild pro Element als Hintergrund zu definieren. Wollte man mehr, mussten sogenannte Wrapper um das Element gesetzt werden. Das verursacht unnötiges Mark-up, was vielen schon lange ein Dorn im Auge war. Das zusätzliche Mark-up war sicherlich auch einer der Hauptgründe für die Einführung von Multiple Backgrounds.

Browserunterstützung

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

Syntax

Damit man die neue Technik nutzen kann, muss man lediglich mehrer URLs, das Attachment und die Position des Bildes in die background-Anweisung schreiben.

1
2
3
4
5

div.multiple_bgs {
	background:url(example_1.jpg) no-repeat left top,
	url(example_2.jpg) no-repeat right bottom,
	url(example_3.jpg) no-repeat center center #adf;
}

Anwendungen

Ein gutes Beispiel ist mein Blog. Für die Darstellung des Contents benötige ich 3 Grafiken: den oberen Bereich, den Mittelteil und den unteren Bereich. Natürlich musste ich dafür 2 Wrapper um den eigentlich Content legen. Diese könnten entfallen, wenn ich Multiple Backgrounds nutzen würde.

Update: Mittlerweile mach ich das auch.

Vor- und Nachteile

Durch den Wegfall des zusätzlichen Mark-ups wird der Code etwas schlanker und semantisch korrekter.

Für den IE und Opera gibt es derzeit noch keine Lösungen oder Alternativen, von daher ist die Technik noch relativ unpraktikabel.

Fazit

Multiple Backgrounds lohnt sich nur an Stellen, die nicht so wichtig sind oder wenn man seine Leserschaft genau kennt und weiß, dass davon die meisten mit Firefox/Safari/Chrome unterwegs sind.

Viel Spaß beim Basteln! Wir sehen uns beim nächsten Mal.

Während dieser Reihe möchte ich euch gern die wichtigsten Neuerungen, die CSS3 mit sich bringt, vorstellen und einzeln näher betrachten. Weiterhin wird die Unterstützung in der derzeitigen Browserlandschaft aufgezeigt und welche Vor- und eventuell auch Nachteile die Techniken haben.

Im ersten Teil von CSS3 im Detail dreht sich alles um den neuen Farbraum RGBa.

Eins vorweg: Der Internet Explorer in Version 6, 7 und 8 unterstützt noch keines der Features. IE9 hingegen beherrscht erste CSS3 Spezifikationen. Mehr Infos gibts auf meiner Browser Support Checklist CSS3.

Neuer Farbraum – RGBa

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal). Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

Browserunterstützung

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

Syntax

RGBa ist ganz einfach:

1
2
3

p.rgba {
	color:rgba(255, 255, 255, 0.75);
}

75% Weißer Text

RGBa erlaubt es uns mit Hilfe des vierten Wertes eine Transparenz anzugeben. Ich habe hier 0.75 gewählt, d.h. der Text ist genau zu 75% sichtbar und zu 25% transparent. Es dürfen nur Werte zwischen 0 und 1 angegeben werden, wobei 0 für vollständig transparent (unsichtbar) und 1 für vollständig sichtbar steht.

Zum Vergleich das bekannte RGB:

1
2
3

p.rgb {
	color:rgb(255, 255, 255);
}

100% Weißer Text

Die alte Angabe von Farben in RGB bietet uns diese Möglichkeit nicht.

Anwendungen

Kleine Ursache, große Wirkung..

Da RGBa kann überall dort verwendet werden, wo color zum Einsatz kommt. Als Schriftfarbe habt ihr es eben gesehen, es bieten sich uns aber noch andere Anwendungsmöglichkeiten an:

RGBa als Hintergrundfarbe

1
2
3

p.trans {
	background-color:rgba(200, 0, 255, 0.5);
}

RGBa als Rahmenfarbe

1
2
3

p.trans {
	border:8px solid rgba(0, 180, 0, 0.25);
}

Vor- und Nachteile

Häh, das kann ich doch auch mit PNGs und Opacity machen, wozu brauch man das?

Das stimmt wohl. Der entscheidende Vorteil von RGBa ist jedoch, dass ich mir die PNG Datei und den dazugehörigen HTTP-Request sparen kann. Opacity (was es übrigens offiziell auch erst mit CSS3 gibt) hingegen macht leider nicht nur den Hintergrund, sondern auch den Inhalt des Elements transparent.

Der Nachteil von RGBa ist noch ganz klar die fehlende Unterstützung des IEs. Wenn man es sich erlauben kann, sollte man daher einfach eine Fallbacklösung in Betracht ziehen. D.h. dass man dem IE anstatt der RGBa Werte einfach nur die äquivalenten RGB Werte übergibt:

Lösung für den IE

1
2
3
4

p.trans {
	color:rgba(0, 180, 0, 0.25); /* der IE ignoriert diese Zeile */
	color:rgb(190, 230, 190); /* entspricht in etwa der selben Farbe */
}

Fazit

RGBa wird sich, wenn es das nicht schon bei vielen getan hat, durchsetzen. Es ist sehr flexibel und hat im Grunde keine Nachteile. Durch den Wegfall von unnötigen halbtransparenten PNG Dateien spart man außerdem Traffic und die Seite kann schneller geladen werden.

Ich hoffe die Beispiele waren hilfreich und wünsche euch viel Spaß beim experimentieren! Bis zum nächsten Mal.

Endlich ist es soweit, Mozilla gibt den Firefox 3.6 für alle frei.

Firefox 3.6, Codename Namoroka, bringt viele Neuerungen, die uns dabei helfen schneller, sicherer und schöner durchs Web zu surfen. Mozilla gibt an, dass 3.6 im Bereich der Javascript-Verarbeitung noch einmal ca. 20% schneller als die Vorgängerversion 3.5 geworden ist. Außerdem wurden Lade- und Reaktionszeiten verkürzt, die sich im direkten Vergleich zu 3.5 deutlich bemerkbar machen (hab hier nen Dualcore mit Win7 und ich merk den Unterschied).

Zum Thema Sicherheit gibts neben den üblichen Bugfixes einen Sicherheitscheck für Plugins. Auf der Plugin Check – Seite von Mozilla werden die installierten Plugins durchleuchtet und auf Updates geprüft. Steht ein solches zur Verfügung, wird einem direkt ein Downloadlink angeboten. Weiterhin schreibt es Firefox Drittanwendern nun vor, wohin Plugins zu installieren sind. Frühere Probleme mit Microsoft-Plugins, die sich nicht deinstallieren ließen, führten zu diesem Schritt.

Firefox 3.6 mit ausgeblendeter Menüleiste und Bienchen-Personas

Durch Personas, ehemals ein Plugin von Mozilla Labs, kommt ein Hauch von Individualismus auf jeden Rechner. Personas erlaubt es, mit nur einem einzigen Klick, kleine Themes zu installieren. Mittlerweile gibt es schon über 30.000 Personas zu allen möglichen Themengebieten, da ist sicher für jeden etwas dabei.

Auch an die Webentwickler hat man gedacht. Neben den eher unbedeutenden Webfont-Format WOFF, unterstützt Firefox 3.6 jetzt noch mehr neue CSS3-Anweisungen. Allen voran background-size, background-gradient und multiple backgrounds, die ich demnächst mal testen werde. Das mit HTML5 kommende video-Tag wurde erweitert und erlaubt nun die Wiedergabe in Vollbild und das Einbinden eines Vorschaubildes.

Man kann viel über das aktuelle Release sagen, aber bestimmt nicht, dass es schlecht ist. Über die Personas-Funktion kann man sich zwar streiten aber ich glaube der Code dafür war minimal und fällt nicht ins Gewicht. Außerdem soll mit Version 3.7 ein weiteres Mozilla Labs Projekt den Weg in den Core finden, die Rede ist natürlich von Weave (ich benutzte es jetzt schon und muss sagen, es läuft ganz gut). Mozilla hat auf jeden Fall ein sehr solides und schnelles Tool zum Arbeiten und Spaß haben herausgebracht und ich glaube das allein, verdient Anerkennung (besonders, da der Browser auch noch kostenlos ist).

Aber genug geredet, downloadet, testet und beurteilt selbst!

PS: Ach ja, man kann jetzt die Menüleiste ausblenden und neue Tabs öffnen sich neben dem Ursprungs-Tab.

Die gestern veröffentlichte dritte Beta des noch vor Ende des Jahres kommenden Firefox 3.6 ändert nochmal einiges. Standardmäßig ist der aus der ersten und zweiten Beta bekannte Windows 7 Support (Vorschau der geöffneten Tabs) nun deaktiviert. Anscheinend war es nicht möglich in der kurzen Zeit eine bugfreie Implementierung aller Features zu gewährleisten.

Allerdings lässt sich über eine kleine Einstellung in der about:config das Feature wieder anschalten:

about:config

Wann und in welchem Ausmaß die Win7-Unterstützung wieder aktiviert wird, ist derzeit unklar. Sicher ist nur, dass sie kommt.

Eine weitere Neuerungen der Version 3.6 ist die standardmäßige Unterstützung von Personas, die eine Installation des Plugins überflüssig macht.

Es ist jetzt auch möglich seine installierten Plugins auf Updates überprüfen zu lassen, das funktionierte bisher nur für Add-ons.

Plugins updaten

alles auf dem neuesten Stand

In der ersten Beta ist der Eintrag “Eigenschaften” aus dem Kontext-Menü entfernt worden. Seit Beta 2 gibt es dafür nun den “Grafik-Info anzeigen“-Eintrag, der einem sehr genaue Informationen zum gewählten Bild liefert. Außerdem neu im Kontext-Menü sind folgende Punkte:

1. ***-Suche nach "markierter Text", wobei *** für die Suchmaschine steht, die gerade oben rechts in der Suchleiste ausgewählt ist und markierter Text den mit der Maus markierten Text darstellt (wer hätt’s gedacht)
2. Auswahl-Quelltext anzeigen, der eine Quelltextansicht des markierten Bereichs in einem neuen Fenster anzeigt

Auswählen und Suchen - schnell und einfach

Wer sich selbst ein Bild von der Beta machen will, kann sie sich von der Mozilla-Seite herunterladen.

Wer nicht wissen will, was ihn in Firefox 3.6 bevorsteht, sollte vielleicht nicht weiter lesen.

Firefox 3.6 Beta 1

Ich teste jetzt schon etwas länger den 3.6er Trunk und nachdem Firefox 3.6b1 (Beta 1) nun offiziell veröffentlicht wurde, ist es denke ich an der Zeit mal etwas genauer hin zuschauen. Welche Veränderungen wird Firefox bis zum Release (wahrscheinlich noch dieses Jahr) durchmachen und welche Auswirkungen hat das auf uns Benutzer und Entwickler?

Neue Features

Als erstes sollten wir vielleicht die neue Version downloaden, man beachte, dass bereits eine vollständig lokalisierte Version für jede gängige Plattform bereit steht. 3.6 installiert sich in einen eigenen Ordner, benutzt aber eurer Profil der 3.5 samt allen Einstellungen, Bookmarks, Formulareinträgen, sowie Chronik und Passwörter.

Nach Installation und Start des Programms werden wir enttäuscht feststellen müssen, das die meisten unserer Add-ons auf Grund von Kompatibilitätsgründen deaktiviert wurden, doch dazu später mehr. Außerdem werden wir auf eine Seite geleitet, die uns (hier leider nur auf Englisch) kurz und knapp sagt, was in Firefox 3.6 so alles neu ist. (Wer wissen will, was es mit dem Roboter auf sich hat, möge einfach mal about:robots in seine Adresszeile eingeben )

Zeit zum Browsen! Wie ihr sicher nach 2-3 Minuten merken werdet, werden neue Tabs nicht mehr am rechten Ende eurer Tab-Bar geöffnet, sondern direkt neben dem “Eltern-Tab”, in denen der Link angeklickt wurde (gänzlich neue Tabs [Strg+T] werden trotzdem noch am Ende geöffnet). Das brauch zwar etwas Eingewöhnungszeit, macht aber Sinn: Erstens muss man nicht soweit scrollen, wenn man einen neuen Tab aufmacht und bereits viele offen hat und zweitens, bleiben die Tabs mehr oder weniger nach Themen bzw. ihren Zusammenhang nach sortiert.

Windows 7 Nutzer werden sich über den neuen Support für die Taskleiste freuen. Alle Tabs werden als Instanz des Programms wahrgenommen und erscheinen nun in der Vorschau.

Tabvorschau unter Windows 7

Weiterhin erlaubt es uns Firefox die Menüleiste auszublenden. Das ist natürlich Geschmackssache. Wer gern mehr von dem Webinhalt sehen möchte, blendet sie einfach aus, wer allerdings oft in das Menü muss (ob nun gewollt oder ungewollt), lässt sie eben eingeblendet. Brauch man das Menü doch mal, so reicht ein Tastendruck auf [Alt] (ist bei Windows Vista und 7 standardmäßig auch so).

Menüleiste verstecken oder nicht?

Die Technik

Firefox 3.6 läuft auf der Rendering Engine Gecko 1.9.2 und TraceMonkey, beide versprechen schneller als ihre Vorgängerversionen zu sein, davon bekommt man als 08/15-Internet-Addict aber nicht viel mit. Das mit der Version 3.5 eingeführte video-Tag bekommt die Funktion eines Vorschau-Screens spendiert, außerdem erlaubt es nun den Fullscreen-Modus (Rechtsklick->Vollbild, Esc zum Abbrechen), der bisher schmerzlich vermisst wurde.

Für CSS-Gurus dürfte folgendes recht interessant sein:

1. @font-face unterstützt nun auch das WOFF-Format
2. rem als neue Längeneinheit
3. Background: Größe über -moz-background-size bestimmen
4. Background: Farbverläufe über -moz-linear-gradient
   und -moz-radial-gradient
5. text-align:end wird unterstützt
6. neue Pseudoklasse :indeterminate

Es macht sich gut zumindest zu wissen, was es damit auf sich hat. Das ganze Zeug sind alles Firefox-Implementierungen des neuen CSS3-Standards.

Add-ons

Wie eingangs erwähnt, werden viele, wenn nicht die meisten, eurer Add-ons nicht funktionieren. Jedoch hat Mozilla selbst ein Extra-Add-on entwickelt, dass zum einen das Kompatibilitätsproblem während der Betaphase behebt und zum anderen euch die Möglichkeit gibt aktiv zu werden.

Grün: OK - Rot: Nicht OK

Die Erweiterung nennt sich Add-on Compatibility Reporter, er aktiviert erstmal grundsätzlich alle Add-ons und lässt sie euch ausprobieren. Sollte es dann doch zu Problemen kommen, könnt ihr mit einem Klick einen vorzugsweise auf englisch verfassten Report abgeben. Wenn die Add-ons funktionieren, gebt bitte auch eine Rückmeldung, in dem Fall natürlich ohne Problembeschreibung. Bemerkung: Das Prozedere funktioniert genauso auch mit der Alphaversion der 3.7.

So und nun wünsche ich euch fröhliches Browsen mit dem 3.6_beta!

Go to hell!

Warum fragt ihr? Ganz einfach. Da heut sonst nichts weiter passiert ist, hab ich allen Mut zusammengenommen und beschlossen, dass ich ab sofort den IE6 nicht mehr unterstützten werde. Für meinen Blog heißt das also: keine Anpassungen, keine Tests, keine dummen Hacks.

Ich hab’s einfach satt!

Der IE6 landet in der Tonne. Alle, die das Drecksding von 2001 noch benutzen, sind selber schuld und bekommen jetzt eine Seite mit leicht zerschossenem Layout zu Gesicht. Die Meldung, doch bitte einen anderen Browser zu benutzen, bleibt bestehen und sollte von allen IE6 Nutzern ernst genommen werden.

Viel zulange haben wir Entwickler dafür gesorgt, dass unsere Seiten auch im IE6 gut dargestellt werden. Jetzt ist Schluss damit! “Adopt or die” heißt die Devise also spart euch Rumgeheule in den Kommentaren.

Nochmal zu den Alternativen, die alle schneller, sicherer und generell besser sind als der IE6!

1. Firefox
2. Opera
3. Safari
4. Internet Explorer 8
5. Chrome

Schöne Woche noch

IE8 goes gold!

Microsoft hat gestern den Internet Explorer 8 (kurz: IE8) offiziell zum Download freigegeben. Im Vergleich zu den Release Candidates hat sich nichts weiter geändert, eine volle Liste mit Features findet ihr ebenfalls auf der Downloadseite.

Wie schon gesagt, macht der IE8 vieles richtig und ich hoffe inständig, dass möglichst viele IE-Nutzer auf die neue Version umsteigen. Weitersagen oder den Leuten am besten gleich Firefox aufschwatzen

F*** YOU!

was zum geier hat sich microsoft bitte dabei gedacht, als sie der neuen version von outlook (2007) den IE als rendering-engine weggenommen und durch die von word (!) ersetzt haben?!

“und?” werden jetzt vllt einige denken.. ich kann euch sagen, was das zu bedeuten hat. die html/css rendering-engine von word kann NICHTS! ein beispiel: wir wollen einen html-newsletter verschicken und positionieren ein paar divs hier und da und geben denen ein hintergrundbild und vllt auch ne feste höhe und breite.. klingt nicht sehr aufregend aber nichts davon kann das NEUE outlook.

im ernst.. das ist ein alptraum. ab jetzt müssen designer wieder zum alten table-layout greifen und hoffen, dass man mit altertümlichen html-tags zumindest annähernd ähnliche resultate hervorbringen kann. das wirft uns geschätzte 5 jahre zurück..

hier mal eine übersicht, was welcher email-dienst unterstützt.

..ich kanns immer noch nich fassen.. warum macht microsoft sowas? erst IE6 und jetzt das, als ob sie daraus nichts gerlernt hätten.

ich kann nur hoffen, dass die meisten noch das alte outlook 2003 benutzen und nicht umgestiegen sind oder aber gleich zu thunderbird greifen, was als einziges ALLES unterstützt und die beste performance abliefert. trotzdem, das problem für designer bleibt.. und wieder müssen sich alle nach dem monopolisten richten..

bis die tage

PS: als grund nannte MS wohl, dass somit dem benutzer der umstieg von word zu outlook einfacher gemacht wird.. blödsinn.. niemand erstellt html emails in word und wenn doch kommt der/die sowieso in die hölle!

heute kam die neue version des internet explorers per vista update zu mir

“Internet Explorer 8 Release Candidate 1″, so lautet der ausführliche name des programms, das zeigt, dass microsoft endlich die zeichen der zeit erkannt hat und dem benutzer zum ersten mal einen anständigen browser zur hand gibt. der ie8 sieht auf den ersten blick nich viel anders aus als sein vorgänger ie7. allerdings hat sich unter der haube einiges getan: hat der ie7 noch massiv probleme mit CSS rendering gehabt, so besteht die neue version den acid2 test ohne mit der wimper zu zucken und beweist damit, auch wenn acid2 nicht das maß aller dinge ist, dass in zukunft “ie optimierung” endgültig der vergangenheit angehören könnte.

abzuwarten bleibt, wie schnell sich die neue version durchsetzen und ie7 und den allseitsgehassten ie6 verdrängen wird. wir hoffen natürlich alle, dass mit der verbreitung über das updatesystem der prozentuale teil der beiden alten versionen unter die 10% grenze rutscht.. aber das werden wir sehen, wenn es soweit ist.

für alle, die schon mal einen blick auf den neuen ie erhaschen wollen, sollten auf die offizielle ie-seite bei microsoft schauen.

für firefox-benutzer aber noch lange kein grund umzusteigen