maddesigns

Sass & Compass Introduction

Sven Wolfermann — Mon, 30 Apr 2012 06:59:46 +0000

Meine Workshop-Slides “Modern Frontend Development with Sass & Compass” sind nun online verfügbar.

Der drei Stunden Workshop, den ich bei den TYPO3 Developer Days in München gegeben habe, habe ich am letzten Samstag auch nochmal beim TYPO3camp Stuttgart wiederholt. Im Workshop ging es um die ersten Schritte mit Sass & Compass, sowie die hilfreichsten Features vorzustellen und einen Ausblick auf die neue Sass Version 3.2 zu geben.

Bei Fragen, pingt mich gern auf Twitter dazu an, kommentiert hier im Blog oder schreibt mir eine E-Mail

IE9 border-radius right-to-left (direction: rtl) Bug

Sven Wolfermann — Thu, 22 Mar 2012 10:30:57 +0000

Wer schon mal Layouts für arabische Websites umgesetzt hat, kennt sicherlich das HTML-Attribut “dir“, das man z.B. im body-Tag einfügen kann um die Leserichtig des Dokuments von links-nach-rechts auf rechts-nach-links zu ändern. In CSS ist die Anweisung “direction” dafür zuständig. Für beide Möglichkeiten kann man die Werte “rtl” (right-to-left) oder “ltr” (left-to-right) sowie “auto” angeben.

Hat man im Layout, runde Ecken (border-radius) nur an einer Seite, z.B. rechts abgerundet, dann sind im IE9 die Ecken allerdings links abgerundet. Der IE9 dreht von sich aus die runden Ecken im RTL-Modus um. Das ist zwar nett vom IE9, aber nicht richtig und auch nicht immer gewollt. Bei gleichmäßig abgerundeten Ecken kann man den Bug natürlich nicht nachvollziehen, deshalb fällt er selten auf.

Hier mal ein jsFiddle-Beispiel:

Im IE9 sieht das allerdings so aus (Screenshot):

Der simplifizierte HTML-Aufbau:


     right to left

CSS:

.box {
    background-color: red;
    padding: 48px;
    height: 100px;
    width: 200px;
    margin: 40px;
    border-radius: 0 48px 48px 0;
}

Den Bug muss man nun per Conditional-Comments für den IE9 entgegnen und die angerundeten Ecken “umdrehen”:

Im IE10 ist der Bug bis zum Build 8250 auch noch nachzuvollziehen.
Den Bug hat Andrea Herzog-Kienast entdeckt und ich kann das Verhalten leider nur bestätigen.

Livereload – ein Browser Refresh Tool

Sven Wolfermann — Mon, 12 Mar 2012 14:08:59 +0000

Wer kennt es nicht… man entwickelt in der IDE oder noch besser geeignet für Frontend-Entwicklung im Texteditor Sublime Text 2 und switcht dann zum Browser um die Änderungen anschließend zu überprüfen. Dazu muss man im Browser ein Reload durchführen. Livereload ist ein kleines aber sehr hilfreiches Tool für Mac (Windows in Beta-Status) was diesen Prozess beschleunigt.

Livereload erkennt Änderungen im Projektordner beim Speichern einer Datei. Ein Browser-Plugin für Chrome (oder Firefox, Safari, Mobile Safari) führt dann umgehend im Hintergrund den Refresh/Reload durch. Das erspart natürlich einige Tastenanschläge/Mausklicks. Auf größeren Bildschirmen ist es praktisch, wenn man die beiden Fenster parallel positioniert und dann die Änderung am HTML oder CSS direkt im Blick hat.

Das wäre schon schön genug, aber Livereload bietet noch mehr. Es kann auch Sass-, LESS- oder Stylus- sowie CoffeeScript-Dateien kompilieren und dann den Browser-Reload durchführen. Zudem können auch “Refresh-Pausen” eingestellt werden. Das ist hilfreich, wenn man z.B. die geänderten Dateien beim Speichern direkt auf den Webserver hochlädt und die Änderung dort betrachtet. Diesen Zeitinterval kann man als Wartezeit zum Live-Reload konfigurieren.

Das Mac-Tool ist nach der Beta-Phase nun im App-Store erhältlich und kostet $9.99. Ich kann das Tool nur jedem empfehlen und habe von @livereload 2 Promo-Codes für meine Leser erhalten. Um zu gewinnen einfach einen Kommentar abgeben!

Das große Weihnachtsgewinnspiel – Tag 24 im CSS3 Adventskalender 2011

Sven Wolfermann — Sat, 24 Dec 2011 11:33:33 +0000

…im Webstandard Blog.
Großartige Preise haben uns www.galileo-videotrainings.de, www.galileo-press.de, www.addison-wesley.de, www.oreilly.de und www.webstandards-magazin.de zur Verlosung an die Leser des CSS3 Adventskalender zur Verfügung bestellt.

Was man muss tun, um gewinnen zu können?!

…wird im Webstandard-Blog erklärt: Das große Weihnachtsgewinnspiel

Allen Teilnehmern viel Spaß, Glück & natürlich auch Erfolg!

Box-Sizing – CSS3 Adventskalender Tag 23

Hans Christian Reinl — Fri, 23 Dec 2011 07:00:32 +0000

Einer der am meist bekannten vermeintlichen “Bugs” der richtig alten Internet Explorer Versionen (IE6 in “Quirks Mode” oder älter) ist sicherlich die Darstellung von Elementen mit einer bestimmten Breite (width) und definiertem Innenabstand (padding):
Der Box-Modell-Fehler.

Jeder andere Browser interpretiert ein Block-Element (wie beispielsweise ein p– oder div-Element) mit einer Breite von 200 Pixeln, einem Innenabstand von 10 Pixeln und einem Rahmen mit jeweils 5 Pixeln Breite wie folgt:

200px Breite + 2x10px Padding + 2x5px Border = 230px Gesamtbreite

Eigentlich ein bisschen komisch, wenn man mal drüber nachdenkt: Man definiert die Breite eines Elementes, welches einen bestimmten Inhalt hat. Man stellt fest, dass der Inhalt genau mit der Breite der Box abschließt, was eventuell nicht so gut aussieht und entschließt sich einen Abstand hinzuzufügen. Auf einmal ist die Box allerdings viel breiter, als die Breite die man zuvor definiert hat. Um diesem Problem zu begegnen muss man also jedes mal, wenn man den Innenabstand eines Elements ändert auch die Breite entsprechend anpassen.

Microsoft dachte sich damals, dass es viel intuitiver ist, wenn der Abstand vom Browser in die Breite des Elements eingerechnet wird. Fand irgendwie keiner cool – außer Microsoft.

Das Web entwickelte sich weiter und mit CSS3 wurde der Gedanke von Microsoft wieder aufgegriffen und die Eigenschaft box-sizing eingeführt.
box-sizing definiert, wie sich ein Element in seiner Breite verhalten soll. Diese Eigenschaft ist schon seit einiger Zeit in den meisten Browsern standardisiert, wird allerdings trotzdem häufig vergessen.

Eigenschaftswerte

Es gibt zwei Werte, die von der CSS3 Spezifikation für das “CSS3 Basic User Interface Module” standardisiert sind. Das sind content-box und border-box. Der Wert content-box ist dabei das in CSS2 bereits standardisierte Box-Modell; wobei border-box sich auf das Box-Modell des alten Internet Explorer bezieht.

Eine Demo der beiden verschiedenen Werte hat Workingdraft-Kollege Peter Kröner bereits in seinem Artikel zum Thema gezeigt.

Mozillas Implementierung von box-sizing bietet zusätzlich noch den Wert padding-box an, der praktisch einen Zwischenwert der beiden anderen Werte bietet: Die Rahmen-Breite (border-width) wird nicht mit zur Gesamtbreite hinzugerechnet, jedoch der Innenabstand.

Browsersupport

Das ist klasse: box-sizing wird von fast allen Browsern unterstützt.

Einige Besonderheiten gibt es allerdings: Im Mozilla Firefox braucht man immer noch das -moz-Vendor-Prefix. Es gibt seit langer Zeit diesen Bug der aber leider in der Standard-Version – ohne Prefix – immer noch nicht implementiert ist. Für den Internet Explorer 8 ist das -ms-Prefix nötig. Ältere Versionen des Internet Explorers unterstützen diese Eigenschaft nicht. Erstaunlicherweise wird sie allerdings von allen mobilen Browsern vollständig unterstützt.

Der Vollständigkeit halber sei erwähnt, dass es auch für diese Eigenschaft einen Polyfill gibt. Er wurde von Christian Schäfer entwickelt, der ja auch schon beim CSS3-Adventskalender dieses Jahr geschrieben hat und ist auf GitHub zu finden. Für alle Entwickler, die sich mit den älteren IE-Versionen beschäftigen müssen, sicherlich sehr hilfreich.

Fazit

Durch den optimalen Browsersupport der Eigenschaft kann diese ohne Bedenken eingesetzt werden. Wer oldIE supportet sollte sich allerdings über den Einsatz eines Polyfills Gedanken machen. Oft ist aber die pixel-genaue Darstellung in älteren Browsern gar nicht nötig.

Hans Christian Reinl ist heute unser Gastautor im CSS3 Adventskalender. Hans ist Frontend Webdeveloper und arbeitet gerade in Freiburg bei der Agentur /gebrüderheitz sowie als Freiberufler.
In seinem Blog drublic.de schreibt er auf englisch einiges über Cutting-Edge-Webtechnologien. Auf Twitter ist er als @drublic unterwegs und auf Google+ sowie GitHub zu finden.

Für Fragen stehe ich gerne zur Verfügung. Schreibt einfach einen Kommentar oder haut mich auf Twitter an.

Weiterführende Informationen

Weiterführende Informationen zu box-sizing finden sich im MDN und in Chris Coyiers Artikel zum Thema. Auch PPK hat darüber gebloggt.

CSS3 Adventskalender 2011 – Tag 22

Sven Wolfermann — Thu, 22 Dec 2011 07:09:24 +0000

…im Webstandard Blog zum Thema “CSS4 – Die Zukunft des Webdesign“

Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21

Dirk Weber — Wed, 21 Dec 2011 07:06:54 +0000

Die letzten 3 Jahre haben uns Designern aufregende neue Möglichkeiten für die typografische Gestaltung von Schrift im Internet geschenkt. Schriften über @font-face direkt ins Dokument einzubinden ist mittlerweile zur Selbstverständlichkeit geworden, neue CSS Filter und Transformationen haben unser gestalterisches Vokabular entscheidend erweitert. Darüber hinaus versprechen neue CSS Eigenschaften wie “mask-image” (derzeit nur Webkit) und Javascript Libraries wie lettering.js nie dagewesene Kontrolle über die Schriftdarstellung im Web.

Und trotzdem reichen alle diese Lösungen noch immer bei weitem nicht aus, um an die Grenzen des Möglichen zu kommen. Jeder, der einmal versucht hat, einen HTML-Text mit einem Verlauf zu füllen, weiss wovon ich rede.

Ich möchte hier eine Methode vorstellen, die zu Unrecht noch nicht die Beachtung gefunden hat, die Sie verdient: das Gestalten von Text mit der HTML5 Canvas.

Dass die Canvas über viele aufregende typografische Methoden verfügt, hat sich bisher kaum herumgesprochen. Wahrscheinlich liegt das daran, dass sie bisher eher als Domäne der Spieleentwickler wahrgenommen wurde. Das ist Schade, denn Sie bietet uns Möglichkeiten, die weit über die klassischen Methoden die CSS zu bieten hat hinausgehen und das auch noch in allen modernen Browsern: Verläufe oder Bitmaps in Füllung und Outline, Masken, Schatten, Blendmodes sind nur einige ihrer Methoden.

