andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet wording

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2021-10-11 18:38:06 +03:00
committed by Chalarangelo
parent b137bd7d75
commit ee00c20cc3
12 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
snippets/offscreen.md
View File

@ -2,16 +2,16 @@
title: Offscreen
tags: layout,visual,intermediate
firstSeen: 2018-03-30T18:50:31+03:00
lastUpdated: 2020-12-30T15:37:37+02:00
lastUpdated: 2021-10-11T18:44:51+03:00
---
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
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 indicate that no part of the element should be shown.
- 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 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).
- **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
<a class="button" href="https://google.com">