Firescope: Nachschlagewerk für HTML/CSS in Firefox

Man muß nicht alles wissen, aber wissen, wo etwas steht. Firescope ist ein Nachschlagewerk für HTML-Elemente, HTML-Attribute und CSS-Eigenschaften. Mit Firescope können Sie auf einem Blick sehen, ob Ihr HTML/CSS mit allen gängigen Browsern kompatibel ist und den W3C-Standards entspricht.

Firescope ist eine sehr nützliche Hilfe, um fehlerfreies HTML/CSS zu schreiben und um sich Anpassungen an die gängigen Browser zu erleichtern. Ebenfalls erleichtert es das Ändern einer Webseite.

Firescope ist ein Firefox-add-on von Sitepoint. Es ist in Firebug integriert und erweitert dessen Menü um den Menüpunkt "Reference". Firescope ist verknüpft mit der SitePoint Reference Webseite. Dort finden Sie ausführliche Informationen über HTML-, CSS-, und JavaScript-Referenzen. Firescope zeigt nur Ausschnitte davon an.

Voraussetzung, um Firescope zu installieren ist mindestens Firefox 2 und Firebug 1.2.

Firescope SuchboxDie Suchbox

Wenn Sie Firebug öffnen, sehen Sie als erstes rechts die Suchbox.

Sie können nach HTML-Elementen, HTML-Attributen und CSS-Eigenschaften suchen - gleichzeitig oder nur nach einem der drei genannten.

Die Suche ist eine Live-Suche. Schon nach dem Eintippen der ersten Buchstaben sehen Sie Suchergebnisse.

Firescope SuchergebnisseSuchergebnisse

Die Suchergebnisse zeigen Ihnen- von links nach rechts - ob das Gefundene den W3C-Standards entspricht und gibt eine kurze Zusammenfassung zur Benutzung des Elements, Attributs oder der Eigenschaft. Ein Beispiel: "border" legt die Randdicke um das Objekt fest.

Sie erhalten ebenfalls Informationen über die Browser-Kompatiblität. Darunter befindet sich ein Link "more »" zu weiteren Informationen auf der SitePoint-Reference Seite.

Firescope Kontextmenü SuchergebnisseKontextmenü der Suchergebnisse

Über einen Rechtsklick auf den Namen eines Suchergebnisses erhalten Sie zwei Optionen:

  • Codebeispiel zeigen
  • Mehr Informationen

Firescope CodebeispieleCodebeispiele

Die Codebeispiele werden im rechten Firebug-Panel angezeigt. An diesen Beispielen können Sie ablesen, wie z.B. das HTML-Element "menu" verwendet wird. Die Codebeispiele können Sie markieren und kopieren und in Ihren HTML-Code einfügen.

"Mehr Informationen"

Wählen Sie diese Option, um mehr über das ausgewählte Element zu erfahren. Die dazugehörige SitePoint-Referenz-Seite öffnet sich (in einem neuen Tab). Es ist derselbe Link, den Sie unterhalb der Angaben zur Browser-Kompatibilität angezeigt bekommen.

Firescope HTML PanelHTML-Panel

Klicken Sie auf den Menüpunkt "HTML". Im HTML-Panel können Sie auf jeden Element- oder Attribut-Namen einen Rechtsklick machen und wiederum auswählen zwischen

  • Look up (Element/Attribute)
  • Show Code Example

"Look up" zeigt Ihnen die Referenz im Suchergebnisfenster. "Show Code Example" zeigt im rechten Fenster ein Anwendungsbeispiel.

Firescope CSS PanelCSS-Panel

Dasselbe gilt für das CSS-Panel. Bei einem Rechtsklick auf den Eigenschaftsnamen oder Wert stehen Ihnen ebenfalls diese beiden Optionen zur Verfügung.

Über "Look up" gelangen Sie zur Referenzseite und "Show Code Example" zeigt Ihnen ein Codebeispiel.

Firescope - Look up selectionLook up selection

Öffnen Sie das HTML-Panel über den Menüpunkt "HTML". Wenn Sie mit der Maus über die Tag-Namen fahren, ändert sich Ihr Mauszeiger, er zeigt einen Link. Mit einem Linksklick wählen Sie den Tag aus - die Zeile wird grau hinterlegt. Ein Rechtsklick an derselben Stelle zeigt Ihnen die Auswahloption "Look up Selection". Dies ist eine spezielle Suche, die alle Attribute und alle CSS-Eigenschaften des gewählten Elements anzeigt.

Beispiel: "Look up 'div' element" zeigt Ihnen die Referenz zum HTML-Element "div". "Look up selection" zu einem "div" zeigt zusätzlich das Attribut "id" und weiter 12 Styles, wie "background-color", "color",  "float"...

Dieselbe Suche können Sie starten, wenn Sie auf den Tab "References" klicken.

Firescope und InspektorInspektor zeigt Codebeispiele

Wenn Sie mit dem Inspektor die HTML-Seite untersuchen (Tab "Untersuchen") und das Codebeispiel-Panel geöffnet haben, dann erscheinen dort Codebeispiele für die HTML-Elemente, die Sie gerade untersuchen.

Klicken Sie danach auf den Menüpunkt "Reference", zeigt Ihnen Firescope die Referenzen zum ausgewählten Element. Einen Klick weiter - über "more"- können Sie ausführlich über das Element nachlesen.

Die Referenzseite von SitePoint ist in englisch. Das fällt jedoch kaum auf, da alle HTML- und CSS-Benennungen englisch sind. SELFHTML ist ein deutsches Nachschlagewerk. Dort müssen Sie sich jedoch durch die Oberpunkte bis hin zum gesuchten Element durchklicken.

Mit Firescope sind Sie mit einem Klick an der richtigen Stelle. Gerade dies macht Firescope so nützlich. Wer hat schon alle Kompatibilitäten und W3C-Standards im Kopf - ich nicht ;-). Hierfür separate Seiten zu öffnen und das Gesuchte einzeln nachzuschlagen ist zeitaufwendig. Mit Firescope sind diese Informationen mit einem Klick nachschlagbar.

Viel Spaß und schnelleres Arbeiten mit Firescope!

21.06.2016 © seit 02.2009 Petra Sütterlin  

Gesamtstatistik der Bewertungen

  4.7 Gesamtbewertung

  4.7 Thema
  4.7 Information
  4.7 Verständlichkeit

Stimmen: 3

Legende

5 Sterne: super!
4 Sterne: gut gelungen!
3 Sterne: O.K.
2 Sterne: geht so
1 Stern: erträglich

diesen Ratgeber: Bewerten

Kommentare

Keine Kommentare vorhanden.


NACH OBEN