CSS/Einstieg in CSS

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Dieser Artikel dient als Einstieg in CSS. Mit Cascading Style Sheets (engl. für: mehrstufige Formatvorlagen) können Sie das Aussehen von Text und HTML-Elementen festlegen. Im Artikel Warum Layouts mit CSS? werden die Vorteile von zentralen Formatierungen mit Stylesheets erklärt.

Syntax[Bearbeiten]

Regelsatz und Deklaration[Bearbeiten]

In CSS sind Eigenschaften innerhalb von Regelsätzen (auch Regeln) organisiert. Ein Regelsatz besteht aus:

  • Einem Selektor oder einer Gruppe von Selektoren, gefolgt von
  • einem durch geschweifte Klammern begrenzten Bereich, in dem
  • eine oder mehrere Deklarationen stehen, in denen Eigenschaften ein Wert zugewiesen wird.

Eine Deklaration benötigt zwischen Eigenschaft und Wert einen Doppelpunkt und schließt mit einem Semikolon ab.

Beachten Sie: Die letzte Deklaration eines Regelsatzes benötigt genau genommen kein Semikolon. Wenn Sie den Regelsatz später aber erweitern, wird die folgende Deklaration ignoriert.
Beispiel: Regelsätze ansehen …
h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: 1em; 
  padding-left: 1em;
}
Der erste Regelsatz besteht aus einem Selektor h1, dem als Deklaration die Eigenschaft color mit der Farbangabe rot zugewiesen wird.

Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, über die den Überschriften mit …

zugewiesen werden. Der Wert 1em ist ein relatives Längenmaß und entspricht ungefähr der Breite des Großbuchstabens M.

Selektoren können HTML-Elemente, aber auch ganz spezielle Kombinationen sein. Sie werden im Abschnitt CSS/Selektoren ausführlich behandelt.

„shorthand“-Eigenschaften[Bearbeiten]

Werden einer Eigenschaft mehrere Werte zugewiesen, handelt es sich üblicherweise um eine so genannte „shorthand“-Eigenschaft. Dabei handelt es sich um Eigenschaften, die mehrere andere Eigenschaften zusammenfassen.

Beispiel: Deklarationen für „shorthand“-Eigenschaften ansehen …
h1 { 
  color: red; 
  font: 300% cursive;
}

h1, h2 { 
  background-color: #ccc;
  border-radius: 1em; 
  border: thin solid red;
}
Die Deklaration für die zusammenfassende Eigenschaft font hat einen Wert für die Schriftgröße und durch ein Leerzeichen getrennt einen für den Schrift-Stil (die Einzeleigenschaft font-style).
Der zweite Regelsatz enthält eine Deklaration für die zusammenfassende Eigenschaft border, die den Selektoren eine Randlinie zuweist. Hier werden mehrere Werte für Breite, Stil und Farbe durch Leerstellen voneinander getrennt.

Durch die Angabe einer „shorthand“-Eigenschaft wie z.B.

.btn {
  background: red;
}

setzen Sie aber nicht nur die Hintergrundfarbe, sondern implizit auch weitere Eigenschaften:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

Besonders bei Farbverläufen können solche Festlegungen dann zu unerwünschten Verhalten führen.[1]

Empfehlung: Setzen Sie CSS-Festlegungen so sparsam wie möglich.
Legen Sie im Zweifelsfall lieber Einzeleigenschaften anstelle der „shorthand“-Eigenschaften fest.

Mehrfaches Vorkommen einer Eigenschaft[Bearbeiten]

Der Browser arbeitet die verschiedenen Deklarationen des Stylesheets nacheinander ab. Wenn eine Eigenschaft mehrfach definiert wird, so gilt nur der zuletzt akzeptierte gültige Wert. Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitende Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch für unbekannte oder ungültige Werte.

Beispiel
h1 { 
  color: red; 
  color: verygreen; 
  color: gren; 
}
In diesem Beispiel wird für ein Element die Schriftfarbe rot definiert. Die nachfolgenden Wertzuweisungen werden ignoriert, denn der Farbname „verygreen“ ist keine in CSS gültige Farbangabe und auch der Wert „gren“ (statt „green“) wird nicht akzeptiert.

Dieses System machte man sich bei herstellerspezifischen Eigenschaften zunutze, bei denen vor der eigentlichen Deklaration eine Deklaration mit einem vendor-prefix wie -webkit- notiert wurde. Wenn eine Eigenschaft in den Standard übernommen wurde, konnten die Browser dann die „normale“ Deklaration verwenden.

Empfehlung: Die in vielen Code-Beispielen im Internet noch verwendeten herstellerspezifischen Eigenschaften sind heute oft nicht mehr nötig.
Beispiel: mehrfache Angaben als Fallback für ältere Browser
body { 
  background: skyblue; 
  background: linear-gradient(white, skyblue); 
}
Dieses Beispiel enthält zwei Angaben für den Hintergrund. Zuerst wird in der zusammenfassenden Eigenschaft background der Wert für eine flächige Hintergrundfarbe festgelegt. Diese Deklaration wird durch die Festlegung eines Farbverlaufs überschrieben. Ältere Browser wie der IE9 (der mittlerweile aber auch fast ausgestorben ist), ignorieren die ihnen unbekannte Eigenschaft.

Kommentare[Bearbeiten]

Um die Übersicht zu behalten oder bestimmte Regelsätze zu erläutern, ist es möglich, innerhalb von Stylesheets Kommentare zu verfassen, die vom Browser bei der Anzeige des Dokuments ignoriert werden. Ein Kommentar beginnt mit den Zeichen /* und endet mit dem ersten Auftreten der Zeichen */. Das bedeutet, dass Kommentare nicht ineinander verschachtelt werden können.

Beispiel
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */ /* Verschachtelte /* Kommentare sind */ nicht möglich */
Kommentare dürfen sich über mehrere Zeilen erstrecken. Jedoch ist es nicht möglich, Kommentare zu verschachteln.
Beachten Sie: Die aus vielen Programmiersprachen bekannten einzeiligen Kommentare gibt es in CSS nicht.

Stylesheets einbinden[Bearbeiten]

Es gibt mehrere Möglichkeiten, Formatfestlegungen mit CSS in HTML-Dokumenten einzubinden.

Formate direkt in einem style-Attribut festlegen[Bearbeiten]

Mit dem Universalattribut style können Sie Eigenschaften einem Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.

Beispiel: Formate direkt festlegen ansehen …
<p style="text-align: center; color: green;">
  Dieser Absatz wird über ein style-Attribut formatiert. 
</p>
Dieses Beispiel zeigt, wie einem p-Element per style-Attribut verschiedene Formate zugewiesen werden können. Diese Festlegung gilt aber nicht für weitere Textabsätze.
Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.

Formate zentral in einem style-Element festlegen[Bearbeiten]

Das HTML-Element style erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen.

Beispiel ansehen …
<!doctype html>
<html lang="de">
  <head>
    <style>
    h1 { 
       background-color: green;
       color: white;
    }
    p {
    	text-align: center; 
    	color: green;
    }
    </style>
  </head>
In diesem Beispiel wird das Format für das Überschriftenelement h1 und alle Textabsätze des Dokuments innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.

Einbinden einer externen Datei[Bearbeiten]

Im Normalfall besteht eine Webpräsenz aus mehreren (oft hunderten) von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element link direkt im head einzubinden.

Beispiel: Einbinden eines externen Stylesheets
<!doctype html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    ...
Das link-Element ist ein Kindelement des head-Elements.

Folgende Attribute gibt es:

  • rel definiert den logischen Beziehungstyp des Elements. „stylesheet“ bedeutet, dass ein Stylesheet eingebunden werden soll.
  • href: referenziert die einzubindende Stylesheetdatei.

Diese beiden Attribute sind erforderlich und ausreichend um ein Stylesheet einzubinden. Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben.

  • type: enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Da dies in HTML der Standard Typ ist, kann es weggelassen werden.
  • media: kann festlegen, dass ein Stylesheet nur dann verarbeitet werden soll, wenn das Dokument von einem bestimmten Ausgabemedium ausgegeben wird. Als Attributwert ist eine Medienabfrage erlaubt, beispielsweise screen für Bildschirme oder print für Drucker (siehe: medienspezifische Stylesheets). Ist das Attribut nicht definiert, gilt der Standardwert all. Das Stylesheet wird dann unabhängig vom verwendeten Ausgabemedium verarbeitet.
  • title: Werden mehrere Stylesheets eingebunden, die einen Titel besitzen, werden alternative Stylesheets definiert.

Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.

Empfehlung: CSS erlaubt es, erlauben es, mit Medienabfragen (Media Queries) für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen festzulegen. Passen Sie Ihr Layout flexibel an.

typische Fehlerquellen[Bearbeiten]

Wenn es zu Problemen in der Darstellung kommt, sind die Ursache häufig Flüchtigkeitsfehler in der Syntax oder logische Fehler.

Gleichheitszeichen bei Wertzuweisungen[Bearbeiten]

Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.

Beispiel: Wertzuweisung mit Gleichheitszeichen ansehen …
h1 { color=red;} h2 { color:red;}
h2 wird rot dargestellt, wegen des Gleichheitszeichens wird der Wert für h1 ignoriert und h1 schwarz dargestellt.

vergessene Strichpunkte ( ; )[Bearbeiten]

Auch vergessene Strichpunkte ( ; ) führen zu Fehlinterpretationen:

Beispiel: Wertzuweisung nicht geschlossen ansehen …
h1 { color:red background-color:yellow;} h2 { color:red; background-color:yellow;}
Da die 1. Wertzuweisung für h1 nicht geschlossen worden ist, ignoriert der Browser beide Wertzuweisungen.

Regelsatz mit zwei geschweiften Klammern geschlossen[Bearbeiten]

Beispiel: Regelblock doppelt geschlossen ansehen …
h1 {
 color: red; 
 background-color: yellow;  

}}

h2 {

  color: red; 
background-color: yellow;
}
Die überzählige schließende Klammer wird schon dem Selektor für den nächsten Regelblock zugeordnet. Nun ist } h2 aber kein gültiger Selektor, also wird der gesamte Block ignoriert.

Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.

Empfehlung: Sie können Ihre CSS-Formatdefinitionen auch durch einen Validator auf korrekte Syntax überprüfen lassen.

Groß- und Kleinschreibung bei Selektoren[Bearbeiten]

CSS berücksichtigt die Groß- und Kleinschreibung eigentlich nicht, so dass Sie die Elementnamen wie p für Textabsätze auch als P notieren könnten. Eine Ausnahme gilt allerdings bei Klassennamen und IDs in den Selektoren, weshalb die jeweiligen Attributwerte im HTML-Markup passend notiert sein müssen:

Beispiel: Groß- und Kleinschreibung bei Selektoren ansehen …
DIV { border: 3px solid blue; border-radius: 1em; padding: 0 1em; } #navigation { background: lightgreen; } .wichtig { color: red; font-weight: bold; }
<body> <div id="Navigation"> <p class="wichtig">Zur Zeit ist die Navigation kaputt.</p> </div> </body>
Der Selektor #navigation passt nicht zum id-Attributwert "Navigation", daher formatiert der Browser das Element <div id="Navigation"> nicht mit dem hellgrünen Hintergrund, DIV als Selektor wird dagegen angewendet.
Empfehlung: Verwenden Sie für …
  • HTML-Markup wie Tags und Attribute
  • CSS-Selektoren
  • und auch referenzierten Ordner- und Mediennamen
… immer eine konsequente Kleinschreibung. So beugen Sie potentiellen Fehlern vor.

Leerzeichen[Bearbeiten]

