[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.
The CSS style sheet to test. As you input something to this box, the following boxes are updated automatically.
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
ViewThis 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.
An HTML document is rendered in this box with the specified CSS style sheet.
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.
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.
A file image
(a PNG image) is accessible in the same
directory as the Live CSSOM Viewer. It can be used for testing.
[5] There is the Git repository for the Live CSSOM Viewer, available at the following locations:
Wakaba <wakaba@suikawiki.org>.
[8] It is obviously inspired by Ian Hickson's Live DOM Viewer for HTML documents.
[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.
[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.