Show HN: A11y-CSS-reset – A small set of global rules for accessiblity | Hacker News Reader

Show HN: A11y-CSS-reset – A small set of global rules for accessiblity

github.com

24 pointsvegemike8 comments

Did not know about this, how helpful!

    @media(prefers-reduced-motion: reduce) {
      *,
      *:before,
      *:after {
        transition: none !important;
        animation: none !important;
      }
    }

It's a recent addition, and may only work on iOS/iPadOS/macOS, but it should help those users a lot!

Could you please tell me what the reason for the additional body { height: 100%; } in the resets is? At first glance, it doesn't seem necessary.

An explanation of every style being applied would be useful. I can't tell what the purpose of this entire thing is.

That's a good idea, thanks!

That could be a mistake if it's already in the `html, body` ruleset. In general, however, it's to ensure the `body` element takes up the entire height of the page, which is useful for client apps I've found.

This is a bit tricky for a reset because it changes the meaning of percentage heights in child elements.

I haven’t experienced that myself. Do you have an example or documentation for that?

Reply on news.ycombinator.com