...

View Full Version : efficient CSS selectors???



LJackson
12-10-2009, 05:55 PM
Hi All,

i have just noticed a nice little application available from google webmasters which helps you speed up your website :)

i am going throught the list and im stuck on
use efficient CSS selectors

could someone please tell me what is wrong/inefficient with this code

here is the speed info displayed

Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.

* .individual_code_container:hover
* .content1:hover
* .content2:hover
* .content3:hover
* .content4:hover
* .content5:hover
* .content6:hover
* .content7:hover
* .content1:hover div
* .content2:hover div
* .content3:hover div
* .content4:hover div
* .content5:hover div
* .content6:hover div
* .content7:hover div

and this is how it looks in my php page

.content1:hover,.content2:hover,.content3:hover,.content4:hover,.content5:hover,.content6:hover,.con tent7:hover{background:orange;}
.content1 div,.content2 div,.content3 div,.content4 div,.content5 div,.content6 div,.content7 div{display:none;}
.content1:hover div,.content2:hover div,.content3:hover div,.content4:hover div,.content5:hover div,.content6:hover div,.content7:hover div{display:block;z-index:999;}

if someone could please shed some light on this for me thanks.

i have so far cut off 10 seconds from my load time which is nice :D

many thanks
Luke

camp185
12-11-2009, 12:55 AM
I just wrote a post about this on my blog, plus several other tips to improve website load speed, but here is a link to Google, and what they recommend.

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

_Aerospace_Eng_
12-11-2009, 09:46 AM
Why use different classes if they all do the same thing? Why not one class like this

.content:hover {background:orange;}
.content div {display:none;}
.content:hover div {display:block;z-index:999;}
Now just add class="content" to those elements
I don't think its that much of a performance issue but mainly because only IE7+ has just started supporting :hover on elements other than anchors their method of doing so may take time but I don't know exactly how they do it though.

LJackson
12-11-2009, 10:15 PM
hi giys thanks for the info, will check out the link thanks camp185.

@ aerospace_Eng seems as though that should work mate will give it a try :) thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum