Entwicklung & Design

Web-Layouts analysieren und variieren mithilfe des Firefox-Plugins: CSS bearbeiten mit Firebug

Seite 3 / 4

CSS-Regeln im Stylefenster editieren

Firebug zeigt die Styles nicht nur an, sondern erlaubt auch das Spielen damit. Fast alles ist anklickbar, und sehr viele Dinge lassen sich nach einem Klick editieren, wobei alle Änderungen live im Browserfenster angezeigt werden. Um zum Beispiel in der linken Navigationsleiste von typo3.org das „border-bottom“ von „div#sub-nav“ zu verändern, klicken Sie auf den zu ändernden Wert. Im erscheinenden Mini-Editor werden Werte einfach mit den Pfeiltasten geändert: Bei einer Zahlangabe wie „4px“ wird der Zahlwert verändert und bei Wortangaben wie „solid“ werden alle Alternativen durchgeblättert. Falls man Werte manuell verändert, erleichtert ein AutoComplete die Arbeit.

Um eine Deklaration vorübergehend zu deaktivieren, fahren Sie mit der Maus davor und klicken auf das graue Verbotszeichen. Es wird rot, die Deklaration erblasst und auf der Webseite wird die entsprechende Änderung live angezeigt. Wird zum Beispiel auf der Startseite von typo3.org „border-bottom“ ausgeschaltet, wird die untere Rahmenlinie der Navigation dünner. Sie verschwindet aber seltsamerweise nicht völlig.

Das Deaktivieren einzelner Formatanweisungen hat Auswirkungen auf der untersuchten Webseite.

Das Deaktivieren einzelner Formatanweisungen hat Auswirkungen auf der untersuchten Webseite.

Inspect Element: Elemente direkt auswählen

Um nicht lange nach der Ursache für die dünne Linie suchen zu müssen, klicken Sie mit der rechten Maustaste auf die Linie und wählen im Kontextmenü „Inspect Element“. Wenn Sie getroffen haben, markiert Firebug im HTML-Baum das Element „ul#sub-level1“ und zeigt rechts wieder das CSS an. Schnell stellt sich heraus, dass es tatsächlich noch eine Rahmenlinie gibt: „2px solid #FF8700“. Wenn Sie auch diese Deklaration deaktivieren, ist die Rahmenlinie auf der Webseite endgültig verschwunden.

In der Regel zeigt Firebug die für das ausgewählte Element deklarierten CSS-Regeln an. Ein Klick auf "Options" unterhalb des kleinen Suchfensters macht allerdings den Befehl „Show Computed Values“ sichtbar, demzufolge die von Firefox errechneten Werte angezeigt werden. Auf diese Weise lassen sich Rundungsfehler leichter aufspüren.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
.::.Caro.::.
.::.Caro.::.

Super Turoial, vielen Dank. Endlich verstehe ich diesen Firebug mal ein wenig. Bisher zwar immer installiert gehabt, aber nie verstanden was der will :D

1000 Dank für die super Erklärung, bloss nie löschen – zwecks nachlesen :D

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung