Dev Tools AI first try: a mix of nonsense and okay advice.

[siblingpastry@mastodon.world]

@mahryekuh No, in fact we shouldn't ever use the offset method. See: https://www.tpgi.com/the-anatomy-of-visually-hidden/#position @matuzo

[aardrian@toot.cafe]

@mahryekuh
Since I am not sure the LLM can guide a reader to HTML5 patterns over HTML4 by using the specs alone, they kind of have to look at popular patterns on crappy dev sites.

@matuzo

[mahryekuh@fosstodon.org]

@aardrian @matuzo I wouldn't trust an LLM, but if we are stuck with the mess, they better quote the official sources.

[mahryekuh@fosstodon.org]

@siblingpastry @matuzo Thank you! I use almost the snippet you shared, but with slight differences (like, I still need to remove `position` and `clip`), so that's a ToDo.

I also converted the snippet to logical properties instead of width and height.

[siblingpastry@mastodon.world]

@mahryekuh Which logical properties are you using for that? @matuzo

[anneke@front-end.social]

@siblingpastry @mahryekuh @matuzo I think `inline-size` (width) and `block-size` (height)?

[siblingpastry@mastodon.world]

@Anneke @mahryekuh Oh I see. Yeah that would work, but it's unnecessary -- since width and height are both defined the same, it doesn't actually matter which way round their axes flow. @matuzo

[mahryekuh@fosstodon.org]

@siblingpastry @matuzo block-size and inline-size instead of width and height, respectively.

I deleted `clip` from my snippet (per your article), and now it's like this:

.visually-hidden:not(:focus, :active) {
block-size: 1px;
clip-path: inset(50%);
inline-size: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}

[mahryekuh@fosstodon.org]

@siblingpastry @Anneke @matuzo I run stylelint with the `stylelint-use-logical-spec` in my personal projects, hence the width and height get converted by default.

[fossheim@front-end.social]

@matuzo love that it suggests to slap an aria-label on there as well 🥲

[tink@w3c.social]

@matuzo Back in the day I remember someone solving this by making part of the text the link (the heading for example) then using JS to expand the clickable area over the whole lot. No idea if that's still an advisable technique or not though.

[matuzo@front-end.social]

@tink There are at least two JS solutions that work pretty well but with JS right and middle click don't work. There's no perfect solution if you ask me.