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

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
snippets/offscreen.md
View File

@ -4,15 +4,12 @@ tags: layout,visual,intermediate
---
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
Provides an alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).
- Remove all borders.
- Remove all borders and padding and hide the element's overflow.
- Use `clip` to indicate that no part of the element should be shown.
- Make the height and width of the element 1px.
- Negate the elements height and width using `margin: -1px`.
- Hide the element's overflow.
- Remove all padding.
- Position the element absolutely so that it does not take up space in the DOM.
- 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).
```html
<a class="button" href="https://google.com">