Abkürzfimmel für Fortgeschrittene

Tipps und Tricks: HTML und CSS
Kommentare

„Weniger ist mehr“, „Fasse Dich kurz“ oder „In der Kürze liegt die Würze“ sind altbekannte Redensarten, die sich auch der Webentwickler zu Herzen nehmen sollte. Das spart Entwicklungszeit und schafft Übersichtlichkeit im Code. Die Zugänglichkeit wird optimiert und die Seiten laden schneller. Im Zentrum steht bei diesem Thema die Kurzschreibweise mit CSS, doch der Blick auf den (X)HTML-Code gehört ebenfalls dazu. Denn wenn man hier die Zusammenhänge im Auge behält, ergeben sich auf beiden Ebenen jede Menge Tipps und Tricks, um die Kunst des Weglassens zu erlernen.

In den letzten Ausgaben haben wir in unserer Serie zum modernen Webdesign bereits mehrfach die Kurzschreibweise in CSS angewandt, ohne diese genauer zu erläutern. Wer beginnt, sich mit CSS zu beschäftigen, wird sich aber meistens zuerst die Langschreibweise aneignen. Da dies ein üblicher Lernprozess ist, wollen wir uns in dieser Ausgabe etwas detaillierter mit der Kurzschreibweise in CSS auseinandersetzen. Zuvor vergewissern wir uns nochmals der CSS-Syntax. Der grundlegende Aufbau der CSS-Schreibweisen funktioniert nach folgendem Muster: mindestens ein Selektor, geschweifte Klammer auf, Deklarationsblock aus mindestens einer Eigenschaft nebst Doppelpunkt, Wert und Strichpunkt sowie geschweifte Klammer zu. Eine vollständige Erläuterung der CSS-Spezifikation würde den hier vorgegebenen Rahmen sprengen, aber eine übersichtliche Darstellung einschließlich der Browserkompatibilitäten findet sich bei CSS 4 YOU. Der obere Außenabstand von 20 Pixeln eines Langzitates würde dann wie folgt ausgezeichnet werden:

blockquote {
margin-top:20px;
}

Diese Basissyntax bleibt natürlich auch in der Kurzschreibweise erhalten. Doch bevor man an die einzelnen Elemente einer Website herangeht, kümmert man sich um „Grundeinstellungen“, um unnötige Abweichungen in der Darstellung zu vermeiden.

Am Anfang: Alles zurück!

Wer eine ungestylte Seite in verschiedenen Browsern betrachtet, wird feststellen, dass die visuelle Darstellung unterschiedlich ist. Die default-Werte der einzelnen Browser für Abstände und Schriftgrößen sind nicht identisch. Eine Menge Ärger beim Rendering erspart man sich, indem man zu Beginn alle notwendigen Eigenschaften auf null stellt bzw. zurücksetzt. Dies geschieht mit dem so genannten Universalselektor, der aus einem einfachen Asterisk besteht:

