scrambler

1) I am not sure I follow what you mean.
But “The long term goal is to make SO CSS smart enough to really analyze a theme and its HTML to make far more intelligent suggestions.” Sounds promising 🙂

2) I had missed that so this is good to access pages that have clear links on the page.
I still think you need a way to get to a page directly for pages that may have the link buried inside the web site, or for test pages that may not even be accessible from the site. So I would say bot my suggestion would be useful there

3) Selectors:
I looked closer at what was going on with selectors and I am a bit confused.

What I am seeing is that when I select an element, it shows me the complete selector hierarchy at the top (beside the magnifying glass).

Then under that on the left are “Some” selectors being used for the styling of the selected object, and on the right “some” of the CSS properties being applied to that object.

The “some” is what confuses me. It looks like only the rules that specifically include the html tag of the selected object are there, but the ones that are being applied through a class are not.

So we are actually not seeing all the CSS properties applied to the object, nor are we seeing all the Selectors used to style that object.

I think that when you select an object, you should go through ALL the active CSS rules being applied to it (inherited or otherwise), and show them all (All selector used in these rules and all CSS properties applied).

In terms of UI, I see two approaches.
A) The left side would show ALL the selectors used, and on the right you would show only the CSS properties that belong to an highlighted selector on the left.

B) The left side would show ALL the CSS properties applied to the object (what he browser developer tools shows under Computed), then when clicking on a specific property it would highlight it and show the selectors used to set that property on the right.

Approach A makes more sense to someone who knows and understand CSS, approach B makes more sense to a novice user.

Maybe you could provide both with a mode choice to show either of these two display 🙂

The idea is that when selecting an element, we should be able to see every property being applied to it, and which selectors are used to set each of them.
Then we would want to know if the rule is specific to that object only or if it applies to other things, and if it does get a recommendation on how to make an overriding rule unique to the object.

Eventually it may be easier if I could send you links to test pages, but the test site I used in inside a sub folder of a public site so I would rather not post the link here.

A couple more suggestions if I may 🙂

1)Often people need to override the theme CSS in order to change an element individually. For example if the theme has a global rule to style ALL images, someone may want to change that style just for one particular image.

From what I have seen, right now the plugin offers all the existing selectors styling the object, but if you want to style this one individually and there are only global existing rule, you are left having to figure out the selector.
I realize this is far from a trivial problem, as for starter, there may not be a possible selection of selectors that could target the object individually. But if you could see a way to suggest possible selectors combination for individual tragetting that could be of great help. At a minimum, you could check if the selected object has an ID and offer that as a possible selector.

2)I may be missing a shortcut, but don’t find it easy to change site pages when inside the plugin visualization and edit mode. The only way I found is to right click on a menu item in the page and say open. It would be nice to have a selection tool that we could use to click on the page links to switch pages directly.

That would help working on the various pages of the site, but could still make it impossible to work on pages that are not accessible by a menu in the page. In order to be able to do that you could do two things.
– have a URL box at the top of the page visualization where we can type the URL of a specific page
– Add a button to launch the plugin in the page and post editing page. Like that when setting options in a page, you could launch your tool on that page directly from the page editing page itself.

looking forward to your tool evolution 🙂