Archive for April, 2008

Best Practices: Working with CSS

Thursday, April 24th, 2008 By Nikhil

Put Stylesheets at the Top

If you want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible, put the CSS at the top of the page inside the document HEAD. This makes pages appear to be loading faster, as this facilitates progressive rendering of the page. This is especially important for pages with a lot of content and for users on slower Internet connections.

It is a documented fact that to enhance overall user experience, it is important to provide progress indicators and visual feedbacks. To avoid having to redraw elements of the page, in case if their styles change, some browsers, including IE, blocks rendering of the page until the CSS is fully loaded. Because of this, the user is gets to see a blank white page.

The W3 HTML Specifications’ also states that the CSS must me include in the HEAD section of the HTML page. Also note that, In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Avoid Using Browser Specific features

Filters : Use of filter increases memory consumption and is applied per element, not per image, so the problem is multiplied. Also, Filters are IE Proprietary, hence will not work as intended in other browsers. If you want transparent or gradient backgrounds, use 1Pixel with images.
Expressions : CSS expressions are a nice feature to have in CSS, but still is IE specific feature. Also, it is important to note that, these expressions are evaluated when the page is rendered and resized, scrolled and even when the user moves the mouse over the page. Needless to say this could affect the performance of your page. Hence in simple words ,Avoid using CSS expressions, unless you feel its pros’ weighs more than its cons’

Externalise you CSS

Using external CSS will result in faster loading of pages because the JavaScript and CSS files are cached by the browser. Inline CSS in HTML documents get downloaded every time the HTML document is requested. This might actually reduce the number of HTTP requests made but it subsequently increases the size of the HTML document. External CSS are cached by the browser; the size of the HTML document is reduced without increasing the number of HTTP requests.

Please note that, if users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Pack Your CSS File

Packing or crunching your CSS is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

The CSS can me crunched by removing all the comments and any unwanted characters like white spaces, newlines etc.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

CSS Cross Browser Minimum Height Hack

Saturday, April 12th, 2008 By Nikhil

Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”.  Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…

For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.  

Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6

Solution 1 : Using the Underscore Hack [ …Read more]

.box1 {
min-height: 200px;

HTML : - 
<div class="box1">Some dynamic content with variable height ...</div>

 Solution 2: Using the CSS Attribute Selector Hack

.box2 {
div[class] .box2 {

<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>

 The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.

View Demo of the min-height hack for IE6

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Working with XML Node Attributes in XSLT

Friday, April 4th, 2008 By Nikhil

If you use XML and XSL, then you might have come across a time , when you have to play around with attributes and values of XML nodes in you XSL. They are loads of sites with long winded info about this, but none I found were brief and precise … This is NO XML/XSL TUTORIAL,but my attempt to put-together some sort of cheat list …

The sample XML that we will working with looks like this…

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<fruits type="tropical">
<item name="mango" moreinfo="">Mango is the king of fruits</item>
<item name="banana" moreinfo="">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="">Papaya - Hot when raw, cold when ripe</item>

So Lets begin transforming our above XML using XSL

Example 1 : Displaying value at a chosen Attribute

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML result will look like

Orange is the color and rich in vitamin C,
to get more information about <a href="" target="new">

Example 2 : Looping through and displaying all XML Attribute Names and their Values

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>, 
attribute value : <xsl:value-of select="."/>  <br />

HTML result will look like

attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value :
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value :
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value :
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value :

Download all the above files here (478 downloads)

Watch this space, I’ll keep updating this with new findings…

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter