maddesigns » Sven Wolfermann

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!

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“

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“

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“

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)

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 » Sven Wolfermann

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?!

CSS3 Adventskalender 2011 – Tag 22

CSS3 Adventskalender 2011 – Tag 20

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

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

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

vollständiger Code

JSFiddle-Demo

Browser-Support

Link-Tipps

CSS3 Adventskalender Gewinnspiel

CSS3 Adventskalender 2011

Gastautoren

Weihnachtsgeschenke für alle!

HTML E-Mail Newsletter cross-client-konform erstellen

Schöner mailen

Zu schön, um wahr zu sein …

HTML-Mails entwickeln: Coding à la 1999

War das Tutorial nützlich? ^*