{"id":414,"date":"2011-06-10T17:34:09","date_gmt":"2011-06-10T17:34:09","guid":{"rendered":"http:\/\/wp4design.com\/?p=414"},"modified":"2012-02-26T15:44:35","modified_gmt":"2012-02-26T14:44:35","slug":"html5-boilerplate-using-ir-class","status":"publish","type":"post","link":"http:\/\/4design.xyz\/wordpress-basics\/html5-boilerplate-using-ir-class","title":{"rendered":"HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”"},"content":{"rendered":"

HTML5 Boilerplate<\/a> — and \u2665\u00a0Basics by the way — comes with some usefull CSS classes to hide content in multiple ways depending on your needs:\u00a0.hidden<\/em>,\u00a0.visuallyhidden<\/em>,\u00a0.invisible<\/em> and .ir<\/em>. Let’s fly over the first\u00a0classes\u00a0and\u00a0then detail\u00a0the\u00a0last.<\/p>\n

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

CSS\u00a0Image Replacement<\/h1>\n

The latter offer a mecanism to hide some text “under\u00a0the\u00a0carpet” 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.<\/p>\n

The HTML 4.01 way<\/h2>\n
<h1 id=\"site-title\" class=\"ir fn org\"> <a class=\"url home bookmark\" href=\"\/\" rel=\"home\"><?php bloginfo( 'name' ); ?><\/a> <\/h1><\/code><\/pre>\n
with the CSS:<\/p>\n
#site-title { width: 220px; height: 160px; background: url(..\/img\/logo.png) no-repeat; } <\/code><\/pre>\n
As you can imaginate, there’s no way to click on the site title because the clickable element isn’t displayed.<\/p>\n
The HTML5 way<\/h2>\n
Let’s get rid of this issue with some HTML 5 twirl. Simply make the whole <h1><\/code> clickable:<\/p>\n
<a class=\"url home bookmark\" href=\"\/\" rel=\"home\"> <h1 id=\"site-title\" class=\"ir fn org\"><?php bloginfo( 'name' ); ?><\/h1> <\/a><\/code><\/pre>\n
According to the HTML5 specification<\/a>…<\/h1>\n
The\u00a0a<\/code> 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)<\/p><\/blockquote>\n
…the cat’s in the bag =^__^=<\/p>\n
Note: This markup isn’t allowed if you planned to use it within an <hgroup> tag.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 Boilerplate — and \u2665\u00a0Basics by the way — comes with some usefull CSS classes to hide content in multiple ways depending on your needs:\u00a0.hidden,\u00a0.visuallyhidden,\u00a0.invisible and .ir. Let’s fly over the first\u00a0classes\u00a0and\u00a0then detail\u00a0the\u00a0last.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[9,30,36,69,70,73,78,95,150],"_links":{"self":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/414"}],"collection":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/comments?post=414"}],"version-history":[{"count":0,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/414\/revisions"}],"wp:attachment":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/media?parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/categories?post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/tags?post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}