Difference between revisions of "CSS Off-screen text"

From Level Access Web Labs
Jump to navigation Jump to search
 
Line 42: Line 42:
  
 
<h2>NOTE: This page has been superseded.</h2>
 
<h2>NOTE: This page has been superseded.</h2>
<p>Please use the page <a href="https://labs.ssbbartgroup.com/index.php/Offscreen_Text">Offscreen Text</a>, which is more recent, has more testable examples, has annotations, and has a matrix of testing results for different Browsers/ATs.</p>
+
<p>Please use the page <a href="https://labs.levelaccess.com/index.php/Offscreen_Text">Offscreen Text</a>, which is more recent, has more testable examples, has annotations, and has a matrix of testing results for different Browsers/ATs.</p>
 
<hr>
 
<hr>
 
(original page follows)<br><br>
 
(original page follows)<br><br>

Latest revision as of 01:31, 13 December 2018

NOTE: This page has been superseded.

Please use the page Offscreen Text, which is more recent, has more testable examples, has annotations, and has a matrix of testing results for different Browsers/ATs.


(original page follows)

The text below this text but above the horizontal rule is hidden off screen with CSS clipping.

This text is hidden off-screen.

Text inside this link is offscreen This is a link



Off-screen label for radio button below this horizontal rule

This text is hidden off-screen with the second technique.


CSS Code used in this example

.hidden
.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
padding: 0;
border: 0;
height: 1px; 
width: 1px; 
overflow: hidden;
white-space: nowrap;
}