visuelle Gedanken von Martin Wolf

07. April 2014

Using and clearing the Browser Appcache

I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.

<html manifest="cache.appcache">
    Your site goes here.
</html>

Example contents of a cache manifest:

CACHE MANIFEST

# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg

# All other files require the user to be online
NETWORK:
*

In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to

chrome://appcache-internals/

and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.

In Safari it’s not that easy, but you can find an explanation on stackoverflow.

To have a look at your caches in Firefox you can go to

about:cache?device=offline

But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find „Offline Web Content and User Data“.

Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.

14. Januar 2014

Avoid loading unnecessary CSS background images

While working on a responsive website the question came up whether CSS background images are being loaded by the browser if the element they are applied to is set to display: none;

My initial reaction was that I thought they will be loaded even though they aren’t rendered by the browser. After creating a test case on CodePen (see the code below), I was proven right – sadly. All CSS background images will be loaded by the browser no matter if they are rendered on the page or not.

BUT this isn’t true for Firefox, which is much smarter and always only loads the images that are actually rendered.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  background: url(s.gif);
  
  @media (min-width: 499px) {
    display: none;
  }
}

.box--m {
  display: none;
  background: url(m.gif);
  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
  }
}

.box--l {
  display: none;
  background: url(l.gif);

  @media (min-width: 800px) {
    display: block;
  }
}

Test it yourself with this CodePen.
Let’s have a look at what we can do to avoid loading unnecessary CSS background-images.

Instead of creating three different elements and using display: none; to hide them you can just change the background image according to media queries. This will only load the image that is actually displayed.

<div class="box box--s-m-l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s-m-l {
  margin-bottom: 40px;
  background: url(s.gif);
  
  @media (min-width: 500px) {
    background: url(m.gif);
  }
  
  @media (min-width: 800px) {
    background: url(l.gif);
  }
}

CodePen Testcase.

In this special case this will work, but let’s say you have three boxes with different content and different background images and want to show either one according to viewport size, just using display: none; won’t do the trick. That’s sad, but it’s the way it is, at least for now.

What you can do is set all boxes to display: none; and only when the media query applies show the box and set the background image. This way you only load the image you are actually showing and you can have different boxes.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  display: none;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  @media (max-width: 499px) {
    display: block;
    background: url(s.gif);
  }
}

.box--m {  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
    background: url(m.gif);
  }
}

.box--l {
  @media (min-width: 800px) {
    display: block;
    background: url(l.gif);
  }
}

Try it with this CodePen.

23. April 2012

Browser Wars: IE Owns America, Europe Loves Chrome

Brad Maccarty for The Next Web:

Internet-monitoring giant Pingdom is back, with a report this time on global browser market share. The interesting finds? Microsoft’s Internet Explorer 9 push seems to be paying off, as the browser has captured the leading spot in North America with 21.2%. It’s followed closely by Google Chrome at 20.2%, but Internet Explorer on the whole takes 40.4% of the North American browser market.

Bad news is: IE still on top. Good new is: IE7 is virtually gone. I can deal fairly easy with IE 8 most of the time.