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; Chrome Safari Inspector tricks customize webkit

Auto-hiding scrollbars in IE10 Was just looking for a way to make the scrollbars in Internet Explorer a little less obtrusive, and I found this. -ms-overflow-style: -ms-autohiding-scrollbar; This gives you scrollbars that appear during touch and keyboard interactions, and fade out again after a few seconds. Nice. IE scrollbar

caniuse.com redesign - feedback wanted I’ve posted the following earlier this week on Dribbble, and we’ve got some great feedback so far. But we can use as much input as possible, so I’m posting this here as well. Over the course of the past few months, I’ve been working on a redesign of caniuse.com together with Alexis Deveria aka @Fyrd, author of the site. If you don’t know caniuse.com yet, it’s an essential resource with compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. Its current design is in need of a refresh, and while we’re at it we’re improving the usability, clearing up some clutter and making it responsive. The goal was to make a really clear and simple design so you can get to the information you’re after as easy and fast as possible. This is just a screenshot of a work-in-progress prototype I’ve built, you can see it in action at http://caniuse.lensco.be. Some notes: A lot of things don’t work yet – it is just a static prototype. You can already click the ‘settings’ and ‘index’ links however to get a feel how those will look like.

I originally made the light theme first, but Alexis suggested a dark theme close to the colors of the current design, as to not alienate regular visitors too much. We’re thinking of keeping the light theme as a user preference, accessible from the footer.

Most of it is already responsive, except the table itself and the tabs on the bottom. I’m not sure however if we really need to come up with a complex responsive table – I guess it works ok with a bit of horizontal scrolling? It is our intention to gather feedback from this prototype and continue improving the design, out in the open, on Dribbble/Twitter/etc. So, do you see something that needs improvement? Is the responsive design not working on your device? Does this design make sense for color-blind people? Let us know on Dribbble or Twitter! feedback caniuse redesign

box-shadow vs filter: drop-shadow This post is the first topic I discussed in my jam session presentation at Fronteers 2012. It’s about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element. Have you ever wanted a box-shadow that followed the shape of an element, including generated content, like a tooltip with an arrow? Or you wanted a box-shadow to take transparent parts of a .png into account? That’s exactly what filter: drop-shadow() does. It has the exact same syntax as the box-shadow property, except that inset drop-shadows and the spread value are not supported (yet?). Yes, it’s an experimental property, and yes, it’s only supported in some WebKit browsers now. But according to caniuse.com there’s already 32.51% of web users with support. And since it’s usually a decoration type of enhancement you can start using this today. Or even use a regular box-shadow on browsers that don’t support filters yet. Keep an eye on browser performance though, as things tend to get laggy pretty quickly with these experimental filters. Here’s a final example with a transparent PNG: Tricks CSS box-shadow filters

Unprefix express in full swing The big vendor prefix discussion comes and goes in waves, but one conclusion that always pops up is that these prefixes should have a shorter lifespan. Of course browser makers may shift the responsability to specification writers, arguing that specs take too long to reach Candidate Recommendation (CR) status. Well, it seems the unprefix express is finally picking up steam. A few weeks ago we heard about unprefixed transitions, transforms, animations, gradients, IndexedDB (and more) in the next Internet Explorer, and this week the Firefox team anounced exactly the same. This is all great news. Even better, as Lea Verou noticed: Keep in mind that this means you don’t have to use the -ms- prefix at all for transitions, animations and gradients, since no stable build of IE was ever released that requires it. prefixes browsers Firefox IE spec