So einfach kann man die Grundlagen des CSS erlernen

Facebook
XING
Twitter
CSS-Grid-Layout - Cascading Style Sheets
CSS hat seinen Platz in der Webentwicklung längst fest eingenommen. Das grundlegende Prinzip der Anwendung von Stylesheets wird allerdings oft falsch verstanden. Werfen wir nochmal einen Blick in die Grundlagen des CSS.
Anzeige

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.

CSS-Grid-Layout - Cascading Style Sheets
CSS Grid Garden: Ein niederschwelliges Einsteigerspiel zu CSS Grid. (Screenshot: Dr. Web)

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

Ein Screenshot eines Handys - CSS Flexible Box Layout
Flexbox Froggy, Lernspiel zu CSS Flexbox. (Screenshot: Dr. Web)

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!


Flexible Schriftgrößen in CSS mit REM und vw

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten wie px, em und % gibt es mit rem einen neuen Bewerber, der das Beste der anderen Einheiten in sich vereint.

Von der Wurzel her betrachtet

Früher mal Standard: Schriftgrad per em oder %

Bis etwa 2008 galt es als weitgehend als Best Practice, den Schriftgrad im CSS so flexibel wie möglich zu definieren. Dazu wurden die Einheiten em oder % eingesetzt, relativ zur Standardeinstellung im Browser, die normalerweise bei 16px liegt.

Diese flexible Mischung servierte den Nutzern damals das beste Lese-Erlebnis, denn viele Browser hatten noch keinen Seitenzoom und der IE6 konnte mit px definierten Text überhaupt nicht zoomen, jedenfalls nicht ohne einen Eingriff in die Systemeinstellungen.

Sowohl bei em als auch % gab es in der Praxis aber Probleme mit der Vererbung der Schriftgrößen. Eine Prozentangabe ist immer relativ zu irgendetwas, meist zum Eltern-Element, und bei em ist das nicht anders:

  • Bei einer Box-Modell-Eigenschaft wie margin-bottom orientiert sich em an der Schriftgröße des Elements selbst. Ändert sich die Schriftgröße, ändert sich der Abstand, was zum Beispiel im Fließtext häufig ein gewünschter Effekt ist.
  • Bei der Schriftgröße hingegen gilt als Basis für ein em die Schriftgröße des Eltern-Elements. Eine Angabe von zum Beispiel 0.875em wird also bei jeder Verschachtelung ein Stückchen kleiner.

Fast wie bei Alice im Wunderland. Mal zu groß, mal zu klein, aber so richtig passen tut’s dann doch nie.

Die vorübergehende Emanzipation des px

Im Februar 2009 hielt Jens Grochtdreis in seinem Blogartikel „Die leidige Sache mit der Schriftskalierung“ ein kurzes Plädoyer für die Pixel. Moderne Browser hatten damals einen Seitenzoom und der IE6 wurde als Gegenargument immer weniger wichtig.

Ein Jahr später veröffentlichte Gerrit van Aaken einen Beitrag mit dem Titel „Warum ich Pixel für CSS-Schriftgrade verwende„. In der Diskussion unter Gerrits Bekenntnis zu px ging es hoch her, aber besonders bemerkenswert ist Kommentar #22 , in dem eine Einheit namens rem erwähnt wird, die den meisten Webdesignern bis dahin weitgehend unbekannt war.

Das „root em“: rem als neuer Stern am Schriftgrad-Himmel

Seit etwa 2011 wird das rem langsam aber sicher bekannter, denn es vereint die Vorteile von pxund em. Es ist genauso flexibel wie sein älterer Bruder em, umgeht aber dessen Nachteile bei der Vererbung, weil sich das „root em“ immer auf das Stammelement <html> bezieht (nicht auf <body>).

Um den Wert für rem zu erhalten, teilt man einfach die gewünschte Pixelgröße durch den Ausgangswert 16. Im CSS könnte eine solche Schriftgrad-Definition wie folgt aussehen:

html { font-size: 100%; } /* Browserdefault, 16px  */
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

Auf diese Weise lässt sich ganz einfach eine Kaskade von Schriftgraden aufbauen. Um den Schriftgrad irgendwann einmal größer oder kleiner zu machen, muss man nur die Basis ändern. Das Verhältnis von Fließtext zu Überschrift bleibt dabei immer gleich.

Das Fallback für alte Browser mit px

Das klingt fast zu gut um wahr zu sein, aber tatsächlich hat die Geschichte nur einen einzigen Haken: Alte Browser, wie immer. Auf http://caniuse.com/rem kann man sich einen guten Überblick verschaffen, und der sieht gar nicht so schlecht aus:

Can I use Rem units?

Die eigentlichen Schwachpunkte liefern der IE vor Version 9 sowie Opera Mini. Für diese beiden und alle anderen alten Browserkollegen kann man in seinen Stylesheets ein Pixel-Fallback einbauen, dass für das obige Beispiel so aussehen könnte:

html { font-size: 100%; }
h1 {
font-size: 28px;
font-size: 1.75rem;
}
h2 {
font-size: 22px;
font-size: 1.375rem;
}
p {
font-size: 14px;
font-size: 0.875rem;
}

Moderne Browser lesen und überschreiben im Rahmen der Kaskade den px-Wert mit dem rem-Wert, ältere hingegen nehmen die px-Anweisung und ignorieren die zweite Zeile. Perfekt.

Flexible Schriftgrößen in CSS mit vw

Bei der sogenannten Flexiblen Typografie ändern sich Schriftgröße und / oder Zeilenhöhe in Abhängigkeit von der Bildschirmgröße.

Dank font-size: calc kann man auch die Viewport-Units einbauen, welche eine direkte Verbindung zur Breite oder Höhe des Bildschirms herstellen. Das sieht z.B. so aus:

font-size: 2vw

Jedoch sind hier die Größenschwankungen so extrem, dass dies niemanden etwas bringt. Besser hingegen funktieren Formeln in Kombination mit einer fixen Schriftgröße, zum Beispiel:

font-size: calc(16px + 1vw)

Tim Brown hat diese Formel nochmal deutlich verfeinert, und daraus folgende Formel gemacht:

Ich möchte, dass die Schriftgröße zwischen 16px auf einem 320px-Bildschirm und 22px auf einem 1000px-Bildschirm liegt.

html {
   font-size: 16px;
} 

@media screen and (min-width: 320px) {   
   html {
      font-size: calc(16px + 6 * ((100vw - 320px) / 680));   
   } 
} 

@media screen and (min-width: 1000px) {   
   html {     
     font-size: 22px;   
   } 
} 

Auf Dr. Web verwenden wir übrigens eine Mischung aus beidem. Das sieht dann so aus:

body {
   font-size: calc(18px + .1vw);
 }

Und für die Überschriften:

h1, .heading-size-1, h2.entry-title {
   font-size: calc( 36px + (42 - 32) * (100vw - 320px) / (800 - 320) );
 }
 h2, .heading-size-2 {
   font-size: calc( 30px + (32 - 28) * (100vw - 320px) / (800 - 320) );
 }
 h3, .heading-size-3 {
   font-size: calc( 24px + (28 - 24) * (100vw - 320px) / (800 - 320) );
 }
 h4, .heading-size-4,
 .singular .intro-text {
   font-size: calc( 20px + (20 - 18) * (100vw - 320px) / (800 - 320) );
 }

CSS-Background-Blends: Überblendungseffekte wie mit Photoshop

Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundgrafiken 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.

background-blending-mode_collage

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;
}
background-blending-mode_multiply


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 Photshop 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;
}
background-blending-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.


Responsive Design: Mache deine Website fit für hochauflösende Displays

Als Apple vor einigen Jahren anfing, seine iPhones, iPads und MacBooks mit hochauflösenden Displays – den sogenannten Retina-Displays – auszustatten, hat das zu einer deutlichen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf diesen Displays nicht mehr als solche zu erkennen. Mittlerweile sind hochauflösende Displays längst keine Besonderheit mehr. Vor allem aktuelle Mobilgeräte sind schon in der Mittelklasse hochauflösend. Während viele Apps für Mobilgeräte schon länger auf die hohe Auflösung ausgerichtet sind, lassen sich mittlerweile auch per HTML5, CSS3 und JavaScript hochauflösende Websites realisieren – ohne zusätzliche JavaScript-Bibliotheken.

Doppelt so scharf dank doppelter Pixeldichte

Als Standardbreite für Mobilgeräte haben sich – historisch bedingt – 320 Pixel etabliert. Viele mobile Websites sind auf diese Breite ausgerichtet. Hochauflösende Displays haben doppelt so viele oder noch mehr Pixel. Damit eine Website auf diesen Displays nicht halb so groß erscheint, wird die Seite quasi hochskaliert. Bei Schriften und Vektorgrafiken ist das kein Problen. Bitmap-basierte Formate wie JPEG- und PNG-Dateien sehen hingegen unscharf und pixelig aus.

Da solche Displays immer häufiger werden, wird es natürlich für Webdesigner und -entwickler zunehmend wichtiger, Webprojekte in hochauflösender Qualität bereitzustellen.

HTML5 und die „srcset“-Eigenschaft

Lange wurde darum gerungen, wie man in HTML5 Bilder für hochauflösende Displays bereitstellen kann. Mittlerweile herrscht Gewissheit und das „srcset“-Attribut hat sich etabliert. Über das Attribut können mehrere Dateiquellen für verschiedene Pixeldichten angegeben werden. Die Pixeldichte wird per Leerzeichen getrennt hinter den Dateiverweis notiert – zum Beispiel „2x“ für die doppelte Pixeldichte.

<img srcset="bild.jpg, bild@2x.jpg 2x" src="bild.jpg" width="320" height="160" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Im Beispiel werden per „srcset“ zwei Dateien angegeben. Die erste Datei wird bei Displays mit einfacher Pixeldichte geladen. Der Wert „1x“ kann bei einfachen Pixeldichten weggelassen werden. Es folgt eine Datei für Displays mit doppelter Pixeldichte. Als Fallback für ältere Browser sollte man immer auch das bekannte „src“-Attribut angegeben. Dort sollte dann das „normale“ Bild referenziert werden.

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays


Vergleich zwischen Bild mit doppelter Pixeldichte (oben) und einfacher Pixeldichte (unten) auf einem hochauflösenden Display
Statt die Pixeldichte anzugeben, gibt es auch die Möglichkeit, die physische Breite oder Höhe eines Bildes an die jeweiligen Dateiquellen innerhalb des „srcset“-Attributes anzuhängen.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" src="bild-640w.jpg" alt="HTML5 & CSS3: mache deine Website fit für hochauflösende Displays" />

Entscheidet man sich für diese Variante, wird das Bild immer auf die gesamte Browser- beziehungsweise Fensterbreite skaliert – vorausgesetzt, es werden keine „height“- und „width“-Attribute gesetzt.Der Browser wählt dann jeweils die Datei aus, die für die Darstellung benötigt wird. Wird das Bild im Beispiel in einer Breite von bis zu 320 Pixel dargestellt, wird die Datei „bild-320w.jpg“ genommen. Bei Auflösungen darüber wird die Datei „bild-640w.jpg“ verwendet.

Über das „sizes“-Attribut hat man nun noch die Möglichkeit, die darzustellende Breite des Bildes zu beeinflussen. Dazu werden Media-Angaben in Kombination mit der gewünschten Darstellungsbreite des Bildes angegeben.

<img srcset="bild-320w.jpg 320w, bild-640w.jpg 640w" sizes="(min-width: 320px) 50vw, (max-width: 320px) 100vw" src="bild-640w.jpg" alt="" />

Im Beispiel wird das Bild bei einer Viewport-Breite von mindestens 320 Pixel („min-width: 320px“) so skaliert, dass es 50 Prozent der Breite des Viewports („50vw“) einnimmt. Bei einer Viewport-Breite von weniger als 320 Pixel nimmt das Bild den gesamten Viewport in der Breite ein („100vw“).

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays


Unterschiedliche Darstellungsbreite: Im Portrait-Modus 100 Prozent und im Landscape-Modus 50 Prozent des Viewports
Innerhalb einer „srcset“-Dateireferenz kann immer nur die Pixeldichte (zum Beispiel „2x“) oder Breite und Höhe (zum Beispiel „320w 160h“) angegeben werden. Eine Kombination von Pixeldichte und Breite beziehungsweise Höhe ist nicht möglich.

Das „srcset“-Attribut funktioniert auch in Kombination mit dem neuen „&lt;picture&gt;“- und dem dazugehörigen „&lt;source&gt;“-Element. Über das „&lt;picture&gt;“-Element hat man die Möglichkeit, Bilder für verschiedene Display- beziehungsweise Fenstergrößen festzulegen. Auch hier können dann Quellen für unterschiedliche Pixeldichten hinterlegt werden.

<picture>
  <source srcset="bild-640w.jpg, bild-640w@2x.jpg 2x" media="(min-width: 320px)" />
  <source srcset="bild-320w.jpg, bild-320w@2x.jpg 2x" media="(max-width: 320px)" />
  <img src="bild-640w.jpg" width="320" height="160" alt="" />
</picture>

Im Beispiel werden über die beiden „&lt;source&gt;“-Elemente insgesamt vier Dateiquellen referenziert. Display- beziehungsweise Fensterbreiten bis 320 Pixel stellen die Dateien „bild-320w.jpg“ und „bild-320w@2x.jpg“ (je nach Pixeldichte) dar. Bei größeren Breiten werden die Dateien „bild-640w.jpg“ und „bild-640w@2x.jpg“ aufgerufen. Berücksichtigen muss man, dass das „&lt;source&gt;“-Element keine „width“- und „height“-Attribute kennt. Will man die Größenangaben festlegen, muss man dies per CSS machen.

Auch hierbei sollte man wieder ein „&lt;img&gt;“-Fallback bereitstellen, um ältere Browser nicht außen vor zu lassen.

Das „srcset“- und „sizes“-Attribut sowie das „&lt;picture&gt;“-Element werden von Chrome und Firefox jeweils ab Version 38 unterstützt. Der Internet Explorer unterstützt die Attribute und das Element derzeit noch nicht. Android-Chrome ist ab Version 40, iOS-Safari ab Version 8.1 dabei. Letzterer unterstützt „sizes“ aber nur eingeschränkt.

Wer das „srcset“-Attribut auch für Browser verwenden möchten, die es noch nicht unterstützen, kann sich mit einem Polyfill behelfen, welches die Funktionalität für ältere Browser nachbildet.

CSS3 und „image-set()“

Auch per CSS3 gibt es mittlerweile eine Möglichkeit, unterschiedliche Bildquellen für verschiedene Pixeldichten anzugeben. Hierfür steht die „image-set()“-Notation zur Verfügung. In dieser lassen sich ähnlich wie beim HTML5-Attribut „srcset“ mehrere Dateien per „url()“ referenzieren. Die Notation „image-set()“ kann überall dort eingesetzt werden, wo eine Bildquelle per „url()“ angegeben wird.

body {
  background-image: url("hg.jpg");
  background-image: image-set(
    url("hg.jpg") 1x,
    url("hg@2x.jpg") 2x
  );
}

Im Beispiel wird per „image-set()“ eine Hintergrundgrafik für zwei Pixeldichten definiert. Derzeit sollte man die Notation mit entsprechenden Vendor-Präfixen auszeichnen – zum Beispiel „-webkit-image-set()“. Außerdem ist es auch hier ratsam, für ein Fallback zu sorgen. Wichtig ist, dass das Fallback wie im Beispiel vor der „image-set()“-Variante notiert wird. Browser, die „image-set()“ nicht kennen, werden die zweite „background-image“-Eigenschaft ignorieren. Alle anderen Browser werden die zweite Eigenschaft ausführen und somit die erste damit überschreiben.

html5-css3-pixeldichte-hg


Hochauflösender Hintergrund (oben) und normal aufgelöster Hintergrund (unten)
Die „image-set()“-Notation wird derzeit vom Chrome ab Version 31 unterstützt. Firefox und Internet Explorer unterstützen sie nicht. Außerdem kennen der iOS-Safari ab Version 7.1 und der Android-Chrome ab Version 40 diese Notation.

Neben der „image-set()“-Notation, welche unterschiedliche Pixeldichte nur bei Bildern berücksichtigt, gibt es auch noch die Media-Query-Angaben „min-resolution“ und „max-resolution“. Hier können beliebige CSS-Eigenschaften für verschiedene Pixeldichten berücksichtigt werden.

@media screen and (min-resolution: 2dppx) {
  body {
    background: url("hg@2x.jpg");
  }
}

Im Beispiel wird per „min-resolution“ eine Hintergrundgrafik für Displays mit doppelter Pixeldichte definiert. Die Einheit „dppx“ steht für „dot per pixel“ und somit für die Pixeldichte. Es stehen aber auch andere Einheiten zur Verfügung. So kann man beispielsweise „dpi“ für „dots per inch“ verwenden. Damit ist es beispielsweise möglich, Bilder in Druckauflösung bereitzustellen. Als letzte Einheit gibt es noch „dpcm“, was für „dots per centimeter“ steht. Für die Darstellung auf Monitoren sollte man die Einheit „dppx“ verwenden.

Das „resolution“-Feature wird von Chrome ab Version 31 und Firefox ab Version 35 unterstützt. Der Internet Explorer unterstützt das Feature ab Version 9, aber nur mit der Einheit „dpi“. Android-Chrome kennt das Feature seit Version 40 und iOS-Safari ab Version 7.1 – allerdings nur in der veralteten Schreibweise „min-device-pixel-ratio“ beziehungsweise „max-device-pixel-ratio“.

Alternative: Bitmaps grundsätzlich in hoher Auflösung bereitstellen

Die neuen HTML5-Elemente und -Attribute ermöglichen es zwar, Bilder für verschiedene Auflösungen und Pixeldichten bereitzustellen. Allerdings müssen meist mehrere unterschiedliche Dateien für ein Bild generiert werden. Content-Management-Systeme wie TYPO3 automatisieren dies zwar. Aber bei handgemachten Webprojekten, die ohne serverseitige Programmiersprache auskommen müssen, steht man vor der Aufgabe, all diese Dateivarianten manuell zu generieren.

Wer diesen Aufwand scheut, aber dennoch auch hohe Pixeldichten berücksichtigen möchte, kann einen Zwischenweg gehen, bei dem man mit jeweils einer Datei für alle Pixeldichten auskommt. Dazu wird die Bilddatei direkt in doppelter Auflösung erstellt – am Besten in reduzierter Qualität –, dann aber mit halber Auflösung in ein HTML-Dokument eingebunden. Ein Bild mit 640 mal 320 Pixel Größe würde dann also in dieser Weise verwendet.

<img src="bild-640w.jpg" width="320" height="160" alt="" />

Während hochauflösende Displays die volle physische Auflösung darstellen, wird auf „normalen“ Displays das Bild auf die Hälfte der Größe herunter skaliert. Bei normaler Pixeldichte wird die schlechte Qualität durch die verkleinerte Darstellung wett gemacht. Bei doppelter Pixeldichte hat man immer noch eine bessere Qualität als bei der Verwendung eines Bildes in normaler Auflösung.

Der Nachteil dieser Herangehensweise ist natürlich, dass bei Displays mit einfacher Pixeldichte eine unnötig große Datei heruntergeladen wird. Daher bietet es sich an, diese Möglichkeit nur mit etwas stärker komprimierten JPEG-Dateien einzusetzen.

html5-css3-pixeldichte-kompression


Stark komprimierte JPEG-Datei in halber Auflösung (oben)
Auch per CSS können Bilder in doppelter Auflösung eingebunden werden. Mit der Eigenschaft „background-size“ hat man hierbei die Möglichkeit, das Bild auf die Hälfte der Auflösung herunter zu skalieren.

body {
  background-image: url("hg.jpg");
  background-size: 32px 16px;

Hat das Hintergrundbild im Beispiel eine Auflösung von 64 mal 32 Pixel, wird es um 50 Prozent verkleinert dargestellt. Man erreicht somit denselben Effekt wie beim HTML-Beispiel.

SVG-Grafiken und Iconfonts verwenden

Alle aktuellen Browser unterstützen mittlerweile das vektorbasierte SVG-Format. Vor allem Logos und viele andere grafischen Elemente sind ja meist als Vektorgrafiken vorhanden und wurden bislang als GIF- oder PNG-Datei in eine Website eingebunden. Dank des SVG-Formates können diese auch direkt als Vektorgrafik in einer Website dargestellt werden – sei es per HTML über das „&lt;img&gt;“-Element oder per CSS über „url()“.

Der Vorteil des SVG-Formates liegt auf der Hand: Da es vektorbasiert ist, wird es stets in bester Auflösung dargestellt. Zudem schont es die Bandbreite und spart Arbeit, da es nicht für die verschiedenen Auflösungen und Pixeldichten bereitgestellt werden muss.

Alternativ zu SVG-Grafiken sind Iconfonts bestens für hochauflösende Displays geeignet. Schließlich sind ebenso Schriften vektorbasiert und werden daher immer in optimaler Auflösung dargestellt.

Wer bei SVG-Grafiken auf Nummer sicher gehen und ältere Browser ohne SVG-Unterstützung berücksichtigen will, kann mit einigen Kniffen hierfür Fallback-Lösungen einbauen.

Pixeldichte mit JavaScript feststellen

Gelegentlich werden Bilder per JavaScript geladen – zum Beispiel bei Galerien. Statt ein „&lt;img&gt;“-Element mit allen „srcset“-Referenzen per JavaScript zu generieren, kann auch direkt die richtige Bildquelle in der für das Gerät zutreffenden Pixeldichte geladen werden.

Denn JavaScript kennt die Eigenschaft „devicePixelRatio“, mit der die Pixeldichte abgefragt werden kann.

if (window.devicePixelRatio > 1) {
  document.getElementsByTagName("img")[0].src = "bild@2x.jpg";
}

Im Beispiel wird eine Bilddatei geladen, wenn die Pixeldichte größer 1 ist. Logischerweise kann die Eigenschaft nur ausgelesen werden.

Eine Sache sollte man bei der Verwendung von „devicePixelRatio“ beachten. Denn der durch diese Eigenschaft ermittelte Wert ist immer abhängig vom jeweiligen Zoomfaktor des Browsers. Wird ein Dokument per Browserzoom in einer Größe von 150 Prozent dargestellt, liefert „devicePixelRatio“ einen Wert von „1.5“ – bei einfacher Pixeldichte. Bei doppelter Pixeldichte würde bei diesem Zoomfaktor der Wert „3“ zurückgegeben werden.

Fazit und Links zum Beitrag

Webprojekte für hochauflösende Displays fit zu machen, kann eine recht umfangreiche Aufgabe sein. Allerdings sollte man – gerade bei neuen Projekten – hohe Pixeldichten immer berücksichtigen. Alle vorgestellten Lösungen können relativ einfach mit Fallbacks ausgestattet werden, sodass man nie Gefahr läuft, ältere Browser außen vor zu lassen.

CSS: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat.

real-world-box

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) und Rand der Kiste (border).

Beim klassischen Box-Modell ist das anders. Dort definiert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border werden hinzugefügt. Visuell sieht dieses klassische Box-Modell so aus (nur zur Erinnerung):

boxmodell_content-box-w640

Man muss manchmal ein bisschen rechnen oder tricksen bis alles passt. Bei Layouts mit festen Pixelbreiten ist das zwar manchmal etwas nervig, aber durchaus machbar.

Doppelte HTML-Elemente als Notlösung

Wirklich problematisch wird das klassische Box-Modell erst, wenn innerhalb einer Box die Angaben für width, padding, border oder margin verschiedene Einheiten verwendet werden, denn dann lässt sich die Gesamtbreite dieses Elements nicht mehr zuverlässig bestimmen:

  • Eine mit <aside class="sidebar"> erstellte Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekommen.
  • Frage: Wie viel Platz muss man für die Sidebar im Layout reservieren?
  • Antwort: Keine Ahnung. Das kann man nicht zuverlässig berechnen.

Damit flexible Layouts aber nicht zur reinen Lotterie verkommen, hat man sich beholfen, indem man das HTML-Element verdoppelt und die Box-Modell-Eigenschaften auf die beiden Elemente verteilt:

  • Innerhalb von aside wird ein zusätzliches div eingefügt.
  • aside bekommt width:20% zugewiesen.
  • Das innere div bekommt eventuelle Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unabhängig vom padding & Co immer eine Breite von 20% und wird im wahrsten Sinne des Wortes berechenbar.

Diese Dopplung von HTML-Elementen ist heute so selbstverständlich, dass wir fast vergessen haben, dass es ursprünglich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbemerkt von der breiten Öffentlichkeit haben die Browser so nach und nach ein zweites Box-Modell eingebaut, das etwas anders funktioniert. In diesem Modell sind padding und border in der Angabe von width bereits enthalten. Es heißt border-box, weil die Breite der Box von border bis border gemessen wird. Grafisch dargestellt sieht das so aus:

boxmodell_border-box_kraken-w640

Im Webdesigner-Alltag ist diese unscheinbare Änderung beim Layouten sehr praktisch. Bei der weiter oben beschriebenen Sidebar spart man damit zum Beispiel das doppelte, innere HTML-Element:

  • Zunächst wird .sidebar { box-sizing:border-box} definiert.
  • Dann wird dem Element z. B. width:20% und ein beliebiges padding oder border zugewiesen.

Fertig.

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt. Was in den meisten Fällen einfach nur praktisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente berechenbar.

Ein mit margin definierter Außenabstand kommt übrigens immer noch hinzu, aber dass ist bei den Boxen im richtigen Leben auch so.

Die border-box im Alltag

Wenn man erst einmal so richtig begriffen hat, wie praktisch diese border-box sein kann, kommt natürlich unweigerlich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

caniuse-com-border-box-kraken-w640

Hey hey, sogar IE8 versteht das. Unbelievable. Mozilla benötigt zwar noch einen Prefix, aber wer den IE7 erst einmal draußen vor lassen kann, könnte sein Stylesheet mit folgendem Style beginnen:

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Und genau das empfiehlt Paul Irish in seinem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als willkommene Alternative zum klassischen Box-Modell, aber bevor Sie komplett auf die border-box umsteigen, sollten Sie die weiter unten gelisteten Artikel studieren. Als Basis für flexible Layouts wird die border-box wahrscheinlich schon ziemlich bald selbstverständlich sein.

Lesenswerte Links zum Artikel

Hier einige lesenswerte Artikel, die gleichzeitig auch ein bisschen den Werdegang von vorsichtigen Versuchen bis zur Empfehlung widerspiegeln:

Und hier noch zwei Referenzen:

Bildquelle Holzbox: 16 Miles of String via photopin cc


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.

CSS3 für Designprofis: Vier Eigenschaften, die man kennen und nutzen sollte
Rahmengrafik

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

CSS3 für Designprofis: Vier Eigenschaften, die man kennen und nutzen sollte
Rahmen gerundet, einfach wiederholt und langgezogen

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.

CSS3 für Designprofis: Vier Eigenschaften, die man kennen und nutzen sollte
Nummerierte Überschrift

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.

CSS3 für Designprofis: Vier Eigenschaften, die man kennen und nutzen sollte
Bild ohne „object-fit“ (oben) und mit: „cover“ und „contain“

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.

Logo - Design
So verhält sich von Haus aus der Text innerhalb einer fixen Box, wenn kein Overflow definiert ist.

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

Logo - Marke
In diesem Beispiel haben wir den Overflow als “hidden” definiert, und der verborgene Text wird durch eine “ellipsis” ersetzt.
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.


Responsive Webdesign: Mit Media-Queries mobile Versionen von Websites erstellen

CSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Wir sind begeistert von den Möglichkeiten, die CSS3 uns bietet und welche Probleme wir damit lösen können. Gleichzeitig sind wir frustriert über die mangelnde Unterstützung im Internet Explorer 8 – um ältere Browser einmal ganz außen vor zu lassen. Dieser Artikel demonstriert ebenfalls eine Technik, die vom IE 8 nicht unterstützt wird. Allerdings ist das auch völlig egal, da die vorgestellte Lösung am sinnvollsten dort eingesetzt wird, wo es eine Menge Unterstützung gibt – nämlich auf kleinen mobilen Geräten wie dem iPhone oder alles, was unter Android läuft.

Im folgenden werde ich erklären, wie Sie eine iPhone-Version Ihrer regulären Website mit CSS 3 erstellen können, die schon jetzt funktioniert. Wir schauen uns ein sehr einfaches Beispiel an und ich werde Schritt für Schritt erläutern, wie ich ein Stylesheet für Geräte mit kleinem Display in meine eigene Website eingefügt habe. An dem Beispiel können Sie nachvollziehen, wie einfach es ist, bestehende Websites um zusätzliche Stylesheets für mobile Geräte zu ergänzen.

Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch media types geregelt.

media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen.

Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

  • Breite und Höhe (des Browser-Fensters)
  • Breite und Höhe des Geräts
  • Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?
  • Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der media queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern. Wenn Sie ein entsprechendes Beispiel in Aktion sehen möchten, schauen Sie sich einmal die jüngst frei geschaltete Website der UK Web Conference an. dConstruct setzt auf der neuen Website für die Konferenz 2010 media queries sehr effektvoll ein.

Web-Design - Webseite
So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.o sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.
CSS-Hack - Cascading Style Sheets
dConstruct 2010 website auf einem iPhone.

Wie Sie an den beiden obigen Abbildungen sehen, wurde die Website nicht einfach an die Größe des kleineren Displays angepasst, sondern das komplette Layout wurde für den einfachen Zugriff mit einem kleinen Ausgabemedien optimiert.

Viele von Ihnen werden jetzt vermutlich denken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf meinem Android-Mobiltelefon angezeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften versorgt die dConstruct-Site alle Arten von Geräten – sogar solche, an die die Entwickler möglicherweise noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schauen uns zunächst ein sehr einfaches Beispiel an. Die folgende Abbildung zeigt ein schlichtes Zweispalten-Layout.

Simple example in a browser
Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleichtern, habe ich mich dazu entschlossen, das komplette Design zu vereinfachen und die Inhalte in einer einzigen Spalte anzuordnen. Weiterhin soll der Header wesentlich kleiner sein, damit die Anwender nicht lange scrollen müssen, bevor sie an die eigentlichen Inhalte gelangen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries können Sie auf verschiedene Weisen verwenden. Eine Methode ist es, den alternativen CSS-Code direkt in das zentrale Stylesheet einzubinden. Um kleine Geräte anzusprechen, verwenden wir die folgende Syntax:

@media only screen and (max-device-width: 480px) {
}

Wir können die alternativen Werte für kleine Displays und Geräte mit geringer Breite innerhalb der geschweiften Klammern einfügen. Indem wir die Kaskade verwenden, können wir ganz einfach alle anderen Deklarationen überschreiben, die wir vorher in unserem CSS-Code für Desktop-Browser notiert haben. Solange dieser Abschnitt an letzter Stelle im Stylesheet steht, werden alle vorhergehenden Regelungen überschreiben.

Um das Layout zu linearisieren und eine kleinere Header-Grafik zu verwenden, füge ich den folgenden Code hinzu:

@media only screen and (max-device-width: 480px) {
     div#wrapper {
     width: 400px;
 }
     div#header {
         background-image: url(media-queries-phone.jpg);
         height: 93px;
         position: relative;
 }
     div#header h1 {
         font-size: 140%;
 }
     #content {
         float: none;
         width: 100%;
 }
     #navigation {
         float:none;
         width: auto;
     }
 }

Im vorhergehenden Code verwende ich ein alternatives Hintergrundbild, reduziere die Höhe des Headers, setze die zuvor für das zweispaltige Layout deklarierten Floats auf none und überschreibe die ursprüngliche Breite. Diese Vorgaben werden nur bei einem Gerät mit kleinem Display angewendet.

Simple example on a phone
So sieht mein simples Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spezifischen Code für kleine Geräte inline zu notieren, mag ganz gut sein, wenn Sie nur geringüfige Änderungen vorzunehmen haben. Wenn Sie jedoch größere Änderungen vornehmen oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser kleiner Geräte trennen möchten, empfiehlt sich ein Link auf ein separates Stylesheet.

Um ein separates Stylesheet für kleine Geräte nach Ihrem Hauptstylesheet einzufügen und das Kaskadieren zum Überschreiben der Deklarationen zu nutzen, verwenden Sie den folgenden Code:

<link rel="stylesheet" type="text/css" 
media="only screen and (max-device-width: 480px)" 
href="small-device.css" />

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein anderes Gerät mit einem media-queries-unterstützenden Browser besitzen, können Sie den CSS-Code selbst testen. Allerdings müssen Sie den Code irgendwo hochladen, um ihn anzeigen zu können. Was tun Sie jedoch, wenn Sie die entsprechenden Geräte nicht besitzen und lokal testen möchten?

Online-Dienste nutzen
Eine hervorragende Website, die Sie beim Entwicklungsprozess unterstützt ist ProtoFluid. Im Formular rechts oben können Sie Ihre URL eingeben (kann auch eine lokale sein) und das Design anschließend in einer Vorschau anzeigen, so wie es auf einem iPhone, iPad und einer Reihe anderer Geräte dargestellt würde. Das folgende Bildschirmfoto zeigt die bereits bekannte dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

dConstruct site in ProtoFluid
Die dConstruct-2010-Website in ProtoFluid

Sie können auch Ihre eigene Fenstergröße eingeben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimmtest Gerät testen – vorausgesetzt Sie kennen die Abmessungen des Displays.

Unsere weiter oben verwendete Media Query müssen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width einzubinden. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr kleinen Fenster nutzt.

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
}

Nachdem Sie Ihren Code entsprechend angepasst und die Seite im Browser neu geladen haben, ziehen Sie doch einfach mal das Browserfenster kleiner und schauen Sie, was passiert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vorgegebenen Wert von 480 Pixeln entspricht.

Das wirklich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nutzen können – etwas, worauf Sie verzichten müssen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich sollten Sie Ihr Layout auf so vielen verschiedenen Geräten wie möglich anzeigen lassen und ausprobieren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesentlich einfacher.

Hinweis: Wenn Sie vermeiden möchten, dass das Layout Ihrer Website verändert wird, sobald ein Anwender die Größe des Browser-Fensters reduziert, können Sie die Vorgabe für die maximale Breite aus Ihrer Media Query entfernen, bevor Sie die Website frei schalten. So stellen Sie sicher, dass das alternative Layout nur bei der Abfrage mit Browsern kleiner Geräte gezeigt wird, nicht jedoch bei kleinem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vorhergehende Beispiel ist sehr einfach gehalten, um die Technik zu demonstrieren. Sie können dieses Beispiel allerdings auch dafür einsetzen, um eine bestehende Website um eine zusätzliche Version für kleine Geräte zu ergänzen. Eines der überzeugendsten Verkaufsargumente für CSS-Layouts war ja gerade die Fähigkeit, alternative Versionen eines Designs zu ermöglichen.

Es folgt ein kleines Experiment mit meiner Firmen-Website, deren Layout ich mithilfe der beschriebenen Technik umbauen werde.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehrspaltiges Layout. Die Startseite ist etwas anders gestaltet – ansonsten handelt es sich um drei Spalten mit fester Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berücksichtigt haben.

edgeofmyseat.com website in Safari on the desktop
Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da viele Änderungen erforderlich sind, um das Layout zu vereinfachen, werde ich ein separates Stylesheet erstellen und Media Queries dafür verwenden, um das neue Stylesheet nach dem aktuellen Stylesheet zu laden – aber nur dann, wenn die abgefragte maximale Breite weniger als 480 Pixel beträgt.

<link rel="stylesheet" type="text/css" 
media="only screen and (max-width: 480px), 
only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" />

Zunächst erstelle ich eine Kopie des bestehenden Stylesheets und speichere sie unter dem Namen small-device.css. Anschließend überschreibe ich Schritt für Schritt bestimmte Regeln und lösche alles, was ich nicht benötige.

Den Header verkleinern

Meine erste Änderung: Das Logo soll auf einem kleinen Display schön dargestellt werden. Da es als Hintergrundbild eingebunden ist, kann ich in diesem Stylesheet ohne Probleme eine andere Bildquelle für das Logo angeben. Zudem verwende ich ein weiteres Hintergrundbild mit einem kürzeren oberen Bereich, über dem das Logo platziert ist.

body {
     background-image: url(/img/small-bg.png);
}
#wrapper {
     width: auto;
     margin: auto;
     text-align: left;
     background-image: url(/img/small-logo.png);
     background-position: left 5px;
     background-repeat: no-repeat;
     min-height: 400px;
}

Das Layout linearisieren

Als nächste größere Aufgabe vereinfache ich das Layout und stelle es einspaltig dar. Das Layout für die Desktop-Version wird über floats realisiert. Ich muss daher nur den Parameter der Eigenschaft float auf none setzen und die Breite auf auto. Nun werden die Spalten einfach nacheinander statt nebeneinander dargestellt.

.article #aside {
     float: none;
     width: auto;
}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind lediglich kleine Änderungen erforderlich, um Ränder und Innenabstände auf passende Werte zu setzen, da die ursprünglichen Spalten nun untereinander, nicht nebeneinander, angeordnet sind.

Ich erledige das, indem ich innerhalb von ProtoFluid mit Firebug herumspiele, und die Werte so lange ändere, bis ich mit dem Ergebnis zufrieden bin. Anschließend kopiere ich den CSS-Code in das Stylesheet.

The mobile layout on ProtoFluid
Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das separate Styhlesheet erstellt und auf den Server hochgeladen habe, möchte ich es natürlich auch auf einem real existierenden Zielgerät testen. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor ausgezoomt – über die volle Breite – angezeigt wird, anstatt auf meine gute lesbare einzelne Spalte zu zoomen.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vorgibt, schafft Abhilfe:

<meta name="viewport" content="width=device-width" />

Nach dem Einfügen des Metatags wird die Seite korrekt im einspaltigen Layout auf dem iPhone angezeigt.

edgeofmyseat.com on the iPhone
Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An diesem schlichten Umbau können Sie nachvollziehen, wie einfach es ist, Ihrer Website eine mobile Version zu spendieren. Beim Erstellen einer ganz neuen Webpräsenz mit Media Queries würde ich von vornherein etwas anderes vorgehen und auf die folgenden Aspekte achten:

  • geeignete Reihenfolge der Spalten berücksichtigen,
  • so oft wie möglich und wo sinnvoll Hintergrundbilder verwenden, da sie leicht per CSS zu wechseln sind,
  • gegebenenfalls fluid images einsetzen.

In unserem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist dieser Content Slider nicht einfach zu bedienen. Daher prüfte ich mithilfe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler deshalb nicht gestartet wird. Das Script war ohnehin schon so geschrieben, dass der Effekt – das Laden des Sliders zu stoppen, immer dann ausgelöst wird, wenn eine Arbeitsprobe auf dem Bildschirm angezeigt wird. Das schien eine ganz passable Lösung für Anwender mit kleinen Geräten zu sein. Mit etwas mehr Code konnte ich eine alternative Version des Image Sliders für die Anwender mobiler Geräte erstellen, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens besser angepasst ist.

Tutorials und Ressourcen

Obwohl diese Technik noch relativ neu ist, gibt es bereits zahlreiche hervorragende Tutorials zum Einsatz von Media Queries. Wenn Sie weitere gute Tutorials oder Referenzen kennen, posten Sie die Links doch bitte in den Kommentaren.

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS 3 in Ihrer täglichen Arbeit zu verwenden. Denken Sie daran, dass Media-Queries-fähige Browser auch eine Reihe anderer CSS-3-Eigenschaften unterstützen. In Ihren zusätzlichen Stylesheets für kleine Geräte können Sie daher unbesorgt weitere CSS-3-Eigenschaften verwenden, um bei Ausgabe auf einem SmartPhone, iPad oder sonstigem mobilen Gerät elegante Effekte zu erzielen.


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:

Bildschirmfoto - Winkel
So wird die fertige Tabelle später aussehen.

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:

HTML Tabelle


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:

Linie - Winkel

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:

Tabelle mit Grundgestaltung

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.

Marke - Produktdesign
Ein Klick aufs Bild öffnet eine Demoseite.

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.

css-tabellen-responsiv_scrollbar


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.

css-tabellen-responsiv_untereinander


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

See the Pen Responsive Tables (Tabs & Accordions) by Dr. Web (@drweb) on CodePen.light

Dreispaltige Tabellen ohne Javascript

See the Pen Responsive Tabellen (CSS-only) by Dr. Web (@drweb) on CodePen.light

Responsive Tabelle mit Akkordion

See the Pen Responsive Tabelle mit Akkordion by Dr. Web (@drweb) on CodePen.light


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

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" /></a></li>
  <li><a href="#bild2"><img src="bild2_klein.jpg" /></a></li>
  <li><a href="#bild3"><img src="bild3_klein.jpg" /></a></li>
</ul>
<ul class="lightbox">
  <li id="bild1"><a href="#start"><img src="bild1.jpg" /></a></li>
  <li id="bild2"><a href="#start"><img src="bild2.jpg" /></a></li>
  <li id="bild3"><a href="#start"><img src="bild3.jpg" /></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-Kurzschreibweisen inklusive Cheatsheets

Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.

Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:

  • übersichtlicher
  • einfacher zu warten
  • Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
  • geringere Dateigröße.

Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.

Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.

screen


Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.

Border

Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.

Eigenschaften:

border-width: 1px;
border-style: solid;
border-color: #FF0000;

Kurzschreibweise:

border: 1px solid #FF0000;

Standardwerte:

border-width: medium;
border-style: none;
border-color: #000000; /*Browser abhängig, meist schwarz*/

margin

Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.

Eigenschaften:

margin-top: 1px;
margin-bottom: 2px;
margin-right: 3px;
margin-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

margin: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

margin: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

margin: 1px 3px;

1px nach oben, unten, rechts und links

margin: 1px;

Standardwerte

0

Padding

Für padding verhält sich das ebenso.

Eigenschaften:

padding-top: 1px;
padding-bottom: 2px;
padding-right: 3px;
padding-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

padding: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

padding: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

padding: 1px 3px;

1px nach oben, unten, rechts und links

padding: 1px;

Standardwerte:

0

Background

Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.

Eigenschaften:

background-color: #FF0000;
background-image: url(../img/background.png);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center;

Kurzschreibweise:

background:#FF0000 url(../img/background.png) fixed repeat-x center;

Standardwerte:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left; /*0% 0% */
background-attachment: scroll;

font

Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).

Eigenschaften:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 1em;
font-family: Arial Sans-serif;

Kurzschreibweise:

font: italic small-caps bold 2em/1em Arial Sans-serif;

Standardwerte:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: normal;
font-family: ; /*Browser abhängig*/

list-style

Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.

Eigenschaften:

list-style-type: square;
list-style-position: inside;
list-style-image: url(../img/list-style.png);

Kurzschreibweise:

list-style: square inside url(../img/list-style.png);

Standardwerte:

list-style-type: disc;
list-style-position: outside;
list-style-image: none;

Der direkte Vergleich

Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt, jeweils in Kurzschreibweise und Normalschreibweise.

ZeichenZeilenBytes
Css_long.css69242774
Css_short.css32323367

Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++

Hexadezimalfarben

Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.

color: #RRGGBB;

Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.

color: #RGB;

Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.

Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.

Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:

Schwarz#000000#000black
Weiß#FFFFFF#FFFwhite
Rot#FF0000#F00red
Blau#0000FF#00Fblue
Grün#00FF00#0F0green
(Limone) Grün#00FF00#0F0lime
Gelb#FFFF00#FF0yellow

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);
}
css-shapes_kreis


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" />
<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;
}
css-shapes_bild


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

css-shapes_chrome-erweiterung1


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.

css-shapes_chrome-erweiterung2


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 kostenlosen Editor Brackets verwendet, den wir Ihnen in diesem Beitrag vorstellten, findet an dieser Stelle eine entsprechende Erweiterung, um CSS Shapes komfortabel erstellen und bearbeiten zu können.

Eine beeindruckende Demo zur Verwendung von CSS Shapes gibt es bei Adobe: Alice in Wonderland.

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.

