C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/defaults.rb:57:in `exist?': "\x81" to UTF-8 in conversion from Windows-1252 to
 UTF-8 (Encoding::UndefinedConversionError)
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/defaults.rb:57:in `default_path'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/path_support.rb:63:in `path='
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/path_support.rb:29:in `initialize'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:392:in `new'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:392:in `paths'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:413:in `path'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/specification.rb:382:in `dirs'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/specification.rb:267:in `_all'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/specification.rb:410:in `each'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:480:in `map'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:480:in `find_files'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems.rb:1085:in `load_plugins'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/gem_runner.rb:86:in `<top (required)>'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
        from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
        from C:/RailsInstaller/Ruby1.9.3/bin/gem:9:in `<main>'

Wenn ihr diesen Fehler seht, nachdem ihr unter Windows Ruby installiert habt und gem benutzen wollt, gibt es Abhilfe: Schuld ist euer Benutzername unter Windows. Womöglich enthält es Umlaute bzw. andere nicht-ASCII-Buchstaben. Die Lösung besteht darin, dass ihr euer Konto umbenennt.

Benutzerkonto in Windows umbenennen

Danach sicherheitshalber auf ein anderes Admin-Konto wechseln, ggf. ein neues Konto anlegen. Ihr öffnet die Registry (Win+R, “regedit” eingeben, Enter) und sucht dort nach dem Teil eures Namens, der die nicht erlaubten Zeichen enthält, und ändert ihn ab. Das kann unter Umständen an einigen Stellen notwendig sein.

Nach einem Neustart sollte Ruby nun funktionieren, viel Erfolg!

Die Linie hinter dem Text in diesem Beispiel ist gemeint.

Das hab ich mich auch schon einige Male gefragt. Und zu meiner Verwunderung gibt es schon viele gute Ansätze zu dem Thema, wie man eine Linie vertikal hinter einem Text zentriert und dabei noch Abstand zum Text halten kann. Nachfolgend will ich euch eine Variante vorstellen, die auch auf kunterbuntem Hintergrund funktioniert.

Wie immer brauchen wir zu Beginn eine HTML-Grundlage, mit der wir arbeiten können. Dazu reicht uns ein Container und eine Überschrift, in diesem Fall soll das mal eine <h3> sein.

HTML

1
2
3

<section>
	<h3>Lorem Ipsum</h3>
</section>

Zuerst bekommen der Container und die H3 selbst einige CSS Anweisungen.

CSS

1
2
3
4
5
6
7
8

section {
	overflow: hidden;
	text-align: center;
}
h3 {
	display: inline-block;
	position: relative;
}

position: relative sorgt dafür, dass wir später die Linien relativ zur Überschrift ausrichten können. Damit die Überschrift mittig dargestellt wird, braucht es die Zentrierung über text-align. Overflow verhindert, dass die Linien über den Container hinaus weitergezeichnet werden.

Der Hintergrund ist nur Beispielhaft.

So weit, so gut! Jetzt geht es darum die Linien zu erstellen. Da wir dafür keine weitere HTML-Tags hinzufügen wollen, nehmen wir die CSS-Pseudo-Elemente ::before und ::after.

CSS

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

h3::before,
h3::after {
	content: "";
	position: absolute;
	border-top: 1px solid #666;
	top: 50%;
	width: 2000px;
}
h3::before {
	margin-right: 15px;
	right: 100%;
}
h3::after {
	margin-left: 15px;
	left: 100%;
}

Mit diesen CSS-Anweisungen werden die Linien auf einen Pixel Dicke und einer sehr großen Länge von 2000 Pixeln festgelegt, um sicher zu gehen, dass sie immer bis ans Ende des Containers reichen. Ihr könnt die Länge aber natürlich auch auf eine andere Breite beschränken. Die 15 Pixel Margin bei beiden Linien stellt den Abstand links und rechts zur Überschrift dar.

Tipp

Wenn du die Linien dicker machen willst, geht das über die border-top-Anweisung. Wenn die Linie dicker wird, wird sie nicht mehr zentriert ausgegeben, das kannst du mit einem negativen margin-top ausgleichen.

Damit wären wir auch schon fertig! Die Vorteile liegen auf der Hand: Wenig HTML, auf jedem Hintergrund anwendbar und funktioniert auf allen Browser ab IE9. Der Nachteil ist, dass wir overflow:hidden benötigen. Sollte das aber kein Problem für euch darstellen, hab ihr hiermit eine gute Möglichkeit gefunden eure Überschriften etwas aufzupeppen.

Ich will für diese Lösung übrigens ganz sicher keine Anerkennung ernten, 1. hat mein Kollege diese Variante verfasst, ich hab sie lediglich leicht verändert und veröffentlicht, und 2. hat diese Variante sicher schon jemand irgendwo in dieser Form bereits gemacht und ich hab es nur übersehen. Solltet ihr übrigens Verbesserungen finden oder eine gänzlich andere Methode bevorzugen, würde ich mich über einen Kommentar sehr freuen.

Neulich bei einem Kundenprojekt habe ich eine kleine Entdeckung gemacht, die ich gern mit euch teilen würde.

Die Situation war folgendermaßen: Die Website hat auf jeder Seite eine “Bühne” (aka Keyvisuals, großer Bilderslider). Dadurch, dass die Seite responsive ist und die Bühne über die gesamte Seite gehen soll, wird das Bild natürlich recht groß gezogen. Besonders ärgerlich ist das auf Widescreen-Monitoren, wo die Bühne den kompletten Monitor bedeckt, der eigentliche Inhalt darunter hat dann keinen Platz und “liegt unter der Falz“.

Daraufhin sollte ich mir Gedanken machen, wie man das beheben könnte. Die naheliegendste Lösung ist es, die Bühne auf solchen Monitoren in der Höhe zu beschränken. Dazu schaute ich mir alle möglichen Media Queries an und landete bei device-aspect-ratio. Damit lässt sich das Seitenverhältnis des Anzeigegeräts abfragen, in diesem Fall also 16:9 und 16:10, die üblichen Widescreen-Maße.

Mit diesem Ansatz konnte ich mein CSS um folgende Media Queries erweitern:

1
2
3
4
5
6
7
8

@media screen and (device-aspect-ratio: 16/9) and (max-height: 900px), 
	screen and (device-aspect-ratio: 16/10) and (max-height: 900px) {
	.buehne { max-height:450px; }
}
@media screen and (device-aspect-ratio: 16/9) and (max-height: 720px), 
	screen and (device-aspect-ratio: 16/10) and (max-height: 720px) {
	.buehne { max-height:360px; }
}

Es wird abgefragt, ob das Anzeigemedium (Monitor) eine Widescreenauflösung benutzt und wie viele Pixel es in der Höhe besitzt. Die Werte sind ungefähr so gewählt, dass die Bühne nicht mehr als 50% des gesamten Display einnimmt.

Ich habe gedacht, damit wäre das Problem gelöst. Tests auf meinem Monitor verliefen alle positiv also eingecheckt und ab dafür. Schade nur, dass der Kunde Laptops im Einsatz hat, die eine Auflösung von 1366×768 Pixeln haben. Auf den ersten Blick kein Problem, denn das fällt ja unter die 16:9 Auflösungen… oder? Ja, zumindest, wenn man nicht genauer hinschaut.

Alle gängigen Bildschirmauflösungen, Quelle: Wikipedia

Gelistet ist 1366×768 als 16:9er Auflösung, in der Realität weicht es aber leicht davon ab. 16:9 ergibt 1,7, allerdings ist 1366:768 gleich 1.77864583. Genau da hat der Browser Probleme mit seiner Abfrage. Sobald auch nur ein Hauch von Abweichung vorhanden ist, greift device-aspect-ratio: 16/9 nicht mehr.

Meinen Code habe ich um die Abfrage dieser speziellen Auflösung erweitern müssen, das ist unschön aber musste sein. Wenn jemand einen besseren Weg kennen sollte, lasst ihn mich bitte wissen!

1
2
3
4
5

@media screen and (device-aspect-ratio: 16/9) and (max-height: 900px), 
	screen and (device-aspect-ratio: 16/10) and (max-height: 900px),
	screen and (device-aspect-ratio: 1366/768) and (max-height: 900px) {
	.buehne { max-height:450px; }
}

Oh, und übrigens: die anderen Auflösungen könnt ihr getrost ignorieren, die sind alles Vielfache von 16:9 bzw. 16:10, da gibt es keine Probleme.

Das alte Logo gibt es zwar noch nicht so lang – seit Version 3.5 um genau zu sein – man entschied sich dennoch für eine Überholung. Vor ziemlich genau 4 Jahren fügte Mozilla damals dem Logo wesentlich mehr Details hinzu (ich berichtete), nun scheint es so, als wolle man den Detailgrad wieder verringern.

Zum einen um eine bessere Kompatibilität mit SVG herzustellen und zum anderen um die Darstellung bei kleiner Auflösung zu verbessern. Zu sehen gibt es das Logo ab Firefox Version 23, die laut Releaseplan am 6. August erscheinen wird. Wer nicht solange warten will oder kann, sollte einen Blick auf die Beta-Version werfen.

Wem die Neuerungen nicht gleich alle auffallen, hat hier nochmal die Gelegenheit zum Vergleich:

Die Entwicklung des Firefox Logos von 2004 bis jetzt

Gefällts euch?

Übrigens ist gestern nach langem Warten endlich mein Plüsch-Dino zu Mozillas 15. Geburtstag eingetroffen. “Mozi” ziert nun meinen heimischen Arbeitsplatz und passt auf, dass ich mich nicht verschreibe.

Sag 'Hallo' Mozi.. "Hallo Mozi!" <3

1
2
3
4
5
6
7

<span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;
sans-serif&quot;;mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;mso-bidi-font-family:
&quot;Times New Roman&quot;;mso-ansi-language:DE;
mso-fareast-language:EN-US;mso-bidi-language:AR-SA">
Lorem ipsum
</span>

WTF, echt jetzt..

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.

Vortragsfolien: HTML5 & CSS3

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

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

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

Browserunterstützung

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

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

Animationen bei Mouse-Hover

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

Syntax

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

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

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

CSS

1
2
3
4
5
6
7
8
9
10
11

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

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

Was vielleicht noch erwähnenswert ist..

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

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

Ergebnis

Bewege die Maus über diesen Link

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

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

Fazit

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

CSS Transition Demo

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

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

HTML5 in progress

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

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

Browserunterstützung

Browser
ab Version	6	–	11	6	–

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

Syntax

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

HTML

1

<progress>in progress</progress>

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

in progress

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

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

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

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

HTML

1
2
3

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

50%
25 aus 100
800

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

Styling per CSS

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

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

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

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

Neue Updatepolitik

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

Leute.. kommt mal bitte klar.

Canery - Version 14

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

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

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

Release Channels

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

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

Firefox Channel-Auswahl

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

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

Problem?

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

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

Na dann seit ihr hier goldrichtig!

Das Problem

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

HTML

1

<button>Button</button>

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

CSS

1
2
3

button {
	padding:3px 10px;
}

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

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

Die Lösung

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

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

CSS

1
2
3
4

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

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

Frontend-Developer 1:0 Internet Explorer

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

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

Firefox Mosaik

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

Geschwindigkeit

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

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

User Interface + Customize = User Experience!

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

Tab Management

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

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

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

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

Panorama - sehr intuitiv gelöst

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

Änderungen an den Toolbars

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

Bäumchen wechsle dich!

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

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

Die neue Addon Toolbar

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

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

Firefox Button mit ausgeklappten Menü

Mir persönlich ist der Button etwas zu sperrig, deshalb nutze ich Movable Firefox Button (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!

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

Browserunterstützung

Browser
ab Version	4.0	3.0	–	1.0	–

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

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

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

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

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

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

Beispiele

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

HTML

1

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

Ergebnis

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

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

CSS

1
2
3

textarea {
	resize:vertical;
}

Ergebnis

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

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

HTML

1

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

CSS

1
2
3
4
5
6
7

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

Ergebnis

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

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

Browserunterstützung

Browser
ab Version	7	1.3	11.0	1.0	6.0

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

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

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

Beispiel

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

HTML

1
2
3
4
5
6
7
8

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

CSS

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

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

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

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

• Post 3

  Lorem ipsum dolor sit amet, sed diam nonumy eirmod.

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

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

zusätzliches CSS

1
2
3
4
5
6
7

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

Ergebnis

• Post 1

  Lorem ipsum dolor sit amet.

• Post 2

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

• Post 3

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

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

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

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

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

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

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

Beispiele

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

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

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

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

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

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

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

Ergebnis

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

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

Browserunterstützung

Browser
ab Version	1.0	1.2	7.0	1.0	4.0

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

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

CSS

1
2
3
4
5
6
7
8
9

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

Beispiele

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

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

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

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

Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	8.0

caption-side hat zwei Werte, die von Bedeutung sind: top und bottom, wobei erstes den Defaultwert darstellt. Firefox unterstützt zudem auch noch left und right. Die Wahrscheinlichkeit aber, mit der ein Fall eintritt, indem einer dieser beiden Werte nötig wären, geht quasi gegen Null.

Beispiel

Wie letztens gehts mit einer normalen Tabelle los, diese hier wird auch eine caption (Überschrift, Bezeichnung) haben, denn darum gehts uns ja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<caption>Besucherzahlen</caption>
	<thead>
		<tr>
			<th>Monat</th>
			<th>Besucher</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11/2010</td>
			<td>2.744</td>
		</tr>
		<tr>
			<td>10/2010</td>
			<td>2.503</td>
		</tr>
		<tr>
			<td>09/2010</td>
			<td>2.771</td>
		</tr>
	</tbody>
</table>

Da caption-side:top der Standard ist, erwartet uns folgende Ausgabe:

Jetzt nutzen wir caption-side:bottom und wenden es am caption-Tag an.

CSS

1
2
3

caption {
	caption-side:bottom;
}

Damit sieht unsere Tabelle dann so aus:

Das Gleiche könnt ihr jetzt ja mal für left und right im Firefox probieren.

Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.

Browserunterstützung

Browser
ab Version	1.0	1.2	4.0	1.0	8.0

Eigentlich schon erstaunlich wie wenig der IE vor Version 8 überhaupt beherrscht hat, empty-cells hat jedenfalls nicht dazu gehört. Aber da es sich hier eh nur um eine kosmetische Eigenschaft geht, ist das noch vertretbar. Was macht empty-cells? Wie der Name schon andeutet, handelt es sich hier um Zellen einer Tabelle, die durch CSS ausgeblendet werden können, wenn sie leer sind.

Der dafür zuständige Wert lautet hide, um leere Zellen wieder anzuzeigen, muss der Wert auf show gestellt werden. show ist außerdem der Standardwert für empty-cells.

Beispiel

Schauen wir uns die Sache an einer Beispieltabelle an:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<thead>
		<tr>
			<th>Browser</th>
			<th>CSS3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Firefox</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>Chrome</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>IE</td>
			<td></td>
		</tr>
	</tbody>
</table>
<p>(..jede Menge Tags, ich weiß..)</p>

Ergebnis

Raus kommt eine normale Tabelle, eventuelle Borders und Hintergründe werden auch für leere Zellen gerendert, jetzt das Ganze mit empty-cells:hide.

1
2
3

table {
	empty-cells:hide;
}

Ergebnis

Und weg ist die leere td! Naja nicht ganz weg, aber halt versteckt. Sie bleibt immer noch im Markup vorhanden und behält ihre Ausmaße. Man muss auch keine Angst haben, dass floatende Elemente in die Lücken rutschen oder sowas in der Art.

Komischer Weise hat sich so ein bisschen das Gerücht verbreitet, dass negative Werte für margin irgendwie falsch oder nicht standardkonform oder Cross-Browser-inkompatibel sein sollen. Das ist natürlich vollkommener Blödsinn, vor allem wenn man bedenkt, wie nützlich es sein kann, negative Werte zu benutzen. Ein Beispiel will ich euch gern zeigen.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

margin wird natürlich von allen Browsern seit jeher unterstützt, dazu zählt auch die Angabe von negativen Werten. Damit lässt sich allerhand machen und kann einen in so manch einer kniffligen Situation aus der Patsche helfen. Prinzipiell könnte man es vielleicht am ehesten mit position:relative vergleichen. Die Position bzw. die Ausmaße einen Blocks ändern sich.. aber wie immer lässt es sich am besten an einem Beispiel erklären.

Beispiel

Nehmen wir ein einfaches Widget mit einer Überschrift, innerhalb des Widgets gibt es eine Überschrift und Inhalt in irgendeiner Form. Natürlich soll der Inhalt einen gewissen Abstand zum Rand des Widgets haben, dafür nutzen wir logischerweise Padding. Die Überschrift allerdings, soll durch einen Hintergrund farblich hervorgehoben sein.. aber durch das Padding des Widgets entsteht jetzt links und rechts eine Lücke, was also tun?

Schauen wir uns das Ganze mal näher an:

HTML

1
2
3
4

<div class="widget">
	<h4>Überschrift</h4>
	<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>
</div>

CSS

1
2
3
4
5
6
7
8
9

.widget {
	border:1px solid #aaa;
	padding:0 10px 10px;
	width:200px;
}
h4 {
	background-color:#adf;
	padding:0 10px;
}

Ergebnis

Da haben wirs.. grottig diese blöde Lücke links und rechts – aber es gibt eine Lösung für dieses Problem: negatives Margin to the rescue!

Überschrift bekommt negatives Margin

1
2
3
4
5

h4 {
	background-color:#adf;
	padding:0 10px;
	margin:0 -10px;
}

Ergebnis

Ach schön.

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

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

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..

Tag acht des CSS-Adventskalenders, wie die Zeit vergeht. Heute im Angebot: white-space und wie und warum man es benutzt. Wie immer gibts ein aussagekräftiges Beispiel, wenn ihr allerdings noch ein besseres bzw. überzeugenderes parat habt, dann immer her damit! Und ja ich weiß, ich bin viel zu spät dran damit aber besser spät als.. na ihr wisst schon.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	6.0

white-space hat im Laufe der Zeit einige neue mögliche Werte bekommen, uns geht es aber primär um den Wert nowrap, den jeder relevante Browser schon seit längerem unterstützt. nowrap ermöglicht es uns Zeilenumbrüche zu verhindern. D. h. egal was kommt, Text mit diesem Wert wird auf keinen Fall umgebrochen.

Beispiel

Am einfachsten kann man das durch ein Beispiel zeigen. Manchmal möchte man ein Element in eine Richtung floaten lassen und vergibt eine eher schmale Breite. Innerhalb des Elements steht meinetwegen eine Überschrift und ein Datum, da der Browser nicht weiß, dass es ein Datum ist, bricht er den Text aufgrund der Breite innerhalb des Datums um. Das sieht nicht schön aus, besser wäre es doch, wenn der Text nach der Überschrift umbrechen würde und das Datum zusammen bleibt.

HTML

1
2
3
4

<div class="widget">
	<h3>Überschrift <span class="datum">8. Dezember 2010</span></h3>
	<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>
</div>

CSS

1
2
3
4
5
6

.widget {
	background-color:#eee;
	border:1px solid #aaa;
	padding:10px;
	width:180px;
}

Ergebnis

Wie ihr seht, bricht der Text erst nach der “8″ um, somit wird das Datum auseinander gerissen. Um das zu vermeiden, geben wir jetzt der Klasse “datum” white-space:nowrap.

CSS

1
2
3

.datum {
	white-space:nowrap;
}

Ergebnis

Und siehe da, das Datum bleibt als Ganzes erhalten und die Überschrift muss nun an anderer Stelle umbrechen. Mission accomplished.

Ich weiß, ich weiß.. ich hatte versprochen etwas pünktlicher zu werden und jetzt ist es später als je zuvor. Tut mir leid aber am Geburtstag meiner Mutter gibt es einfach andere Prioritäten als einen Artikel im Blog zu schreiben.

Trotzdem will ich mir jetzt die Zeit nehmen und euch etwas über outline erzählen.

Browserunterstützung

Browser
ab Version	1.5	1.2	7.0	1.0	8.0

Wow, erst ab IE8 wird das unterstützt.. ich musste auch erst zwei mal hinsehen und auf einer zweiten Seite checken aber okay. outline gibt es prinzipiell aus einem Grund. Dieser eine Grund besteht darin, Elemente, die mit der Tastatur (meistens durch Drücken der Tabulator-Taste) sogenannten “Fokus” bekommen, hervorzuheben. Dies geschiet in der Regel durch eine gepunktete Linie, die um das Elemente gezogen wird. Im Prinzip handelt es sich dabei um eine Art Spezialfall von border Da nur klickbare Elemente Fokus bekommen, können wir durchaus outline dazu benutzen einen doppelten Border-Effekt für nicht-klickbare Elemente zu erstellen.

Leider ist outline um einiges restriktiver als es border ist. Es erlaubt nämlich nicht, nur bestimmte Seiten rendern zu lassen, sondern rendert immer alle vier Seiten. D. h. im Klartext: es gibt kein outline-top/-right/-bottom/-left sondern eben nur outline.

Das Wertetripel ist allerdings das Gleiche wie wir es von border her kennen:

1. outline-width, die Linienstärke – angegeben in irgendeiner Maßeinheit
2. outline-style, ein Style-Schlüsselwort wie bspw. dottet, solid, dashed oder groove
3. outline-color, Farbe der Linie; wenn nicht angegeben, nimmt es (zumindest in Firefox) den Wert der Schriftfarbe an

Beispiele

Wie oben schon erwähnt werden wir jetzt mal eine doppelte Border mit Hilfe von outline erstellen:

CSS

1
2
3
4
5
6
7

.widget {
	background-color:#eee;
	border:5px solid #aaa;
	padding:10px;
	outline:5px solid #888;
	width:200px;
}

Ergebnis

Aber Achtung: Outline zählt nicht zum Box-Model, das Margin fängt stets nach der Border an, Outline wird dabei ignoriert. Es hat damit auch keinen Einfluss auf den Gesamtfluss aller anderen Elemente.

Ein weiteres Beispiel wäre einer Box oder einem Widget einen kleinen 3D-Effekt zu verpassen. Dazu hellt man die oberste Pixelreihe auf und dunkelt die anderen ab, um so die Box hervorzuheben.

CSS

1
2
3
4
5
6
7
8

.box {
	background-color:#adf;
	border-top:1px solid #cff;
	border-bottom:1px solid #28a;
	padding:10px;
	outline:5px solid #7ac;
	width:200px;
}

Ergebnis

Ich geb’s ja zu.. man muss schon etwas genauer hinsehen. Aber solche Details sind es schließlich, die ein klasse Design von einem guten Design unterscheiden können. Und mit outline geht das ganz einfach ohne zusätzlichem Markup.

Ach und bevor ich wieder Mecker einstecken muss: Die durch Outline produzierte Border wird derzeit im Firefox nicht von border-radius abgerundet, bei anderen Browsern bin ich mir grad nicht sicher. Und ja, man kann eine doppelte Border auch mit box-shadow herstellen aber das ist noch Cross-Browser-inkompatibler ( ) als man mit outline schon ist.

Bis morgen dann.

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.

Verzeiht mir die kleine Verspätung aber hier nun Türchen Nummer vier, hinter dem sich heute font-variant verbirgt. Schade eigentlich, dass font-variant so selten benutzt wird, es ist ein schöner Effekt besonders für Überschriften oder Einleitungen, aber dazu gleich mehr.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

font-variant gibt es schon ewig und wird von allen Browsern problemlos unterstützt. Es stehen uns drei Werte zur Auswahl, von denen meistens nur einer wirklich gebraucht wird.

1. normal, Default-Wert, muss nicht zwingend angegeben werden
2. small-caps, damit lässt sich Text manipulieren: Kleinbuchstaben werden zu Großbuchstaben, verändern aber (im Gegensatz zu text-transform) ihre Höhe nicht
3. inherit, übernimmt den Wert für diese Eigenschaft vom Elternelement

Beispiel

Es ist unschwer zu erkennen, dass wir uns hier nur den Wert small-caps genauer ansehen wollen. Wie gesagt, der Text wird manipuliert und Kleinbuchstaben werden zu.. kleinen Großbuchstaben, “Small Capitals” eben. Zunächst ein Beispieltext:

HTML

1
2

<h3>Überschrift des Textes</h3>
<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>

Ohne font-variant kommt das dabei raus:

Jetzt wollen wir der Überschrift sagen, dass sie small-caps benutzen soll, das können wir entweder direkt über font-variant machen oder aber in Kurzschreibweise als Teil der font Property.

CSS font-variant

1
2
3
4
5
6
7

h3 {
	font-family:georgia,serif;
	font-size:22px;
	font-variant:small-caps;
	font-weight:normal;
	line-height:30px;
}

ODER als Teil von font

1
2
3

h3 {
	font:small-caps normal 22px/30px georgia,serif;
}

In beiden Fällen sieht unser Text dann so aus..

Je nach Schriftart kann es von Vorteil sein auch noch etwas letter-spacing hinzuzufügen, um die Lesbarkeit zu erhöhen. Prinzipiell macht aber eine solche Überschrift schon etwas mehr her und zieht die Blicke auf sich. Dabei wirkt sie aber nicht so aufdringlich wie eine Überschrift, die nur mit (großen) Großbuchstaben geschrieben wurde.

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.

WP e-Commerce UTF-8 Bug

Wenn man einen Shop in seine WordPress-Installation integrieren will, führt wohl kaum ein Weg an WP e-Commerce vorbei. Trotz zahlreicher Schwächen ist es im Vergleich zu den anderen Plugins in den schier unendlichen Weiten des Plugin Directories das kleinere Übel.

Ein Bug, der mich einiges an Zeit kostete, war die falsche Ausgabe von Adressen mit Umlauten oder “ß” im Namen, was in Deutschland recht häufig der Fall ist (“Straße”). Die Adressen wurden richtig kodiert in die Datenbank gespeichert (darauf achten, dass sie auf UTF-8 gestellt ist) aber es wurden immer komische Zeichen wie ü, ö oder � ausgegeben.

Das Problem des Russen, betrifft alle Zeichen die außerhalb des Ami-Alphabets sind..

Nach einigen Rumgooglen (tolles Wort oder?) fand ich schließlich in einem russischen Forum die Lösung. Großer Dank geht dabei an die Übersetzungkunst von Google .

Der Threadersteller hatte genau das gleiche Kodierungsproblem – die Adressen wurden von WP e-Commerce nicht in UTF-8 ausgegeben. Die dargestellte Lösung behebt das Problem, alles was man tun muss ist eine Zeile im Plugin zu verändern.

In der Datei plugins/wp-e-commerce/wpsc-includes/checkout.class.php die Zeile 348:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES);

mit folgendem Code ersetzen:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES, 'UTF-8');

Und siehe da, die Adressen, Namen und Städte werden ordentlich, d.h. in UTF-8 kodiert, ausgegeben. Hoffe, das hilft einigen weiter.

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.

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

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.

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.

Wie heute Abend bekannt gegeben wurde, ist ab sofort die Version 1.5 des beliebten Entwicklertools Firebug zum Download freigegeben. Firebug ist seit seiner Entstehung das Werkzeug für jeden Webentwickler. Die neue Version verspricht mehr Stabilität, neue Features, weniger Bugs und funktioniert ab Firefox 3.5.

Laut John J. Barton, Mitarbeiter bei IBM und derzeitiger Chefentwickler von Firebug, hat das Team diesmal besonderes Augenmerk auf die Qualität gerichtet. Neue Features und Usability-Verbesserungen wurden in insgesamt 36 Alphas und Betas getestet, sodass nahezu alle Bugs beseitigt werden konnten. Der offizielle Downloadweg über das Add-on-Verzeichnis von Mozilla wird erst ab nächster Woche möglich sein. Alle die jetzt schon die 1.5 probieren wollen, klicken auf folgenden Link.

Firebug 1.5 Installieren

Zu den Neuerungen gehören unter anderen:

• verbesserter Inspector: höhere Zuverlässigkeit, Quick Info Box, Image Map Inspector
• neuer Tab “Berechnet”, zeigt berechnetes CSS in einer Übersicht an
• :hover und :active Pseudoklassen werden besser unterstützt
• DOM Knoten im HTML-Tab können mit Doppelklick geöffnet/geschlossen werden
• Umschalten zwischen kurzer und ausführlicher Schreibweise von CSS Code
• Break on Mutate, Haltepunkte für HTML
• diverse Bugfixes

Firebug in einem neuen Fenster geöffnet

Seit knapp zwei Wochen ist auch die Enwicklung an der nächsten Version (1.6) im Gange. Im Moment kann man sich die dritte Alpha herunterladen und testen. Solltet ihr Bugs finden, meldet sie doch am besten im Bugtracker.

Update: Sieht so aus, als hätte der Webauftritt von Firebug ein neues Design spendiert bekommen.

Viel Spaß beim Entwickeln und Debuggen!

Matt hat soeben einen Artikel über den Release und seine Neuerungen verfasst. Mehr Infos zur neuen Version gibt’s im Laufe des Tages.

NACHTRAG: Die neuen Funktionen im Detail

So, wie versprochen jetzt noch einer kleiner Einblick in die neuen Funktionen von WordPress 2.9.

Post-Thumbnails

Beginnen wir am besten mit der auffälligsten oder zumindest nützlichsten Neuerung – Post Thumbnails. Ein Post Thumbnail ist nichts anderes als ein Bild, das genau einem Artikel (Post) zugeordnet wird. Das ist deshalb so nützlich, da man sowieso meistens ein Bild als “Aufreißer” hinzufügt. Um den Vorgang daher etwas zu vereinfachen und um einige Probleme zu beseitigen, die normalerweise mit diesen Einleitungsbildern einher gehen (Bild soll vor der Artikelüberschrift erscheinen), hat man sich entschlossen, diese Funktion einzubauen. Bevor man sie jedoch nutzen kann muss man folgenden Code in die functions.php des Themes schreiben.

1

add_theme_support('post-thumbnails');

Post Thumbnail im Backend

Danach erscheint im Backend ein neuer ‘Kasten’ mit der Bezeichnung Beitrags-Miniaturbild. Dort findet ihr auch einen Link, der euch die Möglichkeit gibt aus der Mediathek ein Bild auszuwählen (“Verwende es als Miniaturbild”). Das Bild wird dann in dem neuen Kasten angezeigt.

Das war aber noch nicht alles, denn das Thumbnail wird noch nicht im Frontend angezeigt. Dazu müssen wir noch eine dieser Template Tags in alle Seitentemplates schreiben, wo das Thumbnail ausgegeben werden soll.

1

<?php the_post_thumbnail( 'thumbnail' ); ?>

1

<?php the_post_thumbnail( 'medium' ); ?>

1

<?php the_post_thumbnail( 'large' ); ?>

Der Parameter dieser Funktion dient dazu, die Größe des Bildes anzugeben. Die entsprechenden Einstellungen macht man im Backend unter Einstellungen->Mediathek. the_post_thumbnail(); gibt uns lediglich ein Bild (img-Tag) aus, weshalb es sinnvoll ist, noch ein div oder ähnliches herum zu bauen, um es auch richtig stylen zu können.

Papierkorb

WordPress 2.9 erlaubt es uns alle Artikel und Seiten in einen Papierkorb zu stecken und bei Bedarf auch wiederherzustellen. Der Nutzen ist, dass Artikel/Seiten ohne nervige Pop-up-Nachfrage gelöscht werden können. Im Papierkorb selbst kommt die Abfrage ebenfalls nicht, löscht man hier etwas, ist es auch endgültig weg.

Verschieben eines Artikels in den Papierkorb

Bildbearbeitung

Ebenfalls enthalten ist sind ein paar Werkzeuge um Bilder in der Mediathek zu bearbeiten. Dazu zählen: Bildgröße ändern, Zuschneiden, Drehen und Spiegeln. Das ist recht nützlich und geht schneller, als nochmal Photoshop auf zumachen, es zu ändern und erneut hochladen zu müssen.

Einfache Bildbearbeitung im Backend

…und vieles mehr

Natürlich ist das bei weitem nicht alles. Es ist beispielsweise auch möglich Videos von vielen bekannten Videoportalen einzufügen. Dazu muss man nur den Link des Videos auf eine neue Zeile schreiben und WordPress ersetzt den Link mit einem Player, der das entsprechende Video dann abspielt. Des Weiteren ist es jetzt möglich mehrere Plugins auf einmal zu aktualisieren, WordPress zu sagen, dass es die Datenbank sauber halten soll und durch rel="canonical" doppelten Content zu vermeiden.

Eine Liste mit allen Änderungen findet ihr im WordPress Codex, eine Liste mit allen Bugfixes gibt’s im Trac.

Viel Spaß beim Bloggen!

Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine.

Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich. Wir bedienen uns hier einfach jQuery und schreiben ein paar Zeilen Code, die den gewünschten Accordion-Effekt realisieren.

HTML-Gerüst

Bevor wir anfangen müssen wir unser HTML aber entsprechend vorbereiten..

1
2
3
4

<h3 class="trigger">Accordion Box 3</h3>
<div class="toggle_container">
	<p>Lorem ipsum dolor sit amet...</p>
</div>

Jeder dieser Blöcke besteht aus einer Überschrift, die später anklickbar sein wird und einem Container, der den eigentlichen Inhalt des Blocks enthält. Wichtig ist, dass wir die Klassen trigger den Überschriften und toggle_container den Containern geben, da später unser jQuery-Code an Hand derer die Aktionen ausführt. Es ist also egal, ob die Überschrift eine h1, h2 oder einfach nur ein div ist, wichtig ist die Klasse und dass danach sofort der Container folgt.

jQuery-Code

Nun zum eigentlichen Code. Vergesst aber nicht, dass ihr vor diesem Script die jQuery-Bibliothek in euer Dokument einbinden müsst! Wie das geht, erfahrt ihr auf der offiziellen jQuery-Seite.

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

$(document).ready( function() {
	$('.trigger').not('.trigger_active').next('.toggle_container').hide();
	$('.trigger').click( function() {
		var trig = $(this);
		if ( trig.hasClass('trigger_active') ) {
			trig.next('.toggle_container').slideToggle('slow');
			trig.removeClass('trigger_active');
		} else {
			$('.trigger_active').next('.toggle_container').slideToggle('slow');
			$('.trigger_active').removeClass('trigger_active');
			trig.next('.toggle_container').slideToggle('slow');
			trig.addClass('trigger_active');
		};
		return false;
	});
});

Nun zur Erklärung, was da eigentlich abläuft..

1. Erst nachdem das DOM vollständig geladen ist, greift das Script.
2. Schließe alle Container, deren Übschrift nicht die Klasse trigger_active hat.
3. Klickt man auf ein Element der Klasse trigger wird geprüft:
   • Hat es auch die trigger_active-Klasse? Dann mach den darauf folgenden Container zu und entferne die active-Klasse.
   • Ansonsten schließe alle offenen Container und öffne nur den Container, der zur gerade angeklickten Überschrift gehört und gib dieser die active-Klasse.
4. Es wird kein Wert am Ende der Funktion zurückgegeben (sollte eine Überschrift gleichzeitig ein Link sein).

Zu 2.: Stichwort – Accessibility

Das Schließen der Container würde auch über CSS (display:none) gehen aber was ist, wenn JavaScript nicht aktiviert ist? Dann würden die Leute den Inhalt der Container nicht mehr sehen, weil das Accordion nicht funktioniert.

Styling per CSS

Um das Ganze noch abzurunden, hier der CSS-Code der Demo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.trigger {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	background:-moz-linear-gradient(center top, #e9e9e9 50%, #ddd 50%);
	background-color:#ddd;
	border:1px solid #ddd;
	color:#888;
	cursor:pointer;
	margin-bottom:5px;
	padding:5px;
	text-shadow:0 1px 0 #fff;
	width:388px;
}
.trigger_active {
	color:#333;
}
.toggle_container {
	padding:5px 10px;
	width:380px;
}

Wenn ihr das Problem habt, dass die Animation nicht flüssig ist sondern abrupt endet, versucht mal der Klasse trigger_container eine feste Breite zu geben. Damit sollte es klappen.

Allerdings ist das natürlich nur ein sehr rudimentäres Aussehen. Wie wäre es zum Beispiel mit einem Plus- oder Minussymbol, damit Benutzer gleich wissen: “Ah, hier kann ich also etwas auf-/zuklappen”? Eurer Kreativität sind hier natürlich keine Grenzen gesetzt. Viel Spaß mit eurem Accordion.