In the excellent performance article Front-end performance for web designers and front-end developers, Harry Roberts touches on image prefetching. He also mentions it may or may not work; citing the two opposing articles.
Out of curiosity, I threw together a quick test to see if I could prefetch an image using the following method:
<link rel="prefetch" href="image-name.jpg">
Image Prefetch Test
It’s typically a bad practice to specify
:hover without a sprite. However, in this case it’s perfect for testing whether an image was prefetch’d or not.
At the time of this writing, using the prefetch technique above, the image was not pre-loaded in
Firefox 18.0, Chrome 24.0 or Internet Explorer 10.0.
Update: Firefox is the only browser I tested which did pre-load the image. I believe I was hovering the boxes too close to page load on my initial test. After seeing the waterfall posted below I tried again, clearing cache in all the browsers, loading the page and waiting a bit longer before hovering. Regardless, this method probably isn’t ready for the masses until there is better browser support.
Some prefer styling text links by specifying
border-bottom instead of
text-decoration. In fact, I do that on this site. I think it’s easier to read text in and around links, and I can spot the links quickly as well. There’s a drawback though: every link has a bottom border, including images.
Manually Add a Class
It’s fairly simple to remedy this for nav, buttons and whatnot; just use your CSS skills. However, CSS doesn’t select parents, so it can’t target
<img> with parent
<a>, then remove the border. If it’s a small site with a set number of pages, then a class could be added manually to each linked image, like so:
border-bottom: none; }
<a class="border_bottom_none" href="#">
Adding a class manually isn’t scalable for a large site or blog. For these I suggest using jQuery, which is how I handle it on this site.
Don’t forget to style that class and include the jQuery library.
It’s not always easy to set a container, column or sidebar height to 100% of the viewport, especially with floats. To make a
First, save the viewport height to a variable. Next, query the DOM for
style="min-height:;", then set the value to
.container with the class or id of the element you wish to target.
windowHeight = $(window).height();
Make sure to include jQuery, since this incorporates methods specific to that library.
On a recent project, and again while building v3.0 of this site, I needed to calculate the percent width of an element set to
position: fixed. The task was tricky because all of the column widths were percents.
.container is 70% of the window, and
.sidebar is 20% of
.container. The percent of a fixed element is calculated from the window, not the parent. Find the percent which makes
.nav_fixed the same width as
.sidebar to 20% won’t work; it’s too large at 20% of the windows width. We need to figure out the size of
.sidebar in relation to the window, which is 20% of 70%.
The quick answer: multiply 20×70, then move the decimal left two places. 14% is the width of
And, here’s the math behind the answer:
Credit goes to Michael Cohen and his video on Percent of Percent, in which he gives a better explanation.