Grow your CSS skills. Land your dream job.

Menus in CSS

  • # August 7, 2011 at 11:52 am

    Ok, I have fell in love with combining all my menu buttons and states into one image and then using background-position for each anchor element to move the image around to the correct button view. Of course adding the :hover as well to have it switch states. This allowed me to take 8+ images for a total of 77KB down to 1 image for a total of 22KB. I love the consolidation and the faster load times but I do have a concern. If I am loading the 22KB file in all the anchor tags (background image) would that cause the users’ browser to load that 22KB file (with 5 buttons) 5 times taking up more memory / RAM on the visitor’s computer? So instead of it being say 77KB total it is now 110KB running in memory for just that one menu.

    Not sure how one can find that out.

    # August 7, 2011 at 12:08 pm

    Most browsers appear to treat at as one resource throughout code, so no additional memory overhead – but I cannot back that up with any proof;

    Chrome has a task manager that can show memory usage (‘Shift’ + ‘Esc’ fin Win users).
    Maybe mock-up a page with some 5mb images and refer to them in the code 10-20 times, then check the browser memory usage?

    # August 7, 2011 at 12:34 pm

    That is what I was thinking. And I would hope the browser developers would plan for this type of thing. I will have to give that test ago once I get some free time as I have to have proof.

    # August 7, 2011 at 12:38 pm

    its one resource – one call

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".