Bite-sized CSS & HTML nuggets

Quickly toggling elements in the Web Inspector

Here’s one Web Inspector shortcut I didn’t know about (although it’s listed in the shortcuts): just press the h key in the Elements tab and the currently selected element will be hidden. What happens is that the __web-inspector-hide-shortcut__ class is toggled on that element, with the following CSS:

.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * {
    visibility: hidden !important;
    }

Now, maybe you don’t want this hidden element to take up any space, and use display: none;? (In fact you can easily ‘hijack’ this shortcut and apply whatever CSS you want.) Just add these lines to your Custom.css:

.__web-inspector-hide-shortcut__ {
    display: none !important;
    }

Super easy quick toggling of DOM elements in the Web Inspector, yay! The Safari Web Inspector behaves somewhat similarly, but it doesn’t use a class, and applies these properties inline instead:

pointer-events: none !important;
opacity: 0 !important;

Say hello to the color picker in WebKit Inspector

If you’re using the Chrome dev channel or the WebKit Nightlies, you might have noticed this already: previously, when you clicked the colored square on the left of a color code in the WebKit Inspector, it used to cycle through different color formats. That’s still possible when you shift-click it (alt-click on Windows), but a regular click will now spawn a color picker. It was on my WebKit Inspector wish list 2 years ago, and now seems to have finally made it in! No more need to switch to another app just to pick a color for an element on your page. It doesn’t allow you to sample colors on screen, but I presume that’s a lot harder to do.

Since you can easily customize the WebKit Inspector, I got rid of the confusing double background of the widget. Here are the selectors you can use for the color picker – though I’m not sure where the original yellow background is defined?

/* color picker styles */
.spectrum-container {
    background: #ffffc2 !important;
    border: 0 !important;
    }

Customize the WebKit Inspector (Chrome Dev Tools)

I’ve never thought of this, but Darcy Clarke proved you can customize the WebKit Inspector (and Chrome dev tools) simply by editing your user stylesheet. Check the post and comments for some examples of syntax highlighting themes. Neat!

Considering my WebKit Inspector wish list, I added some styles to clean up and improve the styles panel – including moving the enable/disable checkboxes to the left (this is actually being implemented as well). Now that user agent styles can be hidden and Alexander Pavlov is implementing different highlight colors for paddings and margins, the wish list is getting a lot shorter!

This is before and this is after. Here’s the documented custom.css file.