Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

2.028 Aufrufe

Veröffentlicht am

Ein Einführung in das Punktesystem.

Veröffentlicht in: Technologie, Bildung
  • Als Erste(r) kommentieren

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

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 />

×