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 background-image on :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 {
border-bottom: none; }
<a class="border_bottom_none" href="#">
<img src="happy.gif">
</a>
Add the Class with JavaScript
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.
$('a img').parent('a').addClass('border_bottom_none');
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 div fit the window height, sometimes it’s easier to use a little brute-force JavaScript.
First, save the viewport height to a variable. Next, query the DOM for .container, add style="min-height:;", then set the value to windowHeight. Replace .container with the class or id of the element you wish to target.
$(document).ready(function(){
windowHeight = $(window).height();
$('.container').css('min-height', windowHeight);
});
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.
The Riddle
.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.
The Answer
Setting .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 .nav_fixed.
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.