HTML-CSS: Offscreen

Last update on May 28 2022 07:25:35 (UTC/GMT +8 hours)

HTML-CSS : Exercise-39 with Solution

Using HTML, CSS hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

Remove all borders and padding and hide the element's overflow.
Use clip to define that no part of the element is shown.
Make the height and width of the element 1px and negate them using margin: -1px.
Use position: absolute so that the element does not take up space in the DOM.
Note: This technique provides an accessible and layout-friendly alternative to display: none (not readable by screen readers) and visibility: hidden (takes up physical space in the DOM).

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using HTML, CSS hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible</title>
</head>
<body>
<a class="button" href="https://google.com">
 More about<span class="w3r-offscreen"> w3resource.com</span>
</a>
</body>
</html>

CSS Code:

.w3r-offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

HTML-CSS: Tips of the Day

What is the difference between id and class in CSS, and when should I use them?

Example:

<div id="header_id" class="header_class">
Text
</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:

Example:

<div id="header_id" class="header_class">
Text
</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

Ref: https://bit.ly/39Stv4P