Firebug: Wie nutze ich ihn richtig? - Teil #2

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Nachdem bereits im ersten Teil die Grundlagen von Firebug erklärt wurden, geht es nun ans Eingemachte. Hierbei möchte ich vor allem darauf eingehen, wie man eine funktionierende Deklaration aus Firebug bekommt.

Wichtig ist, dass ich auf dem ersten Teil aufbauen werde. Wer demnach dort noch nicht alles verstanden hat, wird auch jetzt nichts mehr verstehen. Ich gehe nun zumindest von etwas Grundwissen bezüglich CSS aus.

Wählt man ein Element aus, so steht im HTML-Teil von Firebug oben immer der entsprechende Pfad bis zu diesem Element in Klassen und IDs. Dort wird allerdings nicht alles angegeben, weshalb diese Zeile für mich relativ sinnlos ist. Ich habe sie zumindest bis heute noch nie genutzt.
Viel mehr muss man den Quellcode lesen können - Wissen in HTML ist demnach auch Voraussetzung. HTML geht zwar ohne CSS, aber ohne HTML geht CSS nicht!

Mein Ziel ist immer, bei einer Deklaration ein Element anzugeben, das möglichst früh erscheint. Ich möchte das einfach mal an folgendem Quellcode zeigen:

HTML-Quellcode

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
  4. <head>
  5. <title>Startseite - Testforum - Globaler Titel</title>
  6. </head>
  7. <body id="tplIndex">
  8. <div id="headerContainer">
  9. <a id="top"></a>
  10. <div id="header">
  11. <div id="logo">
  12. <div class="logoInner">
  13. <h1 class="pageTitle"><a href="index.php?page=Index">Testforum - Globaler Titel</a></h1>
  14. <a href="index.php?page=Index" class="pageLogo">
  15. <img src="images/wbb3-header-logo.png" title="Testforum - Globaler Titel" alt="" />
  16. </a>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. <div id="mainContainer">
  22. <div id="main">
  23. <div class="layout-1">
  24. <div class="columnContainer" style="border: 0;">
  25. <div class="column">
  26. <div class="contentBox recentActivityBox" style="padding: 0;">
  27. <div class="border titleBarPanel">
  28. <div class="containerHead">
  29. <div class="boardlistTitle">
  30. <div class="containerIcon">
  31. <a onclick="openList('recentActivityBoxStatus', { save:true })"><img src="wcf/icon/minusS.png" id="recentActivityBoxStatusImage" alt="" title="Auf- und Zuklappen" /></a>
  32. </div>
  33. <div class="containerContent">
  34. <h3 class="boardTitle">Neuigkeiten</h3>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <div id="footerContainer">
  46. <div id="footer">
  47. <p class="copyright"><a href="http://www.woltlab.com/de/">Forensoftware: <strong>Burning Board&reg; 3.1.7</strong>, entwickelt von <strong>WoltLab&reg; GmbH</strong></a></p>
  48. </div>
  49. </div>
  50. </body>
  51. </html>
Alles anzeigen
Hier soll z.B. das A-Element in Zeile 15 bzw. 17 angewählt werden. In Firebug erhält man dann in der oben genannten Zeile folgendes Ergebnis: html > body#tplIndex > div#headerContainer > div#header > div#logo > div.logoInner > a.pageLogo
Das ist zwar richtig, aber vollkommen ungeeignet. Würde man nur mit solch genauen Deklarationen arbeiten, würde man einerseits den Quellcode sehr aufblähen und andererseits eine Überschreibung von Deklarationen bei besonderen Elementen nur noch mit !important hinbekommen, was keineswegs das Ziel sein darf. Im Gegenteil: !important sollte so selten wie möglich genutzt werden.

Ein Beispiel: Unter Burning Board gibt es einen div mit der Klasse .mainMenuInner, welcher einen Rahmen besitzt. Den möchte man oftmals entfernen. Das einfachste hierbei ist folgende Deklaration:

CSS-Quellcode

  1. .mainMenuInner {
  2. border: none !important;
  3. }
Damit wird alles überschrieben und man hat das richtige Ergebnis, allerdings ist das eben nicht empfehlenswert. Wenn man in den CSS-Quellcode schaut, sieht man, dass der Rahmen über folgende Deklaration angegeben wurde:

CSS-Quellcode

  1. .mainMenu .mainMenuInner {
  2. border-width: 0 1px 1px;
  3. }
Es wird daher die darüberliegende Klasse auch genutzt, um die Deklaration zu verstärken. Man kann dann, um die Deklaration aufzuheben, entweder auch diese übergeordnete Klasse nutzen oder aber gleich eine höher liegende ID, falls vorhanden und sinnvoll:

CSS-Quellcode

  1. .mainMenu .mainMenuInner {
  2. border: none;
  3. }
Oder:

CSS-Quellcode

  1. #mainMenu .mainMenuInner {
  2. border: none;
  3. }
Hier sieht man schon: Es gibt zwar mehrere Wege, die zum Ziel führen, wichtig ist jedoch oftmals - vor allem dann bei umfangreicheren Designs, den richtigen Weg zu finden, wie man ein Element anspricht.

Doch woher weiß man, welches übergeordnete Element man nutzen kann/soll/darf? Das ist so direkt nicht zu beantworten, da es hierfür keine Regel gibt. Man muss stattdessen den Quellcode durchforsten.
Markiert man das oben angesprochene a-Element mit Firebug, sieht man z.B. rechts im Style-Tab, dass es mit #logo a.pageLogo angesprochen wird. Bei Unsicherheiten würde ich demnach immer diese Deklarationen empfehlen, die schon dort stehen.
Diese sind nach Priorität sortiert, d.h. das, was am weitesten oben steht, ist die aktuell genaueste Deklaration, die auf dieses Element wirkt. Ein #logo .pageLogo müsste demnach, da das "a" fehlt, ein !important vorweisen können, um den Wert eines #logo a.pageLogo zu überschreiben.

Besonders bei neuen und unbekannten Quellcodes ist es natürlich etwas schwer, sich dort reinzufinden. Je mehr man den Quellcode kennt, desto besser kann man auch die Deklarationen setzen.

Möchte man ein Element ansprechen, das noch gar keine eigene Deklaration hat, ist es denkbar einfach:
Entweder nutzt man nur dessen Klasse/ID, oder im Falle von ersterem noch die Klasse/ID, die darüber liegt.
Das wäre hier z.B. im Falle von Zeile 13 bzw. 18 so. .logoInner wird noch nirgends genutzt, demnach kann man damit auch noch nichts überschreiben. Will man sich allerdings sicher sein, nutzt man noch die hier übergeordnete ID und erhält: #logo .logoInner
Damit geht man sicher, dass Fremd-Code, z.B. durch Plugins, diesen Wert auch nicht verändert.

Wann welche Auswahl demnach sinnvoll ist, hängt immer vom Quellcode der Seite ab und ist pauschal nicht zu beantworten. Dennoch hoffe ich, auch mit diesem Artikel wieder etwas geholfen zu haben.


Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

2.271 mal gelesen

Kommentare 0

Es wurden keine Einträge gefunden.

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen