creativemac.de Weblog: Webseiten mit XRAY durchleuchten

Das Boxmodell der CSS-Spezifikation ist nicht ganz einfach zu verstehen. Borders, Margins, Paddings und die Breite machen es mitunter notwendig, mit dem Taschenrechner nachzuprüfen, warum ein “floatendes” Layout mal wieder auseinanderfällt. Von Westviv gibt es nun ein Online-Tool namens XRAY, das das Boxmodell detailiert und mit Zahlen visualisiert.

Einfach das XRAY-Bookmark von der Seite auf die Lesezeichenleiste ziehen, die entsprechende Webseite aufgerufen und dann den XRAY-Bookmark anklicken. Die wichtigen Informationen des dann ausgewählten Block-Elementes sind sofort differenziert in einem Overlayfenster wie auf dem Bild zum Beitrag zu sehen.

Neben der kinderleichten Installation ist das Tool sehr maclike zu bedienen und liefert hilfreiche Daten, die kompakter und umfangreicher als die der Web Developer Toolbar für den Firefox sind (zumindest was die Positionierung und Grösse der Block-Level-Elemente angeht).