Ich werde zu Beginn die Textwerkzeuge der Canvas API zu Schriftgestaltung vorstellen und im zweiten Teil zeigen, wie sich diese Methoden nutzen lassen um aufregende, barrierefreie und suchmaschinenfreundliche Webtypografie zu erzeugen.

1. Die Textfunktionen der Canvas

Ich setze voraus, dass Ihr schon wisst wie man eine Canvas in einem HTML Dokument erstellt und anspricht.

Eine bestehende Canvas (wir haben den Kontext wie meist üblich mit “ctx” bezeichnet) muss zunächst vorbereitet werden. Mit der Anweisung “Font” legen wir fest, welche Schrift in welcher Größe wir verwenden wollen:

ctx.font = "50px  'Helvetica' ";

Weiterhin müssen wir festlegen, wie die Grundlinie verankert werden soll. Fünf Möglichkeiten stehen zur Auswahl:
“top“, “hinging“, “middle“, “alphabetic“, “demographic“, “bottom“. Die Entscheidung fällt uns leicht: bis auf “alphabetic” werden alle Ausrichtungen von jedem Browser anders interpretiert Die Anweisung lautet somit:

ctx.textBaseline = 'alphabetic';

Für Typografen sicherlich von Interesse ist die Möglichkeit für die gesamte Canvas eine Skalierung festzulegen. Gut zu wissen für den Fall, dass man mal für hochauflösende Displays entwickelt:

ctx.scale(1,1);

Bleibt zu klären, wie wir unseren Text füllen möchten. Zur Auswahl stehen solide Farben, Verläufe oder Bitmap-Muster. Der Einfachheit halber starten wir mal mit einer Farbe:

ctx.fillStyle = "#ff0000";

Die einfachste Methode, Text in eine bestehende Canvas zu schreiben ist die Methode “fillText“. Die folgende Methode schreibt “Hallo Welt” in die Canvas, 50px von rechts und eine 100px von oben verschobene Grundlinie:

ctx.fillText("Hallo Welt", 50, 100);

Neben der “fillText” Methode können mit der Methode “textStroke” auch Umrisslinien gezeichnet werden:

ctx.lineWidth = 3;
ctx.strokeStyle = "#0000ff";
ctx.textStroke("Hallo Welt", 50, 100);

Verläufe

Um anstelle einer soliden Farbe eine Verlaufsfüllung zu verwenden, muss diese vorher definiert werden. Das geschieht in 2 Schritten:

1: Start- und Endpunkt festlegen:

var gradient = ctx.createLinearGradient(0, 0, 200, 50);

Hier haben wir einen Verlauf mit dem Startpunkt (x:0, y:0) und dem Endpunkt (x:200, y: 50) definiert.

2. Color-Stops hinzufügen.

So sähe es aus, wenn wir einen Verlauf von weiss(0%) nach schwarz(50%) nach rot(100%) festlegen wollten:

gradient.addColorStop(0, 'white');
gradient.addColorStop(0.5, 'black');
gradient.addColorStop(1, 'red');

Bitmapfüllungen

Bitmaps können ebenfalls als Füllungen verwendet werden. In dem meisten Fällen wird man ein jpg oder png verwenden, aber es lassen sich auch interessante Effekte erzielen, indem man dynamisch in einer Canvas generierte Bilder als Füllung einsetzt.

var img = new Image(),pattern;
img.src	= "img/myimage.jpg";
img.onload = function(){
  pattern = ctx.createPattern(img, "repeat");
}

Hier ist zu beachten, dass wir unbedingt warten müssen bis das Bild vom Server geladen wurde, bevor wir das Muster in der Canvas verwenden.

Das schöne an Verläufen und Mustern ist, dass Sie nicht nur in Textfüllungen sondern auch auf Outlines verwendet werden können. Es lassen sich somit einige beeindruckende Effekte erzielen:

ctx.strokeStyle = gradient;
ctx.strokeText("Hallo Welt", 50, 100);
ctx.fillStyle = pattern;
ctx.fillText("Hallo Welt", 50, 100);

Schatten

Die Canvas bietet auch die Möglichkeit, Schatten zu erzeugen. Ein Schatten mit 50% Opazität, 5px Versatz und einem Blur von 7 Pixeln sieht so aus:

ctx.shadowColor = “rgba(0,0,0,0.5)”;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 7;

Wurde dem Kontext einmal Schatten zugewiesen, wird dieser fortan auf alle weiteren Zeichenoperationen angewendet. Wenn man ihn nicht mehr benötigt, sollte man ihn deswegen zurücksetzen:

ctx.shadowColor		= "rgba(0,0,0,0)";
ctx.shadowOffsetX 	= 0;
ctx.shadowOffsetY 	= 0;
ctx.shadowBlur 		= 0;

Bei dieser kurzen Übersicht über die gängigsten Textzeichenmethoden der Canvas möchte ich es hier belassen. Leider konnte ich nur an der Oberfläche kratzen, welche Vielfalt an Möglichkeiten darüber hinaus bestehen. So lassen sich z. B. mit der Methode globalCompositeOperation BlendModes für Zeichenvorgänge festlegen, die Methode clip() erlaubt es uns, Shapes als Masken zu verwenden. Gute weiterführende Infos finden sich natürlich bei Mozilla und in der Safari Developer Library.

Canvas mit CSS verbinden:

Wir haben gelernt, wie die Canvas genutzt werden kann um Texte mit einer Vielzahl von Effekten zu versehen. Leider ist die Canvas eine semantisch bedeutungslose Ansammlung von Pixeln. Textliche Inhalte sind von aussen nicht lesbar und eine Trennung von Präsentations- und Inhaltsebene findet nicht statt. Wie können wir die Möglichkeiten der Canvas innerhalb eines HTML Dokumentes so einsetzen, dass Semantik und Maschinenlesbarkeit eines Textes erhalten bleiben? Wie lässt sich Barrierefreiheit erzielen?

Nachdem ich nun schon einige Male mit dieser Methode in Berührung gekommen bin, hat sich für mich der folgende Weg als der praktikabelste herausgestellt:

Ermittle den Textinhalt und die Textmetrik des Elementes dessen Typografie verändert werden soll.
Erstelle die Canvas Grafik mit dem ermittelten Text.
Weise dem Element die Grafik als Hintergrundbild zu
Mach den HTML Text des Elementes transparent, damit er nicht mehr zu sehen ist, aber selektiert und kopiert werden kann und für Crawler und Screenreader zur Verfügung steht

EIn Beispiel macht den Prozess verständlich: nehmen wir an, auf einer Website befindet sich eine

der folgender CSS Stil zugewiesen ist:

#headline{
	font-family: 'Helvetics', sans-serif;
	font-size: 40px;
}

zuerst ermitteln wir Stileigenschaften und Textinhalt:

var elem = documentGetElementById("headline"),
    text = elem.textContent,
    style = document.defaultView.getComputedStyle(elem, null),
    font = style.getPropertyValue("font-family").match(/^[^,]*/gi).replace(/['"]*/gfont,""),
    size = parseFloat(style.getPropertyValue("font-size")),
    topPadding=parseFloat(style.getPropertyValue("padding-top")),
    leftPadding=parseFloat(style.getPropertyValue("padding-left"));

Jetzt wird’s kompliziert: damit wir den Text in der Canvas deckungsgleich mit dem HTML Text auf dieselbe Grundlinie setzen können, müssen wir diese Grundlinie mit einem komplizierten Trick ermitteln. Ich werde nur kurz beschreiben, wie die Technik funktioniert, wer mehr wissen will, sollte am besten die Source zu diesem Beispiel studieren:

Zuerst müssen wir mit Javascript ein Element mit denselben Texteigenschaften wie unser

ins Dokument schreiben, In dieses Element hängen wir nun ein 1 x 1 Pixel Bild mit der CSS-Eigenschaft vertical-align: baseline. Wir lesen die offsetTop Eigenschaft dieses Bildes aus und haben mit diesem Wert auch die Position der Baseline. Natürlich entfernen wir unsere Testelemente nachher wieder ordentlich.

Nun können wir die Canvas erstellen und der

als Hintergrundbild zuordnen:

var canvas = document.createElement("canvas"),
    top = topPadding+height;

if (this.canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.font = size+"px '"+font+"'";
  ctx.textBaseline = 'alphabetic';
  ctx.scale(1,1);
  ctx.fillStyle = "green";
  ctx.fillText (txt, Padding, top);

  var img = canvas.toDataURL();
  elem.style.color="rgba(0,0,0,0.0)";
  elem.style.backgroundImage="url("+img+")";
}

Im vorliegenden Fall wurde eine einfarbige Schrift durch eine einfarbige Schrift ersetzt. Das macht natürlich außer zu Demonstrationszwecken keinen Sinn.

Diese kleine Galerie zeigt aber, welche Möglichkeiten uns diese Methode sonst noch eröffnet. Die Beispiele wurden mit fontastiq.js erstellt, einer Javascript Library für Schriftmanipulation mittels Canvas an der ich zurzeit arbeite und die Ihr auf Github Forken könnt sobald ich die gröbsten Kinderkrankheiten entfernt habe.

Selbstverständlich muss man sich nicht nur mit den Standardfunktionen der Canvas zufrieden geben. Schließlich gibt es mittlerweile eine große Zahl an Javascript Libraries zur Grafikmanipulation wie z.B.: Pixastic, paintbrush.js, Caman.js oder Bitmapdata.js, mit denen sich aufregende Effekte erzielen lassen. Ich hoffe jedenfalls, dass dieser kurze Artikel Euch einige Anregungen geben konnte um weitere ausgefallene typografische Effekte zu schaffen.

Gastautor Dirk Weber (eleqtriq) ist Interfacedesigner und Webentwickler im schönen Hilden bei Düsseldorf. Dirk schreibt in seinem Blog www.eleqtriq.com/de/ über Webstandards, UX und Flash. Eines seiner Projekte ist CSS3Warp ein Text-to-Path Generator. Dirk twittert zudem aktiv über seine Projekte.

Demo

Welche Möglichkeiten sich daraus ergeben, wird in der Canvas-Demo deutlich.

CSS3 Adventskalender 2011 – Tag 20

Sven Wolfermann — Tue, 20 Dec 2011 07:00:59 +0000

…im Webstandard Blog zum Thema “CSS3 Count – HTML Elemente nummerieren“

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19

Christian (derSchepp) Schaefer — Mon, 19 Dec 2011 07:00:27 +0000

Nachdem CSS 2.1 uns Ende der 90er einigermaßen solide Werkzeuge zum Layouten von Seiten ohne Tabellen an die Hand gegeben hat, ging es bei CSS3 zunächst viel darum, uns mit mehr dekorativen Gestaltungsmöglichkeiten auszustatten. Heute haben wir endlich einbettbare Schriftarten, runde Ecken, Farbverläufe, semitransparente Elemente und Farbwerte, Box- und Textschatten usw. Soweit, so gut.

Der Blick in Richtung Photoshop und dessen Featureset offenbart jedoch immer noch Lücken. In Photoshop haben wir zum Beispiel die Möglichkeit, Bereiche zu entsättigen oder zu schärfen und weichzuzeichnen. Wofür könnten wir diese Effekte brauchen? Nun, ein Entsättigen oder ein Weichzeichnen bestimmter Areale einer Seite hilft dem Benutzer, sich auf unangetastete Bereicher besser zu fokussieren.

Ein unscharf maskieren, was ein unglücklicher Name für eigentlich eine Nachschärfungsmethode ist, könnte man im Browser kleinskalierte, und damit einhergehend detailarm gewordene Bilder wieder knackiger machen.

Schön wäre, wenn wir diese Effekte genauso auftragen könnten, wie wir mit opacity ganze Areale transparenter machen.

Für einen Entsättigungseffekt müssten wir stattdessen aufwändig per JavaScript durch die Farbwerte aller betroffenen Elemente zirkeln, und diese durch ihre entfärbte Pendants ersetzen. Leider scheitert dieser Ansatz spätestens in dem Moment, wo wir auf usergeneriertes Bild- oder Videomaterial treffen. Hier könnten wir zu HTML5 Canvas wechseln, das es uns erlaubt, jeden Pixelwert einzeln zu manipulieren. Dabei helfen uns zwar bestimmte Canvas-Effektbibliotheken wie CamanJS oder Hoverizr, aber die Umsetzung bleibt anstrengend.

Einen Unschärfeeffekt können wir bislang ebenfalls nur tricksen, indem wir Texte mit einem text-shadow gleicher Farbe versehen und bei einfarbigen Boxen einen box-shadow zum Einsatz bringen. Wieder müssten wir für Bilder oder Videos auf Canvas ausweichen.

Einen ziemlich brutalen Ansatz fährt das Framework blurry.js, das nämlich weichzuzeichnende Bereiche inklusive Text via Cufón nach Canvas überführt und sie dort im Ganzen weichzeichnet.

Unscharf Maskieren, also nachschärfen, können wir hingegen gar nicht mit CSS umsetzen. Hier würde der Weg einzig und allein über Canvas führen.

Filter über SVG

SVG kennt eine riesige Palette an Filtern, so etwa Überblenden, Farbüberlagerungen, Helligkeits- und Kontrastanpassungen, Beleuchtung und Reliefeffekte, gausssche und bewegte Unschärfe, Wolken und Rauschen, et cetera pépé.

Wir haben mit SVG einerseits die Möglichkeit, anstatt unseren Texte und Bilder in HTML einzubetten, diese in ein SVG zu packen, innerhalb dessen wir dann Filter auftragen können. Es dürfte Markup-technisch jedoch ungewohntes Terrain sein, Texte mit folgender Syntax einbauen zu müssen:

SVG Example

Cooler ist daher das ForeignObject/xlink in SVG, das es uns erlaubt, normale HTML-Abschnitte in das SVG einzusetzen, die dann via Filter umgestaltet werden können. Damit lässt sich eine komplette HTML-Seite ins SVG einbetten und von A-Z umfärben oder ein nur einzelnes eingebettetes Bitmap-Bild weichzeichnen. Der Grad der Unterstüzung ist schon recht weit gediehen, fehlt nur noch der IE, der mit Version 10 endlich nachzieht.

Firefox geht seit Version 3.5 noch einen Schritt weiter und ermöglicht es, in HTML SVG-Filter anzuwenden, die in einer externen SVG-Datei definiert sind. Zum Beispiel könnten wir in einer SVG-Datei einen feGaussianBlur-Filter mit einem Weichzeichnungsradius von 2 Pixeln definieren, dem wir die id gaussian_blur verpassen:

Den Filter mit dieser id referenzieren wir dann aus unserem normalen Stylesheet heraus:

img {
  filter: url(blur.svg#gaussian_blur);
}

Eine Live-Demo findet sich hier. Leider beschränkt sich dieses praktische Verfahren auf besagten Firefox.

Allerdings: Der IE kennt ja auch Filter, die allesamt von der Windows-Grafikbibliothek DirectX abgeleitet sind. Darunter befinden sich die altbekannten Alpha- oder Gradient-Filter, mit denen wir uns in alten IEs CSS3-Features herbeitricksen. Es befinden sich aber auch ein paar darunter, mit denen sich die am häufigsten benötigten Effekte realisieren lassen:

/* Um 2 Pixel weichzeichnen */
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
/* 13 Pixel Bewegungsunschärfe in Richtung 310° */
filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310);
/* In Graustufen umwandeln */
filter: gray;
/* Röntgen-Effekt (also Graustufen invertiert) */
filter: xray;
/* Lichtkegel setzen */
filter: light();
/* Emboss */
filter: progid:DXImageTransform.Microsoft.emboss();

Eine komplette Liste gibt es hier.

Mit Hilfe von Conditional Comments können wir damit schon zwei Browserfamilien bedienen, die zusammen immerhin 77% des deutschen Browsermarkts ausmachen:



  


Unschärfe via CSS-Filter SVG

margin: -2px gleicht den erhöhten Platzverbrauch aus. zoom: 1 sind bei Filtern für die IE6/7 immer notwendig. Wichtig zu wissen ist, dass der IE 10 keine Filter mehr unterstützen wird

Hier das erweiterte Beispiel

Weil man nun aber erkannt hat, wie unglaublich praktisch die SVG-Filter von Firefox sind, hat sich das W3C gedacht, man müsste diesen Ansatz doch mal standardisieren, und so wurde die W3C FX Task Force gegründet, welche nun die ersten Drafts für offizielle W3C Filter Effekte vorgelegt hat.
Diese Filter funktionieren im Prinzip genau so, wie sie der Firefox vorexzerziert, also mit Verweis auf eine externe URL, die den Filter unter einer id bereithält. Darüberhinaus definiert man aber auch ein paar Filter-Shortcuts für die prominentesten Filter, die dann keine externe Datei benötigen. Diese Shortcut-Filter wären:

grayscale
sepia
saturate
hue-rotate
invert
opacity
brightness
contrast
blur
drop-shadow

Das Gute an den Filter-Shortcuts ist zudem, dass man per Shortcut angewendete Filter in CSS animieren kann, z.B. so:

.foo {
  filter: blur(2px);
  transition: filter 1s ease-in-out;
}

.foo:hover {
  filter: blur(0);
}

Zu guter letzt soll auch noch eine Möglichkeit bereitgestellt werden, OpenGL/WebGL-Verformungs- und Shaderfilter zu definieren, die das entsprechende Element z.B. dreidimensional verformen:

Praktischerweise sind vergangene Woche endlich erste Umsetzungen dieser Filter in der WebKit-Engine gelandet und nehmen nun den Weg über die WebKit-Nightlies (im OSX-Nightly läuft es schon) über Chrome Canary, dann über die Chrome Beta, um schließlich in 3 Monaten im stabilen Allerwelts-Chrome zu landen. Und irgendwann sicherlich auch im Safari. Und damit wären die wichtigsten Filter in 90% – 95% aller Browserversionen am Markt verfügbar.

Für WebKit fügen wir für unser Beispiel also einfach ein -webkit-filter: blur(2px); zusätzlich ein, und machen es in dem Zug noch ein wenig interaktiv und zumindest im WebKit animiert:



  


Unschärfe via CSS-Filter SVG

Das finale Beispiel gibt es hier online zu sehen. ~~give me money~~

Eine erste Demo-Spielerei, die nicht nur CSS Filter verwendet, sondern auch CSS 3D Tranforms gibt es übrigens ganz frisch bei Simurai zu bewundern. Viel Spaß mit den CSS Filtern!

Update: Im aktuellen Chrome Canary sind die CSS Filter nun auch angelandet, sowohl unter Mac, als auch unter Windows.

Christian ”Schepp” Schaefer ist freiberuflicher Webentwickler aus Düsseldorf. Er ist Autor der Ladezeitenbeschleuniger-Bibliothek CSS-JS-Booster sowie Moderator des wöchentlich erscheinenden Working Draft Podcasts and er verfolgt Eure Tweets mit seinem Account derSchepp.

CSS3 Adventskalender 2011 – Tag 18

Sven Wolfermann — Sun, 18 Dec 2011 16:27:55 +0000

…im Webstandard Blog zum Thema “CSS3 Transform dreht Sprite-Grafik des CSS3 Togglers“

Compass & SASS – CSS3 Adventskalender Tag 17

Sven Wolfermann — Sat, 17 Dec 2011 09:34:01 +0000

Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS & Compass. Was SASS & Compass so effizient macht beim Schreiben von CSS hat Mathias Schäfer (molily) bereits sehr umfassend im Webkrauts-Adventskalender-Artikel “Effiziente CSS-Entwicklung mit Sass und Compass” (Teil 1, Teil 2) gezeigt.

Neue Techniken bringen natürlicherweise auch viel Diskussion mit sich. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch besseres CSS. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit SASS, LESS, Stylus, Closure und MyNewCssPreProcessor™ auch effizient eingesetzt werden kann.

Leichter Einstieg

Durch die neue Schreibweise SCSS (“Sassy CSS”) wurde zudem der Einstieg in SASS erleichtert. Das hilft Einsteigern mit bestehenden Code die ersten Features von SASS auszuprobieren und so schnellere Erfolge zu erzielen.

Bestehendes CSS in SCSS konvertieren (geht auch zu SASS und auch von SASS zu SCSS,…)

# Convert CSS to SCSS
$ sass-convert style.css style.scss

Das wird über das jeweilige Kommandozeilen-Tool gemacht, gibt es aber auch online. Zur Installation von SASS und Compass gibt es auch zahlreiche Anleitungen im Netz, auch für Windows oder als App. Das sollte also kein Problem darstellen.

Einige nützliche Beispiele habe ich im Folgenden mal zusammen getragen. Aktuell starte ich meine Projekte mit dem Starter-Kit von xtine, das die HTML5 Boilerplate, Compass, SASS und normalize.css schon mitbringt (compass-sass-html5boilerplate).

Schön finde ich die Import-Funktion von SASS, so lassen sich gesplitete CSS (SASS)-Dateien zu einer zusammenfüren.

@import "modules/base";
@import "partials/header", "partials/footer";

Dabei werden Dateien, die mit Unterstrich beginnen direkt ins fertige CSS kompiliert, z.B. _base.scss, wo hingegen Dateien ohne Unterstrich, z.B. base.scss zusätzlich als separate CSS-Datei (z.B. base.css) durch den Watch-Prozess angelegt werden.

Partials können auch in Anweisungen importiert werden:

@media only screen and (min-width: 320px) {
  @import "partials/up320";
}

Elternselektor

Die Selektierung von Elternelementen ist für mich ebenfalls unschlagbar

article h1 {
  font-size: 2em;

  .index & {
    font-size: 1.6em;
  }
}

wird zu:

article h1 {
  font-size: 2em;
}
.index article h1 {
  font-size: 1.6em;
}

So kann direkt in der Anweisung eine andere Schriftgröße für H1 auf der Startseite vergeben werden

Compass – Multifunktions-Tool

Bild von http://sonspring.com/journal/sass-for-designers

Meiner Meinung nach macht SASS erst mit dem CSS-Framwork Compass richtig Sinn. Compass bringt eine Vielzahl von Funktionen und Mixins mit, die das Schreiben von CSS erleichtern. Das o.a. Bild zeigt es meiner Meinung nach sehr treffend. Gerade im CSS3-Bereich spielt Compass seine Stärken aus, hier ist ein großes Set an CSS3-Mixins bereits enthalten und werden ständig nachgepflegt.

Ein dickes Feature ist sicherlich das Generieren von Sprites-Grafiken (warum Sprites?), dazu gibt es ein umfangriches Tutorial auf der Compass-Website.

CSS3 Mixins

Linear-Gradients sind nach wie vor mühsehlig, für alle Browser müssen Anweisungen mit Vendor-Prefixe geschrieben werden, aktuell sieht ein simpler cross-browser Linear-Gradient so aus:

.gradient { 

  background-color: yellow; /* Fallback Color */
  background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue));
  background: -webkit-linear-gradient(top, yellow 0%, blue 100%);
  background:    -moz-linear-gradient(top, yellow 0%, blue 100%);
  background:     -ms-linear-gradient(top, yellow 0%, blue 100%);
  background:      -o-linear-gradient(top, yellow 0%, blue 100%); 

  /* aktueller W3C Standard, bisher nicht implementiert */
  background:         linear-gradient(to bottom, yellow 0%, blue 100%);

}

