Webstandard & Webdesign - CSS, HTML

Transkript

1 Webstandard & Webdesign - CSS, HTML zum Content springen zur Marginalspalte springen CSS Specificity - Gewichtung und Ursprung von Selektoren CSS - 4 Jul, 2012 Kommentare (7) Wer ist nicht schon daran verzweifelt: Man ändert eine Layout- Eigenschaft im Stylesheet und nichts passiert. Meist steckt der Fehler im Detail, genauer gesagt: In der Spezifität (engl. Specificity) der Selektoren. Das heißt, die Gewichtung und der Ursprung von CSS Selektoren geben Ausschlag darüber, welcher Selektor die CSS Eigenschaften umsetzt. Der für CSS ausschlaggebende Prozess der Ausführung, die sogenannte Kaskade, wird in vier Stufen untergliedert. Die Styleanweisungen werden je nach Gewichtung, Ursprung, Spezifität und Reihenfolge, in der die CSS Eigenschaften aufgeführt werden, vom Browser im jeweiligen Endgerät ausgeführt. Durch diese "Prüfung", wird die Grundlage zur Vermeidung von Konflikten zwischen verschiedenen Stylesheets gebildet. Gewichtung und Ursprung von CSS Selektoren Das Browser-Stylesheet, dessen CSS-Eigenschaften als erstes auf eine Webseite angewendet werden, bestimmt beispielsweise die Schriftgrößen für Fließtexte und Überschriften, Unterstreichungen für Links, die einrückende Formatierung für Zitate oder die Umrandung eines Formulars, bei dessen Umsetzung das fieldset-tag verwendet worden ist. Um dies zu erkennen, deaktiviert doch einmal über die Browser-Erweiterung Web-Developer-Toolbar Abb.01 - Screenshotvergleich für ein Bestellformular (links basierend auf dem Browser-Stylesheet, rechts inklusive Autoren-Stylesheet)

