Wednesday, 25 April, 2018 UTC


In Web Inspector that recently shipped with Safari 11.1 on macOS High Sierra, the Elements tab sidebar panels and the styles editor got a lot of attention from the Web Inspector team. We’ve re-written the styles editor to provide an editing experience more familiar to web developers, and rearranged the sidebar panels to improve access to the most used tools. The design refresh brings new behaviors and fine-tuning to enhance web developers’ ability to access and understand the elements they’re inspecting.
Tabs Layout Before / After
In the Elements tab, Styles and Computed are the most commonly used panels. We made them top-level tabs, so it takes a single click to switch between them.
Styles Panel Before / After
The redesigned Styles panel of the same size now fits more data:
  • Selectors are no longer generated for style attributes
  • The default “Media: all” header is no longer shown
  • The icons were removed to save some horizontal space
Syntax Highlighting
Property values are now black to make them easier to distinguish from property names. Strings are still red, but links are now blue.
We added curly braces back so copying CSS would produce valid CSS. Curly braces, colons, and semicolons are light gray so they won’t distract from the content.
Styles Editor
We rewrote the styles editor from scratch. This is the first major overhaul of the styles editor since 2013. Instead of a free-form text editor, we changed to cell-based style editing.
Styles tab and shift-tab behavior
CSS property names and values are now separate editable fields. Pressing Tab (⇥) or Return navigates to the next editable field. Pressing Shift-Tab (⇧⇥) navigates to the previous editable field.
Also, typing a colon (“:”) when focused on the property name focuses on the corresponding property value. Typing semicolon (“;”) at the end of the property value navigates to the next property.
Styles add new property behavior
To add a new property, you can click on the white space before or after an existing property. Pressing Tab (⇥) or Return when focused on the last property value also adds a new property.
Styles remove property behavior
To remove a property, you can remove either a property name or a property value.
Styles up and down arrow behavior
Completion suggestions display right away when focused on the value field. Completion values apply right away when selecting using Up and Down arrow keys.
Styles more arrow key behaviors
While editing a property field, Up and Down arrow keys now can increment and decrement values. You can change the interval by holding modifier keys:
  • Option (⌥): 0.1
  • Shift (⇧): 10
  • Command (⌘): 100
Legacy Settings
The previous version of the styles editor is still available in the in Web Inspector settings, but it’s no longer maintained.
The Visual Styles Panel never gained enough traction to remain in Elements tab by default. It is no longer maintained. Along with the Legacy Style Editor, the Visual Styles Panel can still be enabled in the Experimental settings.
Please report bugs and feature requests regarding the new styles editor on If you’re interested in contributing or have any questions, please stop by the #webkit-inspector IRC channel.
Web Inspector is primarily written in HTML, JavaScript, and CSS, which means that web developers already have the skills needed to jump in and contribute a bug fix, enhancement or a new feature.