How do you apply style rule in Safari Web Inspector?

Question

Chrome Developer Tools allows you to apply a style rule in the Styles pane. I haven\'t found a way to do this in Safari (Style Rules pane). Any one know if it is possible?

Answer 1

YES this is absolutely possible - and here is how:

---

Safari 6.x.x

(Safari 6.0.1 Solution Confirmed on Mac OsX)

for the newest version of Safari 6.0+ Apple has taken the luxury of removing those gui elements. the feature is still available however just a little more tucked away. to add your styles in safari 6 you need to follow said steps:

the STEPS:

1. first choose the {} brackets icon in the right sidebar
2. 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 )

3. 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

---

Safari 5.x.x and previous (5.x.x Confirmed Win 7 & Mac OS X)

assuming you have enabled the inspector in the settings advanced menu you can begin right clicking and inspecting elements...

from that point select an element in the DOM on the left from the html markup. now on the right sidebar make sure the "Style" menu is expanded.

once here you have two options:

there should be a blank "element.style" selector available for every DOM element you can select from the left. these are intended for your customization. you can double click here to be given the option to add styles to that selector.

you can also click on the gear at the top right corner of the styles menu in that right side bar and choose the last option "New Style Rule" this will allow you to define your own selector independent of the DOM element you have chosen on the left

you can find the full apple documentation here

Answer 2

1. Open the DevTools-like panel (CMD + OPT + C)
2. Click on the Elements tab
3. If it's not open yet, click on "Show the details sidebar" on the right (CMD + OPT + 0)

OR

1. Right-click element and select "Inspect Element"
2. If it's not open yet, click on "Show the details sidebar" on the right (CMD + OPT + 0)

Answer 3

Safari 8.0.8 on OS X

1. Right-click any element and select Inspect Element from the pop-up menu
2. Ensure Styles and Rules are selected on the right hand side of the inspector
3. You can then either add individual rules by clicking + New Rule, or simply click and start typing rules where Click to Edit appears (refer to image below)
4. Enter your new rules and these will be applied to the element being "inspected" in the browser window.

As for a ruler? Well, I haven't found one, but the Inspect button will give you the dimensions of elements when hovered in the browser window.