Web inspector inline CSS edit

Supposedly in Safari 3.1 the web inspector is meant to allow inline editing of CSS attributes. I can't seem to make this work at all. Is this feature absent or have I missed how to initiate it? I figured I could just double-click on an attribute in the inspector panel and it would be editable (like in Firebug). Has anyone had this problem?

Safari 3.1 was released today.
Along with it came several updates and improvements, one of them being CSS editing in the Web Inspector.
At least, in theory. In practice, we're not sure how to get it working.

Similar Messages

How do you save css rules created in web inspector?

Being a web developer, I usually use Firebug on Firefox to test CSS when I'm developing a website. Ever since I got my new iMac, I've really grown to love Safari. I like the Web Inspector but I cannot seem to find a way to copy any of the CSS rules I create for testing. Is there an effective way to create CSS rules and copy the whole CSS rule (property + declarations) so I can paste them somewhere else?

You can import and replace any styles you want from other documents, but templates are templates. That is what they are for.
Styles are document specific for a reason. Imagine the fun and games if the styles in one document changed the behavior of same name style in other unopened documents. You would be chasing your tail forever.
Someone would send you a file and it would inexplicably change layout and appearance just because your styles didn't match.
Peter

Developer: web inspector how do I add new css rules

I have been using web inspector for quite some time. It was a regular part of my development workflow, however, I was surprised when the safari team totally re-vamped the tool in safari 6.
You use to be able to click on the menu in the styling section of the tool bar and click "Add new rule". Now it appears you can no longer add css rules in this way. Which is a bummer because I used this feature all the time.
You also, use to be able to double click for a new rule when in the actual stylesheet under the Resources tab. I can no longer do this either. For the life of me, I can't figure out why the safari team would get rid of these valuable options.
Someone please help.
These options must still exist, as they are invaluable when working with css in the browser. Does anyone know how to add a new style rule. I read the documentation and I don't see anything about removing this functionality.
The only way I can find to add a new rule, is through the snippet bar, which is kind of a pain as you have to add the <style> tags every time you add a new rule.
Also, I can't figure out how to view and elements pseudo classes (i.e. :hover , :checked, etc).
I have to say, it is a little frustrating as I don't clearly see the benefits of their redesign and it just seems harder to use. It kind of feels like they reskinned and rearranged things just to make it look new and didn't really think through how developers use this tool.
Does anyone else feel this way with the new safari?
Maybe I will see the light after a couple of days. I hope so because I am partial to using safari.

Build your FGLayout prototype page so it works well in all screen sizes (mobile first, then tablet, finally desktop). To create your home page, SaveAs index.html. Then SaveAs page2.html, replace content. Repeat for other site pages.
Nancy O.

In web inspector, CSS right tab doesn't show line numbers anymore ?

I can't see the number lines of the CSS stylesheet anymore using the line inspector.
Anyone knows how to put in back ?

Apple has made it so you can only use Safari Web Inspector.
File feedback as to how it has limited you.
The information you are looking for (if I remember correctly). is hidden. you need to hover your cursor over where the information usually is and there should be an icon of a circle with an arrow in it... if you hover over that, it'll show you the content you are looking for.
Having said that Apple is always making changes so if you were to file feedback on why this does not work for you, Apple may change it to work better for debugging websites.
http://www.apple.com/feedback/macosx.html
I already filed feedback about this. I state that when I inspect and element I want to be able to see the CSS file and line row it starts at without having to hover my cursor over an icon to reveal it.
I hope this helps.

Safari 6.0 Web Inspector CSS line number

Please add the line number of the class or id on the css web inspector.
The old version has the line number in front of the class
The new one doesnt, to see it you need too put the cursor on the little arrow and shows the path on a tooltip. Please change this like the other version.

Just for giggles, I ran the same benchmarks on my Macbook Air, 1.8GHz i5, 4Gb RAM, 10.8.3, non-retina:
Safari 6.0.3
Firefox 19
Chrome 25
SunSpider
192ms
243ms
210ms
HTML5Test
378
393
463
Peacekeeper
3238 (3/7)
2052 (5/7)
3900 (6/7)
Memory Usage
482Mb
311Mb
373Mb

Safari 7 web inspector crippled

I use the web inspector to make a lot of "on the fly" css tweaks which I then add to custom css files on wordpress blogs. The latest version of safari still allows me to do it BUT I can only select the rules OR the selectors when I want to copy what I have done. It refuses to let me select the entire block (rules and selectors) thus making me to two copy/paste operations when before I only needed to do it once.
Any ideas how to get around this?

Bump. I updated to Mavericks a couple of weeks ago and have just slammed into this issue. The only "workaround" I've found is to click the link for the stylesheet that you've just modified and copy the code from that, but that's an extra step that I shouldn't have to perform when text is right there in front of me.
On top of that, I don't seem to be able to even add an attribute to an existing class anymore - hitting Tab, which used to let you quickly start a new attribute in the rule that you're editing, literally inserts a tab into whatever you're typing. Absurd! There are no tabs in CSS other than for visual organization that's irrelevant in this context. Why would the Inspector allow you to type actual tabs here?!
But what, there's more! While I love the new "+ New Rule" button, even here I'm not able to add attributes - unless I'm missing something, I would love to learn that I am - to the new rule. So if this new rule has six attributes, then it displays in the Inspector as six new rules, each with the same name. Absurd x2.
I really do like some of the changes to the Safari 7 Inspector, but I would gladly give them up in order to eliminate these infuriating UI obstacles. It's not worth it, and it's slowing me WAY the **** down. I've been one of the few Safari-centric web devs out there for many years, but if this doesn't get fixed then I'm going to have to finally make the migration to Chrome, and I won't be coming back if I do so.
Bonus gripe: The two irritations above combine to form one "super irritation"! After you've created a temporary rule to your liking, you can't select it. Period. All you can do is select/copy either the rule's class/ID or its attributes, not both. Brilliant.

When inserting image how do I force inline CSS not image tags?

When I insert an image to my page layout it always uses html width= and height= tags
e.g. <img src="images/wordpress.jpg" width="125" height="112">
This is driving me nuts
(I thought these tags were pretty old fashioned for current doctypes. Why does dreamweaver continue to use them?)
I want inserted images to be shown with inline CSS
e.g. <img src="images/wordpress.jpg" style="width:125px; height:112px;">
I can then more easily add more CSS like padding, floats etc as needed.
Any ideas how I set this up as a default or quickly convert?
(I dont really want to add lots of unique image classes to a style sheet)
many thanks!
Dreamweaver CS6

Image height & width values are not deprecated. Unless you're building a responsive web site, it is usually better to have these attributes stated in the HTML.
But when I don't want them, I do the following:
Insert > Image > browse to file...
On the properties panel, I delete the width and height values, hit Enter.
Nancy O.

Page after filling in web form and Css on Web apps

Hi All.
I have two questions.
1. How do I customise the page that appears after a web form has been filled in. The page the sumarises the details filled and thanks the user for filling in the form?
2. We have created a web app to display info on a page, which it does, but it isn't pulling the CSS styling from the main template. To make it work we have been putting inline CSS in the web app code, but this isn't ideal. Is there a way to make it look for the main CSS?
Thanks
Ken

Hi Ken,
1. You can find it under Site Manager > System Pages > Web Forms Confirmation Page
2. Does the detail page/web app item use a template? Did you make sure the referencing looks something like this: <link rel="stylesheet" href="/css/styles.css" />?
Nicole - BCGurus.com

Should I convert my inline css to external?

I was told my site would be cleaner and easier for google to find if I changed my css styles to external. All my pages are a little different, so I was also told I would have to do it for every page. What is the best way to do this? I knew very little about css when I created the site, sorry.
Do I select everything from <style to style> right click and select Convert inline CSS to rule. That option is greyed out. Do I select new rule?
The site is www.macrophotographer.net I am a not a professional web designer so go easy on me.

I have had a look at source code for your home page, your styles are embedded in two groups between your pages head tags, so it will be easy to externalise the css. In code view if you put your cursor in one of the styles you wish to move and then click on the 'Move or convert css' button or go to format > css styles > move css rules ... you can move the styles one by one into an external stylesheet.
The other and what I think will be the quicker way for you will be to open your webpage then go to File > New > Blank Page > CSS > Create, this will create a new empty stylesheet already with the encoding set. With this still open switch tabs back to your webpage and select all the code between the <style type="text/css"> and </style> cut it and then switch tabs back to the stylesheet and paste. Save the stylesheet, then switch tabs back to your webpage, in code view you need to enter the following line before the </head> tag
<link href="/nameofstylesheet.css" rel="stylesheet" type="text/css" />
Richard

Web Inspector does not open

I can not get the Web Inspector to open. Nor the Error Console or Network Timeline. Snippet Editor does open properly.
Anyone else having this issue or have any suggestions? On Windows XP Pro and using v 3.1 (525.17)

Ahhhhh finally found a solution here:
http://weblogs.asp.net/davidbarkol/archive/2007/06/22/web-inspector-for-safari-o n-windows.aspx#6099915
(direct links to comments don't seem to be working - look for the comment "Monday, April 14, 2008 10:46 PM by etc" - comment text below)
===============================================
as read above
windows xp pro users:
fix for safari 3+
1. edit with a text editor such as notepad: C:\Documents and Settings\<user>\Application Data\Apple Computer\SafariPreferences.plist
2. towards the end of the file, add the following inside before </dict>:
<key>WebKitDeveloperExtras</key>
<true/>
that's all, enjoy
===============================================
btw, on my system the file name was "WebKitPreferences.plist"

Safari 6: Webkit Web Inspector doesn't work

I updated Safari to 6 on Lion.
After that, I experiences some crash, then Webkit Web Inspector got broken.
I can do nothing with it.
The new Safari original inspector works.
Also, Delete key doesn't make "Back". Is it normal?
Anyone knows how to fix or repair Safari?
I did try "Reset Safari" but it didn't help. Disabling extension and plugins also didn't help.
Macbook late 2009
Max OS X 10.7.4
Safari 6

frevh56tyrn wrote:
Agreed 1000%. Some may say that it's just a matter of getting used to the new inspector UI. However, after having used it constantly for several weeks, I can definitively say that the new UI really is, plainly and simply, bad. It's bad for productivity as far as finding what you need. And it's slower by a large margin when viewing page source info, et al. I can no longer easily find out where a particular CSS property was set. I can no longer disable or override a particular CSS property. The console log isn't always consistent: sometimes it defaults to showing me past logs when I just want to see the current log. The network request timeline is not as useful (I want to see cumulative load time for each resource). The "Issues" section confounds me; I have no idea how to use it so it just gets in the way and makes me think that the developer tools are half-baked. "View Source" no longer shows the raw HTML source but rather Safari's syntax-highlighted version. Often I really do just want to see the raw source. And it's been a pain in the butt trying to memorize what each icon means (this is called "mystery meat navigation" where you see only icons without supplemental text). The only thing I'm happy to see is the new console log history. Everything else is an absolute horror to work with. Did Apple create this new Inspector primarily to help its own, internal developers while not thinking about the majority? For me, the new implementation is nearly useless to work with; I'm probably going to start using Chrome exclusively for web development.
Apple, if you're listening, this is the sound of your developers fleeing the platform. This is not hyperbole, this is reality -- Safari is no longer useful to develop for the open-standard web that you've pushed so very hard for.

How do you use web inspector with Windows 7

I plug in the USB cable from my Windows desktop to my phone, The drivers are loaded successfully, but where can I find the Windows equal to Safari's advanced preferences.

You can't. Web Inspector can only be enabled from a Mac computer. Not Windows. As it requires the Safari browser on the computer, and the last version of Safari for Windows was discontinued years ago and did not have that feature any way.

Safari 6: What happened to "Activity" view? Also Web Inspector Network view doesn't work.

Hi all,
I "upgraded" to Safari 6 and while it's super-fast and snappy as ****, I'm missing two features:
1) Activity view is gone! It was the easiest way to see what kind of crap websites are loading and you could double click on files and view them. Now that's gone.
2) I then tried using Web Inspector to try to track down a FLV file that was being loaded (something that worked with old Safari) and I couldn't do it anymore... Flash loading is not visible in Safari 6 and yet it was in previous Safari.
Ugh... new Safari is a great but they took two of my favorite options
Is there something I'm missing or are these features really gone?

Ugh... new Safari is a great but they took two of my favorite options
Send feedback > Apple - Safari - Feedback
If you have the ClickToFlash extension installed, that can prevent Flash based video from streaming. It can also be installed as a plugin in /Library/Internet-Plug-Ins.
Check to see if Safari is running in 32 bit mode. Right or control click the Safari icon in your Applications folder then click Get Info. If the box next to: Open in 32 bit mode is selected, deselect, quit then relaunch Safari.
And try uninstalling the currently installed Flash plugin then reinstall new > Troubleshoot Flash Player | Mac OS
Open System Preferences > Flash Player then select the Storage tab. Click: Delete All

Feature request: Print function in Web Inspector

Safari's web inspector rocks. It would be neat, though, if you could print the element you've selected. Sometimes I don't want to print an entire page, just a portion, and the Web Inspector seems like an appropriate way to specify which element to print.
Although, Safari on the iPhone has some way of guessing which element to zoom in on when the user taps a part of the web page. I suppose there are many ways to do this.

Nice idea, but this user-to-user forum is not the place for Safari feature requests. Try here instead:
http://www.apple.com/feedback/macosx.html
FYI, you can also do a selected area screen capture (command-shift-4 then click-drag-release) and print that from Preview.

SharePoint 2013 and IE 11 issue - While creating a Web Part Page and Editing Web Part Properties

I tried to edit a Web Part in SharePoint 2013 using IE 11 but I did not see the Edit Eeb Part dropdown menu at the top-right corner of the web part. Then I tried to create a Web Part page and I get the following error.
Cannot create a Web Part Page with the current browser. Browsers that support the creation of Web Part Pages include Microsoft Internet Explorer 7.0 or later, Mozilla Firefox 3.0 or later, and Apple Safari 3.0 or later
Strange !!! My web browser is IE 11.
I tried the above two tasks in Google Chrome and worked fine.
Solution:
I added the site url to local intranet zone in IE 11 and I am now able to add Web Part Page and Edit Web Part in IE 11.
imd.net

Hi - One more solution is to add SharePoint site to compatibility group:
http://blog.fpweb.net/sharepoint-internet-explorer-compatibility-issues-with-video/#.VAaZSPmSyy4
-prs

Web inspector inline CSS edit

Similar Messages

Maybe you are looking for