May 7, 2008
@ 12:11 PM
IE6 Underscore Hack

So as you can see I've been playing with ASP.NET MVC in my free time lately. But as it turns out I learned something totally unrelated to MVC while I was editing the default stylesheet that MVC Preview 2 ships with.

#mainContent
{
    padding: 30px 30px 15px 30px;
    background-color: #FFF;
    border-bottom: 3px groove #4b6f92;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}

I can't believe I never knew about this. I have read 3 CSS books in the past few years and don't recall ever reading about this hack. So while it isn't the end-all solution to fixing CSS bugs in IE6, I think it should come in pretty handy in the future now that I know it exists.

I found this URL to WellStyled which describes the hack in more detail. Here are some cool usage examples of this hack:

#box 
{ 
    min-height: 300px; 
    height: auto; 
    _height: 300px; 
}
#menu 
{ 
    position: fixed; 
    _position: absolute; 
}
Categories: CSS | Web Standards kick it on DotNetKicks.com

February 25, 2008
@ 10:23 PM
Styles up Top, Scripts on Bottom

Today I just stumbled onto some interesting information regarding placements of script blocks and CSS links. According to some extensive testing performed at Yahoo!, they have published a list of Best Practices for Speeding Up Your Web Site. Many of these rules came as no surprise, for example:

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages load faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

However, one rule caught my attention:

Rule 5 described how stylesheets near the bottom of the page prohibit progressive rendering, and how moving them to the document HEAD eliminates the problem. Scripts (external JavaScript files) pose a similar problem, but the solution is just the opposite: it's better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.

So sure I thought, maybe it will provide better performance, but when creating internet-facing web sites I am a firm believer in standards and compliance. I admit I don't run my markup through an XHTML validator as much as I should, but I was always under the impression that for valid XHTML, <script> blocks and includes belong in the <head> element. Nay, according to the working W3C XHTML Draft:

The script element places a script within a document. This element may appear any number of times in the head or body of an XHTML document.

Categories: ASP.NET | JavaScript | Web Standards kick it on DotNetKicks.com