So einfach kannst du die CSS Grundlagen erlernen

CSS Grid Garden: Die Karotten wässern

CSS Grid Garden ist ein Onlinespiel aus der digitalen Feder von Thomas Park. Park ist in Entwicklerkreisen nicht zuletzt durch sein Spiel Flexbox Froggy bekannt. Mittels des letzterem brachte er uns die Grundkenntnisse der Verwendung von CSS Flexbox nahe. In „CSS Grid Garden” befasst sich Park mit dem Eigenschaftenpaket des CSS Grid.

Natürlich darf man nicht erwarten, der CSS Grid Zenmeister zu sein, bloß weil man unfallfrei durch das Spiel gekommen bist. Aber für den Einstieg ist der Grid Garden bestens geeignet. Man wird gar nicht merken, dass man etwas lernst.

Park leitet dich durch 28 Level, in denen man auf unterschiedliche Weise Gartenpflege betreiben musst. Zunächst geht es darum, einzelne Pflanzen, die im Grid angeordnet sind, gezielt mit Wasser, welches sich an einer anderen Stelle im Grid befindet zu versorgen.

Hierzu schreibt man passende CSS-Anweisungen, die dann hoffentlich das gewünschte Ergebnis zeitigen. Park nimmt dich dabei an die Hand und steigert den Schwierigkeitsgrad nur ganz behutsam. Das Ergebnis des von Ihnen eingetippten CSS sieht man direkt im rechts angeordneten Grid. Das Prinzip entspricht exakt jenem des Vorgängers „Flexbox Froggy”.

Polyglott und quelloffen

„CSS Grid Garden” steht in englischer, spanischer, polnischer, russischer, französischer und portugiesischer Sprache zur Verfügung. Park stellt das Spiel via Github unter der MIT-Lizenz öffentlich bereit, so dass man unkompliziert etwa weitere Übersetzungen hinzufügen könntest. Park selber arbeitet stets an neuen Leveln. Immerhin fehlen dem Spiel bisher noch einige Aspekte des CSS Grid-Konzepts.

In diesem Beitrag stellt Park seinen Ansatz ausführlicher vor.

Wenn man sich bislang noch nicht mit CSS Grid auseinandergesetzt hat, dann ist das Onlinespiel „CSS Grid Garden” der perfekte Einstieg. Dabei lernt man auch gleich die Unterschiede zu Flexbox richtig einschätzen. Gerade um diesen Punkt gibt es offenbar in Entwicklerkreisen noch einige Verwirrung.

Zu guter Letzt sei noch dieses Cheatsheet zu CSS Grid empfohlen. Viel Erfolg!

CSS-Background-Blends: Überblendungseffekte wie mit Photoshop

Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundbilder oder -farben einfach übereinander gelegt. Sind Transparenzen innerhalb der Hintergründe vorhanden, sorgen sie dafür, dass der darunter liegende Hintergrund hindurchscheint. Mit den neuen CSS3-Überblendungseffekten gibt es nun weitere Möglichkeiten, mehrere Hintergründe miteinander zu kombinieren.

Hintergründe anlegen und Effekt auswählen

Zunächst einmal müssen mehrere Hintergründe per „background“-Eigenschaft angelegt werden. Sollen mehrere Hintergrundgrafiken und beziehungsweise oder -farben verwendet werden, werden diese einfach per Komma voneinander getrennt hintereinander aufgelistet. Anschließend gibt man über die Eigenschaft „background-blend-mode“ die Art der Überblendung an.

body {  background: url("wolken.jpg"), url("burg.jpg");  background-blend-mode: multiplay;}

Original-Grafiken und per „multiply“ übereinander gelegte Grafiken
Im Beispiel werden zwei JPEG-Dateien als Hintergrundgrafiken verwendet. Da JPEG-Dateien keine Transparenz besitzen, wird ohne Überblendungeffekt nur die erste der beiden angegebenen Dateien angezeigt. Durch die Angabe der Eigenschaft „background-blend-mode“ mit dem Wert „multiply“ werden beide Grafiken miteinander multipliziert.

Überblendungseffekte wie in Photoshop

Neben dem „Multiplizieren“-Effekt gibt es weitere Überblendungseffekte. Sie alle erinnern an die Überblendungseffekte für Ebenen aus Photoshop. Das überrascht nicht, da Adobe an der Entwicklung dieser Effekte für CSS3 mitgewirkt hat. So lassen sich Hintergründe mit den Effekten „Weiches Licht“ („soft-light“) und „Hartes Licht“ („hard-light“), „Abdunkeln“ („darken“) und „Aufhellen“ („lighten“), „Negativ muliplizieren“ („screen“), „Ineinanderkopieren“ („overlay“), „Farbig abwedeln“ („color-dodge“) und „Farbig nachbelichten“ („color-burn“), „Differenz“ („difference“), „Ausschluss“ („esclusion“), „Farbwert“ („hue“), „Farbe“ („color“), „Sättigung“ („saturation“) und „Luminanz“ („luminosity“) anwenden.

Damit sind fast alle Überblendungseffekte aus Photoshop abgedeckt. Wer die CSS3-Effekte mit denen aus Photoshop im Einsatz miteinander vergleicht, wird exakte Übereinstimmungen feststellen.

Beim Einsatz von „background-blending-mode“ ist zu beachten, dass der Effekt sich immer auf alle Hintergründe auswirkt.

body {  background: url("wolken.jpg"), url("burg.jpg");  background-blend-mode: lighten;}

Original-Grafiken und per „lighten“ übereinander gelegte Grafiken
Im Beispiel wird der „Aufhellen“-Effekt auf beide JPEG-Grafiken angewendet. Dies führt dazu, dass der Hintergrund insgesamt nur weiß ist. Um den Effekt nur auf den ersten definierten Hintergrund anzuwenden, muss angegeben werden, dass der zweite Hintergrund ohne Effekt dargestellt werden soll.

body {  background: url("wolken.jpg"), url("burg.jpg");  background-blend-mode: lighten, normal;}

Im zweiten Beispiel wird für jeden der beiden Hintergründe ein eigener Effekt definiert, wobei der Wert „normal“ dafür sorgt, dass kein Überblendungseffekt angewendet wird. Es ist natürlich auch möglich, für jeden Hintergrund einen ganz anderen Effekt anzuwenden.