mit Compass sieht die Anweisung so aus:

.gradient {
  @include background(linear-gradient(top, yellow, blue));
}

zusätzlich könnte man noch SVG-Support für IE9 und ältere Opera über $experimental-support-for-svg: true; aktivieren, sowie die älteren Internet Explorer (IE6-IE8) mit Filtern ausstatten:

.gradient {
	$experimental-support-for-svg: true;
	@include background(linear-gradient(top, yellow, blue));

	// for older IEs
	.oldie & {
		background-color: yellow;
		@include filter-gradient(yellow, blue, vertical);
	}
}

das wird dann wie folgt kompiliert

.gradient {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i.....');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #0000ff));
  background: -webkit-linear-gradient(top, #ffff00, #0000ff);
  background: -moz-linear-gradient(top, #ffff00, #0000ff);
  background: -o-linear-gradient(top, #ffff00, #0000ff);
  background: -ms-linear-gradient(top, #ffff00, #0000ff);
  background: linear-gradient(top, #ffff00, #0000ff);
}
.oldie .gradient{
  background-color: yellow;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFF00', endColorstr='#FF0000FF');
}

Globale Variablen wie $experimental-support-for-svg werden für das gesammte Compass-Projekt gesetzt (wie der Name schon sagt). Wenn man im nächsten Gradient keinen SVG-Support wünscht, müsste man $experimental-support-for-svg in der Anweisung wieder auf false setzen. $experimental-support-for-khtml: false; kann eigentlich als Default in _base.scss gesetzt werden. Man kann auch den Support von IE6 oder IE7 deaktivieren, wenn das für das Projekt nicht nötig ist:

// _base.scss
$experimental-support-for-khtml: false;
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;

Aber nicht alle CSS3-Mixins sind zu empfehlen, border-radius ist überfrachtet und kann mittlerweile auch ohne Vendor-Präfix eingesetzt werden.

.box {
  @include border-radius();
}

wird zu

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Hier ist einiges zu viel und zudem falsch (-ms-border-radius). Hier reicht also einfach:

.box {
  border-radius: 5px;
}

Nützlich ist auch das Mixins für Links. Wenn man Links mit alle dynamischen Pseudoklassen stylt, sieht das mit SASS so aus:

$color-main: #0089B3;
a {
	text-decoration: none;
	color: $color-main;
	&:hover {
		text-decoration: underline;
		color: darken($color-main, 10%);
	}
	&:focus {
		color: darken($color-main, 10%);
	}
	&:active {
		color: invert($color-main);
	}
	&:visited {
		color: darken($color-main, 30%);
	}
}

In Compass kann man daraus einen Zweizeiler machen:

a {
  @include hover-link;
  @include link-colors(
    $color-main,
    darken($color-main, 10%),
    invert($color-main),
    darken($color-main, 30%),
    darken($color-main, 10%)
  );
  // hier zur Übersichtlichkeit mehrzeilig
}

wird zu

a { text-decoration: none; color: #0089b3; }
a:hover { text-decoration: underline; }
a:visited { color: #00141a; }
a:focus { color: #006280; }
a:hover { color: #006280; }
a:active { color: #ff764c; }

Ja, Compass fasst :hover und :focus nicht zusammen, aber das kann man sicherlich verschmerzen - genau solche Beispiel sind es die Kritiker dann auf den Plan bringen...

Bild: http://sonspring.com/journal/sass-for-designers

Gerne bin ich bereit über Sinn und Unsinn in den Kommentaren zu diskutieren.

If-Bedingungen in CSS

$main-bg: #333;
.main {
  color: if($main-bg == #333, #fff, #000);
}

Jeder der ein wenig Programmierkenntnisse hat, wird das zu schätzen wissen. Wenn die Hintergrundfarbe #333 (dunkles grau) ist, dann ist die Textfarbe #fff (weiß), sonst #000 (schwarz). Klasse, oder?

Oder die Möglichekeit Überschriften in anderen Bereichen der Website, anders zu formatieren:

aside {
  #{headings(2,4)} {
    text-transform: uppercase;
  }
}

wird kompiliert zu

aside h2, aside h3, aside h4 {
  text-transform: uppercase;
}

Die Compass Image-Funktionen sind auch ganz toll:

header {
  background: image-url("header-bg.png");
  h1 {
    height: image-height("logo.png");
    width: image-width("logo.png");
    background: transparent inline-image("logo.png") no-repeat;
  }
}

So kann man mit image-height() und image-width() die Höhe und Breite des Logos automatisch einfügen, falls sich das Logo ändert, ändern sich auch automatisch die Höhe und Breite. Zudem kann man das Logo als inline-image() einfügen. Das Beispiel wird dann folgendermaßen kompiliert:

header {
  background: url('../img/header-bg.png');
}
header h1 {
  height: 185px;
  width: 140px;
  background: transparent url('data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD....') no-repeat;
}

Plugins

Für Compass gibt es mittlerweile eine große Anzahl an Plugins, die das Framework erweitern. Eines hab ich total lieb gewonnen: Aaron Russell's Plugin für den RGBA PNG Support - das erstellt für ältere Browser (IE6-IE8) transparente PNGs anhand der zugewiesenen RGBA-Farbe. Man installiert sich das Plugin und bindet es in das Compass config.rb File ein.

// require in config.rb
require "rgbapng"

Dann importiert man das Mixin in das SCSS und weist es wie folgt zu:

@import "rgbapng";
footer {
  @include rgba-background(rgba(#fff,0.25));
}

Das Plugin RGBAPNG legt dann eine Grafik im img-Folder an. Das generierte CSS:

footer {
  background: url('../img/rgbapng/ffffff40.png?1324100912');
  background: rgba(255, 255, 255, 0.25);
}

Wenn man den Alpha-Wert ändert, wird eine neue Grafik erstellt. Praktisch, oder?

Fazit

Für mich ist SASS & Compass eine Arbeitserleichterung geworden. Zudem werden einige Konzepte von SASS in die zukünftige CSS4 einfließen, wie Tab Artkins auf der diesjährigen Fronteers Konferenz in Amsterdam erwähnte (Video).
Ich hoffe ich konnte ein paar nützliche Beispiele für den Einsatz von Compass mit SASS liefern. Welche Erfahrungen habt ihr mit SASS & Compass gemacht? Habt ihr nützliche Mixins, verlinkt die in den Kommentaren. Werdet Ihr jetzt CSS-Preprozessoren verwenden?

CSS3 Adventskalender 2011 – Tag 16

Sven Wolfermann — Fri, 16 Dec 2011 07:00:45 +0000

…im Webstandard Blog zum Thema “CSS3 Toggler – Vertikales Menu zum Auf- und Zuklappen“

IE9 CSS3 Support – CSS3 Adventskalender Tag 15

Sven Wolfermann — Thu, 15 Dec 2011 08:10:23 +0000

Heute mal ein Thema im CSS3 Adventskalender, das ja ab-und-zu etwas vernachlässigt wird, “IE9 CSS3 Support” oder “was kann der IE9 überhaupt?”. Der Browser-Marktanteil des IE9 ist glücklicherweise steigend und wird mehr und mehr in Firmen und in Privathaushalten eingesetzt. Die Statistik zeigt, das in Europa aktuell ca. 10% mit IE9, ca. 16% mit IE8 und nur knapp 3% den IE7 verwenden. Dass der IE9 nicht so fortschrittlich ist, wie seine Konkurrenten, ist sicherlich auch hinlänglich bekannt. Mit der Einführung des neuen Betriebssystem “Mango” für Windows Phone 7 ist nun auch der IE9 auf den Windows Phone 7 als Standard-Browser vorhanden und kann hier die neuen Features rund um HTML5 und CSS3 verarbeiten. Der Marktanteil ist sicherlich noch sehr gering, wird aber sicherlich steigen in den nächsten Jahren. Und wer behauptet, dass das Windows Phone 7 noch keine Relevanz hat, optimiert sicherlich noch für IE6 (#bewusstprovokantethese).

Übersicht – CSS3-Features IE9

Nun aber Butter bei die Fische, was geht mit dem Internet Explorer 9 und was nicht.

CSS3 Eigenschaft	IE9 Support
opacity	ja
multiple backgrounds	ja
background-clip	ja
background-size	ja
background-origin	ja
border-radius	ja
box-shadow	ja
box-sizing	ja
transform	ja (mit -ms-Präfix)
RGBA colors	ja
HSL colors	ja
HSLA colors	ja
@font-face	ja
@media	ja
CSS3 Selektoren	ja

CSS3 Eigenschaft	IE9 Support
border-image	nein
text-shadow	nein
gradients	nein
transitions	nein
animations	nein
multiple columns	nein
resize	nein

Darfs ein wenig mehr sein?

Ja gern, aber erst im IE10… Aber der IE9 unterstützt Größenangaben wie rem und vh, sowie vw (Blogartikel von Jonathan Snook). Allerdings sind die aufgeführten Eigenschaften (bis auf -ms-transform) ohne Präfix integriert, also standardkonform. Über das Rendering von border-radius wurde sich zudem ausführlich Gedanken gemacht und ist sehr gelungen meiner Meinung nach.

Eine Eigenschaft, die der IE9 unterstützt, aber auch noch nicht so häufig verwendet wurde, sind multiple Hintergrundbilder (background-image).

.box {
  background: url(images/background-1.png) no-repeat 50% 0,
              url(images/background-2.png) no-repeat 100% 100%;
}

Man sollte allerdings vorsichtig sein, wenn man für ältere Internet Explorer die filter-Eigenschaft verwendet, es kann dann zu Problemen führen. Ein Beispiel im Zusammenhang mit border-radius und linear-gradient habe ich hier beschrieben.

Link-Tipps

Was Entwickler über Internet Explorer 9 wissen sollten
Referenz: CSS3 Support in Internet Explorer 9
Internet Explorer 9 Guide for Developers
Internet Explorer Learning > CSS3
“Mobile first” CSS and getting Sass to help with legacy IE
Attention! IE9 will not destroy the world, kill babies, or take away your home or job.

Fazit

Der Internet Explorer 9 unterstützt mehr CSS3-Eigenschaften als erwartet, allerdings sicherlich weniger als erhofft. Und mit der Version 10 werden weitere CSS3-Eigenschaften unterstützt, bleibt nur zu hoffen, dass die älteren Versionen bald verschwinden. Als kleine Gute Tat, könnt ihr in den Weihnachtsfeiertagen die Browser eurer Verwandten updaten (wenn ihr das nicht schon getan habt).

CSS3 Adventskalender 2011 – Tag 14

Sven Wolfermann — Wed, 14 Dec 2011 08:16:24 +0000

…im Webstandard Blog zum Thema “CSS3 Pattern mit Linear-Gradient“

Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13

Sven Wolfermann — Tue, 13 Dec 2011 08:00:57 +0000

Um es vorweg zu nehmen, beim Stylen von Input-Feldern muss man aus Usability-Gesichtspunkten Vorsicht walten lassen. Der normale User ist an das Aussehen der Formular-Elemente in seinem OS/Browser gewöhnt. Wenn die Input-Felder nun stark von der gewohnten Umgebung abweichen, ist er skeptischer beim Ausfüllen von Formularen und bricht u.U. den Prozess sogar ganz ab. (Quelle: Internet)

Auch wenn man es wollte, einige Formular-Elemente lassen sich zudem nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type="file"]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.

Als erstes erstellen wir ein kleines HTML5-Formular


  
    
      
        War das Tutorial nützlich? ^*
        
        Ja
        
        Nein
      
      
        
        Ja, ich habe das Tutorial auch gelesen.^*

Das Formular braucht zunächst ein wenig Grundgestaltung.

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 1em 0;
}

label {
  cursor: pointer;
}

Wie schon erwähnt, ist es fast unmöglich die Input-Types einheitlich zu stylen. Deshalb werden wir die Input-Felder über background-clip “ausblenden” und das folgende label mit dem Styling versorgen.

input[type="checkbox"], input[type="radio"] {
  position: absolute;
  clip: rect(0,0,0,0);
}

Jetzt sind die Input-Felder der Checkbox und auch die Radio-Buttons nicht mehr sichtbar, aber grundsätzlich noch für die Tasterturbenutzung erreichbar (Stichwort: barrierefrei). Da der Browser uns jetzt allerdings kein visionelles Feedback mehr geben kann, wenn die Checkbox oder Radio-Buttons fokusiert werden, verlegern wir das Verhalten auf das folgende Label. Wenn das Input-Feld fokusiert wird, wird das folgende label fett dargestellt:

input[type="checkbox"]:focus + label , input[type="radio"]:focus + label{
  font-weight: bold;
}

Spritegrafik hinzufügen

Als nächstes fügen wir eine Hintergrund-Spritegrafik hinzu, sowie das Styling für den CSS3 :checked Status:

input[type="radio"] + label {
  background: transparent url("s-radio.png") no-repeat 0 -34px;
  padding: 0 20px;
}
input[type="radio"][value*="nein"] + label {
  background-position: 0 -50px;
}
input[type="radio"]:checked + label {
  background-position: 0 -2px;
  color: green;
}
input[type="radio"][value*="nein"]:checked + label {
  background-position: 0 -18px;
  color: red;
}

Die Spritegrafik-Position wird also verschoben und visuell auf grün für “ja” gesetzt, oder eben rot für “nein”. Dazu ist natürlich zu sagen, wenn man den Barrierefrei-Aspekt hinzuzieht, rot/grün natürlich nicht optimal sind und man sich darüber in klaren sein sollte, das ein Großteil der Nutzer eine Rot-Grün-Schwäche haben. Deshalb sind in unserem Beispiel zudem andere Symbole für ja/nein gewählt.

Ein ähnliches Verhalten implementieren wir nun auch für die Checkbox.

input[type="checkbox"] + label {
  background: transparent url("s-checkbox.png") no-repeat 0 -16px;
  padding-left: 20px;
}

input[type="checkbox"]:checked + label {
  background-position: 0 0;
}

Da im Beispiel ein HTML5-Formular mit dem Attribut required in den Inputs verwendet wurde, wird die browserseitige Validierung aktiv, wenn keine Option ausgewählt wurde, sowie wenn die Checkbox nicht aktiviert wurde.

Diesen Pseudo-Status kann ebenfalls stylen, ist allerdings in den verschiedenen Browsern mit Browser-Präfixen implementiert. Am Beispiel von Firefox, kann man :-moz-ui-invalid verwenden:

input[type="checkbox"]:-moz-ui-invalid + label {
  background: transparent url("s-checkbox.png") no-repeat 0 -32px;
  color: red;
}
input[type="checkbox"]:-moz-ui-invalid + label:after {
  content: '<<<--- Pflichtfeld!';
}

Demo

Das HTML5-Formular mit individuellen Radio-Buttons

Browser-Support

Der verwendeten Pseudo-Selektoren sind bereits in CSS 2.1 spezifiziert, allerdings erst vollständig implementiert mit dem Release des IE9.

Weitere Infos zu dieser Technik gibt es beim CSS Ninja (Ryan Seddon) im Artikel "Custom radio and checkbox inputs using CSS" und in Lea Verou's Vortrag "CSS3 Secrets".

CSS3 Adventskalender 2011 – Tag 12

Sven Wolfermann — Mon, 12 Dec 2011 07:00:17 +0000

…im Webstandard Blog gibt es Bücher zu gewinnen! “Buch Gewinnspiel zum Bergfest“

Apple’s Navigation mit Flexbox – CSS3 Adventskalender Tag 11

Hans Christian Reinl — Sat, 10 Dec 2011 23:00:48 +0000

Apple diktiert Webdesign

Seit langer Zeit schon sind Webdesigner immer wieder begeistert von Apples Navigationsleiste.
Das ist durchaus darauf zurück zu führen, dass Apple in den letzten Jahren diktiert hat, was ansprechendes Webdesign sein soll.

Meiner Meinung nach ist Apples Website immer noch eine der am besten gestalteten Seiten im Netz. Vor allem die Usability ist (zumeist) überragend.

Das Redesign, dass Google Mitte des Jahres präsentierte ist allerdings sehr gelungen, auch wenn die Usability manchmal zu wünschen übrig lässt.

Durch Apples Stellung als Designvorbild für viele Designer und Programmierer, entstanden über die Jahre etliche Tutorials, die erklären, wie man Apples Style kopieren kann.
Auch im Webstandards-Blog kann man so ein Tutorial finden.

TL;DR

Apples Navigation kann man mit Flexbox und einigen weiteren CSS-Tricks recht einfach implementieren ohne auf Grafiken zurückgreifen zu müssen. Cross-Browser-Kompatibilität lässt sich hierbei durch einen Polyfill namens Flexie.js gewährleisten.

Aus semantischer Sicht hilft beim Markup unter anderem das HTML5-nav-Element.

Markup

Bei der aktuellen Navigation der Webseite begeistert mich das Suchfeld. Klickt man in das Feld, wird es großer und die einzelnen Navigationspunkte werden kleiner. Mithilfe von ein paar neuen CSS-Eigenschaften werde ich zeigen, wie man dieses Verhalten recht einfach nachbauen kann.

HTML

Als erstes muss man sich über die HTML-Struktur Gedanken machen. Die Links der Navigation packen wir in eine Liste:


    Store
    Mac
    iPod
    iPhone
    iPad
    iPhone

Wenn man einfach eine Dummy-Liste braucht, hilft mir HTML-Ipsum von Chris Coyier. Wem ein Snipped fehlt, der kann es einfach hinzufügen. Das Projekt ist auf GitHub zu finden.

Nun wird also noch das Formular für die Suche definiert. Einfach als Formular! Recht easy, denke ich.


    Search

Semantik der Navigation

Beide Teile werden schließlich von einem HTML5 nav-Tag umschlossen, das Semantik in die Struktur bringt. Semantik ist vor allem für die Zugänglichkeit von hoher Bedeutung. Deshalb enthält das Suchformular auch ein label, obwohl dies später nicht mehr zu sehen sein wird.

Zum Thema Semantik gab es vor nicht all zu langer Zeit eine große Diskussion unter einigen Experten; hervorgerufen durch Divya Manians Post auf SmashingMag. Hier einige weitere Meinungen zum Thema:

Die Spezifikation beschreibt ein nav-Element wie folgt:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

~ HTML5-Spezifikation

Auf deutsch in etwa: “Das nav-Element spiegelt einen Bereich einer (Web-)Seite wider, der Links auf andere Seiten oder Teile der Seite enthält: ein Bereich mit Navigationsverweisen.”.

Somit sollte unsere HTML-Struktur stehen. Kommen wir also zu den Styles!

CSS

Die Navigationspunkte haben bei Apple keine bestimme Größe. Außerdem wächst das Suchfeld, wenn man es anklickt – fokusiert. Das stellt uns vor das Problem die richtigen Maße für die Elemente zu finden.
Die CSS3 Sezifikation bietet einige neue Grid-Modelle an. Mit einem dieser Modelle wollen wir hier arbeiten: das Flexible Box Layout Model – kurz Flexbox.

Flexbox

Flexbox ist ein CSS Box Model, bei dem sich die Kindselemente eines Box-Elements an den verfügbaren Platz anpassen, ohne dass man eine bestimme Breite für diese definieren muss.

Da das Flexible Box Modell allerdings eher “Cutting Edge” ist, unterstützen noch nicht alle Browser die Technik:
So werden die Eigenschaften zwar von Webkit und Gecko unterstützt, allerdings hat Internet Explorer diese erst ab der kommen Version 10 implementiert. Auch Opera bietet bisher leider keinen Support für Flexbox an. Selbst Opera Next – eine Vorabversion von Opera 12 – scheint Flexbox bisher nicht implementiert zu haben.

Neue Flexbox-Syntax

Eine Besonderheit gibt es bei Flexbox zu beachten: Die Spezifikation wurde vor wenigen Wochen geändert. Einige Eigenschaften wurden umgenannt, weshalb man bei der Implementierung von Flexbox nun ein paar Eigenschaften mehr definieren muss, um sowohl der alten, als auch der neuen Definition gerecht zu werden. Am besten lest ihr selbst noch mal in der neusten Version der Spezifikation nach. In Chrome Canary ist die neue Syntax bereits implementiert. Die anderen “modernen” Browser unterstützen bisher nur die alte Syntax.

Darüber hinaus ergibt sich natürlich die Frage, wie man die Funktionsweise von Flexbox auch in älteren Browsern zum Laufen bekommt.
Glücklicherweise gibt es Menschen, die sich um so etwas bereits Gedanken gemacht haben und Polyfills entwickeln, die Cutting-Edge-Technologien auch in älteren Browsern zugänglich machen.
Für Flexbox ist Flexie.js ein entsprechender Polyfill. Funktioniert ab Internet Explorer 6 und Opera 10. Die Dateien findet man auch auf GitHub.

Weiterführende Informationen (Achtung, meist alte Syntax) gibt’s auch hier:

Mozillas MDN
HTML5 Rocks
Tab Atikins jr. – Editor of the Specification
Oli Studholme

Der Code sieht dann ohne Präfixes mit der neuen Syntax so aus:

nav {
    display: flexbox;
}

ul {
    display: flexbox;
    width: flex(1);
}

li {
    width: flex(1);
}

Die alte Syntax kennt display: flexbox nicht. Man muss hier display: box definieren.
Auch ist die Funktion flex() neu eingeführt. Die alte Syntax sieht hier die Eigenschaft box-flex vor, die entsprechend den Wert 1 zugewiesen bekommt.

Das Suchfeld

Nun definieren wir für das Such-Feld eine bestimmte Größe:

input[type="search"] {
    width: 100px;
}

Sobald man die Suche fokussiert, wird das Suchfeld größer:

input[type="search"]:focus {
    width: 200px;
}

Das Label und auch das Submit-input-Feld verstecken wir so, dass es nicht mehr sichtbar ist, für Screenreader aber noch zugänglich:

label,
input[type="submit"] {
    position: absolute;
    left: 999em;
}

Das Gute ist, dass die Navigation mit Suchfeld in allen Browsern einfach funktioniert – nicht unbedingt mit allen Feinheiten, die die modernen Browser bieten; aber auch Internet Explorer 7&8 bieten mit Flexie.js ausreichend Funktionalität an.

Hier habe ich ein jsFiddle erstellt, das beide Syntaxen mit Browser-Prefixes zeigt.

Weiteres Styling

Apple setzt beim Design aktuell noch auf PNG-Grafiken. Allerdings kann man das Styling durchaus auch mit CSS umsetzen:

Zunächst definiert man eine einfache Hintergrund-Farbe sowie den Rahmen:

nav {
    background: #777;
    border: 1px solid #707070;
    border-bottom-color: #444;
}

Zusätzlich kreieren wir für jedes Listen-Element sowie das Formular den “glossy look” mit box-shadow:

li a {
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.2);
}

form {
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.2);
}

Beim Hovern eines Links soll der entsprechend Link etwas dunkler wirken:

li a:hover {
    background: #444;
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.05);
}

Nun haben wir also die grundsätzlichen Styles definiert und können zusätzlich ein paar Feinheiten hinzufügen, um die Navigation generell zu stylen und der von Apple noch ähnlicher zu machen.

Daraus resultiert dann dieses jsFiddle mit allen Styles.

Fazit

Apple kann an einigen Stellen sicherlich noch nachbessern, was die Navigation anbelangt. Man kann eventuell auf die ein oder andere Grafik verzichten und stattdessen CSS verwenden.

Dennoch denke ich, dass Flexbox noch nicht komplett fertig entwickelt ist, was man durchaus auch an den kürzlichen Änderungen in der Spezifikation sieht. CSS3 ist eben noch kein Standard und kann sich immer noch verändern, wenn die Editoren feststellen, dass Begrifflichkeit vermeintlich uneindeutig gewählt sind oder einfach die Funktionalität noch nicht intuitiv genug ist.

Wer Flexbox einsetzt, muss sich darüber im Klaren sein, dass die Ausgabe noch nicht bei allen Browsern die Gleiche ist und daher auf einen Polyfill zurück greifen.

Eventuell kann man das Flexible Box Model in anderen Bereichen, die nicht so stark an ein einheitliches Erscheinungsbild gebunden sind, wie die Navigation, aber bereits effizienter einsetzen – beispielsweise im Fließtext.

Auf Verbesserungsvorschläge bin ich gespannt. Schreibt eure Meinung gerne in die Kommentare oder schickt mir eine E-Mail. Wenn ihr denkt, dass die Technik noch viel zu “frisch” und unausgereift ist, freue ich mich auf eure Begründungen.

CSS3 Adventskalender 2011 – Tag 10

Sven Wolfermann — Sat, 10 Dec 2011 21:22:12 +0000

…im Webstandard Blog zum Thema “CSS3 Text-Shadow erzeugt Blur-Effekt“

CSS3 transitions to go – CSS3 Adventskalender Tag 9

Sven Wolfermann — Fri, 09 Dec 2011 07:39:06 +0000

Transitions ist auch heute wieder Thema im CSS3 Adventskalender. Am Tag 4 zeigte Heiko im Webstandard-Blog am Beispiel eines Call-to-Action Button was man mit Transion und Transform mit CSS3 für Effekte erziehlen kann. Seit der Einführung von -moz-transition im Firefox 4 konnten Transitions endlich mehr verwendet werden, da der Browsermarkanteil der unterstützenden Browser enorm gestiegen ist. Auf die detailierte Funktionweise möchte ich heute nicht weiter eingehn, das war ja schon Thema im letzten Jahr.

Vielmehr gibt es heut ein paar Snippets um :hover-Transitions auf Bildern zu animieren. Doch nur nochmal zur Erinnerung, transitions können auch auf andere dynamische Pseudoklassen wie :active, :focus, :target, :disabled, etc., aber auch auf @media-Queries angewendet werden. Schaut durch die Demo – durch CSS3 werden nun einige jQuery Animation überflüssig.

image transition Demo – auf das Bild klicken

CSS-Datei aus der Demo zum Download

Tools:

Ceaser – CSS Easing Animation Tool (matthewlein.com/ceaser/)

cubic-bezier.com (cubic-bezier.com)

Link Tipps:

CSS Transitions 101 (www.webdesignerdepot.com/2010/01/css-transitions-101/)

Let the Web move you — CSS3 Animations and Transitions (www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/)

Introduction to CSS3 Transitions (via @Flocke)

Browser-Support

Alle Browser verwenden noch die jeweiligen Vendor-Prefixe, z.B. -moz-transition. Der Internet Explorer unterstütz CSS3 transitions ab IE10.

CSS3 Adventskalender 2011 – Tag 8

Sven Wolfermann — Thu, 08 Dec 2011 08:09:39 +0000

…im Webstandard Blog zum Thema “CSS Media Queries – Screen Size Icons” – ein Gastartikel von David Hellmann (www.davidhellmann.com)

border-image – CSS3 Adventskalender Tag 7

Sven Wolfermann — Wed, 07 Dec 2011 09:04:08 +0000

Heute im CSS3 Adventskalender eine kleines Tutorial, zum Thema “border-image“. Responsive Design ist ja in aller Munde und auch in allen Adventskalendern dieses Jahr. Die Eigenschaft border-image ist dem einen oder anderen Webworker nicht neu, aber im Zusammenhang mit Responsive Images gewinnt es sicherlich mehr an Bedeutung. Die Möglichkeit, dass sich die Content-Box, das Bild und das Border-Image anpassen ist mit CSS3 in modernen Browsern möglich.

Ich möchte auch nicht zu sehr ins Detail gehen, das haben andere Tutorials bereits sehr gut gemacht.

Das W3C beschreibt es ebenfalls sehr gut und liefert auch ein gutes Beispiel für die Verwendung von border-image.

border-image: url(border-image.jpg) 124 repeat;

Zusammenfassen kann man die Shorthand-Notation in der Form:

border-image: uri top right bottom left x_repeat y_repeat

und man kann optinal auch die border-width in die Notation aufnehmen:

border-image: uri top right bottom left / border x_repeat y_repeat

Die Trennung zwischen Slice-Wert und Border-Width erfolgt durch ein / (Slash). Die border-width kann natürlich auch vier unterschiedliche Werte annehmen für jede Seite.

Ein einfaches Beispiel

Einen einfachen weihnachtlichen Rahmen mit Fireworks erstellt und eingebunden:

.xmas {
	-webkit-border-image: url("border-image-xmas.png") 14 repeat;
	   -moz-border-image: url("border-image-xmas.png") 14 repeat;
	     -o-border-image: url("border-image-xmas.png") 14 repeat;
	        border-image: url("border-image-xmas.png") 14 repeat;
}

Der Browser-Support ist für moderne Browser gewohnt gut. Leider unterstützt der Internet Explorer in keiner Version border-image und es ist aktuell auch nicht für IE10 geplant. Deshalb sollte man (wenn man einen visuellen Rahmen hinzufügen müsste) für die Internet Explorer ein Fallback hinzufügen.

Der JSFiddle-Code:

.box {
    width: 150px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    float: left;
    /* IE Fallback */
    border: 7px double green;
}
.xmas {
    -webkit-border-image: url("border-image-xmas.png") 14 repeat;
       -moz-border-image: url("border-image-xmas.png") 14 repeat;
         -o-border-image: url("border-image-xmas.png") 14 repeat;
            border-image: url("border-image-xmas.png") 14 repeat;

    border-width: 14px;
}

Link-Tipps

border-image Demo
border-image.com – test und play around

Browser-Support

Wie schon erwähnt kann der Internet Explorer bis zur aktuellen IE10 Preview kein border-image.

In Webkit-Browsern kann zusätzlich auch eine Gradient-Funktion (linear-gradient) als Image verwendet werden (Safari Referenz). Ein JS-Fiddle dazu von Divya Manian:

Geht das auch im Firefox oder Opera? Hat das schon mal jemand gemacht? Dann könnte man sich beim Tutorial zu gradient-border ein paar Zeilen sparen.

CSS3 Adventskalender 2011 – Tag 6

Sven Wolfermann — Tue, 06 Dec 2011 08:02:11 +0000

…im Webstandard Blog zum Thema “CSS3-Keyframe-Animationen” – ein Gastartikel von Jonas Hellwig (www.kulturbanause.de)

Schönere CSS3 Transforms – CSS3 Adventskalender Tag 5

Christian (derSchepp) Schaefer — Mon, 05 Dec 2011 08:07:35 +0000

Dank der vollständigen Unterstützung von CSS3 Transforms in den neuen Browsern und des Matrix-Filters in den älteren IE ist es uns heutzutage möglich, Elemente auf einer Seite in allen Browsern kreuz und quer rotiert darzustellen, und zwar eben ohne den Rückgriff auf vorberechnete rotierte Grafiken. Damit eröffnet sich eine ganze Palette neuer Gestaltungsmöglichkeiten, wie zum Beispiel eine dynamisch erzeugte Bildergalerie, die einer Gruppe auf einem Tisch verstreuter Polaroids ähnelt:

Es lässt aber genauso eine Google Maps Karte rotiert einbinden, wie es die Kollegen von vortrieb.net vormachen:

So weit, so gut. CSS3 Transforms, wie auch der IE Matrix Filter haben in der Praxis allerdings auch Schattenseiten: Verschiedene Browser haben nämlich starke Probleme bei der Schrift- und Kantenglättung rotierter Elemente. Vereinzelt sieht das Ergebnis so übel aus, dass man geneigt ist, ganz auf das Rotieren per CSS zu verzichten.

Ein erstes Negativbeispiel ist das Erscheinungsbild von rotierten Bildern in iOS:

Die Kanten des Bildes sind sichtbar stufig und sägen damit stark am visuellen Wow-Effekt.

Ein probates Gegenmittel für iOS hat Thierry Koblentz Mitte des Jahres gefunden, nämlich das zu rotierende Bild nicht als Element, sondern als (Inline-)Block-Element mit entsprechendem Hintergrundbild auszuführen, um dieses dann mit der Anweisung background-clip: padding-box; rundherum glatt zu abschneiden. So sieht der Code für unser Kätzchen aus:

div.kitten {
	width: 200px;
	height: 300px;
	background: url('http://placekitten.com/200/300');

	-webkit-background-clip: padding-box; /* IOS fix */
	background-clip: padding-box; /* IOS fix */

	/* Damit das Element sich wie ein Bild verhält,
	muss display: inline-block gesetzt werden */
	display: inline-block;

	/* Inline-Block für IE6/7 über display: inline + zoom: 1
	per Stern-Hack nur sichtbar für IE6/7 */
	*display: inline;

	/* 6° Rotation via CSS3 Transforms */
	-webkit-transform: rotate(6deg); /* Webkit */
	-moz-transform: rotate(6deg); /* Mozilla Firefox */
	-o-transform: rotate(6deg); /* Opera */
	-ms-transform: rotate(6deg); /* IE9+ */
	transform: rotate(6deg); /* W3C */

	/* 6° Rotation via IE Matrix Filter, IE6-9 */
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9945218953682733,
            M12=-0.10452846326765346,
            M21=0.10452846326765346,
            M22=0.9945218953682733, sizingMethod='auto expand');

	/* Ohne zoom gehen Filter und Inline-Block nicht in IE6/7 */
	zoom: 1;
}

div.kitten:nth-of-type(1n) {
	/* Deaktivieren des Filters in IE9,
	der ja CSS Transforms beherrscht */
	filter: none;
}

Damit wäre in iOS alles glattgerechnet, aber nun hat der Chrome-Browser Glättungsprobleme, die er mit dem -Element so nicht hatte:

Im Chrome-Browser hilft jedoch ein Trick, der bei rotierten Elementen unter WebKit fast immer greift: Man zwingt den Browser dazu, das Objekt mit Hardware-Beschleunigung zu zeichnen. Dankenswerterweise ist es dann so, dass die Grafikkarte automatisch alles zu Zeichenende glattrechnet. Wie aktiviert man die Hardware-Beschleunigung? Indem man zusätzlich eine CSS 3D-Transformations-Anweisung einbaut, die aber eigentlich nichts transformiert sondern nur so tut, zum Beispiel ein translate3d mit Null-Werten:

-webkit-transform: translate3d(0,0,0) rotate(6deg);

Das Endresultat (live):

Code: http://jsfiddle.net/maddesigns/xgQ6M/

Rotierter Text mit CSS3 glätten

Die nächste problematische Situation gibt es, wenn Sie Elemente mit CSS3-Farbverläufen und Rand, oder Elemente mit Text darin rotieren. Verschiedene Konstellationen machen da verschiedene Fehler:

Die WebKit-Browser unter Windows zum Beispiel ziehen einigermaßen saubere Kanten, verhunzen den Text jedoch, weil sie noch auf die ältere Cleartype-Schriftglättung zurückgreifen, die dem Szenario nicht gewachsen ist. Firefox hingegen hat mit der Schrift null Probleme, weil er das modernere DirectWrite nutzt (in Vista und Windows 7). Dafür reisst er jedoch Lücken zwischen dem CSS3-Farbverlauf und dem ebenfalls per CSS gesetzten Border auf. Safari unter OSX hat aufgrund der sehr guten Schriftglättung von Quarz kein Problem mit der Schrift, aber auch dort könnten die Kanten wie unter Windows noch eine Spur schöner sein.

Wieder können wir für die WebKit-Browser den Joker “CSS 3D-Transformation” ziehen, der dafür sorgt, dass die Kanten glatter werden.

-webkit-transform: translate3d(0,0,0) rotate(6deg);

Damit die Schrift unter Cleartype etwas weniger bröckelig wirkt, wenden wir ein minimales Text-Glühen in der Farbe des Textes an:

text-shadow: 0 0 1px rgba(255,255,255,0.25);

Nun bleibt noch, in Firefox die Lücken zwischen Hintergrundverlauf und Rahmen zu beheben. Das bewerkstelligen wir auf ganz ungewöhnliche Art und Weise, nämlich dadurch, dass wir den Farbverlauf durch eine Kombination von Hintergrundfarbe und einem einseitig innen gerichteten Box-Shadow nachbauen:

/* untere Farbverlaufsfarbe */
background: #a40518;

/* innerer Schatten, der von oben weich hineinverläuft

box-shadow: inset 0 [element Höhe] [element Höhe]
([element Höhe] * -0.5) [obere Farbverlaufsfarbe] */    

-webkit-box-shadow: inset 0 34px 34px -17px #dd001a;
-moz-box-shadow: inset 0 34px 34px -17px #dd001a;
-o-box-shadow: inset 0 34px 34px -17px #dd001a;
box-shadow: inset 0 34px 34px -17px #dd001a;

Das visuelle Ergebnis ist letztendlich dasselbe, aber Firefox lässt nun keine Lücken mehr. Ein weiterer Vorteil dieses “Farbverlaufs” ist der, dass auch IE9 ihn darstellen kann, wohingegen er ja sonst keine echten Farbverläufe beherrscht. Hier das Live-Ergebnis:

Code: http://jsfiddle.net/Schepp/TsuDf/

Die älteren IEs haben hier übrigens null Probleme. Wo sie jedoch Probleme haben ist wenn man rotierte Texte transparent vor einem Hintergrund platziert:

Die alten IEs reagieren hier mit überfetteter Schrift, da es ihnen an “Verfügungsmasse” zum Glätten fehlt, sprich an Hintergrundfarbe im rotierten Element selbst, mit der sie die Textfarbe weich überblenden können. Chrome unter Windows hat dasselbe Problem wie eben schon einmal, nämlich das Cleartype-Problem. Und wieder juckt es Firefox nicht, denn der nutzt DirectWrite.

Chromes Problem lösen wir genauso schnell wie vorhin, indem wir einen minimalen Textschatten hinzufügen, der die Schrift weichzeichnet:

text-shadow: 0 0 1px rgba(128,128,128,0.1);

Dem IE können wir auch helfen. Und zwar müssen wir dem rotierten Element zunächst einmal eine Hintergrundfarbe geben, damit er die Schrift weich überblenden kann. Idealerweise nehmen wir dafür eine Farbe, die ungefähr dem Farbton des eigentlich geplanten Hintergrunds entspricht, hier also sandfarben:

*background: #c49e6d;

Das *-Sternchen sorgt dafür, dass nur IE6 und 7 diese Anweisung sehen. Und jetzt kommt’s: Nun hängen wir vor dem Matrix-Filter zusätzlich einen Chroma-Filter ein:

filter:
	progid:DXImageTransform.Microsoft.Chroma(color="#c49e6d"),
	progid:DXImageTransform.Microsoft.Matrix(M11=0.99452190,
				M12=-0.10452846,
				M21=0.10452846,
				M22=0.99452190,
				sizingMethod='auto expand');

Mehrere Filter lassen sich problemlos kommagetrennt in eine filter-Eigenschaft stecken. Der Chroma-Filter sorgt dafür, dass alle Bereiche eines Elements in einer definierten Farbe ausgestanzt und damit durchsichtig werden. Wir konfigurieren ihn mit der Farbe, die wir als (Hilfs-)Hintergrund genutzt haben, also #c49e6d, und machen die Bereiche um unseren fertig geglätteten Text dadurch wieder transparent, ganz so wie wir es ursprünglich wollten. Danach erst darf der Matrix-Filter seines Amtes walten und das Element rotieren. Das Live-Ergebnis:

Code: http://jsfiddle.net/Schepp/NDrCU/

Im Großen und Ganzen sollte man sich also nicht entmutigen lassen, sondern sich mit diesen Tricks gegen Browserbugs wehren. Gleichzeitig schadet es natürlich nicht, wenn wir weiter darauf hin arbeiten, die alten IEs loszuwerden, und den WebKit-Machern so lange auf den Keks gehen, bis sie ihren Browser mal auf Vordermann gebracht haben.

Dies ist ein Gastartikel von Christian ”Schepp” Schaefer im CSS3-Adventskalender. Christian ist freiberuflicher Webentwickler aus Düsseldorf. Er ist Autor der Ladezeitenbeschleuniger-Bibliothek CSS-JS-Booster sowie Moderator des wöchentlich erscheinenden Working Draft Podcasts and er verfolgt Eure Tweets mit seinem Account derSchepp.

CSS3 Adventskalender Gewinnspiel

In Woche 2 im CSS3 Adventskalender Gewinnspiel verlosen wir das Video-Training “Webseiten programmieren und gestalten” von Christian ”Schepp” Schaefer – Hier ein kleiner Einblick:

Um das Video-Training zu gewinnen gebt einfach ein Kommentar ab. Teilnahmeschluß ist der 11.12.2010 um 24 Uhr. Der Rechtsweg ist ausgeschlossen. Die Auslosung erfolgt unter Zuhilfenahme von random.org.

CSS3 Adventskalender 2011 – Tag 4

Sven Wolfermann — Sun, 04 Dec 2011 10:31:02 +0000

…im Webstandard Blog zum Thema “CSS Transform und Transition am Beispiel eines Call-to-Action-Elementes”

”CSS3 & Responsive Web” – CSS3 Adventskalender Tag 3

Sven Wolfermann — Sat, 03 Dec 2011 08:03:59 +0000

Heute gibt es das 3. Türchen im CSS3 Adventskalender etwas später. Ich bin heute beim Multimediatreff in Köln eingeladen um über CSS3 & Responsive Web zu sprechen. Die Slides vom Vortrag werden nach dem Vortrag hier gegen 14 Uhr veröffentlicht. Bis dahin kann man den Multimediatreff auch im Live-Stream verfolgen. Hochkarätige Vorträge sind zu erwarten, u.a. zum Thema HTML5 von Patrick H. Laucke (Opera) sowie Peter Kröner (@sir_pepe) oder zum Thema “JavaScript: Von einfachen Scripten zu komplexen Anwendungen” von Mathias Schäfer (@molily).

Die Slides

Das Video vom Vortrag

CSS3 Adventskalender 2011 – Tag 2

Sven Wolfermann — Fri, 02 Dec 2011 11:06:30 +0000

…im Webstandard Blog zum Thema “CSS Regions – Bereiche zur Aufnahme von Inhalten definieren”

CSS3 Adventskalender 2011

Gradient Border – CSS3 Adventskalender Tag 1

Sven Wolfermann — Thu, 01 Dec 2011 07:00:35 +0000

Tag 1 im CSS3 Advancedkalender und wir gehen gleich ins Eingemachte!

In der CSS Text Level 3 Spezifikation gibt es seit einiger Zeit die Eigenschaft text-decoration-color mit der man die Text-(Link-)Unterlinie andersfarbig gestalten kann. Bisher wird diese Eigenschaft laut MDN nur vom Firefox ab der Version 6 mit dem Prefix -moz- unterstützt. Zukünftig soll es ähnlich wie auch für border oder outline möglich sein für text-decoration Shorthand-Values wie folgt anzugeben: text-decoration: || || || blink anzugeben. Das ist ein Vorteil, wenn weitere Browser das unterstützen. Auf perun.net gibt es bereits einen umfassenden Artikel über CSS3 text-decoration.

…was bisher geschah

Viele Webentwickler setzen allerdings auf die Variante, dass Sie nicht die Text-(Link-)Unterlinie verwenden, sondern ein border-bottom vergeben.

a {
	text-decoration: none;
	border-bottom: 1px solid red;
}

Das hat den Vorteil, dass Zeichenunterlängen nicht durchschnitten werden. Der Border sitzt tiefer, direkt unterm padding bei Blockelementen, unter der line-height-Höhe bei Inline-Elementen. Hier kann man nun auch mit unterschiedlichen Farben variieren, z.B.

a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid red;
}

Was allerdings nicht funktioniert, sind Farbverläufe. Man kann lediglich über border-style das Aussehen variieren. Farbverläufe können der Eigenschaft border-color nicht zugewiesen werden.

Generierung von Inhalt über CSS

Man kann sich allerdings mit der Generierung von “Inhalt” über CSS behelfen. In einigen Tutorials aus dem letzten Jahr haben wir schon mit der Generierung von Inhalten über “content” gearbeitet. Das machen wir uns auch beim Gradient-Border zu nutze. Wir generieren über ein :after Pseudo-Element leeren Inhalt.

a:after {
	content: '';
	display: block;
	background-color: red
}

Solange wir unseren Inhalt keine Höhe und Breite geben, sehen wir auch keinen Inhalt (hier also keine Hintergrundfarbe).

a:after {
	...

	width: 100%;
	height: 1px;
}

Jetzt ist unser 1px großer Inhaltsblock nach dem Link hinzugefügt worden und bewirkt, dass der Text getrennt wird (display: block). Die Linie sitz im Moment auf der gleichen Höhe wie unser 1px Border, da der Beginn von :after gleich border-bottom ist. Um nun den gleichen Effekt wie mit border-bottom nachzustellen, muss man den Block-Formatting-Context verändern, wir fügen Positioning hinzu.

/* Elternelement */
a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid red;
	position: relative;
}

Die Anker-Tags werden nun relativ zum Textfluss positioniert, also unverändert. Trotzdem erzeugen wir dadurch für alle Kindelemente (also auch für :before und :after) einen neuen Kontext. Alle Elemente, die nun über position: absolute positioniert werden, orientieren sich am nächsthöheren Elternelement, das relativ positioniert ist. Klingt komisch, ist aber so

a:after {
	...

	position: absolute;
	bottom: 0;
	left: 0;
}

Unsere blaue Linie sitz nun am untersten Ende der Inhalts-Box, ist also 1px über border-bottom gerutsch. Somit müsste die generierte Linie noch um -1px nach unten verschoben werden um genau auf der border-bottom zu sitzen. 80% der Arbeit ist getan, jetzt nur noch den Verlauf über linear-gradient hinzufügen und border-bottom im entfernen.

a:after {
	...

	background: -webkit-gradient(linear, left top, right top, from(red), to(blue));
	background: -webkit-linear-gradient(left, red, blue);
	background: -moz-linear-gradient(left, red, blue);
	background: -ms-linear-gradient(left, red, blue);
	background: -o-linear-gradient(left, red, blue);
	background: linear-gradient(to right, red, blue);
}

Ein Problem zeigt sich natürlich mit Inline-Elementen die einen Umbruch haben, hier funktioniert unsere Lösung nicht. Deshalb ist die Technik grundsätzlich nur bei Block-Elementen zu empfehlen. Falls man diese Technik doch auf Inline Elementen (z.B. -Links) anwenden möchte, empfiehlt sich hier die white-space Eigenschaft auf nowrap zu setzen. Falls der Link über eine Zeile gehen würde, würde der “Inline-Block” komplett auf die neue Zeile rutschen.

Nun kann man natürlich die unzähligen Möglichkeiten von linear-gradient ausspielen, z.B. Stop-Punkte oder mehrere Farbwerte einfügen, sowie mit Höhe und Breite varrieren.

vollständiger Code

a {
    color: #000;
    text-decoration: none;
    /* border-bottom: 1px solid #f00; */
    position: relative;
    white-space: nowrap;
}
a:after {
    content: '';
    display: block;
    background-color: red;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;

    background: -webkit-gradient(linear, left top, right top, from(blue), to(red));
    background: -webkit-linear-gradient(left, blue, red);
    background: -moz-linear-gradient(left, blue, red);
    background: -ms-linear-gradient(left, blue, red);
    background: -o-linear-gradient(left, blue, red);
    background: linear-gradient(to right, blue, red);
}

JSFiddle-Demo

Browser-Support

Da der Internet Explorer leider in keiner aktuellen Version Hintergrundverläufe unterstützt, kann man die Technik nur in modernen Browsern verwenden. Der IE10 wird linear-gradient über den Prefix -ms- unterstützen, bis dahin zeigt er in den Versionen IE8 und IE9 die Fallbackfarbe an.

Internet Explorer <= Version 7 können keinen Inhalt via content generieren. Für diese Browser müsste man also Hintergrundbilder verwenden, die natürlich nicht flexibel sind, was bedeutet man kann diese Technik ausschließlich auf Blockelemente mit fester Breite anwenden.

Link-Tipps

Ein Beispiel ist die Generierung von geometrischen Formen wie z.B. Dreiecke oder Sterne, siehe Shapes Of CSS

linear-gradient (Verlauf) – CSS3 Adventskalender 2010 - Tag 3

CSS3 Adventskalender Gewinnspiel

Wir haben vom Galileo-Verlag einige Bücher für unsere große Weihnachtsverlosung erhalten und zusätzlich ein paar Video-Trainings. In Woche 1 verlosen wir die DVD "CSS in der Praxis" - Hier ein kleiner Einblick:

Um das Video-Training zu gewinnen gebt einfach ein Kommentar ab. Nutzt Ihr mittlerweile CSS3, habt ihr dieses Jahr Projekte mit CSS3 umgesetzt? Teilnahmeschluß ist der 04.12.2010 um 24 Uhr. Der Rechtsweg ist ausgeschlossen. Die Auslosung erfolgt unter Zuhilfenahme von random.org.

CSS3 Adventskalender 2011

Sven Wolfermann — Fri, 25 Nov 2011 07:45:53 +0000

Das gute Feedback zum CSS3 Adventskalender 2010 hat uns angespornt auch in diesem Jahr wieder einen CSS3 Adventskalender zu betreiben. Wie letztes Jahr werden im Webstandard-Blog und hier abwechselnd jeden Tag ein Artikel rund ums Thema CSS3 und moderne Webentwicklung veröffentlicht. Ab dem 01. Dezember 2011 heißt es also CSS3 Advancedkalender! Jetzt schlagt keine Purzelbäume, wir werden nicht die neusten Spezifikation des CSS Working Group durchgehen, sondern zeigen alltagsrelevante Umsetzungen mit CSS3. Seid gespannt!

Gastautoren

Zudem konnten wir dieses Jahr Gastautoren gewinnen, die Beiträge zum CSS3 Advancedskalender beisteuern werden. Einen großen Dank an alle Gastautoren vorweg, da alle voll in Projekten stecken und nebenbei einen interessanten Artikel für uns schreiben. Hier im Blog werden Christian Schäfer (@derSchepp) und Hans Christian Reinl (@drublic) Artikel zum Thema CSS3 beisteuern. Im Webstandards-Blog gibt es Gastartikel von David Hellmann (@davidhellmann) und Jonas Hellwig (@_kulturbanause) – darüber freuen wir uns sehr!

Weihnachtsgeschenke für alle!

Als großes Weihnachtsgeschenk haben wir für unsere Leser vom Galileo Verlag und O’Reilly einige Bücher sowie Video Tutorials von Galileo zur Verlosung erhalten. Der Gesamtwert liegt bei über 450,- Euro! Von den insgesamt 9 Büchern und 4 Video-Trainings werden wir während der ganzen Adventszeit schon einige Exemplare verlosen und dann am 24.12.11 gibt es die große Weihnachtsverlosung.

Auf den üblichen Kanälen (Twitter, Google+, Facebook, RSS) werden wir euch also ab nächster Woche mit interessanten Themen zu CSS3 und Webentwicklung informieren. Stay tuned! hohoho!

HTML E-Mail Newsletter cross-client-konform erstellen

Sven Wolfermann — Tue, 01 Nov 2011 10:00:23 +0000

Mein Artikel aus dem Webstandards-Magazin Ausgabe 9 zum Thema HTML E-Mail Newsletter:

Schöner mailen

HTML-Newsletter sind und bleiben ein beliebtes Kommunikationsmittel, um Informationen zu transportieren. Das Marketing liebt sie, weil sich Produktbilder oder visuelle Grafiken in die Werbebotschaft einbinden lassen. Standardkonforme Newsletter-Vorlagen für alle Mailprogramme zu generieren, ist allerdings nicht die einfachste Aufgabe. Wir haben einige Tipps und Tricks zusammengefasst und zeigen Lösungswege auf.

Emotionen und Handlungsaktionen lassen sich mit grafischen HTML-Newslettern gezielt wecken. Im Gegensatz zu Nur-Text-Newslettern können Sie in HTML die Bedeutung mit Überschriftenhierarchien oder die Bedeutung mit unterschiedlichen Schriftfarben hervorheben. Ein Firmenlogo können Sie einbinden, um Wiedererkennbarkeit (Branding) und demzufolge Vertrauen zu schaffen. Und das Beste: Alle Mail-Clients unterstützen inzwischen HTML.

Großes Angebot: Zahlreiche Mail-Clients wetteifern um die Gunst der Kunden.

Zu schön, um wahr zu sein …

Wenn Sie sich bereits mit dem Thema beschäftigt haben, wissen Sie, dass besagte Mail-Clients zwar HTML verstehen, jedoch leider weitab von modernen Webstandards. Eine Vielzahl der Programme unterstützt nur rudimentäre CSS-Eigenschaften und auch nur dann, wenn diese als Inline-Styles definiert wurden. Das Testen eines HTML-Newsletters auf Kompatibilität in unterschiedlichen Clients gestaltet sich erheblich störrischer als der Cross-Browser-Test von Webseiten. Hinzu kommt eine weitere Schwierigkeit, denn HTML-Newsletter landen allzu gerne im Spamfilter. Diese Probleme gilt es zu bewältigen. Das E-Mail Standards Project hat es sich zur Aufgabe gemacht, zusammen mit Entwicklern von Mailprogrammen und Designern einen Standard für HTML-Newsletter zu finden. Die zugehörige Webseite http://www.email-standards.org/ stellt eine Dokumentation bekannter Bugs und Missstände in den jeweiligen Clients zur Verfügung. Bekannt wurde das Projekt vor allem durch die Twitter-Kampagne „Fix Outlook“, bei der Nutzer mit einem Tweet ihre Unterstützung signalisieren konnten. Abgesehen vom Medienecho sollten vor allem die Twitter-Avatare aller Unterstützer auf der Webseite des Projektes Microsoft auf die Problematik und die Dringlichkeit einer Lösung hinweisen.

HTML-Mails entwickeln: Coding à la 1999

Um eine übereinstimmende Darstellung in den verschiedenen Clients zu gewährleisten, muss gegenwärtig noch auf veraltete Techniken zurückgegriffen werden. Als Tenor gilt dabei „Code like 1999“ – verschachtelte Tabellen, Font-Tags und Inline-CSS, zudem keine CSS-Positioning über floats. Die jüngeren Webworker allerdings wissen (zum Glück) nicht mehr, wie unsereins früher Designs auf Basis von Layouttabellen erstellt hat.


  
    
      
        
          
            ... das ist der HTML-Inhalt ...

Medieninhalte können ebenfalls nicht wiedergegeben werden, also kein Video, kein Audio und ebenfalls kein Flash. Leider können Desktop-Mail-Clients keine Formulare und aus Sicherheitsgründen auch kein

maddesigns

Sass & Compass Introduction

IE9 border-radius right-to-left (direction: rtl) Bug

Livereload – ein Browser Refresh Tool

Das große Weihnachtsgewinnspiel – Tag 24 im CSS3 Adventskalender 2011

Was man muss tun, um gewinnen zu können?!

Box-Sizing – CSS3 Adventskalender Tag 23

Eigenschaftswerte

Browsersupport

Fazit

Weiterführende Informationen

CSS3 Adventskalender 2011 – Tag 22

Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21

1. Die Textfunktionen der Canvas

Verläufe

Bitmapfüllungen

Schatten

Canvas mit CSS verbinden:

Demo

CSS3 Adventskalender 2011 – Tag 20

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19

Filter über SVG

CSS3 Adventskalender 2011 – Tag 18

Compass & SASS – CSS3 Adventskalender Tag 17

Leichter Einstieg

Elternselektor

Compass – Multifunktions-Tool

CSS3 Mixins

If-Bedingungen in CSS

Plugins

Fazit

CSS3 Adventskalender 2011 – Tag 16

IE9 CSS3 Support – CSS3 Adventskalender Tag 15

Übersicht – CSS3-Features IE9

Darfs ein wenig mehr sein?

Link-Tipps

Fazit

CSS3 Adventskalender 2011 – Tag 14

Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13

Als erstes erstellen wir ein kleines HTML5-Formular

War das Tutorial nützlich? *

Spritegrafik hinzufügen

Demo

Browser-Support

CSS3 Adventskalender 2011 – Tag 12

Apple’s Navigation mit Flexbox – CSS3 Adventskalender Tag 11

Apple diktiert Webdesign

TL;DR

Markup

HTML

Semantik der Navigation

CSS

Flexbox

Neue Flexbox-Syntax

Das Suchfeld

Weiteres Styling

Fazit

CSS3 Adventskalender 2011 – Tag 10

CSS3 transitions to go – CSS3 Adventskalender Tag 9

image transition Demo – auf das Bild klicken

Tools:

Link Tipps:

Browser-Support

CSS3 Adventskalender 2011 – Tag 8

border-image – CSS3 Adventskalender Tag 7

Ein einfaches Beispiel

Link-Tipps

Browser-Support

CSS3 Adventskalender 2011 – Tag 6

Schönere CSS3 Transforms – CSS3 Adventskalender Tag 5

Rotierter Text mit CSS3 glätten

CSS3 Adventskalender Gewinnspiel

CSS3 Adventskalender 2011 – Tag 4

”CSS3 & Responsive Web” – CSS3 Adventskalender Tag 3

Die Slides

Das Video vom Vortrag

CSS3 Adventskalender 2011 – Tag 2

Gradient Border – CSS3 Adventskalender Tag 1

…was bisher geschah

Generierung von Inhalt über CSS

War das Tutorial nützlich? ^*