The secrets of Safari Inspector

Even if you’re not an HTML or CSS expert, sometimes you may want to know more about the code underlying the page you’re visiting. For example if you want to change a style on the fly, without messing with css files and theme or design packages.

Well, you can know many things about a web page using just Safari.

Show the Develop menu

To start, we need to show an otherwise hidden menu item (the “Develop menu”). It’s just three clicks away: open the Safari preferences window, go to the “Advanced” tab and select the “Show Develop menu in menu bar” setting.

prefs

You don’t need to access this menu, though, because the features we’re intersted in are accessible in other ways. From now, you can right-click on any item of a web page and an “Inspect element” option will be available via contextual menu.

inspect

Take a look into the code

In this example we’re inspecting a sitemenu item of a Sandvox based page running Grafite as a design.

menu

I right-clicked on the third link of the horizontal navigation menu on top of the page.

example

On the left, you can see the code. You can collapse items or expand them, to see what’s inside. This is the HTML code exactly as it is written in the source (just nested and formatted in a more pleasant way).

On the right there are two kinds of very important informations: styles and metrics.

On the bottom, the entire hierarchy is represented.

Metrics give you a visual representation of margin, padding and borders of the selected item.

Styles tell you every CSS format applied to that single item, either directly or because it inherit its properties from a parent (more informations about CSS and HTML will be published in future). In this example we can see that for #sitemenu li a:link, #sitemenu li a:visited: there’s a color set, and that this color is white.

Thanks to the Safari inspector we know which element has which property and we can override it (or add new ones).

We know from HTML that #sitemenu is a container of the horizontal navigation bar, that li is an item of that menu and that a is a link. The CSS file probably has a line like this, somewhere:

#sitemenu li a:link, #sitemenu li a:visited {
    color:white;
}

CSS files can be quite clear or really complicated, so we don’t know if that line is there exactly as we suppose it to be, but we’re not interested in that. We just know that this line works and we can create a different line with a tweak to change the link color, for example, to red.

With “Site Code Injection…” in Sandvox Pro we can create a new style:

#sitemenu li a:link, #sitemenu li a:visited {
    color:red !important;
}

Don’t forget the !important declaration, to override a previous style (in this case, white). If you’re adding properties and styles you don’t need to override anything and the !important statement it’s unnecessary.

Of course the same applies to RapidWeaver.