Created
November 22, 2024 15:27
-
-
Save makesomelayouts/4c2c0eca6e0f2da862b573074e09e764 to your computer and use it in GitHub Desktop.
8 ways to hide element using css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| - To completely hide els, | |
| - Showing different fields based on selected payment method | |
| - ❌ Visible to screenreader | |
| - ❌ Occupy space | |
| - ❌ Capture keyboard events | |
| - ❌ Capute mouse events | |
| - ❌ Animatable | |
| */ | |
| .hide { | |
| display: none; | |
| } | |
| /* | |
| - For showing error/validation messages below form-fields | |
| - ✔️ Occupy space | |
| - ❌ Capture keyboard events | |
| - ❌ Capture mouse events | |
| - ❌ Animatable | |
| */ | |
| .hide { | |
| visibility: hidden; | |
| } | |
| /* | |
| - For showing link-to-section besides heading on mouse over it, | |
| - ✔️ Visible to screenreader | |
| - ✔️ Occupy space | |
| - ✔️ Capture keyboard events | |
| - ✔️ Capture mouse events | |
| - ✔️ Animatable | |
| */ | |
| .hide { | |
| opacity: 0; | |
| } | |
| /* | |
| - Hiding initial state of an el in zoom-in kind of animation | |
| - ✔️ Visible to screenreader | |
| - ✔️ Occupy space | |
| - ✔️ Capture keyboard events | |
| - ✔️ Animatable | |
| - ❌ Capture mouse events | |
| */ | |
| .hide { | |
| transform: scale(0); | |
| } | |
| /* | |
| - Side drawer menu such as nav menu in mobile devices, when combined with position: absolute; | |
| - ✔️ Visible to screenreader | |
| - ✔️ Occupy space | |
| - ✔️ Capture keyboard events | |
| - ✔️ Animatable | |
| - ❌ Capture mouse events | |
| */ | |
| .hide { | |
| transform: translateX(-9999px); | |
| } | |
| /* | |
| - When used with position: absolute;, it can help in hiding el completely on screen but keep it accessible to screen readers | |
| - ✔️ Visible to screenreader | |
| - ✔️ Occupy space | |
| - ✔️ Capture keyboard events | |
| - ✔️ Animatable | |
| - ❌ Capture mouse events | |
| */ | |
| .hide { | |
| clip-path: circle(0); | |
| } | |
| /* | |
| - Skip-to-main-content link to allow screenreader users to directly navigate to main content, | |
| - Can be used for use cases similar to translate method, but it is less performant than that for animation | |
| - ✔️ Visible to screenreader | |
| - ✔️ Capture keyboard events | |
| - ✔️ Animatable | |
| - ❌ Occupy space | |
| - ❌ Capture mouse events | |
| */ | |
| .hide { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| /* | |
| - For making icons accessible, | |
| - hiding <h1> el from the screen when Logo is used as primary header | |
| - ✔️ Visible to screenreader | |
| - ✔️ Capture keyboard events | |
| - ❌ Occupy space | |
| - ❌ Capture mouse events | |
| */ | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| clip-path: circle(0); | |
| clip: rect(0 0 0 0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment