WebKit's New "Visual Styles" Sidebar in the Web Inspector

[louislazaris]

About a week ago, the WebKit team tweeted a 30-second video showing off a brand new “Visual Styles” sidebar in the Web Inspector in nightly WebKit builds.

It’s quite a bold new feature, likely aimed at the not-so-tech-savvy among us — for example, designers with limited CSS knowledge. Most of the reactions are pretty positive but a few who responded felt it was overkill.

As you can see in the clip, the new sidebar includes, among other things, the ability to edit a slew of typographic properties, shadows, backgrounds, borders, CSS animations, transitions, and lots more. And all of this using a form-like group of select drop-downs, sliders, and checkboxes.

I think this sort of thing will be more likely to rankle the code purists among us, and that’s fine. I haven’t tried the feature yet, but as long as the Web Inspector offers the option to switch between code view and Visual Styles view, I don’t think anyone should get overly upset about this. It’s an option, and it opens up CSS debugging to a much larger user-base, which is a good thing.

But what do you think? Has anyone tried this feature yet? Let me know your thoughts.

This editorial appears in this week’s issue of the SitePoint Front-end Newsletter.

[megazoid]

I bet the most frequent question about this feature will be “Where is the Save button?”

[ralphm]

@megazoid

“Where is the Save button?”

I was thinking the same thing.

Although I like the idea of designing in the browser, I’m struggling to be convinced that this is all that useful. Unless there’s some easy way to update the style sheet with the changes, it might just make things more confusing. (But perhaps it does do that.)

Apart from that, I worry a bit about browsers getting too bloated, with a lot of unnecessary features.

[bastywebb]

I’ll 3rd that. Having the option to export the changes was mentioned in the twitter comments for the video, that would help matters. Tools that do a similar thing and also update the actual stylesheet on the server already exist for WordPress (e.g. Microthemer). They can do this by virtue of their integration with a content management system/file system. I wonder if browser inspectors will start having fields for entering FTP details so that the illusive “Save” button can do what we want it to?