How to add rule to selector in Safari 7's Web Inspector?

Question

One of the things I've always loved about the webkit inspector is that you can click into any selector and begin adding styles and watch them appear live.

I generally do all my debugging in Chrome, however needing to debug with the iPhone simulator I noticed the web inspector for Safari 7 doesn't behave like it used to.

The problem is that I can't seem to click into a selector to add/edit styles (like you can within the web inspector for ALL other browsers... even IE).

Am I missing something? I was not able to find an answer by searching, and the closest I found was this: How do you apply style rule in Safari Web Inspector?

Here is a screenshot of what I'm doing within Chrome:

And here is Safari 7:

Answer 1

If you need to change CSS digit value, for example you need to tune width or margin - use Alt + arrow up/down for 1px step or ALT + Shift + arrow up/down. Or you can just change the number with digits you need.

Answer 2

I am using Safari Version 7.0.4 (9537.76.4). I believe this is the latest version.

I demonstrated it better with personal screenshots that I took while adding style rule:

Here is how the font color initially looked: #494949

For this example, I began by un-checking the initial CSS style color: #494949

I clicked right after the semicolon or ; after background: #FFF; and pressed enter. It put me on a new line as you can see in the picture below.

I entered color: #FFF; and it automatically applied it to the webpage. (You can also press enter after you are done writing the style rule.)

Here is the result:

Or you could also click the New Rule button shown below :)

Answer 3

I don't now is this can help you but theres is an answer about safari 6.x here

how do you apply style rule in safari web inspector

I haven't tested, i use elementary :D

in resume

First choose the {} brackets icon in the right sidebar From the DOM model in the center white area of the web inspector- Click to select the HTML element you wish to view styles of. ( they will display in the right style sidebar ) On the right style sidebar: double click the closing brace on the existing style for the selector you wish to edit.

OR

Double click the open area beneath the "Style Attribute" drop down in that same sidebar to add your own styles to that particular element