Eine Zeichnung einer Zeichentrickfigur - CSS3


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.

kombinierte-transitions2


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


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.

In anderer Farbe unterstrichener Text

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.

Unterstrichener Text, bei dem Unterlängen ausgespart sind

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.

Unterstrichener Text, bei dem die Unterstreichung unterhalb der Unterlängen liegt

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.

Unterstreichung mit geschwungener Linie

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.

Clippy baut einfache und komplexe Beschneidungspfade visuell. (Screenshot: Dr. Web)
Clippy baut einfache und komplexe Beschneidungspfade visuell. (Screenshot: Dr. Web)

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.

Clippy bietet ihnen 26 Grundformen und einen Editor für beliebig komplexe, eigene Formen. (Screenshot: Dr. Web)
Clippy bietet Ihnen 26 Grundformen und einen Editor für beliebig komplexe, eigene Formen. (Screenshot: Dr. Web)

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.

Durch die Verknüpfung zu Codepen, kann man jeden Codeschnipsel direkt weiter bearbeiten. (Screenshot: Dr. Web)
Durch die Verknüpfung zu Codepen, kann man jeden Codeschnipsel direkt weiter bearbeiten. (Screenshot: Dr. Web)

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.

PageSpeed-Optimierung: Gas geben auf den letzten Metern
PageSpeed-Optimierung: Gas geben auf den letzten Metern

Eine rätselhafte Meldung bei den Pagespeed Insights

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

Die letzte Hürde zu 100%
Die letzte Hürde zu 100%

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.

Critical Path CSS Generator von Jonas Ohlsson
Critical Path CSS Generator von Jonas Ohlsson

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:

Inline-CSS
Inline-CSS

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.

Das WordPress Plugin Autoptimize hilft bei der PageSpeed-Optimierung.
Das WordPress Plugin Autoptimize hilft bei der PageSpeed-Optimierung.

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;  
}
Desktopversion einer Website
Angepasste Druckversion

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, das Wiki. (Screenshot: Dr. Web)

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

W3Schools

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 Developer Network

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

Can I use …

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

Stack Overflow

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

Mediaevent

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

Web Fundamentals

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

HTML Cheat Sheet

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.


So entfernt man das Gutenberg-CSS aus WordPress

Seit gut einem Jahr, genauer mit dem Maintenance Release 4.9.8 im August 2018, ist der neue Gutenberg-Editor fester Bestandteil von WordPress.

In diesem Release war eine Gutenberg-Demo enthalten und musste nicht mehr aktiv vom Benutzer als Plugin installiert werden. Somit konnten alle Benutzer den neuen Editor testen, bevor er mit WordPress 5.0. „Bebo“ der neue Standard-Editor von WordPress wurde.

Das Problem war nur: Nicht jedes Theme oder Plugin war zum Start von Gutenberg bereit, mit dem neuen Editor zusammenzuarbeiten. Auch Gutenberg selbst war und ist nicht fehlerfrei.

Das hat zu großen Diskussionen innerhalb der WordPress-Community geführt und neben diversen Plugins, die Gutenberg abschalten, ClassicPress hervorgebracht, ein Fork von WordPress aus der Zeit vor Gutenberg.

Ich möchte an dieser Stelle aber gar nicht auf das Für und Wider von Gutenberg eingehen, sondern will dir kurz aufzeigen, was es bei der Abschaltung von Gutenberg zu beachten gibt.

Zu Anfang gab es noch einige Plugins, die den Gutenberg-Editor deaktiviert haben. Mittlerweile hat sich ganz klar ein Plugin etabliert, wenn man deine Website ohne Gutenberg betreiben möchtest oder musst:

Mit über 5 Millionen aktiven Installationen (Stand August 2019) ist der Classic Editor das Mittel der Wahl.

1. Den Classic-Editor installieren

Nach der Installation und Aktivierung des Plugins kann man den Editor global als Standard-Editor einstellen. Das Plugin bringt keine komplexen Konfigurationen mit sich, sondern regelt die Einstellungen „Gutenberg oder nicht“ für deine WordPress-Installation an zentraler Stelle unter Einstellungen › Schreiben.

Nach der Installation des Classic Editors kannst du selbigen in Einstellungen, Schreiben aktivieren.
Nach der Installation des Classic Editors kann man selbigen in Einstellungen › Schreiben aktivieren.

Nach erfolgreicher Umstellung auf den Classic Editor sieht deine Eingabemaske wieder wie vor dem Gutenberg Update aus und alle Komponenten, egal ob Theme, Plugin, etc. arbeiten wie gewohnt.

Das wars, alter Zustand wieder hergestellt? Fast!

2. Das Gutenberg-CSS entfernen

Einen Schönheitsfehler bringt das WordPress Update seit der Version 5 mit sich. Mit der Umstellung auf Gutenberg werden auch neue Ressourcen (Javascript, CSS) im Frontend ausgegeben.

Da wir gerade den Editor ausgetauscht haben, brauchen wir z.B. das gesamte „Block CSS“, welches uns WordPress ausspielt, nicht mehr.

Für Gutenberg wird im Frontend die Datei wp-includes/css/dist/block-library/style.min.css mit einer Dateigröße von ca. 30KB geladen.

Das ist für unsere Lösung ohne Gutenberg nur unnötiger Ballast, denn in Zeiten von Performance-Optimierungen zählt jedes Byte und jeder Request. (Mehr zur Performance-Optimierung in WordPress.)

Man kann das Laden der Datei aber ganz einfach mit folgendem Code in deiner functions.php unterbinden:

add_action( 'wp_enqueue_scripts', 'drweb_remove_gutenberg_block_css', 100 );
function drweb_remove_gutenberg_block_css() {
wp_dequeue_style( 'wp-block-library' ); }

Durch das Ausführen des obigen Codes wird WordPress angewiesen, die Referenz auf wp-block-library-css zu löschen und die Datei wird nicht mehr automatisch ausgespielt. Somit spart man sich einen unnötigen HTTP-Request und macht die Seite einen Tick schneller.

Anzeige

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

On Key

Related Posts

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.

Ein aufgeräumtes Home Office

Organisiert ins Social Distancing: Die besten Tools fürs Home Office

Gerade ist das Thema Heimarbeit branchenübergreifend präsent wie nie. Aber auch unabhängig von Kontaktsperren in Zeiten des Coronavirus stellt einen das Home-Office für die Eigenorganisation und für die Kommunikation mit den lieben Kollegen vor ganz andere Herausforderungen als im Büro.