Outdated Browsers

View Outdated Browsers

I originally thought that this site was just there to showcase the versions of the browser that you should be using. It still does that, very well in fact, but it’s also a tool to be implemented as well. The idea is that you include their JS/CSS on your own site and drop in an empty div

<div class="outdated"></div>

… and it will warn your users if they are using a browser that isn’t the latest and greatest.

The site uses a heavy amount of comments in the HTML source to further point out information that is more commonly of interest to someone who would be viewing the source anyway. For exmaple they take the time to point out where the statistics for the browsers were being pulled from

  
<!-- DATA SOURCE:
        Browser Version: http://caniuse.com/usage_table.php
        Browser Statistics: http://gs.statcounter.com/
        -->
  

For the browser headings and the browser logo’s the site uses an empty <span>
tag with a background image applied rather than using a straight up img tag.

  
  <h2><span></span> GOOGLE CHROME</h2>
  

I would suggest that “GOOGLE CHROME” all caps should just be “Google Chrome” with text-transform:uppercase; applied, but that’s only because I get frustrated when I copy and paste some blog titles for reference and need to go back and update the words to be less shouty in the new context.

They then apply a class of .allowHover if hover is available through modernizr and change the background position for each of the browsers (all the browser images are contained on a single sprite, even the white outline which you can’t see when viewing the sprite in the browser because… white on white)

 
.browser h2 span {
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 35px;
  background: transparent url(http://outdatedbrowser.com/public/scripts/../imgs/browsers-bg.png) no-repeat;
  background-size: auto 200px
}
  

The site implements Fast Click which is FT’s function to remove the 300ms delay when tapping on items on touch devices. The site seems to do a bit of browser sniffing to then apply the FastClick function to through the following code:

  
  deviceIsAndroid = navigator.userAgent.indexOf("Android") > 0,
      deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent),
      deviceIsIOS4 = deviceIsIOS && /OS 4_d(_d)?/.test(navigator.userAgent),
      deviceIsIOSWithBadTarget = deviceIsIOS && /OS ([6-9]|d{2})_d/.test(navigator.userAgent);
  FastClick.prototype.needsClick = function(e) {
  

This is a bit of a ‘one pager’ kind of site and calculations are done upfront around your screen size which is why I think they have opted to disabling zooming or scaling the page in the viewport, something which is never recommended (let the user do what they want to do, it’s your job to design around
those ebbs and flows)

The sliding panel feature is done through Jquery and Kwicks.

Outdated Browsers Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries

@media screen and (max-width:840px) { }
@media screen and (max-width:700px),screen and (max-height:670px) { }
@media screen and (max-height:670px) { }