3/03/2009
Nicole Sullivan’s Object Oriented CSS
Nicole Sullivan’s Object Oriented CSS
http://wiki.github.com/stubbornella/oocss
Two main principles
1. Separate structure and skin
2. Separate container and content
10 Best Practices
1. create a component library
2. Use consistent semantic styles
3. Design module to be transparent on the inside
4. Be flexible
5. Learn to love grids.
6. Minimize selectors.
7. Separate structure and skin.
8. Separate container and content.
9. Extent Objects by applying multiple classes on an element.
10. Use reset and fonts from YUI
9 Pitfalls
1. Location dependent styles.
2. Avoid specifying what tag a class applies
3. Avoid IDs to style inside the main content areas.
4. Avoid drop shadows and rounded corners over irregular backgrounds
5. Don't sprite every image together (unless you has very few pages)
6. Avoid height alignment.
7. Text as text, not as images.
8. Redundacy
9. Avoid premature optimiaztion
3/02/2009
Align List Items Horizontally with CSS ... | ruzee.com - Steffen Rusitschka
Align List Items Horizontally with CSS ... | ruzee.com - Steffen Rusitschka
Cross Browser display:inline-block
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
For IE Win, we use display:inline;zoom:1;
IE Win does not do "inline-block" on block-level elements, so the trick is to use display:inline + zoom:1 instead. Note that if we use zoom it is because we need these elements to have layout (read on having Layout), but we cannot rely on the width declarations since we are styling the LIs as inline elements (which turns the width "trigger" off).
say no to float: use inline-block
Sometime we let inline elements float only for being able to set the width/height of the element. But by setting inline-block to elements, we can achieve same goal in ie6/ie7/ff3/safari (except ff2, use display: -moz-inline-stack instead). Ie6/Ie7 accepts display:inline-block only for inline elements. For block level elements, zoom:1 and display: inline can mimick the disply:inline-block. ex:
#inline-element{display:inline-block, width:10em}
#block-element{width:10em; zoom:1; display:inline}
#all-elements-in-all-browsers {display:inline-block; width:10em; zoom:1; *display:inline}
Cross Browser Support for inline-block Styling
http://chunghe.googlecode.com/svn/trunk/experiment/inline-block/inline-block-to-replace-float-inline-elements.htm
IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems, when a list or paragraph would perhaps make more semantic sense (and also degrade more nicely for non-CSS users.)
However, if you trigger hasLayout on a block element, and then set it to display:inline, it magically becomes an inline-block in IE! By using the *property hack (which I love so well), you can hide the display:inline from all non-IE browsers effortlessly.
hasLayout
IE hasLayout - hasLayout.net - by Zoffix Znet - 這一篇把 hasLayout 解釋的非常清楚
MSIE has quite dated rendering engine (not surprising, as IE is based on Mosaic). In old tabular times, almost any element (except inline content) was a box. There was no way for content to leak from containing table cell, or for table cell to leak out of table...
Many years have passed, and Microsoft began adapting archaic Trident engine to make use of CSS. However, CSS changes the fundamental assumption that old engine was based on - the one that "anything significant" is a rectangle that contains all its content. CSS allows content to overflow out of container. This may happen when content is floated, or if content is too tall/wide to fit inside constrained box.
Where Did It Come From?
Microsoft's "genius" coders decided to fix their ancient engine in a rather bizarre way. And that is where the hasLayout "property" comes from. Every element has hasLayout set to either true or false. If it is set to true - element is a box that is responsible for rendering itself. Therefore, element would be expanded to contain overflowing content, such as floats or very_very_long_words_without_any_breaks. If hasLayout is set to false - element does not render itself, and instead hopes that some ancestor with hasLayout set will do the job for it. This is where the majority of IE bugs come to life.
The following properties/values give an element layout:
* skip list
* position: absolute
* float: left or right
* display: inline-block
* width: any value other than auto
* height: any value other than auto
* zoom: any value other than normal (see description below)
* writing-mode: tb-rl (see description below)
As of IE version 7, few new properties give "layout":
* skip list
* overflow: hidden or scroll or auto
* overflow-x: hidden or scroll or auto
* overflow-y: hidden or scroll or auto
* min-width: any value other than auto
* max-width: any value other than auto
* min-height: any value other than auto
* max-height: any value other than auto
Setting display: inline-block and then reverting it back to the original display property value inside another rule set does not remove layout, this trick can be used to give layout without the use of conditional comments when you cannot use other properties. Here is how this trick would look like:
On having layout — the concept of hasLayout in IE/Win
3/01/2009
訂閱：
文章 (Atom)
