doc: adopt MDN style for kbd elements

[Trott]

Before:

After:

The previous "After" version"

After:

• commit message follows commit guidelines

[Trott]

There is also a different style proposed by @devsnek that renders like this:

We'd want to tweak it a tiny bit if we go with that. The Tab key rendering overlays a bit of the line below it. And we probably would want to get rid of the margin-right on it so the + doesn't have space before it. I'd be fine to use this rendering instead of MDN if it's everyone's preference. It looks a bit chunky to me, but maybe that's good in this case? My impression from the conversation in #35400 is that people generally preferred the MDN rendering (as do I, but my preference is mild).

[Trott]

Hiding this to keep the conversation-with-myself easier to follow, as this comment is resolved below.

I tried to ascertain from https://developer.mozilla.org/en-US/docs/MDN/About if there is any licensing issue from copying a few lines of CSS from MDN. Does this 10-ish lines of CSS material warrants a Creative Commons attribution?

Any uncertainty there would be an argument for using @devsnek's style instead (or sticking with what we have and maybe adding a drop-shadow as @silverwind suggested).

[Trott]

And, for completeness, here's GitHub style that @bnb suggested as a possibility:

[Trott]

I tried to ascertain from https://developer.mozilla.org/en-US/docs/MDN/About if there is any licensing issue from copying a few lines of CSS from MDN. Does this 10-ish lines of CSS material warrants a Creative Commons attribution?

Any uncertainty there would be an argument for using @devsnek's style instead (or sticking with what we have and maybe adding a drop-shadow as @silverwind suggested).

Licensing issue solved. Since their code samples are public domain, I grabbed their public domain CSS for the kbd element in the first code snippet/sample at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd. It's a little bit different from the CSS on their website, but only a little bit. Here's the rendering:

[silverwind]

#35460 (comment) looks pretty good (and unique) to me but it needs a bit less padding and a bit more border-radius. On the MDN one, I don't really like the white top-padding.

[Trott]

Landed in cd226c0

[Trott]

I'll open a follow-on PR to deal with the padding and perhaps include elements of @devsnek's proposed style too (unless they do it first or something).

[Trott]

I'll open a follow-on PR to deal with the padding and perhaps include elements of @devsnek's proposed style too (unless they do it first or something).

Hmmm...actually, the white padding is a box shadow that is vastly more subtle when not zoomed in like the screenshot...maybe it's fine. Definitely want to get the keys more aligned with the + character though so will certainly add a vertical-align....