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:

Opera erst ab Version 10.50, die sich gerade in der zweiten Betaphase befindet.

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 */
-webkit-border-radius:10px; /* Safari, Chrome */
border-radius:10px; /* Opera (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 */
-webkit-border-radius:10px 10px 0 0; /* Chrome */
border-radius:10px 10px 0 0; /* Opera (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.

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 (Stickwort: 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.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

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 zwischen zwei Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4

div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#adf)); /* Safari, Chrome */
}

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 gradient, 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.

Radialer Verlauf

1
2
3
4

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
}

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

-moz-linear-gradient und -moz-radial-gradient für Firefox und -webkit-gradient für Safari und Chrome (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ß damit.

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.

Social Bookmarks

Da ich kürzlich die Anfrage bekommen habe, wo ich denn meine Social Bookmarks (die kleinen Vierecke unter jedem Artikel) her habe, möchte ich kurz erklären, wie sie entstanden sind. Zuerst habe ich nach Plugins gesucht, die automatisch diese Bookmarks unter die Artikel setzt. Ich war mit keinem so richtig glücklich.. entweder waren die Icons nicht sonderlich hübsch oder der Effekt war nicht der, den ich wollte. Beim Googlen bin ich schließlich auf einen Blog gelandet, auf dem die Links zu bekannten Social Networks in WordPress-Artikel aufgelistet waren.

1
2
3
4
5
6
7
8
9
10
11

<ul id="socialbookmarks">
	<li><a id="delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Delicious</a></li>
	<li><a id="digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg</a></li>
	<li><a id="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Facebook</a></li>
	<li><a id="furl" rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl</a></li>
	<li><a id="studivz" rel="nofollow" href="http://www.studivz.net/Link/ExternLink/Url/?u=<?php the_permalink();?>&amp;desc=<?php echo urlencode(get_the_title($id)); ?>&amp;prov=<?php bloginfo('name'); ?>" title="Share this post on StudiVZ">StudiVZ</a></li>
	<li><a id="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">StumbleUpon</a></li>
	<li><a id="technorati" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Add <?php bloginfo('name'); ?> to your Technorati favorites">Technorati</a></li>
	<li><a id="twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Twitter</a></li>
	<li><a id="reddit" rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Reddit</a></li>
</ul>

Diese hab ich mir dann in die single.php meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf Iconfinder bin ich fündig geworden: Das Aquaticus Set hat alle wichtigen Social Networks, die ich benötigte. Nur ein einziges war nciht dabei: studiVZ, das Bookmark musste ich mir dann noch schnell selber basteln. Als Vorlage hab ich einfach eines der anderen Icons genommen.

Icons des Aquaticus Sets als CSS Sprite

Die Icons sollten auf den Seiten in schwarz-Weiß dargestellt sein und als Effekt wollte ich, dass sie farbig werden, wenn man mit der Maus drüber fährt. Dazu habe ich alle Icons samt Schwarz-Weiß-Version in eine Grafik gepackt und den Rest mit CSS erledigt (Stichwort: CSS Sprites).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#socialbookmarks {
	clear:both;
	height:48px;
	list-style:none;
	margin:20px;
}
#socialbookmarks li {
	float:left;
	margin-left:8px;
}
#socialbookmarks a {
	background-image:url(socialbookmarks.png);
	background-repeat:no-repeat;
	display:block;
	height:0;
	outline:none;
	overflow:hidden;
	padding-top:48px;
	width:48px;
}
#delicious {background-position:0 bottom;}
#digg {background-position:-48px bottom;}
#facebook {background-position:-96px bottom;}
#furl {background-position:-144px bottom;}
#studivz {background-position:-192px bottom;}
#stumbleupon {background-position:-240px bottom;}
#technorati {background-position:-288px bottom;}
#twitter {background-position:-336px bottom;}
#reddit {background-position:-384px bottom;}
#delicious:hover {background-position:0 0;}
#digg:hover {background-position:-48px 0;}
#facebook:hover {background-position:-96px 0;}
#furl:hover {background-position:-144px 0;}
#studivz:hover {background-position:-192px 0;}
#stumbleupon:hover {background-position:-240px 0;}
#technorati:hover {background-position:-288px 0;}
#twitter:hover {background-position:-336px 0;}
#reddit:hover {background-position:-384px 0;}

Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: social_bookmarks.zip

Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten..

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

div.multiple_bgs {
	background-size:50% 25%; /* Standard */
	-moz-background-size:50% 25%; /* Firefox */
	-webkit-background-size:50% 25%; /* Safari, Chrome */
	-o-background-size:50% 25%; /* Opera */
	-khtml-background-size:50% 25%; /* Konqueror */
}

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 nur in Firefox und Chrome. Opera und Safari nutzen noch eine alte Implementierung, die kein cover oder contain beinhaltet.

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 gehts 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.

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 IE8 unterstützt noch keines der Features. Frühestens der IE9 soll laut Microsoft erste CSS3 Spezifikationen beherrschen.

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.

Mitunter kann man sich an einige Ereignisse, die auf einer Seite im Laufe der Zeit passieren, erinnern. Je mehr man schreibt und veröffentlicht, desto wahrscheinlicher ist es allerdings, dass man den Überblick verliert und irgendwann nicht mehr weiß, wann welcher Artikel welchen Ausschlag auf dem Google Analytics Graphen zu verantworten hatte.

Damit dieser Fall nicht mehr eintritt, hat Google nach und nach alle Analytics Accounts mit dem neuen Annotation-Feature ausgestattet. Das erlaubt jedem Nutzer, für jeden Tag auf dem Graphen eine kleine Notiz zu verfassen.

Google Analytics erlaubt nun Anmerkungen zu verfassen

Für viele sicherlich ein nützliches Feature.

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.