2 Seit geraumer Zeit erlauben es dem Anwender aber auch alle modernen Browser, sein eigenes Stylesheet, das sogenannte Benutzer- oder User-Stylesheet, anzulegen. Auf diese Weise könnet Ihr als Nutzer im Browser eure persönlichen Einstellungen entsprechend eurer Anforderungen vornehmen und damit wiederum die Angaben des Browser-Stylesheets überschreiben. Das Autoren-Stylesheet enthält jene Stylesheet-Angaben, die Webentwickler/-designer definieren. Es können natürlich auch mehrere Autoren-Stylesheets angelegt und eingebunden werden, wobei in einem möglichen Konflikt die Anweisungen der jeweils zuletzt referenzierten Stylesheet-Datei die höhere Gewichtung besitzen und somit als Sieger aus einem solchen Vergleich hervor gehen würden. Eine Ausnahme gibt es allerdings auch hier. Sie tritt bei der Verwendung der!important-regel in Kraft, die auf den ersten Blick durchaus für etwas Verwirrung sorgen könnte. Durch diese Regel wird die Gewichtung der Benutzer- Stylesheets größer als die des Autoren-Stylesheets. Seit CSS Level 2 (CSS2), welches bereits seit Mai 1998 in Kraft getreten ist, besitzt nicht mehr das Autoren-Stylesheet mit der!important-regel, sondern das Benutzer-Stylesheet mit der bereits seit CSS1 vorhandenen!important-regel die höchste Gewichtung. Reihenfolge der Gewichtung von Stylesheet-Dateien 1. Benutzer-Stylesheet mit!important 2. Autoren-Stylesheet mit!important 3. Autoren-Stylesheet 4. Benutzer-Stylesheet 5. Browser-Stylesheet Der Grund für diese veränderte Priorität ist denkbar einfach. Beispielsweise können Menschen mit Barrieren wie körperlichen Beeinträchtigungen die Browsereinstellungen ihren Bedürfnissen anpassen und erhalten auf diese Weise das letzte Wort darüber, wie die Webseite dargestellt wird. Abb.02 - Reihenfolge der Gewichtung von Stylesheet-Dateien in Ihrer Spezifität - 1,10, 100, 1000 (von links) - Quelle: Webstandard-Magazin Ausgabe 03/09 (jetzt screenguide) Spezifität von Selektoren Da allerdings auch bei der Reihenfolge der Gewichtung von Stylesheetshöchste Gewichtung bzw. Priorität (Punkte 1,0,0,0 oder auch 1000). Das HTML-Attribut ersetzt in diesem Fall den CSS Selektor. Gruppe A (erste Ziffer): CSS-Regeln, die durch ein style-attribut direkt im Quelltext definiert werden, besitzen die höchste Wertigkeit bzw. Priorität (Punkte 1,0,0,0 oder 1000). Das HTML-Attribut ersetzt in diesem Fall den Selektor. Gruppe B (zweite Ziffer): Hier wird die Anzahl der ID-Attribute eines Selektors festgehalten, wobei diese eine Gewichtung von (Punkte 0,1,0,0 oder 100) erhalten. Gruppe C (dritte Ziffer): Hier wird Anzahl aller Klassen- und Attribut-Selektoren, sowie der Pseudoklassen innerhalb des Selektors erfasst. Wobei diesen die zweitniedrigste Gewichtungvon (Punkte 0,0,1,0 oder 10 zugewiesen wird. Gruppe D (vierte Ziffer): Hier werden die Elemente und Pseudoelemente innerhalb des Selektors angegeben, für die sie die niedrigste Gewichtung erhalten (0,0,0,1 oder 1). Erwähnenswert ist, dass der Universalselektor *, der für jedes einzelne Element innerhalb eines Dokuments stehen kann, keinerlei Spezifität besitzt und somit den Wert Null erhält und somit auch nicht dem Anspruch einer eigenen Gruppierung gerecht wird.

3 Spezifität von Selektoren Gruppe Selektortyp Beispiel Spezifität - Punkte A Attribut <p style="color:red;"> 1,0,0, B ID #info 0,1,0,0 100 C Klasse, Pseudoklasse, Attribut-Selektor.fehler, :first-child oder [rel=up] 0,0,1,0 10 D Einfacher Typ-Selektor, Pseudoelement p oder :first-letter 0,0,0,1-1 Die höchste Spezifität 1,0,0,0 die der Gruppe A zugeordnet wird, gibt es im übrigem erst seit CSS 2.13, denn vorher waren ID-Attribute (Gruppe B) und style-attribute noch gleichwertig. Pseudo- Elemente wie :first-letter, :first-line oder :after wurden in CSS2 bei der Berechnung der Spezifität sogar vollständig ignoriert und werden ebenfalls erst seit CSS 2.1 erfasst und in Gruppe D eingeordnet. Selektoren und ihr Spezifität Selektor A B C D <p style="color:red;">roter Text p.fehler {color:blue;} #main #info.fehler {color:yellow;} #info p.fehler {color:green;} body#main div#info p {color:orange;} p {color:maroon;} Diese kleine tabellarische Übersicht mit verschiedenen Selektortypen zeigt, dass diese auch in unterschiedlicher Anzahl miteinander kombiniert werden können. Unter Umständen kann das etwas unübersichtlich wirken, aufgrund der vorhandenen Spezifität ist es jedoch einfach zu berechnen. Auch wenn der Selektor <p style="color:red;">roter Text</p> das Rennen macht, gibt es einen denkbar einfachen Grund, warum dieser Selektor nicht zu empfehlen ist: Dadurch, dass die Style-Anweisungen direkt im HTML-Quellcode stehen, sind diese lediglich durch die important-regel überschreibbar und damit relativ unflexibel. Aus Erfahrung kann (bzw. muss) ich allerdings sagen, dass die important-regel immer dann notwendig wird, wenn man bspw. keinen Zugriff auf die Templates eines CMS hat, in dem eben genau solche Inline-Styles enthalten sind. Identische Spezifität Das Problem beim Auftreten von gleichen Spezifitäten für CSS Selektoren liegt nicht am schlechten HTML-Quellcode, meistens liegt es eher an fehlender Planung im Vorfeld. Oder an unvorhersehbaren Änderungen der CSS-Dateien im Nachhinein. Denn diese führen oftmals dazu, dass die Reihenfolge des Auftretens der Selektoren innerhalb einer CSS-Datei nicht "beachtet" werden und sich die Eigenschaften mit den dazugehörigen Werten nicht selten unbeabsichtigt und leider auch oftmals unbeobachtet, überschreiben. Ein Problem welches vor allem bei langlebigen Projekten, mit mehreren daran beteiligten Mitarbeitern, durchaus vorkommen kann. Daher ist eine vorausschauende Planung, in der beispielsweise eine gezielte Vorgehensweise in Sachen Namenskonvention von Elementen eine unverzichtbare Rolle spielt und sich dabei an der Bedeutung der Inhalte der Elemente orientiert wird und nicht an deren Position im Layout, unabdingbar. "Das Problem beim Auftreten von gleichen Spezifitäten für CSS Selektoren liegt nicht am schlechten HTML-Quellcode..." Im folgenden Beispiel werden nun sämtliche Eigenschaften und Werte in Bezug auf Farbeigenschaften der verwendeten HTML-Elemente, wie beispielsweise die Schriftfarbe color in der Datei color.css definiert. In einer zweiten CSS-Datei, werden wiederum sämtliche Eigenschaften und Werte in Bezug auf Schriften, wie bspw. font-size, font-family und line-height, in der Datei font.css festgelegt. Diese Art der Trennung von Eigenschaften kann vor allem bei komplexen und umfangreichen CSS-Dateien mit einigen hundert oder gar tausend Zeilen CSS-Code dessen Dateigröße und damit die Übersicht für die Anwender in Grenzen halten. Außerdem kann man nun lediglich über die Modifizierung der Farbwerte in der color.css fast das gesamte Farbschema des Designs mit einigen Hexadezimal-Werten ändern. HTML-Code <head>

4 ... <link rel="stylesheet" href=" /> <link rel="stylesheet" href=" /> </head>... <div id="main"> <div class="fehler"> <p class="info">ich bin eine Fehlermeldung.</p>... Wie bei allen anderen Ansätzen, kann sich aber auch bei diesem Ansatz der ein oder andere Fehler beim Umgang mit CSS einschleichen. Wie im folgenden Beispiel aufgezeigt wird kommt es durchaus vor, dass in der font.css für einen Absatz mit der Klasse.info, die Schriftfarbe "Schwarz" vergeben wird, obwohl der Eigenschaft für diesen Selektor bereits in color.css der für diese Fehlermeldung angedachte Wert "Rot", zugewiesen wurde. CSS Spezifität p.info { color: red; } /* color.css */.fehler p { color: black; } /* font.css */ Die Spezifität dieser beiden Selektoren ist 0,0,1,1 bzw. 11 Punkte und damit gleichwertig. Womit die eingangs genannte letzte Regel der Kaskade in Kraft, die besagt, dass jene CSS-Regel ausgeführt wird, die zuletzt innerhalb des Codes eines CSS Datei aufgeführt wird. Damit ist die Schriftfarbe des Satzes "Ich bin eine Fehlermeldung.", mit schwarzer Schriftfarbe versehen. Wenn sich die im HTML-Quellcode angegebene Reihenfolge der Referenzierung der Stylesheet-Dateien im Dokumentenkopf ändern würde (zuerst font.css, gefolgt von color.css), würde angewandt auf die letzte Regel der Kaskade, der Text innerhalb des Paragraphen in der Schriftfarbe "Rot" abgebildet werden. Was zur Bedeutung dieses Satzes auch in Bezug auf die Benutzerführung, der bessere Ansatz wäre. Spezifität mit Nachfolge-Selektoren erhöhen Bezogen auf den verwendeten Klassen-Selektor.fehler und den einfachen Typ-Selektor p, kann man die Spezifität ohne Probleme erhöhen und somit den Wert für die Schriftfarbe "Rot" im Vergleich zur Spezifität des CSS Selektors.fehler p (0,0,1,1) erhöhen und somit zum "Gewinner" machen. CSS Spezifität erhöhen p.info { color:red; } /* Vorher ( 0,0,1,1) */ div p.info { color:red; } /* Nachher ( 0,0,1,2) */ Der Unterschied ist leicht zu erkennen, denn der Wert der Typen-Selektoren der der Gruppe-D einzuordnen ist, hat sich von 1 auf 2 (div und p) erhöht und erzielen somit die höhere Spezifität. Ein Blick auf den HTML-Quellcode dieses kleinen Beispiels zeigt, dass durch die Verwendung der ID #main, eine noch wesentlich höhere Spezifität erreicht werden kann. CSS Spezifität erhöhen #main div p.info { color: red; } /* ( 0,1,1,2) */ /* Oder noch besser */ div#main div.fehler p.info { color: red; } /* ( 0,1,2,3) */ Eines wird durch diese Steigerung der Spezifität aber auf jeden Fall deutlich: Sie ist von den zuvor im HTML-Code angelegten Elementen, IDs und Klassen abhängig. Weniger IDs und Klassen - weniger

5 Möglichkeiten zur Veränderung der Spezifität. Um die Steigerung der Spezifität noch einmal zu verdeutlichen, schauen Sie sich bitte den folgenden HTML-Quelltext einmal an. HTML-Code... <div> <div> <p class="info">ich bin eine Fehlermeldung.</p>... Die Flexibilität bezüglich der Steigerung der Spezifität ist, wie allein schon ein Blick auf den Quelltext vermuten lässt, wesentlich geringer. Verwenden Sie nun beispielsweise in der color.css die folgenden Selektoren für die Deklaration der Schriftfarbe, ist das Risiko hoch, dass diese aufgrund der relativ geringen Spezifität leicht (aus Versehen) überschrieben werden. CSS Spezifität - 0,0,0,3 div div p { color: red; } /* (0,0,0,3) */ Lediglich durch die Verwendung der Klasse.info kann man als Autor dieser CSS-Anweisung nun aufgrund der höheren Spezifität,den vorangegangenen Wert für die Eigenschaft der Schriftfarbe trotz Verschachtelung ohne Probleme überschreiben und somit eine (ungewollte) Änderung der Schriftfarbe herbeiführen. CSS Spezifität - 0,0,1,0.info { color:black; } /* (0,0,1,0) */ Egal an welcher Stelle und in welcher der beiden CSS-Dateien sich nun diese Deklaration befindet: Sie wird den vorherigen Selektor div div p aufgrund der höheren Spezifität überschreiben. Das wiederum führt dazu, dass die Fehlermeldung "Schwarz" und nicht, wie ursprünglich gewollt, "Rot" im Browser dargestellt wird. Diese kleinen Beispiele zeigen zugleich Vor- und Nachteil der Erhöhung der Spezifität von CSS Selektoren. Auf der einen Seite sorgen diese Modifizierungen für eine höhere Genauigkeit, auf der anderen Seite sind aufgrund der daraus resultierenden und oftmals sehr umfangreichen Selektoren wie beispielsweise bei div#main div.fehler p.info die möglichen Fehlerquellen auch wesentlich umfangreicher. Aber auch eine noch so hohe Spezifität kann, wie der folgende Abschnitt zeigen wird, übertrumpft werden. Spezifität von Selektoren und ihre Performance Bei allen Möglichkeiten die sich einem mit der Veränderung der Spezifität von CSS Selektoren ergeben, sollte man die Performance dieser nicht vernachlässigen. Und das Optimierungspotenzial beim Komprimieren von CSS-Dateien nicht unerheblich ist, sollte man auf die effizientesten Selektoren (bspw. Gruppe B) zurückgreifen. Wer sich weiter in die Thematik der Performance von CSS Selektoren einarbeiten möchte, dem kann ich den Vortrag "CSS & Performance" und den dazugehörigen Artikel in seinem Blog nur empfehlen!

6 Spezifität von Selektoren und ihre Performance - Quelle: maddesigns.de Abb.03 - Die!important-Regel Wie bereits am Anfang dieses Artikels beschrieben wurde, besitzen Inline-Styles die höchste Wertigkeit bzw. Spezifität, wenn sie direkt im HTML-Quelltext definiert werden. Ein Beispiel hierfür, könnte wie folgt aussehen: HTML-Code <div> <p styles="color:black;">ich bin eine Fehlermeldung.</p> Um nun die im HTML-Quellcode definierte Schriftfarbe "Schwarz" in "Rot" ändern zu können, bedarf es der Anwendung der!important-regel. Hiermit könn man der entsprechenden Eigenschaft und dem dazugehörigen Eigenschatfswert eine besondere Gewichtung verleihen, womit diese Deklaration höher wiegt als die Spezifität (0,0,1,1). CSS Spezifität.fehler p { color: red!important; } Dieser innerhalb der color.css definierte CSS-Block überschreibt den innerhalb des HTML-Quelltextes definierten Farbwert der Fehlermeldung und wird im Browser in roter Schriftfarbe dargestellt. Denn das Schlüsselwort!important verändert die natürliche Wertigkeit der überschriebenen Deklaration und setzt hierbei die höchste erreichbare Priorität. Ein Selektor mit der!important-regel versehen, kann an anderer Stelle mit einer hohen Spezifität nicht mehr übertrumpft werden. Es sei denn, zwei Regeln besitzen dieselbe Gewichtung, denselben Ursprung und eine identische Spezifität, dann erhält die jeweils zuletzt genannte (egal ob mit oder ohne!important-regel) den Vorrang und wird vom Browser ausgeführt. Hinweis: Bei der Verwendung der!important-regel ist es egal, ob sich zwischen dem Ausrufezeichen und dem Wort "important" oder dem Wert einer Eigenschaft ein Leerzeichen befindet oder nicht.!important-regel und der IE Version 6 Auch wenn die Rufe nach "Nichtbeachtung" des Browseroldies IE6 immer lauter werden, gibt es nicht zuletzt für kommerziele Projekte aus rein wirtschaftlichen Aspekten oftmals noch genügend Gründe diese Browserversionen nicht zu vernachlässigen. Die oben angewandte!important-regel wird auch vom Internet Explorer 6 verstanden. Allerdings weisen die Browserversionen kleiner gleich IE6 noch eine Besonderheit in Bezug auf diese Regel auf:

7 IE6 Besonderheit.fehler p { color: red!important; color: green; } Werden innerhalb des selben Selektors zwei Formatierungen notiert, wobei die erste mit dem Wert!important versehen wird und die zweite nicht, ignorieren Browserversionen kleiner gleich Version IE6 den ersten Wert, nämlich die rote Schriftfarbe und greifen stattdesssen auf die Farbe grün für die Schrift zurück. Alle anderen Browser(versionen) hingegen verwenden die rote Schriftfarbe. Dieser Aspekt führt allerdings oft dazu, dass diese Besonderheit als CSS-Hack für die hier angesprochenen älteren Versionen des Internet Explorers verstanden und "mißbraucht" wird. Die elegantere Variante für einen solchen Fall wäre, sofern bei der Umsetzung eines Design unvermeidbar, die Verwendung von Conditional Comments. Anmerkung: Dieser Artikel wurde von mir für das Webstandard-Magazin (Ausgabe 03/09) verfasst. Aufgrund immer wieder auftretender Fragen zu diesem Thema, habe ich vom Verlag die Erlaubnis erhalten, diesen hier an dieser Stelle Euch auch online zur Verfügung zu stellen, denn an Relevanz hat dieses Thema immer noch nicht verloren. Ausblick auf den 2.Teil zum Thema CSS Spezifität Der zweite Teil der Artikel-Serie "CSS-Spezifität" befasst sich im zweiten Artikel u.a. mit der künstlichen Steigerung der hier angesprochenen Spezifität. Zudem wird aufgezeigt, dass der Universalselektor trotz seiner nicht vorhandenen Spezifität sichtbare Auswirkungen auf die jeweiligen Werte der Eigenschaften von Selektoren haben kann. Viel Spaß & Erfolg mit CSS! Artikel zur zum Thema CSS: CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringern CSS Code organisieren und Ladegeschwindigkeit optimieren CSS Selektoren und ihre Unterstützung durch aktuelle Browser(versionen)