body {  background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg");  background-blend-mode: lighten, multiply, normal;}

Der letzte Hintergrund sollte jedoch immer auf „normal“ gesetzt sein, da kein weitere Hintergrund folgt, auf den der Überblendungseffekt dafür angewendet werden könnte. Für einfache Hintergründe ist es in der Regel nicht nötig, die Überblendungseffekte per CSS3 zu definieren, da sie sinnvoller direkt in Photoshop angelegt und die Grafiken entsprechend exportiert werden. Aber für animierte Übergänge („transition“-Eigenschaft) können damit schöne Effekte erzielt werden.

Ob nur Hintergrundgrafiken oder auch -farben verwendet werden, spielt keine Rolle. Jeder definierte Hintergrund wird als eine Ebene betrachtet, auf der ein Effekt angewendet wird. Auch CSS3-Verläufe werden berücksichtigt.

body {  background: url("wolken.jpg"), red;  background-blend-mode: lighten, normal;}

Browserunterstützung

Derzeit unterstützen Chrome ab Version 35, Firefox ab Version 30 und Opera ab Version 22 die Eigenschaft „background-blend-mode“. Dies sind die derzeit aktuellen Versionen der drei Browser. Für Safari ist eine Unterstützung ab Version 8 angekündigt.

CSS-Klassen sinnvoll benennen

Klar ist es klasse, dass man Klassen in CSS frei benennen kann. Aber mit großer Macht kommt große Verantwortung, um es mal mit Stan Lee zu sagen. Benennt man Klassen nun also so, dass man es klasse findet, könnte es sein, dass man die Klassen alsbald doch nicht mehr so klasse finden kann. Klar soweit?

Denn das grundlegende Prinzip der Anwendung von Stylesheets wird bisweilen falsch verstanden. Damit ist nicht die Definition der Klassen gemeint, sondern deren Benennung.

Sehen wir uns einen Auszug einer typischen CSS-Datei an:

h1.blau {   font-size: 18px;   color:blue;}

h1.rot {   font-size:18px;   color:red;} 

Hier werden zwei Varianten eines H1-Tags definiert. Die dazugehörige HTML-Datei könnte jetzt so aussehen:

<h1 class="blau">Erste Überschrift</h1>

<h1 class="rot">Noch eine Überschrift</h1> 

Fast alles in Ordnung, aber auch nur fast. Was passiert wenn der verantwortliche Designer einem sagt, dass die blauen Überschriften jetzt in Schwarz dargestellt werden sollen? Eigentlich ganz einfach: Man ändert einfach im Stylesheet die entsprechende Angabe wie folgt:

h1.blau {   font-size:18px;   color:black;} 

Diese Änderung genügt, damit alle Überschriften die Anfangs noch blau waren, nun schwarz dargestellt werden. Alle sind glücklich, nur man wahrscheinlich nicht. Denn die Bezeichnung der ersten H1-Klasse ist immer noch h1.blau. Man müsste, eigentlich sollte, aber an und für sich schon müsste, im Stylesheet und in allen HTML-Dateien die Bezeichnung ändern. Gerade bei vielen HTML-Dateien eine mühselige Angelegenheit und auch nicht im Sinne der Benutzung von Stylesheets, die ja schließlich Arbeit sparen sollen.

Was kann man also tun? Benenne die Klassen nicht nach ihrer Formatierung, sondern nach deren Sinn. Hier einige Beispiel für die richtige Anwendung:

h1.first {   font-size:18px;   color:blue;}

h1.foo {   font-size:18px;   color:red;}

span.important {   font-weight: bold;}

span.unimportant {   font-size: 14px;}

a.nolink {   text-decoration:none;} 

Somit können die Stylesheets in Zukunft geändert werden, ohne dass die HTML-Dateien angefasst werden müssten.

Vier CSS-Eigenschaften, die man kennen und nutzen sollte

Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.

CSS3-Tipp 1: Individuelle Rahmen mit „border-image“

Die individuelle Gestaltung von Rahmen war in den Zeiten vor CSS3 faktisch gar nicht möglich. Zwar gab es eine Auswahl vordefinierter Rahmen – zum Beispiel einfache, doppelte und gepunktete –, aber sehr viel mehr war nicht machbar.

Mit der CSS3-Eigenschaft „border-image“ hingegen lassen sich Rahmen ganz individuell über eine Grafik gestalten. Dazu wird die Grafik in neun Bereiche eingeteilt. Die acht äußeren Bereiche stellen dabei den Rahmen beziehungsweise die Rahmenecken dar.

p {  border: 30px solid transparent;  border-image: url("rahmen.png") 30 round;}

Das Beispiel zeigt, wie ein Rahmen definiert wird. Zunächst wird per “url()” die Webadresse der Grafik angegeben. Der zweite Wert definiert, wie die Grafik in ihre neun Bestandteile zerlegt werden soll. Im Normalfall sind alle neun Flächen gleich groß (also eine Drittelteilung). Man kann aber auch andere absolute Werte in Pixel (ohne Angabe einer Einheit) oder prozentuale Werte (dann mit Prozentzeichen) angeben.

Der letzte Wert gibt an, ob die Linien einfach nur wiederholt (repeat“), wiederholt und dabei gerundet („round“), oder ob sie nicht wiederholt und dafür einfach auf die gesamte Breite beziehungsweise Höhe gezogen werden sollen („stretch“).

Die Breite des Rahmens wird nach wie vor per „border“ beziehungsweise „border-width“ definiert. Um den Standardrahmen zu verbergen, solltet man die Rahmenfarbe wie im Beispiel auf „transparent“ setzen.

„border-image“ wird von allen gängigen Browsern wie dem Internet Explorer, Chrome, Firefox und Safari unterstützt.

CSS3-Tipp 2: Nummerierung mit „counter-reset“ und „counter-increment“

Nummerierte Listen mit dem „<ol>“-Element sind seit jeher kein Problem. Schwieriger wird es jedoch, wenn man jenseits dieses Elementes zum Beispiel Überschriften innerhalb eines Dokumentes automatisch nummerieren möchte. Hier kommen die verschiedenen „counter“-Eigenschaften zum Einsatz.

Zunächst definiert man einen Counter für dein Dokument, indem man der Eigenschaft „counter-reset“ einen beliebigen Namen vergibst. Diese Eigenschaft setzt den definierten Counter also wieder auf Anfang. Man kann beliebig viele unabhängige Counter definieren.

body {  counter-reset: kapitel;}

Anschließend wählt man ein Element, auf welches man den Counter anwenden möchtest und weist ihm die Eigenschaft „counter-increment“ mit dem Counternamen zu. Über die Funktion „counter()“ kannt man anschließend per „::before“ oder „::after“ die Nummerierung ausgeben lassen.

h2::before {  counter-increment: kapitel;  content: "Kapitel " counter(kapitel) ": ";}

„counter-reset“ und „counter-increment“ werden von allen gängigen Browsern unterstützt.

CSS3-Tipp 3: Bilder einpassen mit „object-fit“

Statische Webdesigns findet man immer seltener. Zunehmend sind Layouts responsiv oder fluid, sodass sich Elemente immer dem zur Verfügung stehenden Platz anpassen.

Bei Bildern ist dies immer ein wenig problematisch. Häufig werden sie bei unzureichendem Platz einfach herunterskaliert. Mit der Eigenschaft „object-fit“ gibt es jedoch verschiedene Möglichkeiten, wie man sie anpasst. Dazu definiert man zunächst eine Breite und Höhe für das Bild. Wenn diese ein abweichendes Seitenverhältnis besitzen, kommt „object-fit“ zum Einsatz.

Mit dem Wert „cover“ sorgt die Eigenschaft dafür, dass das Bild immer sein Seitenverhältnis beibehält und die gesamte Fläche der „“-Elementes ausfüllt. Dabei werden allerdings rechts und links beziehungsweise oben und unten Bereiche abgeschnitten, damit das Bild die gesamte Fläche ausfüllen kann.

Alternativ besteht mit dem Wert „contain“ die Möglichkeit, das Bild so zu skalieren, dass bei Beibehaltung des Seitenverhältnisses immer das gesamte Bild sichtbar ist. Im Gegensatz zu „cover“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.

Bis auf den Internet Explorer unterstützen alle gängigen Browser diese Eigenschaft.

CSS3-Tipp 4: Texte beschneiden mit „text-overflow“

Nicht nur Bilder müssen bei besonders kleinen Auflösungen beschnitten werden. Manchmal sind auch Texte zu lang. Bei Fließtext ist dies in der Regel kein Problem. Dieser wird einfach umbrochen. Aber gerade bei Überschriften mit langen Wörtern oder Texten, die ausschließlich einzeilig dargestellt werden, kann es problematisch werden.

Die CSS3-Eigenschaft „text-overflow“ verhindert, dass Texte einfach über den zur Verfügung stehenden Platz hinausragen, indem sie abgeschnitten und mit Auslassungspunkten versehen werden.

Die Eigenschaft funktioniert aber nicht alleine, sondern in Kombination mit der Eigenschaft „overflow“ und dem Wert „hidden“.

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

Im Beispiel wird der Text eines „<h2>“-Elementes per „text-overflow“ beschnitten. Der Wert „ellipsis“ sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird. Per „white-space“ wird zudem verhindert, dass der Text mehrzeilig wird.

Wird statt „ellipsis“ der Wert „clip“ verwendet, erfolgt die Beschneidung ohne Auslassungspunkte.

Alle gängigen Browser unterstützen diese Eigenschaft.

So einfach hübscht man Tabellen auf

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie man solche Tabellen mit CSS3 ansprechend und dynamisch gestaltet, zeige ich Ihnen in einem zweiteiligen Tutorial, dessen ersten Teil man gerade liest.
Mein Beispiel ist eine Bundesliga-Tabelle, die ich in einem Projekt vor einigen Jahren tatsächlich baruchte und die gut geeignet ist, Ihnen die Tabellengestaltung näher zu bringen. Beachte bitte Platzierungen und Teilnehmer nicht. Das ist alles Schnee von gestern. Hier geht es nur ums Coding.

In diesem Tutorial werden wir verschiedene CSS2-/CSS3-Selektoren anwenden, die uns Eingriffe in das HTML ersparen. Auch das Einbinden von Grafiken wird überflüssig, denn Verläufe und Schatten erzeugen wir kurzerhand mit CSS. Dazu kommen weitere kleine CSS3-Schnipsel, die unsere Tabelle für moderne Browser bereichern. Hier ist ein Ausschnitt, wie unsere Tabelle nachher im Safari oder Firefox aussehen wird:

Wir starten mit einer HTML-Basis ohne IDs und Klassen

Wir werden unsere Tabelle sehr einfach halten, nämlich ganz ohne Klassen, IDs oder gar zusätzliche Div-Container. Warum? Weil es mehrere Vorteile bietet:

• übersichtlicherer Code
• kürzere Ladezeiten
• weniger Wartungsbedarf.

Legen wir also los:

Unsere Tabelle enthält ein caption-Element, in dem ein kurzer Titel zur Erläuterung des Inhalts enthalten ist. Es folgt der Tabellenkopf (thead) mit den Spaltenüberschriften sowie der Tabellenrumpf (tbody) mit den Inhalten der Tabelle. scope="col" wird zudem verwendet, um deutlich zu machen, dass sich die Tabellenköpfe auf die gesamte Spalte beziehen.

Nachdem wir unser Grundgerüst erstellt haben, können wir uns direkt an die Gestaltung machen. Zurzeit sieht unsere Tabelle noch so aus:

Zuerst nehmen wir noch ein paar grundsätzliche Einstellungen vor:

* {    margin:0;    padding:0;}body {    font: 13px/1.5 Arial, sans-serif;    margin:50px;}h1 {    font-size:20px;    margin-bottom:10px;}

Damit setzen wir alle Innen- und Außenabstände auf 0 und definieren die Grundeinstellung der Schrift und Abstände für body und h1.

Die Grundgestaltung der Tabelle

/* Tabelle */table {    background:#e9eae8;    background:rgba(105,115,100,.15);    -webkit-border-radius:0 0 10px 10px;    -moz-border-radius:0 0 10px 10px;    border-radius:0 0 10px 10px;    border-collapse:collapse;    border-spacing:0;    text-align:left;    width:660px;}

Den Hintergrund geben wir in RGBA (RGB plus Alpha-Kanal) an. Das ist deshalb sinnvoll, weil wir später noch verschiedene Grauabstufungen des Farbwerts verwenden und dann nur den Alpha-Kanal ändern müssen. Als Fallback-Lösung können wir in der Zeile davor den Hexadezimal-Wert für unseren Freund den Internet Explorer notieren, der bis einschließlich Version 8 kein RGBA versteht.

Dann folgt die Anweisung für abgerundete Ecken in der Kurzschreibweise, wobei die Werte ähnlich wie zum Beispiel bei margin im Uhrzeigersinn angegeben werden, hier also oben links, oben rechts, unten rechts, unten links. Dann weisen wir noch an, dass die Zellenrahmen übereinander liegen sollen und der Text linksbündig ist. Zum Schluss erhält die Tabelle eine Breite, die verhindert, dass sie bei einem kleineren Browserfenster unschön zusammengeschoben wird.

Die Tabellenüberschrift (»caption«)

caption {    background:#656e70;    background:-webkit-gradient(linear, left top, left bottom, from(#656e70),color-stop(50%, #515b5c), color-stop(50.1%, #465153), to(#323e40));    background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);    background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);    -webkit-border-radius:10px 10px 0 0;    -moz-border-radius:10px 10px 0 0;    border-radius:10px 10px 0 0;    color:#fff;    font-size:15px;    font-weight:bold;     padding:10px 0 10px 10px;     text-align:left;    text-shadow:0 -1px 1px rgba(0,0,0,.5);}small {    color:#a3a8a9;}

Hier schlägt uns einiges an CSS entgegen, was in diesem Fall an den Farbverläufen liegt, die wir rein mit CSS erstellen. Diese werden über die bekannte CSS-Eigenschaft background realisiert, allerdings müssen wir der Wert für Safari und Firefox unterschiedlich angeben. Aber der Reihe nach. Zunächst definieren wir die Fallback-Lösung für Browser, die keine Verläufe darstellen können. Anschließend folgt der Verlauf für Webkit-Browser, der wie folgt entsteht: Zunächst kommt der Typ, hier ein linearer Verlauf, dann folgt der Startpunkt left top, sowie der Endpunkt left bottom, wir erhalten also einen senkrechten Verlauf.

Es folgt die Farbe für den Verlaufsstart. Bei einem einfachen Verlauf würde nun die Farbe für das Verlaufsende folgen. In unserem Fall möchten wir aber einen leichten Spiegelungseffekt erzielen und brauchen dafür zwei Farben mehr. Dazu gibt man einen color-stop an, der bei der Hälfte der Box einsetzt, angegeben durch einen Prozentwert. Es folgt ein zweiter color-stop, der direkt an den vorherigen anschließt, deshalb ein Wert von 50.1%, sowie die Schlussfarbe, mit der der Verlauf endet. Puh, geschafft.

Die nun folgende Firefox-Anweisung liest sich dagegen wesentlich leichter, ist intuitiver und drückt das gerade beschriebene in wesentlich weniger Code aus. Zuletzt wird die offizielle W3C-Deklaration geschrieben, die aber glücklicherweise genau der von Firefox entspricht, sodass wir sie einfach ohne Browserpräfix übernehmen können.

Es folgen wieder abgerundete Ecken, kennen wir ja, sowie weitere Einstellungen bzgl. der Schriftanzeige, unter anderem ein text-shadow, der nach oben gerichtet für einen leichten Einstanz-Effekt sorgt. Die vier Werte, die angegeben werden, sind der Abstand nach links, der Abstand nach oben (in diese Fall ist der Wert negativ, so dass der Schatten nach oben zeigt), die Unschärfe (je höher der Wert, desto weicher wird der Schatten) und die Farbe. Hier hilft RGBA, den Schatten noch realistischer zu machen.

Zuletzt wird noch mit small unser Datum gestylt.

Das war jetzt eine Menge Holz, mündet aber schon in einem schönen Effekt. So sieht unsere Tabelle jetzt aus:

Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder Excel und Co. möglich ist. Mit CSS3 kannt man deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläutere ich, wie man Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen gibst als dem Rest der Tabelle.

Zellen aufpeppen

Es folgen ein paar Anweisungen, die unsere Tabelle weiter verschönern. Da sind zum einen die Zellen des Tabellenkopfes, die einen Hintergrund und einen inneren Schatten erhalten. Streng genommen ist das in unserem Fall kein Schatten, sondern eine Aufhellung. Weil dazu aber die CSS-Eigenschaft box-shadow verwendet wird, sprechen wir der Einfachheit halber trotzdem von Schatten.

th {    background:#7aae5e;    border-bottom:1px solid rgba(255,255,255,.7);    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);    -o-box-shadow:inset 0 1px 0 rgba(255,255,255,.2);    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);    padding:6px 10px;}td {    border-bottom:1px solid #fafafa;    border-bottom:1px solid rgba(255,255,255,.5);    padding:6px 10px;    color:rgba(0,0,0,.7);}tr:last-child td {    border-bottom:none;}

In unserem Fall missbrauchen wir die Schatten-Eigenschaft, um die obere Kante des Tabellenkopfes etwas aufzuhellen. Das erhöht den Kontrast und sorgt für einen ganz leichten 3D-Effekt. Dabei geben wir zunächst den Wert inset an, weil der Schatten nach innen gehen soll. Dann folgen die vier Werte, die bereits weiter oben erklärt wurden.

Zuletzt bekommen die Zellen des Tabellenrumpfes eine untere Linie, etwas mehr Raum mittels padding sowie eine Farbe für die Schrift. Mit der Pseudoklasse :last-child wird für die letzte Zeile die Linie wieder aufgehoben.

Spalten anhübschen

Unsere Tabelle sieht nun schon ganz passabel aus, braucht aber noch etwas Feinschliff, weshalb wir uns jetzt um die einzelnen Spalten kümmern. Bei Spalte 1 möchten wir die Zahlen rechtbündig haben. Da wir im Quelltext keine Klassen vergeben haben, müssen wir das td-Element über den Pseudoklasse :first-child ansprechen.

Es folgt die wichtigste Spalte, die des Vereins. Diese ist über das a-Element leicht anzusprechen, da wir sonst in der gesamten Tabelle keinen Link vergeben haben.

/* 1. Spalte: Platz */td:first-child {    text-align:right;    padding-right:24px;}/* 2. Spalte: Verein */td a {    background:transparent url(vereine.png) 0 0 no-repeat;    color:#000;    font-weight:bold;    opacity:.7;    padding:3px 0 7px 30px;    -webkit-transition:all .2s ease-in-out;    -moz-transition:all .2s ease-in-out;}

Nun möchten wir natürlich die entsprechenden Vereinslogos für jeden Verein unterbringen. Zuvor haben wir ja schon ein Bild mit allen Logos eingebunden, lediglich die Position muss noch für jeden Verein angepasst werden.

Aber wie findet CSS die einzelnen Vereine, wenn wir keine Klassen vergeben haben? Hier hilft uns nun der Attribut-Selektor. Dieser greift hier auf das HTML-Attribut href im Start-Tag des a-Elements zu. Im Quelltext haben wir ja jeden Verein verlinkt. Diesen Link können wir über CSS ausfindig machen. So sieht das ganze aus:

td a[href*="bremen"] {background-position:0 0;}td a[href*="dortmund"] {background-position:0 -30px;}td a[href*="frankfurt"] {background-position:0 -60px;}td a[href*="freiburg"] {background-position:0 -90px;}td a[href*="hamburg"] {background-position:0 -116px;}td a[href*="hannover"] {background-position:0 -150px;}td a[href*="hoffenheim"] {background-position:0 -180px;}td a[href*="kaiserslautern"] {background-position:0 -210px;}td a[href*="koeln"] {background-position:0 -240px;}td a[href*="leverkusen"] {background-position:0 -267px;}td a[href*="mainz"] {background-position:0 -300px;}td a[href*="gladbach"] {background-position:0 -330px;}td a[href*="bayern"] {background-position:0 -360px;}td a[href*="nuernberg"] {background-position:0 -390px;}td a[href*="pauli"] {background-position:0 -420px;}td a[href*="schalke"] {background-position:0 -450px;}td a[href*="stuttgart"] {background-position:0 -480px;}td a[href*="wolfsburg"] {background-position:0 -510px;}

Im ersten Selektor wird also geprüft, ob die Zeichenkette bremen im Link enthalten ist. So lässt sich nun jedem Verein über die Hintergrundposition das entsprechende Logo zuweisen.

Es folgt die Angabe zu :hover. Noch mal zurück zu den Links, hier hatten wir zuvor eine Transition angegeben. Dabei wird in unserem Beispiel für 0,2 Sekunden eine kleine Animation vollzogen, die auf alle Eigenschaften zutrifft, die sich beim Überfahren der Maus ändern.

Spalten per :nth-child() ansprechen

Als nächstes verbessern wir noch einzelne Spalten etwas, wobei wir uns die CSS3-Pseudoklasse :nth-child() zunutze machen. Hiermit sprechen wir gezielt einzelne Kind-Elemente an. In unserem Fall sind es die jeweiligen Zellen, die eine bestimmte Spalte bilden. td:nth-child(3) spricht also das dritte td an, welches Kindelement von tr ist. Damit können wir die gesamte dritte Spalte ansteuern.

/* Spalten zentrieren */td:nth-child(3),td:nth-child(7),td:nth-child(8),td:nth-child(9) {    text-align:center;}/* 9. Spalte: Punkte */td:nth-child(9) {    font-weight:bold;}/* 10. Spalte: Hinweise */td:nth-child(10) {    font-size:11px;    font-style:italic;}

Zeilen tunen

Nachdem wir nun unsere Spalten aufgepeppelt haben, verdienen ebenso die einzelnen Zeilen eine genauere Betrachtung. Und zwar wollen wir hier die Bedeutung der Platzierungen noch etwas deutlicher hervorheben. Mein Beispiel ist schon etwas älter und bildet die aktuellen UEFA-Regularien nicht vollständig ab. Also, nicht wundern.

Das ist der entsprechende Code:

/* Zeile 1-3 Championsleague + Quali */tr:nth-child(-n+3) td {    background:#c3c7c1;    background: -webkit-gradient(linear, left top, left bottom, from(#d9dcd8),color-stop(50%, #d2d5d0), color-stop(50.1%, #cbcec9), to(#c3c7c1));    background: -moz-linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);    background: linear-gradient(top, #d9dcd8, #d2d5d0 50%, #cbcec9 50.1%, #c3c7c1);}/* Zeile 4-5 Euroleague */tr:nth-child(-n+5):not(:nth-child(-n+3)) td {    background:rgba(105,115,100,.07)}/* Zeile 16-18 Absteiger und Relegation */    tr:nth-last-child(-n+3) td {    background:rgba(105,115,100,.07)}tr:nth-last-child(-n+2) td {    background:rgba(105,115,100,.13)}tr:last-child td:first-child {    -webkit-border-bottom-left-radius: 10px;    -moz-border-radius-bottomleft: 10px;    border-bottom-left-radius: 10px;}tr:last-child td:last-child {    -webkit-border-bottom-right-radius: 10px;    -moz-border-radius-bottomright: 10px;    border-bottom-right-radius: 10px;}

Es gibt zahlreiche Bundesliga-Tabellen die hier viel mit Farbe arbeiten und dadurch die Tabelle schön (oder weniger schön) bunt machen. Unsere Tabelle soll hier eher dezent bleiben und it manrch die Vereinslogos schon bunt genug.

Deshalb verändern wir lediglich den Grauwert der Spalten, beziehungsweise gönnen uns für die ersten drei noch einmal einen leichten Spiegeleffekt. »Die ersten drei Zeilen«, das bedeutet in der CSS-Sprache td:nth-child(-n+3). Heißt auf deutsch, nehmen wir für n irgendeine positive Zahl, ob jetzt 1, 5 oder 5.000, so wird die Summe innerhalb der Klammern nie größer als drei und deckt somit die ersten drei Zeilen ab. Diese erhalten einen Verlauf und heben sich so etwas von den übrigen Plätzen ab.

Ich verzichte hier darauf, dem Qualifikationsplatz eine gesonderte Gestaltung zu geben, das wäre zu viel des Guten und nicht unbedingt übersichtlicher. In der Hinweisspalte sieht man immer noch, dass es sich nur um einen Quali-Platz handelt.

Zeilen 4 und 5 gezielt ansprechen

Etwas abheben möchten wir allerdings noch die Europaleague-Plätze, diese erhalten einen dunkleren Hintergrund. Um jetzt nur die Zeilen 4 und 5 anzusprechen, greifen wir noch tiefer in die CSS-Trickkiste. Der erste Teil der Anweisung tr:nth-child(-n+5) ähnelt unserem vorherigen Beispiel, allerdings jetzt für die ersten fünf Zeilen.

Da wir aber die ersten drei Zeilen nicht verändern wollen, müssen wir sie wieder ausschließen, was uns mit Hilfe der Pseudoklasse :not() gelingt. Die Anweisung in der Klammer wird also nicht berücksichtigt, somit bleiben Zeile 4 und 5 übrig.

Abdunkeln per RGBA

Etwas anders gehen wir bei den Absteigern beziehungsweise dem Relegationsplatz vor. Hier machen wir uns den Vorteil von RGBA zu nutze, indem wir zunächst die letzten drei Zeilen etwas abdunkeln und dann die letzten beiden Zeilen noch mal etwas dunkler machen. Somit sind wir fast am Ziel.

Ein kurzer Check in den wichtigsten Browsern zeigt uns, dass die Tabelle überall funktioniert. Geschafft!

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Responsives Webdesign ist längst zu einem festen Bestandteil der Webentwicklung geworden. Die zunehmende mobile Internetnutzung macht es erforderlich, dass jede Website auch auf kleinen Displays zu erkennen ist. Das stellt Webdesigner und -entwickler immer wieder vor Herausforderungen. Wo bringe ich die komplexe Navigation unter? Wie stelle ich Fotos und Grafiken zur Verfügung? Was mache ich mit breiten, vielspaltigen Tabellen? Auf letztere Frage gibt es gleich mehrere mögliche Antworten. Denn die eine, immer richtige Lösung für Tabellen gibt es nicht.

Tabellen scrollbar machen

Eine recht einfache Möglichkeit, ist es, Tabellen einfach vertikal scrollbar zu machen. Hierbei bleibt die Tabelle in ihrer Breite unverändert. Mit etwas CSS wird lediglich dafür gesorgt, dass die Tabelle nicht die Breite des Layouts sprengt, sondern der sichtbare Bereich auf die Display- beziehungsweise Layoutbreite beschnitten wird. Mit dem Finger kannt man die Tabelle allerdings nach links und rechts verschieben.

table {  display: block;  overflow: scroll;}

Um eine Tabelle scrollbar zu machen, bedarf es lediglich zweier CSS-Eigenschaften. Zum einen muss aus der Tabelle ein Blockelement werden – per „display“. Zum anderen muss per „overflow“ dafür gesorgt werden, dass alles, was über die Breite des Weblayouts hinaus geht, nicht dargestellt wird. Dieser Bereich ist dann aber per vertikalem Scrollen erreichbar.

Scrollbare Tabelle
Zusätzlich sollte man den Tabellenspalten entweder feste Breiten zuweisen oder per „white-space“ verhindern, dass ein automatischer Umbruch erfolgt.

table th, table td {  white-space: nowrap;}

Andernfalls wird die Tabelle immer auf die Breite des Weblayouts zurechtgestutzt, was zu unschönen und vor allem vielen Zeilenumbrüchen führt.

Tabellenspalten untereinander darstellen

Die erste Variante hat zwar den Vorteil, dass sie einfach umzusetzen ist und man immer eine Spalte der Tabelle komplett im sichtbaren Bereich hat. Je nach dargestellten Daten ist es jedoch sinnvoller, immer den Inhalt einer Zeile komplett sichtbar zu haben. Auch hierfür gibt es eine Lösung, die etwas umständlicher ist, aber ebenfalls ohne JavaScript auskommt.

Die zweite Variante wird eine Tabelle komplett aufbrechen und jede Zeile mit den entsprechenden Spaltenbezeichnungen als Block untereinander darstellen. Hierfür ist es zunächst notwendig, dass per Data-Attribut die Spaltenbezeichnungen jeder Zelle einer Zeile hinzugefügt werden.

<table>  <tr>    <th>Name</th>    <th>Straße</th>    …  </tr>  <tr>    <td data-th="Name">Manfred Mustermann</td>    <td data-th="Straße">Musterstraße 1</td>    …  </tr>  …

Im Beispiel wird also der ersten Zelle einer Zeile per „data-th“ die Bezeichnung der ersten Spalte zugewiesen, der zweiten Zelle die Bezeichnung der zweiten Spalte. Dies muss für alle Zeilen der Tabellen wiederholt werden.

Untereinander dargestellte Tabellenzeilen
Anschließend müssen die Zeilen und Zellen als Blockelemente dargestellt werden und die Kopfzeile darf nicht mehr sichtbar sein.

table td, table tr {  display: block;}

table th {  display: none;}

Danach setzt man das Pseudoelement „::before“ ein, um den Wert des Attributes „data-th“ vor jeden Zelleninhalt zu platzieren.

table td::before {  content: attr(data-th)":";  display: inline-block;  font-weight: bold;  margin-right: 0.25em;}

Per „content“ wird dem Pseudoelement der Wert des Data-Attributes sowie ein Doppelpunkt zugewiesen. Das Ganze stellt man dann noch als Inline-Block-Element dar.

Die ganzen CSS-Definitionen solltet man zudem innerhalb eines Media-Queries-Bereichs platzieren, so dass sie nur für bestimmte Auflösungen ausgegeben werden. Diese zweite Lösung funktioniert in allen modernen Browsern. Nur der Internet Explorer 9 und ältere Versionen haben so ihre Probleme damit.

Fazit und weitere Beispiele

Beide Lösungen haben ihre Berechtigung. Die erste sorgt für eine gute Übersicht, wenn es darum geht, einzelne Spalten darzustellen. Die zweite Lösung ist optimal, wenn es wichtig ist, den Inhalt einzelner Zeilen im Blick zu haben.

Tabelle mit Tabs

[codepen_embed height=”500″ theme_id=”light” slug_hash=”vYOBNOL” default_tab=”result” user=”drweb”]See the Pen Responsive Tables (Tabs & Accordions) by Dr. Web (@drweb) on CodePen.[/codepen_embed]

Dreispaltige Tabellen ohne Javascript

[codepen_embed height=”500″ theme_id=”light” slug_hash=”VwLZvvL” default_tab=”result” user=”drweb”]See the Pen Responsive Tabellen (CSS-only) by Dr. Web (@drweb) on CodePen.[/codepen_embed]

Responsive Tabelle mit Akkordion

[codepen_embed height=”500″ theme_id=”light” slug_hash=”xxGKwwN” default_tab=”result” user=”drweb”]See the Pen Responsive Tabelle mit Akkordion by Dr. Web (@drweb) on CodePen.[/codepen_embed]

CSS3-Lightbox komplett ohne Javascript

Die Lightbox ist eine beliebte Möglichkeit, Bilder im Großformat auf einer Website darzustellen. Mittels diverser Javascript-Bibliotheken lassen sich Bilder dynamisch im Vordergrund einer Seite anzeigen, während die eigentliche Website verdunkelt wird. Mit CSS3 lässt sich ein solcher Lightbox-Effekt auch ganz ohne Javascript realisieren.

Erst HTML, dann ein wenig CSS

CSS3 macht vieles einfacher und den Quelltext schlanker. So sind für einen Lightbox-Effekt nur ein paar Zeilen HTML und wenige Zeilen CSS3 nötig. Zunächst werden per HTML die Miniaturansichten sowie die großen Einzelansichten der Galerie festgelegt:

<ul>  <li><a href="#bild1"><img src="bild1_klein.jpg.webp" /></a></li>  <li><a href="#bild2"><img src="bild2_klein.jpg.webp" /></a></li>  <li><a href="#bild3"><img src="bild3_klein.jpg.webp" /></a></li></ul><ul class="lightbox">  <li id="bild1"><a href="#start"><img src="bild1.jpg.webp" /></a></li>  <li id="bild2"><a href="#start"><img src="bild2.jpg.webp" /></a></li>  <li id="bild3"><a href="#start"><img src="bild3.jpg.webp" /></a></li></ul>

Wichtig ist, dass die Ankerbezeichnungen bei den Miniaturansichten (erste Liste) identisch sind mit den IDs der Lightbox-Ansichten (zweite Liste). Alles weitere wird per CSS3 definiert. Zunächst werden die einzelnen Listenelemente der Lightbox-Ansicht in ihrer Position, Opazität und Größe auf Null gesetzt, so dass sie nicht sichtbar sind. Die Eigenschaft „display: none“ kann hier nicht verwendet werden, da damit ein CSS-Transition-Effekt zum Einblenden der Lightbox nicht funktionieren würde:

ul.lightbox li {  overflow: hidden;  position: absolute;  width: 0;  height: 0;  left: 0;  top: 0;  opacity: 0;  background: rgba(0, 0, 0, 0.75);  -moz-transition: opacity 1.5s;  -o-transition: opacity 1.5s;  -webkit-transition: opacity 1.5s;}

Da bei der Lightbox die eigentliche Website abgedunkelt werden soll, wird die Hintergrundfarbe auf schwarz mit einem Alphawert von 0.75 gesetzt. Die Opazität der Lightbox-Ansicht ändern wir per CSS-Transition.

Mit der Pseudoklasse „target“ legen wir die Werte fest, die beim Klick auf eine Miniaturansicht angwendet werden sollen. Diese werden für die Listenelemente und die darin enthaltenen Ankerelemente definiert:

ul.lightbox li:target {  width: 100%;  height: 100%;  opacity: 1;}

Die angegebenen Werte sorgen dafür, dass die Liste den gesamten Anzeigebereich einnimmt und die Opazität per Transition auf Eins gesetzt wird. Das eigentliche Bild wird innerhalb des A-Elementes dargestellt:

ul.lightbox li:target a {  position: absolute;  top: 50%;  left: 50%;  margin: -315px 0 0 -415px;  border: 15px solid #fff;  -moz-box-shadow:0 1px 8px #000000;  -o-box-shadow:0 1px 8px #000000;  -webkit-box-shadow:0 1px 8px #000000;}

Für eine zentrierte Positionierung des Bildes werden die Werte für „top“ und „left“ auf jeweils 50 Prozent gesetzt. Die Werte für „margin“ werden für den Abstand nach oben und links auf jeweils die Hälfte der Breite und Höhe (zuzüglich Rahmenbreite) des Bildes gesetzt. Per „border“ und „box-shadow“ kann das Bild noch gestalterisch angepasst werden.

Vor- und Nachteile

Der Vorteil dieser CSS3-Lightbox liegt auf der Hand: Sie funktioniert ohne Javascript und bedarf nur einiger weniger Zeilen CSS3.

Der Nachteil bei der Sache: Befindet sich die Miniaturansicht nicht am Beginn der Seite und muss gescrollt werden, so wird beim Einblenden der Lightbox immer zum Anfang der Seite zurück gesprungen.

CSS Shapes: So richtet man Text an Formen aus

In Anwendungen wie InDesign oder QuarkXPress ist der Textumfluss eine klassische Möglichkeit, freigestellte Bilder und Grafiken sowie andere Pfaden mit Text umfließen zu lassen. Mit den CSS Shapes hat man seit CSS3 im Webdesign die Möglichkeit, solchen Textumfluss zu realisieren. Dazu kannt man sowohl Pfade definieren, an denen ein Text entlang laufen soll, als auch freigestellte Bilder definieren, an denen sich ein Text orientieren soll.

Kreise, Ellipsen und Polygone für Umfluss definieren

Um einen Textumfluss mit einfachen Pfaden zu erstellen, benötigt es zunächst ein Element, an dem der Text entlang fließen soll. Hier bietet sich ein „<div>“-Container an, dem eine Breite und Höhe zugewiesen werden, sowie die „float“-Eigenschaft, die dafür sorgt, dass nachfolgender Text an dem Element entlang läuft.

<div></div><p>Lorem ipsum …</p>

Bis hier hat man ein klassisches rechteckiges Element. Mit der Shape-Eigenschaft „shape-outside“ definiert man nun einen Pfad, der anstelle der rechteckigen Form für den Textumfluss sorgt.

div {  width: 300px;  height: 300px;  float: left;  shape-outside: circle(50%);}

Im Beispiel wird ein Kreis mit einem Radius von 50 Prozent definiert. Zusätzlich kannt man auch den Kreismittelpunkt festlegen, wenn dieser nicht im Zentrum des Elementes liegen soll.

div {  shape-outside: circle(50% at 50px 100px);}

Einfacher Kreis, um den der Text fließt
Im zweiten Beispiel ist der Mittelpunkt 50 Pixel vom linken und 100 Pixel vom oberen Rand des Elementes entfernt. Mit „shape-outside“ wird im Übrigen nur ein Pfad für den Textumfluss erstellt. Gibt man dem „<div>“-Element im Beispiel eine Hintergrundfarbe, wird diese auf die rechteckige Grundform des Elementes angewendet und nicht auf den Kreis.

Statt Kreise sind auch Ellipsen möglich, bei denen man zwei Radien angibst.

div {  shape-outside: ellipse(50% 25% at 50px 100px);}

Die per „shape-outside“ definieren Pfade müssen nicht die komplette Fläche des Elementes ausfüllen. Sie können auch deutlich kleiner sein. Text wird sich ausschließlich an diesem Pfad orientieren und die eigentliche Größe des „<div>“-Elementes komplett ignorieren.

Für komplexere Formen kannt man ein Polygon anlegen, dessen Koordinatenpaare man per Komma voneinander getrennt übergibst.

div {  shape-outside: polygon(150px 0, 179px 41px, 225px 20px, …);}

Bilder als Shape nutzen

Ganz häufig will man einen Text nicht um eine einfache geometrische Form, sondern um ein freigestelltes Bild fließen lassen. Statt die Außenform des freigestellten Bildes mit einem Pfad nachzeichnen zu müssen, gibt es mit „shape-outside“ auch die Möglichkeit, direkt ein freigestelltes Bild zu übergeben. Voraussetzung ist, dass das Bild über einen Alphakanal besitzt und der Bereich außerhalb des freigestellten Objektes eine Transparenz besitzt.

<img src="rose.png.webp" /><p>Lorem ipsum …</p>

Im Beispiel wird nun statt eines einfachen „<div>“-Containers ein Bild gesetzt, welches ebenfalls per „float“ dafür sorgt, dass der nachfolgende Text daran entlang läuft. Statt einer geometrischen Form wird die Bildadresse der Eigenschaft „shape-outside“ per „url()“ zugewiesen.

div {  float: left;  shape-outside: url("rose.png");  shape-image-threshold: 0.5;  shape-margin: 10px;}

Freigestelltes Bild, um das der Text fließt
Die zusätzliche Eigenschaft „shape-image-treshold“ gibt an, wie viel Transparenz das Bild mindestens aufweisen muss, damit diese für den Textumfluss angewendet werden soll. Bei 0 werden nur Bereiche berücksichtigt, die zu 100 Prozent transparent sind. Im Beispiel wird eine Transparent von 50 Prozenz und mehr akzeptiert. Außerdem wird mit der Eigenschaft „shape-margin“ noch ein Abstand definiert zwischen dem freigestellten Bild und dem Text.

Auf diese Weise realisiert man ohne großen Aufwand Textumfluss, wie er bislang nur in Satz- und Layoutanwendungen möglich war.

Chrome-Erweiterung für CSS Shapes

Chrome-Erweiterung ergänzt „Shapes“-Reiter
Um CSS Shapes direkt im Browser in der Größe und Position verändern und zu können, gibt es die Chrome-Erweiterung „CSS Shapes Editor“. Ist sie installiert, findet man in deinen Entwicklerwerkzeugen unter „Elements“ einen eigenen Reiter „Shapes“. Wählt man ein Element aus, welches per „shape-outside“ ausgezeichnet ist, sieht man im „Shapes“-Reiter diese Eigenschaft.

Eigene Formen direkt im Browser zeichnen
Im Browser wird der Bereich des Pfades, der ansonsten ja nicht sichtbar ist, farblich hervorgehoben. Außerdem ändert man Größe und Position des Pfades oder erstellst neue Pfade. So kannt man ein Polygon hinzufügen und dieses direkt im Browser zeichnen. Später kopiert man die Werte der Form und fügst sie in deinen eigenen Quelltext ein.

Wer den Chrome-Browser verwendet, findet an dieser Stelle eine entsprechende Erweiterung, um CSS Shapes komfortabel erstellen und bearbeiten zu können.

Browserunterstützung

Derzeit unterstützen Chrome, Safari und Opera die Eigenschaft „shape-outside“. Firefox, Internet Explorer und Edge können mit CSS Shapes noch nichts anfangen.

CSS3-Transitions für komplexe Animationen kombinieren

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannt man verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen.

Transitions mit Delay

Die „transitions“-Eigenschaft kennt vier unterschiedliche Werte. Der erste Wert teilt mit, welche Eigenschaften per Transition animiert werden sollen. Während „all“ einfach alle Eigenschaften animiert – insofern es etwas zu animieren gibt –, kannt man auch einfach eine explizite Eigenschaft angeben.

Der zweite Wert steht für die Animationsdauer in Sekunden an und der dritte Wert für das Easing – zum Beispiel „ease“ „ease-out“ oder „ease-in“. Außerdem existiert als viertes noch die Möglichkeit, einen zeitlichen Versatz zu definieren. Hierüber teilt man also mit, dass die Transition erst nach einer bestimmten Zeit beginnen soll.

div {  transition: all 2s ease 1s;  border-radius: 0;  transform: rotate(45deg);

}div:hover {  border-radius: 100%;  transform: rotate(90deg);}

Im Beispiel werden die Werte für „border-radius“ und „transform“ per Hover verändert. Die Animation dauert zwei Sekunden, beginnt aber erst mit einer Sekunde Versatz.

Transitions mit gleichzeitig animierten Eigenschaften

Mehrere Transitions kombinieren

Den hier vorgestellten Weg kennen wohl die meisten. Er hat jedoch den Nachteil, dass die Transitions für alle Eigenschaften – im Beispiel also „border-radius“ und „transform“ – gleichzeitig ablaufen. Mit einer leicht veränderten Auszeichnung weist man beiden Eigenschaften jedoch eine individuelle Animationsdauer sowie eine jeweils eigene Verzögerung zu.

div {  transition: transform 0.5s ease, border-radius 1s ease 0.5s;  border-radius: 0;  transform: rotate(45deg);}

Im zweiten Beispiel werden über „transition“ für jede zu animierende Eigenschaft eigene Werte übergeben und diese per Komma voneinander getrennt. Die Animation der „border-radius“-Eigenschaft startet hierbei also erst eine halbe Sekunde, nachdem die Animation der „transform“-Eigenschaft begonnen hat.

Transitions mit unabhängig voneinander animierten Eigenschaften
Auf diese Weise realisiert man durchaus komplexe Hovereffekte, ohne JavaScript bemühen oder HTML-Elemente verschachteln und einzeln mit einem Transition-Effekt ausstatten zu müssen.

Im Übrigen bleibt die Animationsfolge auch bei der rückwärts laufenden Bewegung erhalten. Hierbei wird also zuerst „transform“ animiert und anschließend „border-radius“.

Vorteil gegenüber „@keyframes“ und „animation“

Natürlich ist es auch mit der CSS3-Eigenschaft „animation“ in Kombination mit der „@keyframes“-Regel möglich, solche komplexen Animationen zu definieren. Transitions haben jedoch den Vorteil, dass sich beim Wechsel der Klasse oder Pseudoklasse der animierte Übergang automatisch anpasst.

Verläst man also vor Vollendung der Übergangsanimation den Hover-Status, wird die Animation automatisch wieder zum ursprünglichen Aussehen zurück animiert. Bei „animation“ und „@keyframes“ hat man dieses Verhalten nicht.

Allerdings haben die hier vorgestellten Transitions auch ihre Grenzen – zum Beispiel dann, wenn man unabhängig voneinander verschiedene „transform“-Effekte animieren will – also „scale()“ und „rotate()“ zum Beispiel. Beides definiert man schließlich über dieselbe Eigenschaft. Will man hier ebenfalls unabhängige Animationen haben, muss man doch „@keyframes“ und „animation“ einsetzen.

Beispiel auf Codepen

• Kombinierte Transitions

Texte unterstreichen – mit anderer Farbe und weiteren Effekten

Typografie spielt im Webdesign zunehmend eine wichtige Rolle – vor allem mit der Einführung von Webfonts. Das Unterstreichen von Texten hingegen war immer ein eher eintöniges Unterfangen. Nur auf Umwegen ließen sich Farbe und Art der Unterstreichung beeinflussen. Die erweiterte CSS3-Eigenschaft „text-decoration“ gibt Ihnen zusätzlichen Spielraum für die Gestaltung von Texten.

„text-decoration“ um Features erweitert

Bisher konnte man der Eigenschaft „text-decoration“ lediglich festlegen, wie ein Text unter- beziehungsweise durchgestrichen werden sollte. Erlaubt waren die Werte „underline“, „overline“ und „line-through“. Das entspricht also der typischen Formatierung, wie man sie auch aus der Textverarbeitung kennt.

Dass diese Möglichkeiten im Webdesign nicht ausreichen, zeigt sich daran, dass Webdesigner immer wieder mit Workarounds nach Möglichkeiten gesucht haben, Unterstreichungen eine andere Farbe zu geben. Häufig ist einem Text ein Rahmen („border-bottom“) zugewiesen worden anstatt ihn per „text-decoration“ zu unterstreichen. So ließen sich Farbe und Linienstärke beeinflussen.

Dieser Ansatz hat jedoch durchaus seine Nachteile. So ist die Unterstreichung per „border-bottom“ immer etwas weiter vom Text entfernt als eine echte Unterstreichung.

Die CSS-Eigenschaft „text-decoration“ ist nun um einige Features erweitert worden, die es unter anderem erlauben, die Farbe von Unterstreichungen unabhängig der Textfarbe festzulegen. Dazu gibt es die neue Eigenschaft „text-decoration-color“. Erlaubt sind hierbei alle gängigen CSS-Farbangaben, auch Angaben per „rgb()“ und „rgba()“.

h1 {  text-decoration-color: purple;}

Weißraum bei Unterstreichungen definieren

Es gibt eine weitere neue Eigenschaft: „text-decoration-skip“. Hiermit definiert man, wann eine Unterstreichung unterbrochen werden soll. Der Wert „ink“ legt fest, dass Unterlängen wie bei dem kleinen „g“ und „j“ bei der Unterstreichung ausgespart werden.

Gerade diese Möglichkeit dürfte vielen Webdesignern gefallen. Denn das brachiale Durchschneiden von Unterlängen durch Unterstreichungen ist vor allem für typografisch begeisterter Webdesigner und -entwickler kein schöner Anblick.

Der Wert „spaces“ hingegen sorgt dafür, dass Satz- und Leerzeichen nicht unterstrichen werden. So ist es beispielsweise möglich, bei Aufzählungen die Unterstreichung ausschließlich auf die Wörter anzuwenden.

h1 {  text-decoration-skip: ink;}

Inline-Block-Elemente wie zum Beispiel Bilder innerhalb eines Textes werden dann nicht unterstrichen, wenn die Eigenschaft den Wert „objects“ besitzt. Und der Wert „edges“ legt fest, dass bei zwei nebeneinander liegenden Textelementen ein Abstand zwischen den Unterstreichungen dargestellt wird.

Position der Unterstreichung ändern

Auch die Position einer Unterstreichung kannt man definieren – mittels „text-underline-position“. Normalerweise liegt sie im Bereich der Unterlängen. Der Wert „under“ sorgt jedoch dafür, dass die Linie unterhalb der Unterlängen dargestellt wird.

Diese Positionierung ist zum Beispiel bei der Darstellung mathematischer Formeln sinnvoll. So wird verhindert, dass tiefgestellte Zahlen von der Unterstreichung nicht verdeckt und somit schlecht bis gar nicht lesbar sind.

h1 {  text-underline-position: under;}

Verschiedene Stile zur Unterstreichung

Wem eine einfache Linie als Unterstreichung nicht reicht, kann dank „text-decoration-style“ auch zwischen verschiedenen Stilen für die Darstellung der Linien wählen. Während der Wert „solid“ eine gewohnt einfache Linie zeichnet, gibt es mit „double“ die Möglichkeit, eine doppelte Unterstreichung zu erzielen.

Für geschwungene Linien setzt man den Wert für die Eigenschaft auf „wavy“ und für gepunktete Linien auf „dotted“.

h1 {  text-decoration-style: wavy;}

Unterstreichung per Kurzform auszeichnen

Wie für viele andere Eigenschaften gibt es auch für die neuen Eigenschaften eine Kurzform, die über die alte Eigenschaft „text-decoration“ ausgezeichnet wird. Die bisherige Nutzung von „text-decoration“, die ausschließlich das Unter- beziehungsweise Durchstreichen erlaubt hatte, ist in die Eigenschaft „text-decoration-line“ ausgegliedert worden, funktioniert aber nach wie vor als Kurzform.

h1 {  text-decoration: underline wavy purple;}

Die Auszeichnung „text-decoration: underline“ ist also die Kurzform von „text-decoration-line: underline“. Man kann Werte für „text-decoration-line“, „text-decoration-style“ und „text-decoration-color“ als Kurzform kombinieren: „text-decoration: underline wavy purple“.

Im Beispiel wird also eine geschwungene Linie in violett als Unterstreichung dargestellt.

Browserunterstützung

Die Eigenschaft „text-decoration-skip“ wird von Chrome und Safari unterstützt, wobei Chrome nur die Werte „ink“ und „objects“ kennt. „text-decoration-color“ und „text-decoration-style“ werden zudem vom Firefox mit unterstützt.

Die Eigenschaft „text-decoration-position“ wird derzeit nur von Chrome unterstützt.

Andere Browser werden sicher schnell nachziehen. Schließlich sind typografische CSS-Eigenschaften wie auch das Beschneiden von Texten oder ihre Ausrichtung an anderen Elementen mittlerweile aus modernem Webdesign nicht mehr wegzudenken.

CSS: Komplexe Beschneidungspfade visuell generieren mit Clippy

Die CSS-Eigenschaft clip-path erlaubt es, anhand komplexer Beschneidungspfade festzulegen, dass nicht der gesamte Inhalt einer Box im Browser angezeigt wird. So sind beeindruckende Effekte möglich. Die Web-App Clippy nimmt einem das Coding ab. Man stellt deine Beschneidungspfade visuell zusammen und sieht direkt das Ergebnis.

Die CSS-Eigenschaft clip-path

Clip-path ist der Nachfolger der Eigenschaft clip und erweitert diese maßgeblich. Denn mittels clip waren lediglich rechteckige Formen möglich. Die neuere Eigenschaft clip-path hingegen erlaubt das Erstellen von Beschneidungspfaden entlang nahezu beliebiger Formen.

Neben den typischen Grundformen, wie Kreis, Ellipse oder Polygon und anderen, kann man auch SVG-Grafiken als Quellformen für die Beschneidungspfade verwenden. Dadurch erreicht man eine bislang nicht gekannte Flexibilität in der Darstellung. Solange die Formen die gleiche Zahl an Pfadpunkten aufweisen, kann man auch CSS Animations und Transitions auf sie anwenden, was zu schicken Bewegungseffekten führt.

Mit 26 Grundformen ist man für die ersten 1.000 Schritte bereits bestens gerüstet. Mit dem Button Custom Polygon geht man noch ein paar Schritte weiter, denn damit baut man sich eine beliebig komplexe Form zusammen, indem man schlicht Pfadpunkte in das Bild setzt, die Clippy automatisch miteinander verbindet.

Auf der linken Seite sieht man stets eine Vorschau, die durch eine Pixelangabe auf der rechten Seite, unterhalb der Formenauswahl, verändern kannst. Auch der Hintergrund ist änderbar. Bennett hat vier Beispiel zur Auswahl gestellt. Durch die Eingabe einer URL zu dem von Ihnen gewünschten Bild kann man jedoch auch dieses in den Hintergrund laden.

Unterhalb des Fensters mit der Preview wird einem stets der aktuell gültige CSS-Code angezeigt, den man von dort aus über die Zwischenablage in dein Projekt kopieren kannst. Ebenso ist es möglich, auf der Basis des angezeigten Codes direkt zu Codepen zu wechseln, um dort weiter zu experimentieren.

Beachte, dass Clippy nur den Code für den Beschneidungspfad generiert. Das entsprechende Bild musst man später selber einbauen und auch der Textfluss rund um die Form muss danach noch gebaut werden. Dazu verwendest man die Eigenschaften aus dem shape- Spektrum, etwa shape-outside.

In Clippy entscheidet man, ob man den Browser-Prefix webkit, der sicherstellt, dass der Code in Apples Safari funktioniert, nutzen will oder nicht. Alle modernen Browser unterstützen clip-path. Gar nicht unterstützt wird clip-path in Microsofts Internet Explorer und im Opera Mini.

Clippy ist kostenfrei und kann ohne Anmeldung verwendet werden.

Inline Critical CSS – Wie eine Bad Practice zum Geschwindigkeitsboost führen kann

Ein Ergebnis von 89 % bei Google Pagespeed Insights. Dann kann es bis zur 100 nicht mehr weit sein. Nach stundenlanger Bild- und Cacheoptimierung, Zusammenfassung von CSS- und Javascript-Dateien kommt nun der Endgegner. Was er bedeutet und wie ihr ihn besiegen könnt, erfahrt ihr in diesem Beitrag.

Eine rätselhafte Meldung bei den Pagespeed Insights

Nachdem erfolgreich alle bisherigen Meldungen abgearbeitet und eliminiert wurden, leuchtet nur noch ein Hinweis auf:

Unter dieser Meldung werden CSS- und Javascript-Dateien aufgelistet, die das Rendern der Seite verzögern sollen. Aber warum tun sie das?

Eine kurze Erklärung:

Nach der Anfrage des Browsers an den Server sendet dieser die Struktur der Website in einem HTML-Dokument zurück. Der Browser liest dieses von oben nach unten aus und stellt dann die Seite dar. Dabei stößt er gelegentlich auf Dateien, die nachgeladen werden müssen. Er stellt erneut eine Anfrage an den Server und ruft die entsprechenden Dateien ab. Dieser Dateiabruf kostet aber Zeit, in der die Darstellung der Seite nicht fortgeführt wird. Das Rendering wird blockiert.

Während die Lösung bei Skripten vergleichsweise einfach ist – sie können an das Ende des HTML-Dokumentes verschoben oder asynchron geladen werden- ist die Lösung für CSS-Dateien etwas aufwendiger. Werden die CSS-Dateien auch ans Ende des Dokuments verschoben, sehen wir beim Laden erst einmal die unformatierten Inhalte. Das ist optisch nicht gewollt und kann den Seitenbesucher verwirren. Was kann getan werden?

Die Lösung – Inline Critical CSS

Google schlägt hier die passende Lösung in seiner Dokumentation bereits vor. CSS-Anweisungen, welche für die saubere Darstellung der Website benötigt werden – das „kritische CSS“ – sollen inline direkt im Kopfbereich eingefügt werden. Jetzt kommt Panik auf!
„Ich habe doch gelernt, dass man Struktur und Darstellung voneinander trennen soll“. Dieser Grundsatz ist auch weiterhin korrekt. An dieser Stelle muss überlegt werden, wie wichtig es ist, Google zufriedenzustellen und noch ein paar extra Millisekunden Ladezeit herauszuholen, dafür aber Grundsätze der Webentwicklung über den Haufen zu werfen.

Geht man nun den Weg und versucht, sein CSS inline im Kopfbereich unterzubringen, stellen sich verschiedene Fragen. Wie binde ich das Inline-CSS am besten ein? Was ist eigentlich kritisch für die Darstellung meiner Website?

Welcher Teil meines Stylesheets ist „kritisch“?

In den meisten Fällen ist es nicht leicht zu filtern, was in der CSS-Datei letztendlich als kritisch anzusehen ist. Das funktioniert vielleicht noch bei kleineren Webseiten, wird aber bei größeren Internetauftritten oder sogar in Content-Management-Systemen mit einer Vielzahl an Stylesheets fast unmöglich.

Glücklicherweise gibt es verschiedene Tools, die diese Arbeit für den Programmierer abnehmen. Um einzelne Dateien zu analysieren und den kritischen Teil zu extrahieren, kann zum Beispiel der Critical Path CSS Generator von Jonas Ohlsson zum Einsatz kommen. Hier müssen die URL der betreffenden Seite und das dazugehörige CSS eingegeben werden. Der Generator analysiert das Stylesheet und gibt dann den kritischen Teil aus. Dieser wird dann noch mit einem CSS Minifier, z.B. cssminifier.com, zusammengefasst und in den -Bereich des HTML-Dokuments eingefügt.

Für größere Systeme können Taskrunner wie Grunt oder Gulp, in Kombination mit entsprechenden Plug-Ins, genutzt werden. Führt dieser die passende Aufgabe aus, wird bei jedem Durchlauf das gewünschte kritische CSS generiert.

In Grunt kann dafür das Plug-In Penthouse eingesetzt werden. Mit dem Paketmanager npm wird dieses heruntergeladen und integriert:

npm install grunt-penthouse –save-dev
Im Gruntfile wird das Plug-In dann geladen:

grunt.loadNpmTasks('grunt-penthouse');

und konfiguriert:

grunt.initConfig({  penthouse: {    extract : {        outfile : '.tmp/out.css',        css : './dist/css/full.css',        url : 'http://localhost:9000',        width : 1300,        height : 900,        skipErrors : false // this is the default     },  },});

Das outfile kann im Anschluss mithilfe eines CSS-Minifiers (z. B. cssmin) zusammengefasst werden.

Einbindung in den Quelltext

Der Inhalt der erstellten CSS-Datei wandert nun in ein style-Tag im Kopfbereich. Dies ist ein wichtiger Punkt, denn diese Technik berechtigt den Entwickler nicht dazu die Styles an die entsprechenden Tags selbst zu schreiben:

In einfachen, selbst geschriebenen Webseiten, mit Zugriff auf die HTML-Dateien, lässt sich dies recht einfach umsetzen. In größeren Umgebungen, wie Content-Management-Systemen, ist der richtige Ort für das Einfügen des Codes nicht gleich ersichtlich. Für die verschiedenen Systeme gibt es unterschiedliche Herangehensweisen.

In WordPress kann das populäre Modul Autoptimize verwendet werden. Es fasst CSS und Javascript zusammen und komprimiert die entstandenen Dateien. In der Konfiguration des Moduls kann dann das entsprechende Critical CSS eingefügt werden und alle anderen CSS-Dateien landen am Ende des Dokumentes.

Für das CMS Drupal in der Version 8 gibt es auch eine einfache Lösung. Hier muss nicht einmal ein zusätzliches Modul installiert werden. Innerhalb des Twig-Templates, welches die HTML-Ausgabe rendert, wird eine Zeile im Kopfbereich einfach hinzugefügt:

Damit wird die Datei „inline.css“ ausgelesen und deren Inhalt in den Seitenkopf geschrieben. Danach muss folgende Zeile in den Fußbereich verschoben werden:

css-placeholder token="{{ placeholder_token|raw }}

Dies führt dazu, dass alle CSS-Dateien im Fuß der Seite geladen werden.

Alternativen zu Inline CSS

Wem Inline CSS zu unsauber ist, kann auch auf andere Möglichkeiten zugreifen.

Eine über Javascript gesteuerte Methode ermöglicht es, CSS asynchron zu laden, wie es bei Javascript-Dateien bereits bekannt ist. Dafür kann die Bibliothek loadCSS von der Filament Group genutzt werden.

Eine weitere Option ist es CSS-Dateien parallel zu laden, indem diese von einem Content Delivery Network zur Verfügung gestellt werden. Dadurch wird eine parallele Verbindung zu einem anderen Server aufgebaut, während die eigentliche Verbindung zu Server der Website für das Rendering genutzt werden kann.

Die Zukunft von Inline CSS

Die Problematik beim Laden von Dateien beim Seitenaufbau ist, dass bei HTTP1.1 nur eine begrenzte Anzahl von Dateien in einem Roundtrip (Anfrage an Server, Antwort von Server) übertragen werden können. Dieser Roundtrip erfordert Zeit, die das Rendern der Seite bremst. Diese Problematik wird deshalb im neuen Standard HTTP2 aufgegriffen und gelöst. Alle Anfragen an den Server werden gebündelt und die Dateien in einem Paket zurückgeschickt. Dies beschleunigt die Datenübertragung entscheidend und macht die Einbindung von Inline CSS in Zukunft unnötig.

So erstellt man das optimale Print-Stylesheet

Auch heute gibt es noch viele Menschen, die sich das Internet ausdrucken möchten. Das kann verschiedene Gründe haben. Vielleicht will ein Team den Inhalt deines Beitrags im Meeting besprechen. Oder jemand möchte deinen Artikel dort lesen, wo er gewiss keinen Internet-Empfang hat. Um diese Menschen ansprechen zu können, benötigt jede Website immer noch eine CSS-Datei für den Druck, das sogenannte Print-Stylesheet.

Viele Menschen drucken sich auch heute noch etliche Artikel aus, um sie offline lesen zu können. Diesem Umstand sollte man sechnung tragen, wenn man keine Leser verlieren willst. Allerdings stellen sich zwei Hürden in den Weg des Druckens.

Erstens: Kaum ein WordPress-Theme hat heute noch ein Print-Stylesheet. Die Entwickler der Themes machen sich diese Mühe nicht, obwohl ein solches Druck-CSS zum guten Ton des Entwickelns zählt.

Zweitens: Da kein Druck-Stylesheet vorhanden ist, hat der Endverbraucher, der das Theme einsetzt, auch keinen Drucken-Button zur Verfügung.

Daher zeigen wir in diesem Beitrag, wie man ein Print-CSS erstellt, wo es in das Theme integriert werden sollte und wie man sich einen Druck-Button erstellen kann.

Eine geeignete Druckversion auswählen

Webmaster haben die Möglichkeit, eine spezielle Druckversion für ihre Webseite zu realisieren, die unerwünschte Teile entfernt. Dabei müssen sie wissen, dass es verschiedene Möglichkeiten gibt, eine Druckversion zu realisieren. Des Weiteren ist ein wichtiger Hinweis zu beachten: Kunden, die Anzeigen schalten, wünschen sich oftmals, dass diese auch in der Druckversion erscheinen. Auch das Firmenlogo darf nicht immer ohne Rücksprache mit den Verantwortlichen ausgeblendet werden.

Generell erfolgt die Ausgabe einer Druckversion der Webseite über Cascading Style Sheets (CSS). Hier bedienen wir uns des Mediums print:

<link rel="stylesheet" type="text/css"; media="print" href="druckversion.css">

Es ist meist nicht nötig, zwei CSS-Dateien zu erstellen – eine für die Webseite und eine für die Druckversion. Der Code sollte in derselben CSS-Datei untergebracht werden, da auf diese Weise weniger externe Dateien geladen werden müssen und die Serverlast sinkt. In diesem Fall kann man das Styling für die Hauptseite mit @media screen in der CSS-Datei einschränken. Für die Druckversion wird das Styling mit @media print definiert.

Mit der Deklaration display:none besteht die Möglichkeit, Teile der Webseite auszublenden, die nicht in der Druckversion erscheinen sollen, zum Beispiel:

@media print {  #header {    display: none;  }#sidebar {    display: none;  }#footer {    display: none;  }

Der untere Screenshot zeigt, wie eine Druckversion aussehen kann. Bei huffingtonpost.de hat man sich dazu entschieden, den Header zu entfernen. Es wird lediglich der Artikel ausgegeben. Die Desktopversion zeigt der obere Screenshot.

Druckkosten sparen: Reduktion der Website auf das Nötigste

Wer besonders effizient sein möchte, der wählt eine schwarze Schriftfarbe für den Ausdruck. Empfehlenswert ist diese Einschränkung nicht, da jeder selbst wählen sollte, ob er einen farbigen oder schwarz-weißen Ausdruck wünscht. Beim Design ist es sinnvoll, alles auf das Nötigste zu reduzieren. Hintergründe sind komplett zu entfernen. Die Druckversion sollte lediglich aus Text und maximal den Artikelbildern bestehen.

Genauso wichtig wie die Farbwahl ist die Schriftart. Es gibt Fonts, die für Bildschirme optimiert sind, auf gedrucktem Papier aber weniger gut aussehen. Deshalb ist eine Schriftart mit Serifen empfehlenswert:

@media screen {    * {      font-family: verdana,sans-serif;    }} @ media print{    * {      font-family: "times new roman",times,serif;    }}

Die Webseite verwendet die Schriftart Verdana ohne Serifen. Für die Druckversion wird der Artikel in Times New Roman mit Serifen ausgegeben.

Das optimale Print-Stylesheet erstellen

Erstelle zuerst eine leere CSS-Datei mit einem reinen Text- oder HTML-Editor. Benenne sie print.css. Kopiere im Anschluss folgendes hinein:

Alle CSS-Einstellungen, die man nun tätigen möchte, kommen zwischen das öffnende und das schließende Bracket.

Seitenränder und Schriftgrößen festlegen

Zuerst legen wir die Abstände der Seitenränder fest, um ein optimales Ergebnis zu erhalten.

Ich empfehle, die obere Einstellung zu verwenden und die Seitenränder auf 2 cm einzustellen. Nachdem das Geschehen ist, können die Einstellungen der Schriftgrößen vorgenommen werden. Hierbei ist zu beachten, dass der Drucker andere Einheiten für die Schriftgröße benötigt, als ein Monitor. Daher muss von Pixel, Em und Rem in Points umgerechnet werden.

• Pixels => Points
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18pt

Eine Schriftgröße von 12pt hat sich als optimal erwiesen. Nun hat man auch noch die Wahl, welchen Font man für den Druck verwenden möchtest. Eine gute Lesbarkeit auf einem gedruckten Blatt Papier bilden Schriftarten mit Serifen, wie zum Beispiel die Georgia.

Pagebreaks einsetzen – Seitenumbrüche bestimmen

Mit den drei CSS-Eigenschaften page-break-before, page-break-after und page-break-inside kann man genau bestimmen, ob und wo eine Druckseite umbrochen wird. Verhindert werden soll damit zum Beispiel, dass Bilder in zwei Teile umgebrochen werden.

• page-break-before bestimmt dabei, ob und wie ein Seitenumbruch vor diesem Element stattfindet.
• page-break-after wiederum kümmert sich um Umbrüche nach einem Element
• page-break-inside kümmert sich um einen eventuellen Umbruch innerhalb eines Elements, zum Beispiel der Bilder und Grafiken.

Auto ist der Standard des Druck-Elements, always setzt jedes Mal einen Umbruch, avoid verbietet den Umbruch und left und right ist gedacht für Folgeseiten, die entsprechend links oder rechts formatiert werden. Geschickt für den Druck eingesetzt sähen die Regeln so aus:

Der Umgang mit Links

Links sollten deutlich gekennzeichnet werden, damit sie auffallen. Da sich Links auf einem Blatt Papier nicht anklicken lassen, müssen wir die Link-Ziele visualisieren. Das machen wir mit den folgenden Notierungen:

Videos und andere iframes ausblenden

Videos darzustellen auf einem ausgedruckten Papier ergibt keinen Sinn. Setzt man die iframes jedoch einfach nur auf display: none, dann bleiben hässliche Abstände übrig. Mit dem folgenden Code setzt man die Abstände zurück und blendet iframes, sowie Videos vollständig aus.

Unnötige Elemente ausblenden

Viele Bereiche einer Website sollten nicht gedruckt werden. Zum ersten stellen sie keine wichtigen Informationen bereit, zum zweiten kostet der Ausdruck dieser Bereiche unnötig teure Tinte oder Toner. Daher blenden wir alle Bereiche aus, die nicht von Wert sind.

Für Sie bedeutet das, dass man in den Quellcode deiner Website eintauchen darf, damit man die Bereiche findet, die nicht gedruckt werden sollten. Folgende Dinge bieten sich an, um sie auszublenden:

Der Header, die Navigationen, die Pagination, die Sidebar, die Tags und die Kategorien, die Kommentare, die Share-Buttons und weitere Elemente. Hier ein Auszug aus dem Print-Stylesheet meiner eigenen Website:

Nachrichten vor und nach dem Druck-Content einfügen

Manchmal kann es sehr praktisch sein, vor und nach dem eigentlichen Druck-Inhalt Nachrichten einfügen zu können. Mit einer solchen Nachricht kann man sich vielleicht auch bei deinem Leser bedanken, der deinen Artikel ausgedruckt hat. Oder aber man kannst eine Copyright-Nachricht einblenden. Auch hier gilt es wieder, die richtige CSS-Klasse von deinem Inhaltsbereich zu finden.

Das komplette Druck-Stylesheet

Die richtige Location: wo gehört das print.css denn hin?

Die folgenden Funktionen gehören in die functions.php des Themes oder in ein seitenspezifisches Plugin.

Die korrekte Antwort wäre eindeutig in den Header. Folgende Funktion ist die richtige, wenn ein entwickeltes Theme in das offizielle Theme-Verzeichnis aufgenommen werden soll:

Sollte man sedoch dein eigenes Theme mit einem Druck-Stylesheet versorgen wollen, dann ist die oben beschriebene Art nicht unbedingt optimal. Erstens wird das CSS auf allen Seiten geladen, nicht nur auf den einzelnen Artikeln, zweitens blockiert es den Seitenaufbau und macht deine Website ein wenig langsamer. Daher:

Jedes nicht zum Seitenaufbau im sichtbaren Bereich nötige CSS gehört in den Footer!

Zudem sollte es nur geladen werden, wenn die single.php mit den einzelnen Artikeln aufgerufen wird. Es dürfte kaum jemanden geben, der deine Startseite drucken möchte.

Daher lassen wir das Stylesheet in den Fußbereich der Website laden.

Benutzerfreundlichkeit: einen Druck-Button erstellen

Wenn man Ihren Lesern ein gut gemachtes Druck-Stylesheet anbietet, dann wäre es vorteilhaft, wenn man auch einen Button zum Ausdrucken in dein Theme einbauen würdest. Die Vorgehensweise ist recht einfach, der Button kann mit CSS so gestaltet werden, wie man es möchtest. Der Code auf meiner Website sieht so aus:

Im Theme kann dieser Button dann mit einem einfachen <?php ah_print_button();?> überall aufgerufen werden, wo er erscheinen soll.

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn man mit Page Buildern oder HTML-Editoren arbeitet, kommt man so ganz ohne CSS-Kenntnisse nicht sehr weit.

Aber natürlich kennt niemand alle Elemente und jede Eigenschaft von CSS auswendig. Man muss nur wissen, wo man sich schlau machen kannt. Daher haben wir hier ein paar nützliche Wissensquellen zu HTML und CSS zusammengetragen.

SelfHTML: Das Urgestein unter den Wissensquellen zu HTML, CSS und JavaScript

SelfHTML, gegründet von Stefan Münz, ist ein echtes Pionierstück des Web. Erstmalig 1995 online in Erscheinung getreten, ist es sogar noch zwei Jahre älter als der gute alte Dr. Web, den es 1997 in die Weiten des Netzes verschlug.

SelfHTML hat sich der Idee verschrieben, dass grundsätzlich jeder und jede im Netz auf der Basis von Web-Standards publizieren können sollte. Wie der Name schon sagt, ist das Projekt von Beginn an eine Selbstlernplattform gewesen. War Münz über Jahrzehnte der Pfleger der Dokumentation, so ist dieser Teil von SelfHTML heutzutage als Wiki angelegt und dementsprechend von einer breiteren Kontributorenschar unterstützt. Neben dem Wiki finden Wissensdurstige Hilfe im angegliederten Forum und News im ebenfalls vorhandenen Blog.

Wie nicht anders zu erwarten, ist das Projekt an der ein oder anderen Stelle etwas in die Jahre gekommen. Dennoch ist SelfHTML eine der, wenn nicht gar die wichtigste Wissensquelle zum Thema im deutschsprachigen Raum.

W3Schools: Der Alleskenner rund um Webentwicklung

Das Tutorial-Portal W3Schools gehört sicher zu den Klassikern, wenn es um Webentwicklung und die dazugehörigen Sprachen geht. Neben einer umfangreichen Referenz zum Nachschlagen einzelner Elemente und Eigenschaften gibt es auch Einführungen in diverse Sprachen.

So findet man vor allem für Anfänger leicht verständliche Tutorials, die ihnen einen ersten Ein- und Überblick geben und Grundsätzliches erläutern. Fortgeschrittene finden zu jeder Sprache eine umfangreiche Referenz, in der Elemente und dazugehörige Eigenschaften kurz und knapp erklärt werden. Sehr schön sind die vielen verschiedenen Live-Beispiele, bei denen man mit dem Quelltext spielen und das Verhalten der Eigenschaften einfach direkt auf der Website ausprobieren kannst.

Kleiner Nachteil: W3Schools ist nur in englischer Sprache verfügbar. Dafür findet man neben HTML und CSS aber unter anderem auch Tutorials zu JavaScript, SVG und PHP.

Mozilla Developer Network: Mozillas eigenes Wissensportal

Mozilla hat mit seinem Developer Network ein ganz ähnliches Portal entwickelt wie W3Schools. Allerdings sind viele Inhalte hier in deutscher Sprache verfügbar. Im MDN findet man viele grundsätzliche Informationen für Einsteiger, sowie umfangreiche Referenzen zu einzelnen Elementen und Eigenschaften.

Dazu gibt es zahlreiche Beispiele und wie bei W3School zu allen Einträgen eine Übersicht, wie es sich mit der Browserkompatibilität verhält. Gerade bei neueren HTML- oder CSS-Features ist diese Information ja nicht ganz unwichtig.

Can I use: Der schnelle Checker

Wenn man einfach mal schnell herausfinden will, ob ein HTML-Element oder eine CSS-Eigenschaft bereits in allen gängigen Browsern läuft, bietet sich Can I use … an. man gibst einfach das Feature ein, wonach man dich erkundigen möchtest und erhältst umgehend eine Tabelle, welche ihnen verrät, in welchen Browsern und ab welcher Version das Element oder die Eigenschaft unterstützt wird.

Manchmal – vor allem beim Internet Explorer – sind einige Features nicht ganz fehlerfrei implementiert. Auch hierzu liefert ihnen die Website nützliche Hinweise. Verlangen Browser oder bestimmte Versionen einen Prefix, wird darüber ebenfalls informiert.

Stack Overflow: Das Expertenforum

Kommt man bei einer Sache gar nicht mehr weiter, hilft ihnen das Entwicklerforum Stack Overflow. Wenn man schon mal über eine Suchmaschine nach bestimmten HTML- oder CSS-Dingen gesucht hat, ist man sicher schon einmal auf diesem Portal gelandet.

Mit über 15 Millionen bereits gestellten Fragen und 23 Millionen Antworten ist die Wahrscheinlichkeit hoch, dass deine Fragen dort schon einmal beantwortet wurden. Da in so einem Forum nicht jede Antwort immer eine richtige Antwort ist, gibt es bei Stack Overflow die Möglichkeiten, Antworten als hilfreich zu kennzeichnen. So sollte man sich im Zweifel nur auf jene Antworten verlassen, die durch andere Nutzer mit einem grünen Haken als hilfreich deklariert sind.

Und sollte eine Frage tatsächlich mal noch nicht gestellt worden sein, kann man ihnen dort sehr sicher sein, dass man auf deine Frage recht schnell eine Antwort bekommst.

Mediaevent: Das deutsche Einsteigerportal

Die meisten Wissensdatenbanken und -portale sind entweder ausschließlich in englischer Sprache oder wie beim MDN mit deutscher Übersetzung, die dann aber meist nur für einen Teil der Inhalte vorhanden ist.

Komplett deutschsprachig ist die Website Mediaevent. Dort findet man vor allem für Einsteiger ausführliche Einleitungen zu HTML, CSS und JavaScript. Wer des Englischen also nicht ganz so mächtig ist, dürfte hier eine gute Anlaufstelle finden.

Web Fundamentals: Googles Entwicklerportal

Nicht nur Mozilla hat sein eigenes Entwicklerportal, auch Google ist mit seinen Web Fundamentals dabei. Für Einsteiger oder Entwickler, die bestimmte Elemente oder Eigenschaften nachschlagen wollen, ist diese Website nicht geeignet.

Stattdessen gibt es umfangreiche Tutorials und Leitfäden zu modernen Webtechniken, sowie Sicherheits- und Performanzaspekten. So beschäftigen sich die meist sehr umfangreichen Artikel unter anderem damit, wie man eine Progressive Web App oder Multi-Device-Websites entwickelst.

Die meisten Tutorials setzen gute Kenntnisse in HTML, CSS und vor allem JavaScript voraus. Dafür geben die Artikel einiges an Inhalt her und zeigen oft Schritt für Schritt, wie man vorgehen solltest.

Cheat Sheets: Grundsätzliches ganz kompakt

Wenn man die Basics in Sachen HTML und CSS nicht immer auf der Reihe hat, kann man ihnen die wichtigsten Begriffe und Regeln über sogenannte Cheat Sheets immer in Griff- beziehungsweise Lesenähe bereithalten.

Das HTML Cheat Sheet etwa listet die wichtigsten Elemente auf und erläutert, wie diese zu gebrauchen sind. Außerdem gibt es zu allen Elementen jeweils ein kurzes Beispiel.

Analog dazu gibt es natürlich ein CSS Cheat Sheet. Hier findet man alle wichtigen und gebräuchlichen CSS-Eigenschaften sowie die möglichen Werte beziehungsweise Schlüsselwörter. Werden Zahlen als Werte erwartet, sind die erlaubten Einheiten dort aufgelistet.