Bite-sized CSS & HTML nuggets

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;
    }

ads by Yoggrt

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.