Add a new CSS rule in safari 6?

Just double-click on the closing brace:

and type your new style.

Well, that's a new property. The Question was about a new rule. I have the same question too.

Ah. I see what you mean. I checked the Safari developer forums and there is a similar question there with no response.

I guess I don't see why this would be a "dealbreaker". It seems like few people have even noticed its absence and few of those care about it. I have been developing web sites exclusively in Safari for years and never knew I could do this and didn't notice that I had lost a capability I had never used. It seems like a trial and error approach that is really not necessary.

Not sure if this is a help and you've probably seen it already but in case you haven't if you are displaying the DOM tree of the page and you right click in the page you get the following menu

You can, it seems, go in and edit the page in a number of ways.

regards

Jessek wrote:

I don't mean to be rude, but just because you dont' find it useful absolutely does not mean that others don't.

That's not rude. It is a valid point. My point was that, even though useful, it is not required or even noticed by most people. Why is that? Is there a better way of using Safari that you don't know about because to switch to Crhome so you could continue your prior workflow?

I use this as an essential part of my development workflow, to test rules before actually adding them to the site. My process of adding css is quite involved and takes many steps as I am working in a quite large enterprise environment. Before I add a new rule, I test to see if it has unintended consequenses on other elements.

Why don't you just add them to your development site? That seems far easier and less dangerous.

This is a dealbreaker for me. Since I upgraded Safari a couple of months ago, I switched to Chrome.

Safari's new developer tools are difficult to use and I haven't seen any benefit from the changes they made other than I had to take time out of my billing schedule to re-learn how to use them. I really haven't taken the time so I admit I am not an expert. They seemed so foreign from previous versions that I just gave up and moved to Chrome.

I am sure many others ran into this as well and I am guessing that most of them just figured it wasn't worth it when Chrome continues to make important improvements to their developer tools.

I have seen a total of two people who even noticed this, and I wasn't one of them. If you are developer, you have to be willing to adapt. Software changes. Chrome will change too. What will you do then?

I checked the Safari extensions page and there seem to about half a dozen developer extensions that will do what you ask.

If you want to know what is new in Safari, I suggest you check the What's New in Safari 6 page. Note that in Safari 6 "Web Inspector has a streamlined new design that speeds up common development tasks". If that is insuffcient, you might want to consider joining the free Safari Developer Program.

Most HTML debugging efforts these days are focused on Javascript and removing, not adding CSS.

Jessek wrote:

Yea that page has almost absolutely no information on the web inspector.

Navigators

Navigators appear on the left side of the Web Inspector. Navigators show resources for your page, cookies and storage used, instruments for performance measurement, a central search interface, issue tracking, the debugging stack trace, active and inactive breakpoints, and a collection logs for each reload. Hot keys make switching between navigators fast.

Jump Bar

The Jump Bar at the top of the Web Inspector shows the location of your current view. Click any location in the bar to jump to any other element at that level.

Instrument navigator

You can now see the bigger picture when tracking down page performance issues. A single timeline shows you network loads, page layout and rendering, and JavaScript activity.

View Source

Select Show Page Source in the Develop menu to open the new Web Inspector and go straight to the source code. Enjoy the full benefits of syntax highlighting and link-based navigation to referenced sub resources.

Streamlined debugging

With the new Web Inspector, you can jump right in and start debugging and profiling JavaScript — everything is ready to go.

Quick Console

The Quick Console is always available at the bottom of the Web Inspector for your JavaScript expressions. JavaScript you type is evaluated, with the results displayed above on a scrolling ticker-tape.

That is almost absolutely nothing?

Yea you are right, I guess I should join the free developer program. I think I was running into this when I was trying to get more info. I really don't understand why I have to register to get simple information about how to use the browser better.

That's life - nasty, brutish, and short.

I am sorry but I just don't understand what you are saying about removing css and adding javascript. How can you make such huge generalizations like that? Doesn't make any sense to me.

Adding code adds complexity. Removing code reduces complexity.

We all come from different backgrounds and have different needs. And perhaps you are right, maybe I am the only one that wants to edit my css in the browser, but then I prefer to work with a application that is built by a company that considers my needs.

Your needs or your habits? Apple know what features people are using and what features they aren't. If there is something that people aren't using Apple will remove it to reduce complexity. You can add it back in with some 3rd party tool if you want, but then it is your responsibility.

As a side note, I am not the only one running into these problems. You can see other message board discussions about this with literally hundereds of posts. https://discussions.apple.com/thread/4158378?start=15&tstart=0

That is a five page thread of people complaining about the new web inspector. Not a single one of them mentioned the inability to inject new styles into a page.

By posting that you responded.

If Apple intended to remove it, why is it still in the documentation?

Unfortunately this looks like one of those cases where the documentation didn;t keep up with the code changes.

I could find no way to get a new rule to be accepted as such. You can edit the html and add styles in-line but that's not quit the same thing. I was hoping that by editing the html and adding the rule it would be picked up and added to the sidebar but no dice.

If you haven;t already you should send feedback to Apple regarding this.

regards

Jessek wrote:

You know absolutely nothing about how I work, what I work on or the quality of my work, yet you seem to know that what I am doing is incorrect.

Instead of answering a question you decide to try and demean the person and tell them the way they are doing something is wrong. How do you know anything about my habits or my development workflow?

I've been programming for a long time and I can tell when things don't add up.

If you recall, I did answer your question. I answered it incorrectly because I had no idea what you were talking about. I have not demeaned or insulted you in any way. If you disagree, you are welcome to post a complaint about me in the Using Apple Support Communities forum. There is a "Report post" button but you don't have enough points to enable that feature.

What I have done is suggest that the fact you are blocked by a feature that I never knew existing indicates a big problem. Such things shouldn't block you. If they do, your career is likely to be very short.

Adding css often is not about complexity but removing the need to add Javascript which defintiely increases complexity and slows browsers down. Hence why the W3c is contantly adding features to html and css to reduce the need of trying to hack functionality with javascript.

CSS has nothing to do with Javascript. I used Javascript as an example of the kinds of debugging work that Safari 6 has been designed to perform. There is nothing about Javascript that is a "hack" of functionality. Javascript is essential for modern, interactive web sites.

Again, I will bring us around to my original question. This feature is in the documentation that I have posted a screenshot of in my original post.

If Apple intended to remove it, why is it still in the documentation?

Because that is just the way programming life is sometimes.

I am not trying to insult you. I am trying to help. If you have selectors without matching rules, just add empty rules for them. It sounds like your site is way too complex. It also sounds like you are mixing your content and display properties. That is not the intent of CSS. Your HTML should be as absolutely simple as possible. Class names should semantically correspond to the underlying data and have nothing to do with how that data is displayed. If you do that, then it should be impossible to get into the state you are now in.