CSS

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.
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 {[]}~`[email protected]%^&*()+=|? (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
*/

DOM
CSS

Comments (2)

Permalink

Be careful with getComputedStyle

Sometimes you really need to check whether an element is in the document already before calling some DOM methods.
See http://www.hedgerwow.com/360/bugs/dom-get-computed-style.php

DOM
CSS
bug

Comments (0)

Permalink

Imageless Fuzzy Shadows with CSS + HTML

It’s fun to play with CSS over 10 years.
Year 1999: filter:blur();
Year 2009: background:url(/category/css/dataimage/pngbase64/index.html);
http://www.hedgerwow.com/360/dhtml/css_fuzzy_shadow/demo.php

:-)

CSS Hack
CSS
UI

Comments (5)

Permalink

In case you need to implement min-width for IE6

I’ve posted a example about make min-width work on IE6 before, and this post is about giving you a bare bone template with min-width support so that you can simply grab the code for your layout easily.

Though the CSS / HTML seems tricky for some developers, I still think this a far better solution than the extremely expensive expression(); solution.
the template is available here http://www.hedgerwow.com/360/bugs/css-only-min_width_ie6_2..html

Update:this one works even better for me.
http://www.hedgerwow.com/360/dhtml/css-min-width-final.html

Cheers

CSS Hack
CSS
layout

Comments (8)

Permalink

Long Word breaker

for really long words in HTML, there’s a way to break it.
http://www.hedgerwow.com/360/dhtml/css-word-break.html

JavaScript
CSS
layout
FancyStyle

Comments (2)

Permalink

Input Replacement : Replace Defult Input Style with Customized Skin / Text

Let’s fix this and see no more  [BUTTON] tags , [input type=image /] or dirty CSS /HTML / JS for this simple lovely button.
http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

BTW, what’s the difference between Link and Button?
( one of my interview question for interaction designer)

CSS
UI

Comments (6)

Permalink

Multiple Views Layout : One HTML Structure, Three CSS Views

Are we really ready for this? :-D
http://www.hedgerwow.com/360/dhtml/css-layout-multiple-view/demo.php

CSS
layout
UI

Comments (3)

Permalink

Item List Grid : Real world practice with display:inline block across browsers

one of my co-workers asked the way to deploy grid-like layout for list-item with nice alignment and visual treatment.
Apparently a more flexible design and layout will make this better and old school CSS solution such as “float:left” won’thelp in the case.

I had a very simple prototype on :
http://www.hedgerwow.com/360/dhtml/css-inline-block-layout.php

you may try to adjust the font-size, window-size and see how this fluid layout adjust to your best-view-size and still keeps the UI looks nice and aligned well.

BTW, in case you may not notice the very inconvenient truth. Some might think that block Element s such as DIV does not get display:inline-block on Internet Explorer. This may not be true.

Here’s how do I implement display:inline-block across browsers:
‹style›
div{

width:100px;
height:100px;
background:red;
margin:1px;

display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
_overflow:hidden;/*fix IE6 to expanded content*/
zoom:1;/*trigger hasLayout*/
*display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/
}

‹/style›

‹div›1‹/div›
‹div›2‹/div›

CSS
layout
UI

Comments (4)

Permalink

display list item as grid and make vertical-align:middle work

One of the layout which designers love most and developers hate most is something looks like this:
http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html

No time for documentation, just keep it simple for future usage.

CSS
layout

Comments (0)

Permalink

Import Javascript into CSS for IE6

So much love & hate for IE6 :-P

http://www.hedgerwow.com/360/dhtml/ie6-css-hack-import-js.html

JavaScript
CSS Hack
CSS
IE only

Comments (2)

Permalink