Skip to content

Instantly share code, notes, and snippets.

@luxplanjay
Last active October 11, 2024 22:56
Show Gist options
  • Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.
Save luxplanjay/6f6936b1bba7afe006fa9317b07b6045 to your computer and use it in GitHub Desktop.
Visually hidden CSS pattern
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
@Nataliia9
Copy link

thanks)

@wittjeff
Copy link

Use outline: transparent instead of outline:0 for compatibility with Windows High Contrast Mode.

@Baxtiyorov092
Copy link

oooooo assalomu alekom bratiim qandaysiiz ozbela bormi Uzbekistan

@jasurhaydarovcode
Copy link

what is visually hidded ?please explain to me

@jasurhaydarovcode
Copy link

oooooo assalomu alekom bratiim qandaysiiz ozbela bormi Uzbekistan

bor i'm Uzbek

@wittjeff
Copy link

visually hidden means it can be "seen" by blind people using screen readers, but not by sighted people (no part of the item styled this way is drawn visually, because the clip rect is empty, but this item is still "visible" in the DOM.)

@jasurhaydarovcode
Copy link

visually hidden means it can be "seen" by blind people using screen readers, but not by sighted people (no part of the item styled this way is drawn visually, because the clip rect is empty, but this item is still "visible" in the DOM.)

thanks )

@volodymyr-leskiv
Copy link

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment