« Typographic Principles of Design | Main | Closed on Townhome Today »
March 17, 2005
Helping IE with CSS Backgrounds
When using faked css 'transparency' in IE 6, you can help the browsers performance by planning ahead.
Faked CSS transparency is accomplished by utilizing a transparent GIF file for the background of nearly any element. This provides you with the ability to acheive translucentcy online.
To do so, however, the respective CSS elements must render the background with each call to the server. (Actually, not all browsers do this - only the dominant IE). This oftentimes cloggs the browser and rendering performance drops.
Typical example includes a 10x10 pix semi-transparent image used as a background on a wrapper DIV. IE renders the background from top to bottom (ala repeat-y) - but a user can see this being 'painted' to the screen at request time. Netscape's and other browsers performance in this regard is markedly better.
The solution to performance issues like this is to respect that IE is truly a dog and to give a file it wants - namely a large onek, instead of a small one to be wallpapered. While this in itself might lead to other performance bottlenecks, it appeears to bne easier work for the browser.
IE's Issues with Cached Backgrounds
By default, IE's 'Temporary Internet Files' settings force the browser to look for new versions of web pages by DEFAULT. Because of this, background images used in pages are not cached by the browser, and are requested anew during each page request. This leads to an issue known as 'CSS Flicker', and can be quite bothersome for navigational elements. Background image reloading also tends to crash the browser if the user hovers over these areas more than just a few times. Other browsers don't recall CSS background images by default -they cache them. Performance - such as :hover - is smooth.
For a better description, http://www.webreference.com/programming/css_flicker/2.html, or better yet - http://www.fivesevensix.com/, or still http://wellstyled.com/css-nopreload-rollovers.html
From this research, this issue can be fixed rather easily on Apache-based servers with little bit of code in a standard .htacces file. Be advised, however, that ExpiresActive is not extremely common within an Apache build, but can be compiled in very quickly and easily. This worked like a charm!
+++++++++++++++++++++++++++++++++++
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
+++++++++++++++++++++++++++++++++++
Posted by pgraber at March 17, 2005 02:03 PM
