Every web developer of this era know performance is key parameter to success of any online product. Reducing http requests is one way of improving performance of given webpage. CSS-Sprites is major initiative in this regard. Instead of using different small images for each and every graphical element in page, we use single big image (sprite) as background image and adjust visible area using “background-position” CSS attribute. You can see this method being used in all major websites including Yahoo!, Facebook etc.
June 16, 2010
January 9, 2010
December 21, 2009
Skinning YUI Data Table
we do generally think skinning any css thing is very easy, I started skinning YUI data table with the same assumption, but what turned out is my assumption was wrong, it needed bit more that css sense, that is cascading sense. the better understanding of data table. Finally I am done with that, here is the css for skinning your data table to purple color. append it to your skin.css (inside /assets/skin/sam/ folder)
.yui-skin-sam tr.yui-dt-odd {background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc{background-color:#e5dbff;}
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc{background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-highlighted{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-highlighted td, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-selected{background-color:#7c42d9;}
.yui-skin-sam tr.yui-dt-selected td, .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {background-color:#7c42d9;}
make sure you won’t mess with the order, order is more important than the content.
check out preview image @ http://www.flickr.com/photos/ananthara/4202372041/
October 28, 2009
YUI Tab and Flash Graph/Movie
when you use YUI Tab with flash graphs/movie in them, firefox refresh the movie every time you switch away and back to the tab containing flash Graph. if you are using simple graphs it’s not noticeable, but in big movies/graphs it’s irritating. I figured out the basic problem is whenever you change position / overflow values of a div, firefox reloads all flash movies within that div. YUI Tabview have these 2 properties defined for .yui-navset .yui-content .yui-hidden class which get appended to content div when they get hidden.
Fix is to add same properties to visible tab-content div also. This doesn’t make any harm in the way Tab works. Here is the css I did add to fix this issues. But I have not tested this on browsers other than Firefox, try yourself.
.yui-navset .yui-content > div {overflow:hidden;position:static;}
.yui-navset .yui-content .yui-hidden {position:static; }
October 8, 2009
October 6, 2009
CSS1 vs CSS2
CSS2 has many improvements and enhancements over CSS1, here I listed some of them.
Positioning: Even though CSS1 handled some aspects of positioning, CSS2 took it to next level. Relative and absolute positioning determines object’s position depending on parent element or user agent, Fixed position creates watermark kind of effect. Here is list of positioning attributes with values accepted.
Property | Description | Values | CSS |
---|---|---|---|
bottom | Sets the bottom margin edge for a positioned box | auto length % inherit |
2 |
clip | Clips an absolutely positioned element | shape auto inherit |
2 |
cursor | Specifies the type of cursor to be displayed | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
left | Sets the left margin edge for a positioned box | auto length % inherit |
2 |
overflow | Specifies what happens if content overflows an element’s box | auto hidden scroll visible inherit |
2 |
position | Specifies the type of positioning for an element | absolute fixed relative static inherit |
2 |
right | Sets the right margin edge for a positioned box | auto length % inherit |
2 |
top | Sets the top margin edge for a positioned box | auto length % inherit |
2 |
z-index | Sets the stack order of an element | number auto inherit |
2 |
Font Selection: Apart from name matching system supported with CSS1, CSS2 support
- Intelligent matching: user agent forced to use font similar to requested font, when it is not available
- Font synthesis: where user agent creates font that matches metrics of requested font
- Font download: where user allowed to download font over the web
Table Display Styles: CSS2 support display styles like, table, table-cell, table-row to make not table elements to behave like table elements in document flow.
Cursor: with CSS2 you can define cursor attributes to html elements, which allow you to change cursor as per requirements. Here is the table with list of cursors supported by CSS2
Value | Description |
---|---|
URL | A comma separated of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used |
auto | Default. The browser sets a cursor |
crosshair | The cursor render as a crosshair |
default | The default cursor |
e-resize | The cursor indicates that an edge of a box is to be moved right (east) |
help | The cursor indicates that help is available |
move | The cursor indicates something that should be moved |
n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
pointer | The cursor render as a pointer |
progress | The cursor indicates that the program is busy (in progress) |
s-resize | The cursor indicates that an edge of a box is to be moved down (south) |
se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
text | The cursor indicates text |
w-resize | The cursor indicates that an edge of a box is to be moved left (west) |
wait | The cursor indicates that the program is busy |
inherit | Specifies that the value of the cursor property should be inherited from the parent element |
Media Types: CSS2 allows you to define style sheets for different medias with @media tag, you can define different style sheets for tv, screen, print, aural etc. here are the media types supported in CSS2
Media Type | Description |
---|---|
all | Used for all media type devices |
aural | Used for speech and sound synthesizers |
braille | Used for braille tactile feedback devices |
embossed | Used for paged braille printers |
handheld | Used for small or handheld devices |
Used for printers | |
projection | Used for projected presentations, like slides |
screen | Used for computer screens |
tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
tv | Used for television-type devices |
Apart from above, CSS2 support multiple list styles, bidirectional text, language sensitive quotation marks, text-shadows, new pseudo classes, use of system colors and dynamic outlines.
Here is list pseudo classes introduced in CSS2
Pseudo name | Description | CSS |
---|---|---|
:first-child | Adds a style to an element that is the first child of another element | 2 |
:focus | Adds a style to an element that has keyboard input focus | 2 |
:lang | Adds a style to an element with a specific lang attribute | 2 |
PS: All tables are copies from http://www.w3schools.com/CSS/
September 27, 2009
Position and Z-index
Possible values for "position" attribute are static, relative, absolute, fixed and inherit. The default value of position attribute is "static". Elements are positioned in browser depending of the position attribute; all elements are placed relative to the next parent element which has absolute or relative position declared.
Static is default value and respects normal document flow, absolutely positioned elements removed from document flow, it does not flow around content of other elements, and content from other elements doesn’t flow around absolutely positioned element. Absolutely positioned elements can overlap other elements or get overlapped.
Z-index in CSS works only when you have set position to relative, absolute or fixed. IE-6 treat position as z-index reset, you should specifically declare position of parent element of Z-indexed element to "static" to have them respond to Z-index correctly.
Display of display attribute in CSS
block, inline and none are the only 3 values supported by all browsers, inline-block is not supported in IE5.5 and FF2, and IE6/IE7 respect inline-block only when it’s assigned to natural inline elements. list-item is supported in all browsers except IE5.5, run-in is buggy in almost all browsers except IE8+ and Opera 9.62+
I suggest you block, inline and none freely where-ever you can, and inline-block if you are targeting IE8+ and FF3+, it’s better not to use rest of the values. Also note <img> is an inline element.
display:block
The element displayed as a block, like <p>, <div>, <h[1-5]>. Block level elements have default display set to block. Block-level elements and elements that have display set to block, always starts from new line/block, unless you float it.
display:inline
inline used to make an block level element behave like an inline element. width attribute of inline elements are often ignored, whichever element need to support width attribute that should not have display set to inline.
display:none
used to remove an element from document flow, browser skips rendering all elements set to display none, often used to hide/unhide elements in page.
display:inline-block
used when you have to specify width to an inline elements. Refer to the limitations of this property said above.
Others, run-in, list-item, compact, table, table-row, table-cell, table-caption. but if you not just trying to experiment its good avoiding these values.
September 20, 2009
Case Sensitivity in CSS
In CSS remember that font family names and URLs can be case sensitive, but so far I never tried differentiating two CSS class names by different case (upper and lower), hence never got to deal with case sensitivity of CSS, but on of my friends got this question in an interview, later figured out, but default CSS is not case sensitive, but XML or XHTML DOCTYPE declaration can make CSS class names case sensitive.
Always we should follow standards, but it’s good to know sub-standard implications as well. because you don’t know, some day you might end up using code written by other programmers.
So next time when some body ask you about case sensitivity of CSS, blame DOCTYPEs.