HTML-CSS: Offscreen

Last update on March 08 2024 13:35:19 (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><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<a class="button" href="https://google.com"><!-- Comment: Creates a hyperlink with the class "button" -->
 More about<span class="w3r-offscreen"> w3resource.com</span><!-- Comment: Adds a visually hidden span element with the class "w3r-offscreen" -->
</a>
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

HTML:

<a class="button" href="https://google.com">: Creates a hyperlink styled as a button with a link to "https://google.com".
More about: Text displayed as part of the hyperlink.
<span class="w3r-offscreen"> w3resource.com</span>: Adds a visually hidden span element with the class "w3r-offscreen", containing the text "w3resource.com". This allows the text to be accessible to screen readers while hiding it from sighted users.

CSS Code:

.w3r-offscreen {
  border: 0; /* Comment: Removes any border */
  clip: rect(0 0 0 0); /* Comment: Clips the element to be invisible */
  height: 1px; /* Comment: Sets the height of the element to 1 pixel */
  margin: -1px; /* Comment: Offsets the element by -1 pixel to hide it from view */
  overflow: hidden; /* Comment: Hides any overflowing content */
  padding: 0; /* Comment: Removes padding */
  position: absolute; /* Comment: Positions the element absolutely */
  width: 1px; /* Comment: Sets the width of the element to 1 pixel */
}

Explanation:

CSS:

border: 0;: Removes any border from the element.
clip: rect(0 0 0 0);: Clips the element in such a way that it becomes invisible.
height: 1px;: Sets the height of the element to 1 pixel.
margin: -1px;: Applies a negative margin to the element, effectively moving it 1 pixel outside of its container, making it invisible.
overflow: hidden;: Hides any overflowing content of the element.
padding: 0;: Removes any padding from the element.
position: absolute;: Positions the element absolutely within its containing element.
width: 1px;: Sets the width of the element to 1 pixel.

HTML-CSS Editor:

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