Wie man CSS-Angaben findet

Das einfachste, aber auch mühseligste ist, einfach in den Quellcode zu schauen.

Es gibt aber ein paar nützliche Helferlein, die einem das Auffinden der CSS-Angaben erleichtern. Dazu bringt jeder Browser ein Addon mit oder hat es auch schon fest eingebaut.

Beim Microsoft Internet Explore, Versionen 8 und 9, reicht ein beherztes drücken auf die F12-Taste. Dann erscheint ein Fenster mit den CSS-Angaben für die aktuell geöffnete Seite. Dort zunächst auf den kleinen weißen Pfeil oben links klicken.

Bei den Versionen 6 und 7 kann man sich dieses Tool zusätzlich installieren. Dazu bitte entweder auf den Microsoft-Seiten suchen gehen oder besser gleich eine Suchmaschine seiner Wahl benutzen. Beim Downloaden unbedingt auf die verwendete Brwoserversion achten!

Bild: CSS im Internet Explorer finden – Das Auswahlwerkzeug

Bewegt man sich jetzt wieder mit der Maus auf die Website im Internet Explorer kann man sehen, wie sich kleine und große Vierecke um verschiedene Bereiche legen. Wenn man den Bereich umrahmt hat, zu dem man die CSS-Angaben wissen möchte, dann einfach einmal die linke Maustaste anklicken – und schon erscheint im zweiten Fenster die CSS-Angabe dazu und wird blau hinterlegt.

Im linken Teil des Fensters ist jetzt der Code, wie man ihn in etwa auch im Queltext widerfindet, dargestellt. Allerdings übersichtlich strukturiert. Im rechten Teil des Fensters finden sich die verwendeten CSS-Angaben. Alles was nicht durchgestrichen ist, ist gerade aktuell für den markierten Bereich.

Bild: CSS im Internet Explorer finden – Der Überblick

Sie können nun im rechten Bereich die Häckchen wegnehmen und wieder neu set-zen und im Internet Explorer direkt sehen, ob und was sich verändert. Sie können auch im rechten Bereich des Fensters direkt in eine Zeile klicken und den CSS-Wert verändern. Nachdem Sie ENTER gedrück haben, können Sie die Änderung direkt im Browser sehen.

Keine Angst, Sie verändern damit nichts Dauerhaftes. Wenn Sie die Werte dauerhaft verändern möchten, müssen Sie die zugehörige CSS-Datei editieren und mit Ihren Werten versehen. In diesem Tool können Sie lediglich ausprobieren und suchen, aber nicht speichern.

Was im Internet Explorer geht, geht auch im Opera. Auch dort ist so ein Tool fest eingebaut. Sie finden es über das Menü:

Ansicht --> Entwicklerwerkzeuge --> Opera Dragonfly

Alle diese Tools funktionieren sehr ähnlich. Wobei Sie hier den Vorteil haben, dass das Fenster unten aufgeht und damit den Browser teilt.

Bild: CSS im Opera finden

Beim Opera müssen Sie den grünen Pfeil benutzen, der an dritter Stelle in der Iconleiste steht. Mit diesem dann im oberen Bereich den Bereich heraussuchen, zu dem Sie nähere Informationen haben möchten und diesen anklicken. Unten erscheinen jetzt wieder, wie im Internet Explorer auch, im linken Bereich der strukturelle Aufbau und im rechten Bereich des unteren Fensters die CSS-Angaben. Sie können rechts auch einen Haken setzen, bzw. entfernen. Dazu einfach mit der Maus über die Zeile bewegen, dann erscheint ein kleines Kästchen zum Haken setzen. Wenn Sie direkt in die CSS-Zeile klicken, können Sie dort auch die Werte verändern und wesentlich komfortabler als im Internet Explorer direkt die Veränderungen im oberen Fenster sehen.

Was auch interessant und nur im Opera ist, sind die Hilfslinien im oberen Fenster, mit dem Sie sehr schön das Layout überprüfen können.

Aber auch hier speichern Sie nichts. Speichern müssen Sie stets direkt in der zugehörigen CSS-Datei des Templates. Auch hier können Sie nur ausprobieren und suchen.

Der Firefox hat wohl das konformtabelste Tool dieser Art, muss allerdings erst installiert werden. Dazu gehen Sie im Menü unter Extras --> Add-ons. Es erscheint dann ein kleines Fenster. Dort klicken Sie bitte auf das erste Icon Add-ons suchen und dort geben Sie dann in das Suchenfeld (Alle Add-ons durchsuchen) Firebug ein.

Bild: Add-on Firebug für den Firefox installieren

Es erschenen dannn mehrere Tools in dem das Wort Firebug vorkommt. Sie entscheiden sich bitte für das erste, welches nur diesen einen Namen hat und klicken "Zu Firefox hinzufügen" an. In Ihrem Browser haben Sie nun unten rechts einen kleinen winzigen Käfer. Wenn Sie den einmal anklicken, dann erscheint im unteren Bereich des Browsers der Firefox. Alternativ können Sie den Firebug über das Menü finden: Extras --> Firebug --> Firebug öffnen oder Sie können auch die F12-Taste drücken.

Im Endeffekt funktioniert auch der Firebug genauso, wie die bereits vorgestellten. In der Iconleiste des unteren Fensters haben Sie links einen weißen Pfeil, mit dem Sie oben Ihre Auswahl treffen. Im unteren Fenster haben sie links wieder die Struktur und rechts die CSS-Angaben.

Sie können im rechten Bereich aber von allen genannten Tools am besten arbeiten. Zumal auch eine automatische Eingabevervollständigung angeboten wird. Interessant ist auch, dass Sie nicht nur die CSS-Angaben angezeigt bekommen, sondern auch, in welchen Dateien und in welcher Zeile sich die Angaben befinden. Wenn Sie mit der Maus eine Sekunde über den blauen Dateinamen im rechten Bereich des unteren Fensters verharren, bekommen Sie sogar den vollständigen Pfad als Tooltip angezeigt.

Bild: Der Firebug in seiner ganzen Pracht

Die meisten Profis die ich kenne, arbeiten mit dem Firebug für den Firefox. Aber arbeiten Sie mit dem Browser und dem zugehörigen Tools, mit dem Sie sich auskennen und wo Sie sich wohl fühlen. Im Endeffekt sind alle sehr ähnlich und unterscheiden sich nur in Kleinigkeiten.

Beim Chrome gibt es ebenfalls einen fertig eingebautes Developer-Tool, das über das Tastaturkürzel Strg+Umschalt+I erreichbar ist.

Um direkt Bereiche in der Webseite zu markieren und sich die CSS-Angaben anzeigen zu lassen, muss man ganz unten auf die "Lupe" klicken. Interessant ist, dass Sie direkt beim überfahren mt der Maus Angaben zu den CSS-Elementen erhalten.

Bild: Entwickler-Tool im Chrome

Beim Chrome gibt es einige weitere interessante Dinge, wie beispielsweise die Seite gleich zu übersetzen oder auch weitere verschiedene Möglichkeiten der Analyse.

0 Kommentare