München, den 21. Juli 2011<br />CSS-SPEZIFITÄTPunktgenaue Ansprache<br />Ralf Richtsteiger, ralf.richtsteiger@peppermind.d...
2<br />	01Die Kaskade<br />02Gewichtung und Ursprung<br />03Spezifität von Selektoren - Einführung in das Punktesystem<br ...
01<br />DIE KASKADE<br />Vorgehen der Prüfung und Festlegung von Stylesheets:<br />Browser erstellt anhand des HTML-Quellc...
02<br />GEWICHTUNG & URSPRUNG<br />Ursprung – wo kommt das Stylesheet her<br />Browser-Stylesheet<br />Benutzer-Stylesheet...
03<br />SPEZIFITÄT VON SELEKTORENEinführung in das Punktesystem	<br />leicht verständliches Punktesystem mit vier per Komm...
04<br />SPEZIFITÄT VON SELEKTORENEinführung in das Punktesystem	<br /><ul><li>Universalselektor * hat keinerlei Spezifität
verschiedene Selektoren können beliebig miteinander kombiniert werden
seit CSS 2.1
Spezifität 1,0,0,0 – vorher ID & style gleichwertig
Berücksichtigung der Pseudoelemente
Inline-Styles vermeiden
unflexibel, da nur durch !important-Regel überschreibbar
Widerspruch zum Prinzip HTML & CSS – Trennung von Inhalt & Gestaltung</li></ul>6<br />
05<br />SPEZIFITÄT ERHÖHEN<br />Einfaches Beispiel<br />HTML<br /><p id=„check“ class=„error“>Ich bin eine Fehlermeldung</...
05<br />SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />HTML<br /><link rel=„stylesheet“ type=„text/css“ href=„c...
SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />05<br />HTML<br /><link rel=„stylesheet“ type=„text/css“ href=„c...
SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />05<br />Durch Nachfolgeselektoren, Nutzung von CSS-Klassen und I...
höhere Genauigkeit durch komplexe Selektoren, dadurch aber auch höhere Fehleranfälligkeit</li></ul>10<br />
06<br />!IMPORTANT<br /><ul><li>hebt die Gewichtung des Selektors um eine Ebene
könnte als Gruppe 0 betitelt werden
Nächste SlideShare
Wird geladen in …5
×

CSS-Spezifität - Punktgenaue Ansprache

1.958 Aufrufe

Veröffentlicht am

Ein Einführung in das Punktesystem.

Veröffentlicht in: Technologie, Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.958
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
11
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

CSS-Spezifität - Punktgenaue Ansprache

  1. 1. München, den 21. Juli 2011<br />CSS-SPEZIFITÄTPunktgenaue Ansprache<br />Ralf Richtsteiger, ralf.richtsteiger@peppermind.de<br />
  2. 2. 2<br /> 01Die Kaskade<br />02Gewichtung und Ursprung<br />03Spezifität von Selektoren - Einführung in das Punktesystem<br />04Spezifität erhöhen - Nachfolgeselektoren, Klassen & Ids<br />05Spezifität erhöhen - Beispiel<br />06!important<br />07Künstliche Steigerung der Spezifität<br />08Tipps<br /> Ressourcen<br />INHALT<br />
  3. 3. 01<br />DIE KASKADE<br />Vorgehen der Prüfung und Festlegung von Stylesheets:<br />Browser erstellt anhand des HTML-Quellcodes das DOM<br />Browser durchläuft das DOM und sucht passende CSS-Eigenschaften und deren Wert<br />Prozess der Wertzuweisung berücksichtigt vier verschiedene Stufen<br />Stufe 1 – Gewichtung<br />Stufe 2 – Ursprung<br />Stufe 3 – Spezifität<br />Stufe 4 – Reihenfolge<br />Grundlage zur Vermeidung von Konflikten verschiedener Stylesheets<br />3<br />
  4. 4. 02<br />GEWICHTUNG & URSPRUNG<br />Ursprung – wo kommt das Stylesheet her<br />Browser-Stylesheet<br />Benutzer-Stylesheet – vom User im Browser getätigte Einstellungen<br />Autoren-Stylesheet<br />Gewichtung – welches Stylesheet hat welche Priorität<br />Browser-Stylesheet – niedrigste Priorität<br />Benutzer-Stylesheet<br />Autoren-Stylesheet <br />Autoren-Stylesheet mit !important<br />Benutzer-Stylesheet mit !important – höchste Priorität<br />Benutzer (z. B. mit körperlichen Beeinträchtigungen) haben das letzte Wort!<br />4<br />
  5. 5. 03<br />SPEZIFITÄT VON SELEKTORENEinführung in das Punktesystem <br />leicht verständliches Punktesystem mit vier per Komma getrennten Zahlen<br />Gruppe A<br />inline-Styles: <p style=“color:red;“><br />Spezifität: 1,0,0,0 – Punkte: 1000<br />Gruppe B<br />ID: #red<br />Spezifität: 0,1,0,0 – Punkte: 100<br />Gruppe C<br />Klasse, Pseudoklasse oder Attributselektor: .red<br />Spezifität: 0,0,1,0 – Punkte: 10<br />Gruppe D<br />Typ-Selektor oder Pseudoelement: p<br />Spezifität: 0,0,0,1 – Punkte: 1<br />5<br />
  6. 6. 04<br />SPEZIFITÄT VON SELEKTORENEinführung in das Punktesystem <br /><ul><li>Universalselektor * hat keinerlei Spezifität
  7. 7. verschiedene Selektoren können beliebig miteinander kombiniert werden
  8. 8. seit CSS 2.1
  9. 9. Spezifität 1,0,0,0 – vorher ID & style gleichwertig
  10. 10. Berücksichtigung der Pseudoelemente
  11. 11. Inline-Styles vermeiden
  12. 12. unflexibel, da nur durch !important-Regel überschreibbar
  13. 13. Widerspruch zum Prinzip HTML & CSS – Trennung von Inhalt & Gestaltung</li></ul>6<br />
  14. 14. 05<br />SPEZIFITÄT ERHÖHEN<br />Einfaches Beispiel<br />HTML<br /><p id=„check“ class=„error“>Ich bin eine Fehlermeldung</p><br />Spezifitäten im Überblick<br />7<br />
  15. 15. 05<br />SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />HTML<br /><link rel=„stylesheet“ type=„text/css“ href=„color.css“ /><br /><link rel=„stylesheet“ type=„text/css“ href=„font.css“ /><br /><div class=“error“><br /> <p>Ich bin eine Fehlermeldung</p><br /> <p class=„info“>Ich bin eine Zusatzinformation</p><br /></div><br />CSSp.info{ color:green; } /* color.css*/.error p { color:red; } /* font.css */<br />Problem: Infotexterscheint rot anstatt dem gewünschten Grün<br />Erklärung<br />Spezifität beider Selektoren ist 0,0,1,1 und damit gleichwertig<br />letzte Regel der Kaskade tritt in Kraft (Reihenfolge) – zuletzt definierte Anweisung wird ausgeführt<br />8<br />
  16. 16. SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />05<br />HTML<br /><link rel=„stylesheet“ type=„text/css“ href=„color.css“ /><br /><link rel=„stylesheet“ type=„text/css“ href=„font.css“ /><br /><div class=“error“><br /> <p>Ich bin eine Fehlermeldung</p><br /> <p class=„info“>Ich bin eine Zusatzinformation</p><br /></div><br />CSSp.info{ color:green; } /* color.css */.error p { color:red; } /* font.css */<br />Lösung: Erhöhung der Spezifität durch Verwendung eines Nachfolgeselektors:div p.info { color:green; } /* color.css */<br />Erklärung<br />Spezifität erhöht auf 0,0,1,2 und ist daher höherwertig – der Infotext erscheint grün<br />9<br />
  17. 17. SPEZIFITÄT ERHÖHENNachfolgeselektoren, Klassen & IDs<br />05<br />Durch Nachfolgeselektoren, Nutzung von CSS-Klassen und IDs kann die Spezifität erhöht werden. Beispiel:<br /><ul><li>wenige IDs bzw. Klassen im HTML – geringe Möglichkeiten zur Erhöhung der Spezifität
  18. 18. höhere Genauigkeit durch komplexe Selektoren, dadurch aber auch höhere Fehleranfälligkeit</li></ul>10<br />
  19. 19. 06<br />!IMPORTANT<br /><ul><li>hebt die Gewichtung des Selektors um eine Ebene
  20. 20. könnte als Gruppe 0 betitelt werden
  21. 21. Spezifität: (1)0,0,0,0 – Punkte: (1)0000
  22. 22. kann nur mit weiteren !important-Anweisungen überschrieben werden</li></ul>Besonderheit IE6<br />.error {<br />color:red!important;<br />color:blue;<br /> }<br />Ergebnis:<br />Farbe im IE6 = blau<br />Farbe in allen anderen Browsern = rot<br />11<br />
  23. 23. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Universalselektor<br />HTML<br /><div id=“main“><br /> <p class=“error“>Ich bin eine Fehlermeldung</p><br /></div><br />CSS<br />#main { color:black; }<br />p.error { color:red; }<br />Universalselektor *:<br />#main * { color:black; }<br />Erklärung<br />Durch den Universalselektor wird das Element explizit angesprochen und die höhere Spezifität der ID gewinnt.<br />12<br />
  24. 24. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Kindselektor ><br />HTML <br /><div id=“main“><br /> <p class=“error“>Ich bin eine Fehlermeldung</p><br /></div><br />CSS<br />#main { color:black; }<br />p.error { color:red; }<br />Kindselektor ><br />#main > p { color:blue; }<br />Erklärung<br /><ul><li>durch den Kindselektor wird das Element explizit angesprochen
  25. 25. Spezifität der Elemente werden addiert – erreichte Spezifität: 0,1,0,1
  26. 26. wird vom IE kleiner Version 7 nicht verstanden und somit nicht ausgeführt</li></ul>13<br />
  27. 27. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Geschwisterselektor +<br />HTML<br /><div id=“main“><br /> <p class=“error“>Ich bin eine Fehlermeldung</p><br /> <span>Ich bin eine Zusatzinformation</span><br /></div><br />CSS<br />#main { color:black; }<br />p.error { color:red; }<br />div span { color:blue; }<br />Geschwisterselektor+<br />p.error + span { color:green; }<br />Erklärung<br /><ul><li>durch den Geschwisterselektor wird das Element explizit angesprochen
  28. 28. Spezifität der Elemente werden addiert – erreichte Spezifität: 0,0,1,2
  29. 29. wird vom IE kleiner Version 7 nicht verstanden und somit nicht ausgeführt</li></ul>14<br />
  30. 30. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Attributsselektor []<br />HTML<br /><div id=“main“><br /> <p title=“Ups“>Ich bin eine Fehlermeldung</p><br /></div><br />CSS<br />#main { color:black; <br />p { color:blue; }<br />Attributsselektor<br />p[title] { color:red; }<br />Erklärung:<br /><ul><li>Spezifität des Attributsselektor: 0,0,1,0 (Gruppe C) – erreichte Spezifität: 0,0,1,1
  31. 31. einfacher Attributsselektor wird vom IE erst seit Version 7 unterstützt
  32. 32. keine Unterstützung im IE der erweiterten Attributsselektoren ab CSS3</li></ul>15<br />
  33. 33. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Pseudoklasse<br />HTML<br /><a href=“#foo“>Ich bin ein Link</a><br />CSS<br />a { color:black; }<br />Pseudoklasse<br />a:hover { color:green; }<br />Erklärung<br /><ul><li>Spezifität der Pseudoklasse: 0,0,1,0 (Gruppe C) – erreichte Spezifität: 0,0,1,1
  34. 34. Unterstützung der Pseudoklassen im IE kleiner Version 7 nur für Links</li></ul>16<br />
  35. 35. 07<br />STEIGERUNG DER SPEZIFITÄT<br />Pseudoelemente<br />HTML<br /><div id=“main“><br /> <p>Ich bin eine Fehlermeldung</p><br /></div><br />CSS:<br />#main { color:black; }<br />p { font-size:1em; }<br />Pseudoelement:<br />p:first-letter { font-size: 1.5em; }<br />Erklärung:<br /><ul><li>Spezifität des Pseudoelements: 0,0,0,1 (Gruppe D) – erreichte Spezifität: 0,0,0,2
  36. 36. im IE6 keine Unterstützung der Pseudoelemente :after & :before,
  37. 37. :after ab IE7
  38. 38. :before ab IE8</li></ul>17<br />
  39. 39. 08<br /><ul><li>Ersten Selektor des DOM mit ID oder Klasse versehen
  40. 40. <bodyid=“shop“> oder <bodyclass=“three-columns“>
  41. 41. ermöglicht verschiedene Seitentypen mittels CSS
  42. 42. Nachfolgeselektorenso einfach wie möglich
  43. 43. fehleranfällig, inflationärer Einsatz: div ul li a span
  44. 44. besser: zusätzliche Klasse verwenden: span.arrow
  45. 45. !important-Regel nur in Ausnahmefällen
  46. 46. bevorzugte Tools: Firebug und Webdeveloper</li></ul>TIPPS IM UMGANG MIT SELEKTOREN<br />18<br />
  47. 47. 19<br />CSS Specificity: Things YouShouldKnowhttp://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know<br />CSS 2.1 selectorshttp://www.456bereastreet.com/archive/200509/css_21_selectors_part_1<br />CSS 3 selectorsexplainedhttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained<br />RESSOURCEN<br />
  48. 48. © 2011 – Alle Rechte vorbehalten.<br />PEPPERMINDDigital Business Design<br />ist eine Unit der<br />Kochan & Partner GmbHHirschgartenallee 2580639 München<br />Telefon +49 (0)89 173 01 30Fax +49 (0)89 178 60 399kontakt@peppermind.de<br />www.peppermind.de<br />VIELEN DANK!<br />

×