Notes from stylesheet-debug.js
Below are the notes from the newly released YUI version 2.7.0 stylesheet.js
and the notes from its source probably explains why web development is too tricky to deal with.
and the notes from its source probably explains why web development is too tricky to deal with.
Adapted from tylesheet-debug.js…../*Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.7.0*/
* Style node must be added to the head element. Safari does not honor styles applied to StyleSheet objects on style nodes in the body. * StyleSheet object is created on the style node when the style node is added to the head element in Firefox 2 (and maybe 3?) * The cssRules collection is replaced after insertRule/deleteRule calls in Safari 3.1. Existing Rules are used in the new collection, so the collection cannot be cached, but the rules can be. * Opera requires that the index be passed with insertRule. * Same-domain restrictions prevent modifying StyleSheet objects attached to link elements with remote href (or “about:blank” or “javascript:false”) * Same-domain restrictions prevent reading StyleSheet cssRules/rules collection of link elements with remote href (or “about:blank” or “javascript:false”) * Same-domain restrictions result in Safari not populating node.sheet property for link elements with remote href (et.al) * IE names StyleSheet related properties and methods differently (see code) * IE converts tag names to upper case in the Rule’s selectorText * IE converts empty string assignment to complex properties to value settings for all child properties. E.g. style.background = ‘’ sets non-'’ values on style.backgroundPosition, style.backgroundColor, etc. All else clear style.background and all child properties. * IE assignment style.filter = ‘’ will result in style.cssText == ‘FILTER:’ * All browsers support Rule.style.cssText as a read/write property, leaving only opacity needing to be accounted for. * Benchmarks of style.property = value vs style.cssText += ‘property: value’ indicate cssText is slightly slower for single property assignment. For multiple property assignment, cssText speed stays relatively the same where style.property speed decreases linearly by the number of properties set. Exception being Opera 9.27, where style.property is always faster than style.cssText. * Opera 9.5b throws a syntax error when assigning cssText with a syntax error. * Opera 9.5 doesn’t honor rule.style.cssText = ‘’. Previous style persists. You have to remove the rule altogether. * Stylesheet properties set with !important will trump inline style set on an element or in el.style.property. * Creating a worker style collection like document.createElement(’p').style; will fail after a time in FF (~5secs of inactivity). Property assignments will not alter the property or cssText. It may be the generated node is garbage collected and the style collection becomes inert (speculation). * IE locks up when attempting to add a rule with a selector including at least characters {[]}~`!@%^&*()+=|? (unescaped) and leading _ or - such as addRule(’-foo’,'{ color: red }’) or addRule(’._abc’,'{…}’) * IE’s addRule doesn’t support comma separated selectors such as addRule(’.foo, .bar’,'{..}’) * IE throws an error on valid values with leading/trailing white space. * When creating an entire sheet at once, only FF2/3 & Opera allow creating a style node, setting its innerHTML and appending to head. * When creating an entire sheet at once, Safari requires the style node to be created with content in innerHTML of another element. * When creating an entire sheet at once, IE requires the style node content to be set via node.styleSheet.cssText * When creating an entire sheet at once in IE, styleSheet.cssText can’t be written until node.type = ‘text/css’; is performed. * When creating an entire sheet at once in IE, load-time fork on var styleNode = d.createElement(’style’); _method = styleNode.styleSheet ?.. fails (falsey). During run-time, the test for .styleSheet works fine * Setting complex properties in cssText will SOMETIMES allow child properties to be unset set unset FF2 FF3 S3.1 IE6 IE7 Op9.27 Op9.5 ———- —————– — — —- — — —— —– border -top NO NO YES YES YES YES YES -top-color NO NO YES YES YES -color NO NO NO NO NO background -color NO NO YES YES YES -position NO NO YES YES YES -position-x NO NO NO NO NO font line-height YES YES NO NO NO NO YES -style YES YES NO YES YES -size YES YES NO YES YES -size-adjust ??? ??? n/a n/a n/a ??? ??? padding -top NO NO YES YES YES margin -top NO NO YES YES YES list-style -type YES YES YES YES YES -position YES YES YES YES YES overflow -x NO NO YES n/a YES ??? - unsetting font-size-adjust has the same effect as unsetting font-size * FireFox and WebKit populate rule.cssText as “SELECTOR { CSSTEXT }”, but Opera and IE do not. * IE6 and IE7 silently ignore the { and } if passed into addRule(’.foo’,'{ color:#000}’,0). IE8 does not and creates an empty rule. * IE6-8 addRule(’.foo’,'’,n) throws an error. Must supply *some* cssText */
