Ein Einführung in das Punktesystem.

1. München, den 21. Juli 2011 CSS-SPEZIFITÄTPunktgenaue Ansprache Ralf Richtsteiger, ralf.richtsteiger@peppermind.de

2. 2 01Die Kaskade 02Gewichtung und Ursprung 03Spezifität von Selektoren - Einführung in das Punktesystem 04Spezifität erhöhen - Nachfolgeselektoren, Klassen & Ids 05Spezifität erhöhen - Beispiel 06!important 07Künstliche Steigerung der Spezifität 08Tipps Ressourcen INHALT

3. 01 DIE KASKADE Vorgehen der Prüfung und Festlegung von Stylesheets: Browser erstellt anhand des HTML-Quellcodes das DOM Browser durchläuft das DOM und sucht passende CSS-Eigenschaften und deren Wert Prozess der Wertzuweisung berücksichtigt vier verschiedene Stufen Stufe 1 – Gewichtung Stufe 2 – Ursprung Stufe 3 – Spezifität Stufe 4 – Reihenfolge Grundlage zur Vermeidung von Konflikten verschiedener Stylesheets 3

4. 02 GEWICHTUNG & URSPRUNG Ursprung – wo kommt das Stylesheet her Browser-Stylesheet Benutzer-Stylesheet – vom User im Browser getätigte Einstellungen Autoren-Stylesheet Gewichtung – welches Stylesheet hat welche Priorität Browser-Stylesheet – niedrigste Priorität Benutzer-Stylesheet Autoren-Stylesheet Autoren-Stylesheet mit !important Benutzer-Stylesheet mit !important – höchste Priorität Benutzer (z. B. mit körperlichen Beeinträchtigungen) haben das letzte Wort! 4

5. 03 SPEZIFITÄT VON SELEKTORENEinführung in das Punktesystem leicht verständliches Punktesystem mit vier per Komma getrennten Zahlen Gruppe A inline-Styles: <p style=“color:red;“> Spezifität: 1,0,0,0 – Punkte: 1000 Gruppe B ID: #red Spezifität: 0,1,0,0 – Punkte: 100 Gruppe C Klasse, Pseudoklasse oder Attributselektor: .red Spezifität: 0,0,1,0 – Punkte: 10 Gruppe D Typ-Selektor oder Pseudoelement: p Spezifität: 0,0,0,1 – Punkte: 1 5

7. verschiedene Selektoren können beliebig miteinander kombiniert werden

8. seit CSS 2.1

9. Spezifität 1,0,0,0 – vorher ID & style gleichwertig

10. Berücksichtigung der Pseudoelemente

11. Inline-Styles vermeiden

12. unflexibel, da nur durch !important-Regel überschreibbar

13. Widerspruch zum Prinzip HTML & CSS – Trennung von Inhalt & Gestaltung6

14. 05 SPEZIFITÄT ERHÖHEN Einfaches Beispiel HTML <p id=„check“ class=„error“>Ich bin eine Fehlermeldung</p> Spezifitäten im Überblick 7

15. 05 SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs HTML <link rel=„stylesheet“ type=„text/css“ href=„color.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„font.css“ /> <div class=“error“> <p>Ich bin eine Fehlermeldung</p> <p class=„info“>Ich bin eine Zusatzinformation</p> </div> CSSp.info{ color:green; } /* color.css*/.error p { color:red; } /* font.css */ Problem: Infotexterscheint rot anstatt dem gewünschten Grün Erklärung Spezifität beider Selektoren ist 0,0,1,1 und damit gleichwertig letzte Regel der Kaskade tritt in Kraft (Reihenfolge) – zuletzt definierte Anweisung wird ausgeführt 8

16. SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs 05 HTML <link rel=„stylesheet“ type=„text/css“ href=„color.css“ /> <link rel=„stylesheet“ type=„text/css“ href=„font.css“ /> <div class=“error“> <p>Ich bin eine Fehlermeldung</p> <p class=„info“>Ich bin eine Zusatzinformation</p> </div> CSSp.info{ color:green; } /* color.css */.error p { color:red; } /* font.css */ Lösung: Erhöhung der Spezifität durch Verwendung eines Nachfolgeselektors:div p.info { color:green; } /* color.css */ Erklärung Spezifität erhöht auf 0,0,1,2 und ist daher höherwertig – der Infotext erscheint grün 9

18. höhere Genauigkeit durch komplexe Selektoren, dadurch aber auch höhere Fehleranfälligkeit10

20. könnte als Gruppe 0 betitelt werden

21. Spezifität: (1)0,0,0,0 – Punkte: (1)0000

22. kann nur mit weiteren !important-Anweisungen überschrieben werdenBesonderheit IE6 .error { color:red!important; color:blue; } Ergebnis: Farbe im IE6 = blau Farbe in allen anderen Browsern = rot 11

23. 07 STEIGERUNG DER SPEZIFITÄT Universalselektor HTML <div id=“main“> <p class=“error“>Ich bin eine Fehlermeldung</p> </div> CSS #main { color:black; } p.error { color:red; } Universalselektor *: #main * { color:black; } Erklärung Durch den Universalselektor wird das Element explizit angesprochen und die höhere Spezifität der ID gewinnt. 12

25. Spezifität der Elemente werden addiert – erreichte Spezifität: 0,1,0,1

26. wird vom IE kleiner Version 7 nicht verstanden und somit nicht ausgeführt13

28. Spezifität der Elemente werden addiert – erreichte Spezifität: 0,0,1,2

29. wird vom IE kleiner Version 7 nicht verstanden und somit nicht ausgeführt14

31. einfacher Attributsselektor wird vom IE erst seit Version 7 unterstützt

32. keine Unterstützung im IE der erweiterten Attributsselektoren ab CSS315

34. Unterstützung der Pseudoklassen im IE kleiner Version 7 nur für Links16

36. im IE6 keine Unterstützung der Pseudoelemente :after & :before,

37. :after ab IE7

38. :before ab IE817

40. <bodyid=“shop“> oder <bodyclass=“three-columns“>

41. ermöglicht verschiedene Seitentypen mittels CSS

42. Nachfolgeselektorenso einfach wie möglich

43. fehleranfällig, inflationärer Einsatz: div ul li a span

44. besser: zusätzliche Klasse verwenden: span.arrow

45. !important-Regel nur in Ausnahmefällen

46. bevorzugte Tools: Firebug und WebdeveloperTIPPS IM UMGANG MIT SELEKTOREN 18

47. 19 CSS Specificity: Things YouShouldKnowhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know CSS 2.1 selectorshttp://www.456bereastreet.com/archive/200509/css_21_selectors_part_1 CSS 3 selectorsexplainedhttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained RESSOURCEN

48. © 2011 – Alle Rechte vorbehalten. PEPPERMINDDigital Business Design ist eine Unit der Kochan & Partner GmbHHirschgartenallee 2580639 München Telefon +49 (0)89 173 01 30Fax +49 (0)89 178 60 399kontakt@peppermind.de www.peppermind.de VIELEN DANK!