Speed Up Border-bottom Under Links
To achieve more control over visual appearance of links, many CSS savvy designers use property border-bottom instead of underline. With border-bottom we can easily change color, style or thickness (border-width property) of the line below the link text. Let’s see if we can improve rendering of the border-bottom. For example:
a { color: #005; text-decoration: none; border-bottom: 1px solid #0CF; }
… will produce some fake link. See how color of the text and the color of the line under it is different. We can also change the thickness of that line:
a { color: #005; text-decoration: none; border-bottom: 2px solid #0CF; }
… and it looks like this: some fake link. It’s obvious — combinations with border-bottom are countless.
Border-bottom can make browser crawl
Rules explained above are nothing new to CSS guys. However, I keep seeing interfaces where hovering links with border-bottom slows down a browser. That is even more annoying when links don’t have border-bottom in the normal :link state, but have border property applied on :hover state. (Ed: I know I’ve been guilty more than once, especially on this web site, but on the other hand it’s not commercial site and I know my audience.)
I often see the following:
a { text-decoration: none; }
a:hover { text-decoration: none; border-bottom: 1px solid #0CF; }
… and that slows browser down.
Make It Easier For the Browser
If the link is in some paragraph and that paragraph has white background, with the simple:
a { text-decoration: none; border-bottom: 1px solid #FFF /* = background color of the parent element */ ; }
a:hover { text-decoration: none; border-bottom-color: #0CF; }
… browser only has to change border-color, not draw the whole new border.
Shown example can also be applied to background-color of the link. Again, if the parent element has white background, we add that same background-color to links:
a { background-color: #FFF /* = background color of the parent element */ ; }
a:hover { background-color: #0CF; }
Simple, huh? : )
Since I’m not browser developer I would like to hear from someone who can tell more about how browsers render elements and properties.
9 Comments
What if the background is a pattern? Then it wouldn’t look nice. Would something like
border: 1px none #0CF;be better too?Comment (#) by Philipe — 8th May 2005.
Yes, in case of background pattern, you can try with the
border-bottom: 1px solid transparent;, although I’m not absolutely positive wether that renders properly in major browsers.Edit: I’ve just checked it — IE can’t apply
border-color: transparent;, even though it’s in the CSS2 specs. Instead of, thecolorproperty value is applied, i.e.color: red; border: 1px solid transparent;is rendered ascolor: red; border: 1px solid red;.Comment (#) by marko — 8th May 2005.
actually, i’ve seen another weird behaviour related to this..
i had several links with
border-bottom: 1px solid #666and the:hoverwasborder-bottom: 0px;in a certain linux distro (gentoo) running a particular firefox version (1.0, i think), the whole website’s navbar flickered and the menu was corrupted. i can’t explain it very well, but it was very weird.
i adopted the same solution as you did.. use 1px border, with the parent’s bgcolor. and it worked.
Comment (#) by andr3 — 9th May 2005.
Using the border-bottom of the parent element also has another benefit: it simplifies height and width properties, especially on older browsers. You no longer have to worry about a box redrawing on :hover because another pixel got added.
Comment (#) by Matt Hampel — 9th May 2005.
Matt, good point! However, one must consider that IE 5.01 will not apply
paddingandborderproperties to inline HTML elements (such is<a>), no matter what we do.Comment (#) by marko — 9th May 2005.
Not exactly…
Browser’s rendering engine will allways draw border if specified. Even when it’s color is set to the color of the background, but not when it’s set to transparent.
The slowdown when using:
a { text-decoration: none; }
a:hover { text-decoration: none; border-bottom: 1px solid #0CF; }
comes from the fact that browser needs to re-layout all elements that are in the relationship with, or come after the link tag, because css has changed. Not in a strict sense, of course. But from the browser’s point of view, when you hovered over the link, you changed it’s css from
“{ text-decoration: none; }” to “{ text-decoration: none; border-bottom: 1px solid #0CF; }” and added extra information for rendering (in a form of browser’s rendering engine internal structures).
Re-layouting involves recalculating positions, invalidating, and redrawing the affected region, all regions affected by the affected region, and all regions in relation to the afected region.
Even if you don’t see changes when hovering over the link (i.e. if the link is part of the paragraph, and line spacing is big enough), the changes exist.
Reason why using your method, or using “{ text-decoration: underline }” is fast enough is because changing existing properities does not involve adding extra information to the rendering tree, so therefore does not involve re-layouting.
Anyway, interesting article…
Comment (#) by shokre — 11th May 2005.
shokre, thanks for clearing things out. Nicely explained!
Comment (#) by marko — 11th May 2005.
nice shokre.. but i was left wondering. what if i have a 1px border, and on
:hoveri change it to a 2px border? re-layouting will take place anyway, right?Comment (#) by andr3 — 12th May 2005.
to andr3:
It really depends on the element. If you have a link tag somwhere in paragraph, and if you change link’s border size on hover, relayouting does not happen. Try for yourself, but change for instance from 1px border to 10px, and you’ll see that border flows under text.
But for instance if you have relative positioned div element and change it’s border size on hover, re-layouting does happen.
Comment (#) by shokre — 12th May 2005.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.