Live CSSOM Viewer

Live CSSOM Viewer

[1] The Live CSSOM Viewer https://manakai.github.io/livecssomviewer/ visualizes how Web browsers interpret CSS style sheets and expose them into their object hierarchy.

Description

Style sheet to test

The CSS style sheet to test. As you input something to this box, the following boxes are updated automatically.

CSSOM View

This box shows the object hierarchy of the CSSOM created from the style sheet input to the first box.

Since WinIE implements their own object model, what is shown in this box in WinIE is slight different from those in other browsers.

cssText View

This box shows the textual serialization of the CSS style sheet once parsed by the browser.

Browsers other than WinIE, i.e. browsers implementing only the standard CSSOM, have no method to serialize the entire style sheet. For such browsers the cssText field shows the concatenation of cssText values for the rules contained in the cssRules list of the style sheet.

Rendered document view

An HTML document is rendered in this box with the specified CSS style sheet.

HTML body fragment to test

Input the body part of the HTML document rendered in the box above. Any HTML construct can be used. Note, however, that the value is set to the innerHTML attribute of the body element of the rendered document, therefore any script element in the fragment is not executed.

Following the box, there are three radio buttons: no quirks, limited quirks, and quirks. These buttons select how HTML documents are parsed and how CSS style sheets are interpreted.

Log

This box shows any message generated for the ease of testing. The script puts a JavaScript function w (s) into the global scope of the rendered document, where s is the string to output to the box. You can invoke the function in the rendered HTML document or CSS style sheet.

Warning. Invoking the function w (s) in the CSS function expression() might make IE unstable.

External resource

A file image (a PNG image) is accessible in the same directory as the Live CSSOM Viewer. It can be used for testing.

Tested browsers

Repository

[5] There is the Git repository for the Live CSSOM Viewer, available at the following locations:

TODOs

Author

Wakaba <wakaba@suikawiki.org>.

Acknowledgements

[8] It is obviously inspired by Ian Hickson's Live DOM Viewer for HTML documents.

License

[9] See the relevant files.

Copyright 2007 Wakaba <wakaba@suikawiki.org>.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.

memo

[2] An example to test CSSOM attributes using functions sd() and u(): http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%7B%7D;h=%3Cinput%20type%3Dbutton%20value%3Dx%20onclick%3D%22%0A%20%20try%20%7B%0A%20%20%20%20sd%20().border%20%3D%20'2px%20solid%20blue'%3B%0A%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20w%20(e.message%20%7C%7C%20e)%3B%0A%20%20%7D%0A%20%20u%20()%3B%0A%22%3E%0A%0A%3Cp%3EXXXXX%3C%2Fp%3E;p=n;x=style-element (名無しさん)

[3] It now supports the XML parse mode: http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7Bcolor%3A%20green%7D%0AP%20%7Bcolor%3A%20red%7D;h=%3Cp%3Esmall%20%26lt%3Bp%3E%3C%2Fp%3E%0A%3CP%3ECAPITAL%20%26lt%3BP%3E%3C%2FP%3E;p=x;x=style-element

(名無しさん 2008-01-13 13:09:06 +00:00)

[4] NOTE: In Opera 9.52, the cssText attribute does not return the reserialized form of the CSSOM object for the HTML or SVG style attributes. For more information, see http://suika.suikawiki.org/gate/2005/sw/style#anchor-81.