* {
margin:0;
padding:0;

Bitte beachten Sie, dass der Wert null keine Maßangabe braucht. Null ist null, und nicht null Pixel, null Äpfel oder null Bock. Zusätzlich empfiehlt sich, die Listenstile auszublenden, da zum einen manche Browser bei

    /
      , andere bei
    1. rendern und zum anderen Listenpunkte – wenn überhaupt – in den meisten Designs mit Hintergrundbildern oder eigenen Listenbullets dargestellt werden:

      list-style:none;
      }

      Ähnlich ist es bei den Schriften. Hier benötigt es allerdings schon den ersten Workaround.

      Schrift ist nicht nur Text

      Wer die Schriftgröße eines Elements auszeichnet, sollte im Auge behalten, dass sich dies – gerade bei flexiblen bzw. skalierbaren Größenangaben – immer auch auf die Größenangaben innerhalb dieses Elements auswirkt. Verändert man also nachträglich die Größenangabe in einem Elternelement, hat dies meist Konsequenzen für das gesamte Layout. Hier ist also überlegtes Vorgehen von Beginn an gefragt. Das wichtigste für eine möglichst pixelidentische Darstellung ist zunächst, dass alle Browser dieselbe Schriftgröße rendern. Um die zahlreichen Bugs im Internet Explorer auszugleichen, setzt man den body auf 100.01 Prozent. Gleichzeitig kann man einen Standard-Zeilenabstand definieren, das Schriftgewicht zentral festlegen und vor allem eine Schriftart für das Projekt bestimmen:

      body {
      line-height:1.4em;
      font-weight:normal;
      font-size:100.01%;
      font-family:arial, sans-serif;
      }

      Das ist die Langschreibweise. Bei der Eigenschaft font kann man aber nach dem Muster: „Schriftgewicht Schriftgröße/Zeilenabstand Schriftart(en)“ alle obigen Deklarationen zusammenfassen:

      body {
      font:normal 100.01%/1.4em arial, sans-serif;
      }

      Eine Codeeinsparung um fast 50 Prozent braucht wohl keine weiteren Argumente. Wichtig ist vielleicht noch der Hinweis, dass bei der Schriftart immer zusätzlich eine so genannte generische Schriftart, die man sich wünscht, angegeben wird. Bekanntlich können Schriftarten nur auf der Basis eingesetzt werden, dass sie beim Benutzer auf seinem lokalen System auch installiert sind. Selbst bei Standards wie Arial oder Times New Roman gibt es keine 100-prozentige Flächendeckung. Die Werte serif oder sans-serif sorgen dafür, dass die Browser die vom System hierfür vorgesehenen Standardschriftarten einsetzen.

      Rock around the clock

      Alle Elemente, die über die Eigenschaften top, right, bottom oder left verfügen, können ebenfalls zusammengefasst werden. Diese vier Werte werden dabei immer im Uhrzeigersinn, beginnend oben, aufgeführt. Das Beispiel:

      p {
      margin-top:5px;
      margin-right:10px;
      margin-bottom:7px;
      margin-left:0;
      }

      lautet in Kurzschreibweise

      p {
      margin:5px 10px 7px 0;
      }

      Je nach Werten bestehen hier weitere Kürzungsmöglichkeiten. Dabei werden immer die gegenüberliegenden Werte (top/bottom und right/left) ins Visier genommen. Sind sie identisch, kann man sie zusammenfassen. Hier kommen dann mehrere Varianten in Betracht:

      • margin:10px; bedeutet, dass alle vier Außenabstände gleich 10 Pixel sind.
      • margin:5px 10px; bedeutet demnach, dass die oberen und unteren Werte je 5px, die rechten und linken je 10px betragen.
      • margin:5px 10px 7px; bedeutet, dass der rechte und der linke Außenabstand gleich groß ist.
      • Sind die Werte des oberen und unteren Außenabstands identisch, aber der linke und rechte nicht, kann man die zuerst genannten nicht zusammenfassen und muss alle vier Werte angeben. Beispiel: margin:0 0 0 10px;

      Diese Auszeichnungsregeln gelten auch für den Innenabstand (padding). Hinsichtlich des Gesamtbildes muss man aber darauf hinweisen, dass padding in Zusammenhang mit Weitenangaben im Internet Explorer (bis 5.5) immer den Box-Model-Bug [3] auslöst. In Hinblick auf die vielen Workarounds, die das imperialistische Testgerät benötigt, sollte man generell die Strategie fahren, ein CSS so zu schreiben, dass man diese erst gar nicht einsetzen muss. Hinsichtlich des Einsatzes von padding und margin gilt hier folgende Regel: „Wenn möglich, nicht padding im Elternelement, sondern margin im Kindelement festlegen.“ Hat man also beispielsweise eine Navigationsliste mit definierter Breite und möchte, dass diese Box rechts und links einen Innenabstand von 20px hat, schreibt man hierfür nicht ul {padding:0 20px;}, sondern li {margin:0 20px;}.

      Hintergrundwissen für Designer

      Bei der visuellen Gestaltung einer Website ist die Eigenschaft background von entscheidender Bedeutung, denn hier kommen Formen, Farben und Grafiken ins Spiel, ohne sie in den HTML-Code einbauen zu müssen. Und auch hier bieten sich umfangreiche Kürzungsmöglichkeiten. Wollte man beispielsweise einen Listeneintrag mit einem Hintergrundbild, einer Hintergrundfarbe und einer umgebenden Linie auszeichnen, könnte die Langfassung beispielsweise so aussehen:

      li {
      background-color:#f5f7f9;
      background-image:url(bullet.gif);
      background-position: 5px 8px;
      background-repeat:no-repeat;
      border-width:1px;
      border-style:solid;
      border-color:#556677;
      }

      Die Position des Hintergrundbildes benötigt dabei immer zwei Koordinaten, zuerst diejenige vom linken Rand der Box, anschließend diejenige von oben. Zusätzlich kann man mit dem Wert 100-prozentig eine Positionierung ganz rechts bzw. ganz unten vornehmen. Statt der numerischen Werte kann man auch die Schlüsselbegriffe left, top, right, bottom einsetzen. Aber aufgrund der Zeichenanzahl spricht nichts dafür. Wie auch immer, man sollte auf jeden Fall nie verbale und numerische Werte miteinander mischen. Manche Browser rendern dann nicht mehr korrekt. Alle genannten Eigenschaften lassen sich aber auch nach dem Muster Farbe, Dateiquelle, Position von links, Position von oben, Wiederholungsverhalten zusammenfassen. In unserem Beispiel bedeutet dies:

      li {
      background:#f5f7f9 url(bullet.gif) 5px 8px no-repeat;

      Bei der Liniengestaltung geht dies ähnlich. Hier folgt man dem Syntaxmuster Linienstärke, Linienart, Farbe. Bei den Farben selbst ergibt sich eine weitere Kürzungsmöglichkeit. Empfiehlt sich generell, hier Hexadezimalwerte anzugeben, die nach dem Muster X1X2-Y1Y2-Z1Z2 für Rot-Gelb-Blau notiert werden, kann man hier nur einen Wert angeben, wenn in allen drei Farben die Werte identisch sind. Um bei unserem Beispiel zu bleiben, kann man das Ganze also auch hier kürzer formulieren:

      border:1px solid #567;
      }

      In Sachen CSS-Kurzschreibweise sind nun die wesentlichen Möglichkeiten bekannt. In Folgenden beschäftigen wir uns mit weiteren Kürzungsmöglichkeiten, die in unmittelbarem Zusammenhang mit dem HTML-Code stehen bzw. diesen selbst betreffen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -