Difference between revisions of "CSS Off-screen text"

From Level Access Web Labs
Jump to navigation Jump to search
Line 40: Line 40:
  
 
<body>
 
<body>
 +
 +
<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>
 +
<hr>
 +
(original page follows)<br><br>
 +
 
   <p>The text below this text but above the horizontal rule is hidden off screen with CSS clipping.</p>
 
   <p>The text below this text but above the horizontal rule is hidden off screen with CSS clipping.</p>
 
   <p class="offscreen"> This text is hidden off-screen.</p>
 
   <p class="offscreen"> This text is hidden off-screen.</p>

Revision as of 21:13, 24 February 2017

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.

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;
}