[1] The [CITE@en[Live [[[ABBR@en[CSSOM] [Cascading Style Sheets Object Model]]]] Viewer]] visualizes how Web browsers interpret CSS style sheets and expose them into their object hierarchy. It is obviously inspired by [[Ian Hickson]]'s [[Live DOM Viewer]] for HTML documents. * Description ** Style sheet to test The CSS style sheet to test. As you input something to this box, the following boxes are updated automatically. ** [ABBR@en[CSSOM] [Cascading Style Sheets Object Model]] View This box shows the object hierarchy of the [ABBR@en[CSSOM] [Cascading Style Sheets Object Model]] 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. ** [CODE(DOMa)@en[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 [ABBR@en[CSSOM] [Cascading Style Sheets Object Model]], have no method to serialize the entire style sheet. For such browsers the [CODE(DOMa)@en[cssText]] field shows the concatenation of [CODE(DOMa)@en[[[cssText]]]] values for the rules contained in the [CODE(DOMa)@en[[[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 [CODE(HTMLe)@en[[[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 [CODE(DOMa)@en[[[innerHTML]]]] attribute of the [CODE(HTMLe)@en[[[body]]]] element of the rendered document, therefore any [CODE(HTMLe)@en[[[script]]]] element in the fragment is not executed. Following the box, there are three radio buttons: [Q@en[no quirks]], [Q@en[limited quirks]], and [Q@en[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 [CODE(JS)@en[w ([VAR@en[s]])]] into the global scope of the rendered document, where [VAR@en[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 [CODE(JS)@en[w ([VAR@en[s]])]] in the CSS function [CODE(CSS)@en[[[expression]]()]] might make IE unstable. * External resource A file [CODE(URI)@en[image]] (a PNG image) is accessible in the same directory as the [[Live CSSOM Viewer]]. It can be used for testing. * Tested browsers - [[Firefox]] 2 - [[Opera]] 9 - [[WinIE]] 6 (on [[Windows XP]] [[SP2]]) * TODOs - Alternate parsing mode, such as style="", cssText = "" * memo [2] An example to test [[CSSOM]] attributes using functions [CODE(JS)@en[sd()]] and [CODE(JS)@en[u()]]: ([[名無しさん]]) [3] It now supports the XML parse mode: ([[名無しさん]] [WEAK[2008-01-13 13:09:06 +00:00]]) [4] '''NOTE''': In Opera 9.52, the [CODE(DOMa)@en[[[cssText]]]] attribute does not return the reserialized form of the CSSOM object for the [[HTML]] or [[SVG]] [CODE(XMLa)@en[[[style]]]] attributes. For more information, see . ([[名無しさん]])