{"id":92,"date":"2005-05-08T12:19:21","date_gmt":"2005-05-08T10:19:21","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/08\/speed-up-border-bottom-under-links\/"},"modified":"2005-05-25T22:43:23","modified_gmt":"2005-05-25T20:43:23","slug":"speed-up-border-bottom-under-links","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/08\/speed-up-border-bottom-under-links\/","title":{"rendered":"Speed Up Border-bottom Under Links"},"content":{"rendered":"<p>To achieve more control over visual appearance of links, many CSS savvy designers use property <code>border-bottom<\/code> instead of <code>underline<\/code>. With <code>border-bottom<\/code> we can easily change color, style or thickness (<code>border-width<\/code> property)  of the line below the link text. Let\u2019s see if we can improve rendering of the <code>border-bottom<\/code>.<!--more--> For example:<\/p>\n<pre>a { color: #005; text-decoration: none; border-bottom: 1px solid #0CF; }<\/pre>\n<p>&#8230; will produce <a href=\"#\" style=\"color: #005; text-decoration: none; border-bottom: 1px solid #0CF;\">some fake link<\/a>. 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:<\/p>\n<pre>a { color: #005; text-decoration: none; border-bottom: 2px solid #0CF; }<\/pre>\n<p>&#8230; and it looks like this: <a href=\"#\" style=\"color: #005; text-decoration: none; border-bottom: 2px solid #0CF;\">some fake link<\/a>. It\u2019s obvious \u2013 combinations with <code>border-bottom<\/code> are countless.<\/p>\n<h3>Border-bottom can make browser crawl<\/h3>\n<p>Rules explained above are nothing new to CSS guys. However, I keep seeing interfaces where hovering links with <code>border-bottom<\/code> slows down a browser. That is even more annoying when links don\u2019t have <code>border-bottom<\/code> in the normal <code>:link<\/code> state, but have border property applied on <code>:hover<\/code> state. <em>(Ed: I know I\u2019ve been guilty more than once, especially on this web site, but on the other hand it\u2019s not commercial site and I know my audience.)<\/em><\/p>\n<p>I often see the following:<\/p>\n<pre>a { text-decoration: none; }\r\na:hover { text-decoration: none; border-bottom: 1px solid #0CF; }<\/pre>\n<p>&#8230; and <strong>that<\/strong> slows browser down.<\/p>\n<h3>Make It Easier For the Browser<\/h3>\n<p>If the link is in some paragraph and that paragraph has white background, with the simple:<\/p>\n<pre>a { text-decoration: none; border-bottom: 1px solid #FFF \/* = background color of the parent element *\/ ; }\r\na:hover { text-decoration: none; border-bottom-color: #0CF; }<\/pre>\n<p>&#8230; browser only has to change border-color, not draw the whole new border.<\/p>\n<p>Shown example can also be applied to <code>background-color<\/code> of the link. Again, if the parent element has white background, we add that same background-color to links:<\/p>\n<pre>a { background-color: #FFF \/* = background color of the parent element *\/ ; }\r\na:hover { background-color: #0CF; }<\/pre>\n<p>Simple, huh? : )<\/p>\n<p>Since I\u2019m not browser developer I would like to hear from someone who can tell more about how browsers render elements and properties.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s see if we can improve rendering of the border-bottom.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/92"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}