Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Use a pseudo element to prevent inspector tab width from changing when selected #9793
This is a very small tweak, but it's one of those little things that makes me crazy ;-)
It adds a pseudo element to the inspector tabs, with the content set to match the tab label. The psuedo-element is bolded, so the width of the tab is always the same. It's sort of hard to explain in text so here's an example:
And to help make it a bit clearer what's happening under-the-hood, here's how it looks if the pseudo element is visible (it's the 2nd line of labels):
That second label is pre-bolded, so when the focus changes and the visible label changes to bold, the width is unchanged.
There's probably a better way to have the data attribute on the JS side (on the Block tab in particular, since there's some logic around selected block count that I just duplicated) but I'm not sure what's most appropriate there.
It might also be good to get an accessibility review on this; I think the pseudo element will be invisible to screen readers (which is desired!) since there's an aria-label, but I don't have access to a screen reader environment at the moment unfortunately.
This is DAMN clever.
I didn't even notice the little jump until now, and now I want it gone. I love this, from a design point of view,
Have you tested in IE11? If it doesn't work there you can use
Per this document CSS content is sometimes read by screen readers, so I went ahead and added
Will give a more thorough test to IE11 later for safety, but the technique definitely works; we use it in production on one of our recent client projects which is IE11 compatible.
I love it. I'm gonna test it in IE 11 now and make a few tweaks as per my comments. But the concept is good so I'll push some changes and then approve