Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Exclamation efficient CSS selectors???

    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
    Code:
    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
    Code:
    .content1:hover,.content2:hover,.content3:hover,.content4:hover,.content5:hover,.content6:hover,.content7: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

    many thanks
    Luke

  • #2
    New to the CF scene
    Join Date
    Jul 2009
    Location
    San Jose, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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-sp...ntCSSSelectors
    Learn how to improve your website. Get a Web Usability and Design Analysis

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why use different classes if they all do the same thing? Why not one class like this
    Code:
    .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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,093
    Thanks
    297
    Thanked 12 Times in 12 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •