• About
  • Colophon
  • @wpbscs
  • 4DESIGN

WordPress Basics

A Hard Rock-solid Theme based on HTML5 Boilerplate «For Those About to Rock» with WordPress

Site navigation

Skip to content
  • Tutorials
  • News
  • Markup
  • Download Basics & Beyond Basics

HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”

Posted on June 10, 2011 by Bruno Bichet

HTML5 Boilerplate — and ♥ Basics by the way — comes with some usefull CSS classes to hide content in multiple ways depending on your needs: .hidden, .visuallyhidden, .invisible and .ir. Let’s fly over the first classes and then detail the last.

.hidden { display: none !important; visibility: hidden; }
Fig. 1: Hide for both screenreaders and browsers
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
Fig. 2: Hide only visually, but have it available for screenreaders
.invisible { visibility: hidden; }
Fig. 3: Hide visually and from screenreaders, but maintain layout
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
Fig. 4: For image replacement

CSS Image Replacement

The latter offer a mecanism to hide some text “under the carpet” for displaying an image with a background property instead. It’s cool, but there is an issue when you want display a clickable image, like a logo, for example.

The HTML 4.01 way

<h1 id="site-title" class="ir fn org"> <a class="url home bookmark" href="/" rel="home"><?php bloginfo( 'name' ); ?></a> </h1>

with the CSS:

#site-title { width: 220px; height: 160px; background: url(../img/logo.png) no-repeat; } 

As you can imaginate, there’s no way to click on the site title because the clickable element isn’t displayed.

The HTML5 way

Let’s get rid of this issue with some HTML 5 twirl. Simply make the whole <h1> clickable:

<a class="url home bookmark" href="/" rel="home"> <h1 id="site-title" class="ir fn org"><?php bloginfo( 'name' ); ?></h1> </a>

According to the HTML5 specification…

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)

…the cat’s in the bag =^__^=

Note: This markup isn’t allowed if you planned to use it within an <hgroup> tag.

Posted in Tutorial and tagged .ir, class, CSS, hidden, HTML5, image replacement, invisible, Logo, visuallyhidden. Bookmark the permalink.

Enter the comments area.

3 responses to HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”

Search

Aside Sidebar 3

Section widget area 10

Categories

  • Markup
  • News
  • On the fly
  • Tutorial

Colophon

© 2025 WordPress Basics — Contact the administrator — Proudly powered by WordPress ♥ Theme: Basics By Bruno Bichet Logo WordPress je thème