Beispiel: Leerzeichen können semantische Bedeutung haben ansehen …
h1 p { color: red; } h1, p { background: #ccc; border: 1px solid; }
Überschriften und Absätze sollen rot gefärbt werden.
Allerdings wird nur der Absatz innerhalb von h1 rot gefärbt. Der zweite Regelsatz fasst alle h1- und p-Elemente zusammen und gibt ihnen einen grauen Hintergrund und einen roten Rand.
Beachten Sie: Leerzeichen (oder allgemein Whitespace-Zeichen) innerhalb eines Selektors haben eine semantische Bedeutung, sie stellen einen Kombinator dar, genauer den Nachfahrenselektor.

Auch innerhalb von Wertzuweisungen können Leerzeichen zu ungültigen Werten führen:

Beispiel: Leerzeichen führen zu ungültigen Werten ansehen …
/* fehlerhafter Code */ .medaille { color: # 000; background-color: rgb (255, 204, 0); font-size: 50 px; margin: 1em auto; padding: 1em; width: 1em; height: 1em; text-align: center; border: 1px solid; border-radius: 50%; }
Entferne 3 Leerzeichen im CSS und verdiene dir die Goldmedaille!
(In diesem Beispiel wird ein Element nicht angezeigt. Korrigiere das CSS.)

→ Auflösung

guter CSS-Stil[Bearbeiten]

In diesem Abschnitt wird erklärt, wie Sie Ihre CSS-Festlegungen nach den Regeln der "best practice" so organisieren und notieren können, dass sie später von Ihnen und anderen leichter verstanden und auch aktualisiert werden können.

Formatierung[Bearbeiten]

Die grundsätzliche Formatierung ist bei CSS weitgehend frei, man kann also zwischen den einzelnen Bestandteilen Selektor, geschweiften Klammern, Eigenschaften, Doppelpunkt, Werten und Semikola beliebig Leerzeichen, Tabulatorzeichen und Zeilenumbrüche einfügen, z.B. um das Stylesheet übersichtlicher zu gestalten. So sind die zwei folgenden – inhaltlich identischen – Definitionen beide erlaubt:

Beispiel: Formatierung von CSS-Festlegungen
h1{font-size:2.5em;margin-left: 2em;text-align:center;border-bottom:2px solid red; margin-right:2em;}
Der Regelsatz ist platzsparend innerhalb einer Zeile notiert; dies geht allerdings auf Kosten der Lesbarkeit.
h1 {
  font-size: 2.5em;
  border-bottom: 2px solid red;
  text-align: center;
  margin: 0 2em;
}
Dieser Regelsatz wirkt viel übersichtlicher:
  • Der Selektor ist gleich erkennbar
  • Deklarationen sind eingerückt
  • Eigenschaft und Wertzuweisung sind durch ein zusätzliches Leerzeichen getrennt.
  • die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.
Er erscheint zwar länger, moderne Code-Editoren können solche Regelsätze mittels Code-Folding jedoch ein- und ausklappen.
Beispiel: Selektor-Listen
a.backlink:hover, 
a.backlink:focus {
  color: purple;
  background: #fffbf0 url("data:image/svg+xml,...) no-repeat right;
}
Hier werden im zweiten Regelsatz mehrere Selektoren in einer durch komma separierten Selektor-Liste angesprochen.
Der Regelsatz wird lesbarer, wenn die einzelnen Selektoren untereinander dargestellt werden.

Was ist eine gute Reihenfolge für die Deklarationen?

Ein Vorschlag könnte lauten: Zuerst display und float, dann weitere Blockeigenschaften, dann border-Eigenschaften, dann color- und background-Eigenschaften.

Die Deklarationen werden im Seiteninspektor in der festgelegten Reihenfolge aufgeführt, was auch zum Debuggen praktischer ist.

Organisation[Bearbeiten]

In der Frage, wie man CSS-Styles am besten organisiert, herrscht darin Einigkeit, dass

  • das Einbinden von CSS-Dateien den Notationen in style-Elementen oder gar style-Attributen vorzuziehen ist. CSS-Dateien erzeugen zwar einmalig einen zusätzlichen Request pro Datei. Da sie aber in der Regel gecached oder von Bots gar nicht erst angefordert werden, erzeugen sie deutlich weniger Datentransfer.

Auch wenn im oben erwähnten Kapitel die Einbindung eines eigenen Print-Stylesheets vorgestellt wird, ist es empfehlenswert, in Ihrem Stylesheet zuerst grundsätzliche Festlegungen und dann mit Medienabfrage weitere Festlegungen …

  • für Print
  • für größere Viewports

zu treffen.

Normalisierung[Bearbeiten]

Browser wenden ihr eigenes Browser-Stylesheet an, bevor sie das Autoren-CSS anwenden. Die Defaultregeln können aber von Browser zu Browser abweichen.

Beispielsweise wird die Einrückung von Listen durch die Browser unterschiedlich gehandhabt. Die einen realisieren dies über Innenabstände des ul- bzw. ol-Elementes, die anderen über Außenabstände der li. Deshalb ist die Normalisierung vor allem für folgende Elemente verbreitet: ul, ol, li, dl, dt, dd.

Beispiel
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}

li {
  display: list-item; 
  margin-left: 2em;
}
Empfehlung: Vermeiden Sie weitreichende Normalisierungen, alle Default-Einstellungen sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich.

Klassennamen[Bearbeiten]

Oft gerät man beim Aufbauen eines Stylesheet in die Versuchung, die zu stylenden HTML Elemente mit Klassen zu versehen, die das gewünschte Aussehen dieser Elemente beschreiben, und gibt ihnen Namen wie blauerText oder roterRahmen. Viel besser ist es, seine Seite semantisch zu klassifizieren. Zusammen mit semantischem HTML und strukturellen Pseudoklassen sind Klassennamen oft nicht nötig. Sind Klassen zur Identifikation von bestimmten Seitenbereichen unvermeidbar, so soll die Klasse die Rolle beschreiben, die dieses HTML-Element auf der Seite einnimmt.

Eine Empfehlung des W3C[2][Bearbeiten]

Gute Namen ändern sich nicht. Denken Sie darüber nach, warum etwas ein bestimmtes Aussehen haben soll und nicht, wie es aussehen soll. Optik ist veränderlich, aber der Grund, warum irgend etwas eine bestimmte Optik haben sollte, bleibt der gleiche.

Gute Namen sind warnung, wichtig, downloadableImage oder subMenu. Sie beschreiben, was ein bestimmtes Element repräsentiert, und werden sich vermutlich nicht so schnell ändern. Eine Warnung wird immer eine Warnung bleiben, ganz gleich, wie sich das Design der Seite ändert.

Schlechte Namen wären rahmen4px, textHell oder schönerHintergrund. Vielleicht wollen Sie den Rahmen doch auf üppige 5 Pixel aufblasen, oder der Hintergrund sieht irgendwann ganz schön langweilig aus und ist überhaupt nicht mehr schön. Der Vorteil beim Einsatz von CSS besteht darin, dass Sie nicht viel ändern müssen, um das Aussehen Ihrer Webseite zu verändern. Wenn Sie ihre ganzen hellen Text in dunkle Texte ändern müssen, und deswegen auf allen Ihren HTML-Seiten Klassennamen ändern müssen, dann werden Sie vermutlich ein paar übersehen.

Vorlagen und Frameworks[Bearbeiten]

Nichtsdestotrotz kann es Sinn ergeben, nicht immer bei null anzufangen. Vieles benötigt man in jedem Projekt. Das beginnt bei so profanen Dingen wie Ordnern für Bilder oder CSS, geht über das HTML-Grundgerüst und die Verknüpfung der HTML-Datei mit einer Formatvorlage und kann je nach Arbeitsumgebung bis hin zu Serverkonfigurationen per htaccess, der Einbindung von JavaScript-Bibliotheken und ganzen Frameworks gehen.

Um das alles nicht bei jedem Projekt neu anlegen zu müssen, arbeiten viele Entwickler mit selbst erstellten Vorlagen, die sie für neue Projekte nutzen.

Es gibt aber auch Projekte im Web, die solche Vorlagen kostenlos bereitstellen. Das wohl bekannteste ist die HTML5-Boilerplate von Paul Irish. Der Gedanke hinter so einer Boilerplate (englisch für Kochplatte) ist es, nicht jedesmal einen Herd bauen zu müssen, wenn man sich ein Spiegelei braten möchte.

Die HTML5-Boilerplate bringt all die genannten Dinge mit. Darüberhinaus sind sinnvolle und meist nötige CSS-Styles bereits in der Datei main.css vorhanden, die leicht an eigene Bedürfnisse angepasst werden können.

Für Anfänger lohnt sich ein Blick auf die Boilerplate auch weil man daran eine typische und sinnvolle Struktur nachvollziehen kann.

Noch weiter gehen CSS-Frameworks zu deren bekanntesten Vertretern Bootstrap, Skeleton und Foundation zählen. Diese bringen fertige Styles für die meisten Komponenten einer Webseite mit. Dazu gehören auch komplexere Konstrukte wie Menüs, Slider oder Tabs (Karteikartenreiter). Alles responsiv und sofort nutzbar. Insbesondere bei Bootstrap sind zudem gute Grundlagen für die Entwicklung zugänglicher Webseiten vorhanden.

Kritik an Frameworks[Bearbeiten]

Hiermit erstellte Webseiten sehen naturgemäß den vielen Millionen Seiten, die ebenfalls auf den Frameworks aufbauen, sehr ähnlich. Wenn man die Formatvorlagen weitgehend an ein vorgegebenes Layout anpassen möchte, beschreiben viele Entwickler den nötigen Aufwand als genauso hoch oder höher wie bei einer kompletten Eigenentwicklung.

Darüberhinaus wird oft die mangelnde Trennung von Inhalt und Layout kritisiert, die aufgrund der massenhaft eingesetzten präsentationsbezogenen Klassen nicht aufrechtzuhalten ist. Wie in den Zeiten vor CSS muss an alle Elemente geschrieben werden, wie diese aussehen sollen - insbesondere Änderungen an statischen Seiten werden so extrem aufwändig und sind fehleranfällig.

Nicht zuletzt steht mit CSS-Grid eine Technik zur Verfügung, die leicht zu nutzen ist und Teile eines solchen Frameworks (insbesondere die zum Seitenlayout) überflüssig macht.

Links[Bearbeiten]

Magic Numbers[Bearbeiten]

Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichen Sie unter bestimmten Umständen das Gewünschte, aber in anderen Kontexten wie geänderten Viewport- oder Schriftgrößen wird das Layout zerstört. Meistens wurden sie von Entwicklern verwendet, die nur in ihrem eigenen Browser unter Idealbedingungen getestet wurden.

Empfehlung: Verwenden Sie
  • keine festen Werte für die Breite
  • keine festen Werte für die Höhe eines Elements, sondern lassen dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Regeln Sie Abstände über padding.
  • relative relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. csswizardry.com: CSS Shorthand Syntax Considered an Anti-Pattern
  2. W3C: Tips for Webmasters