The objective of this example is to show some of the intended use of the
supportAtRule, supportSelector, supportProperty, supportMediaQuery
methods that may be found here.
The three methods allow direct inspection of supported features (at-rules, selectors, properties) using browsers own internal CSS parser. To ease the task I narrowed down my objective to only one exact thing for now, use the browser to validate some CSS syntax before injecting that into elements style or document stylesheets for use in testing and production code.
The intent was not to show or find browser bugs but test for missing support compared to standard specifications, this has nothing to do with how well browsers results are rendered on the screen nor with correctness of browser implementations.
The code just checks for what seems to be available using feature detection.
On W3C compliant browsers the
insertRule()/deleteRule() methods of the stylesheet object
are used to manipulate the rules with the requested "tokens" and the outcome is inspected to match.
As can be seen on the CSS interfaces
it is possible to take advantage of the "DOMException" thrown by the API method available in the IDL definition.
The operation is performed in a
try/catch block to take advantage of the CSS engine
throwing error and letting us know of the unexpected illegal syntax.
On IE browsers up to the latest IE8 when a rule is inserted in the stylesheet, it produces two changes
in the parsed output: a) the
selectorText property is set to the upper case string 'UNKNOWN'
if it is invalid, b) the representation read back from the stylesheet
cssText have properties
with upper case names if they are recognized, or they are discarded from the representation if unknown to
It was noticed that some specific properties would persist in the
maintaining the original case in names, we have taken that as a failure in these test as it seemed most
adequate with the expected result.
In IE the invalid properties values are converted to the lower case string 'undefined' as an extra notification that the property is not consistent with expected value/type (maybe enumerated).
<style type="text/css">inline element