Il framework HTML5 Boilerplate ha introdotto una piccola rivoluzione nel mondo dei CSS, fornendo gli stili necessari per formattare i nuovi elementi HTML5. Tra le novità introdotte c'è una nuova tecnica per nascondere gli elementi in modo che essi restino comunque accessibili ai lettori di schermo. Vediamola insieme.
La tecnica
Viene introdotta la seguente classe CSS:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Esempio pratico
Data la seguente struttura di base:
<body>
<div id="test">...</div>
</body>
Con i seguenti stili CSS:
body {
margin: 0 auto;
max-width: 580px;
padding: 2em 0;
font: 95%/1.3 Arial, sans-serif;
}
#test {
padding: 1em;
background: #f0f0f0;
}
Avremo questo risultato:
Applicando la classe proposta:
<div id="test" class="visuallyhidden">...</div>
si nasconderà completamente l'elemento.
Considerazioni
La soluzione proposta appare eccessivamente complicata rispetto al compito da svolgere. Infatti il codice che segue svolge egregiamente il medesimo compito utilizzando due sole proprietà CSS (contro le 8 proposte):
.hidden {
position: absolute;
top: -1000em;
}
A livello di scripting, inoltre, usare così tante proprietà può portare a conflitti tra regole CSS e stili dinamici se l'elemento interessato condivide già altre classi.