<meta charset="utf-8"><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; line-height: 18px; "><p style="min-width: 400px; ">For those who are interested in this, I've included the draft inline below.</p>
<p style="min-width: 400px; ">Mihai</p><p style="min-width: 400px; "><meta charset="utf-8"></p><h2 style="margin-bottom: 0px; text-shadow: rgb(187, 187, 187) 1px 1px 1px; font-size: 16px; color: rgb(0, 51, 0) !important; ">
<a href="http://webkit.org/blog/?p=1463" rel="bookmark" title="Permanent Link: Web Inspector: Styles Enhanced" style="text-decoration: none; color: rgb(34, 136, 17) !important; ">Web Inspector: Styles Enhanced</a></h2><small style="color: rgb(119, 119, 119); ">Posted by <strong>Alexander Pavlov</strong> on Wednesday, February 9th, 2011 at 9:43 am</small><p>
</p><p style="min-width: 400px; ">During the past months, we’ve been working hard to improve the CSS editing experience for the Web Inspector users. Now, we are happy to provide you with an update.</p><h3 style="margin-bottom: 0px; text-shadow: rgb(187, 187, 187) 1px 1px 1px; font-size: 14px; color: rgb(0, 51, 0) !important; ">
Style Presentation</h3><p style="min-width: 400px; margin-top: 2px; ">Did you find yourself in a situation when you entered a big and complex gradient definition for your<code style="font-family: Courier, Fixed; font-size: 13px; ">background</code> property, and it disappeared once you hit <code style="font-family: Courier, Fixed; font-size: 13px; ">Return</code>? The reason was that the Styles sidebar showed the style content exactly the way the browser understood it, and if it did not understand it, inspector showed nothing. This has now changed: inspector shows all the properties declared in a style, and if the browser does not understand a property name or value, the respective property is denoted by an exclamation mark (<img src="http://webkit.org/blog-files/inspector/warning_10x10.png" alt="warning" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; ">) next to its name. Still, you can edit (or remove) these properties along with the regular ones.</p>
<p style="min-width: 400px; text-align: center; "><img src="http://webkit.org/blog-files/inspector/css_unknown_properties.png" alt="" width="279" height="102" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.496094) 0px 3px 25px; vertical-align: top; margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; "></p>
<p style="min-width: 400px; ">On a related note, Web Inspector can now show the colors in property values exactly as they are written in the CSS – just use the “As Authored” presentation option accessible via the Gear menu.</p>
<p style="min-width: 400px; text-align: center; "><img src="http://webkit.org/blog-files/inspector/css_as_authored.png" alt="" width="346" height="89" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; "></p>
<h3 style="margin-bottom: 0px; text-shadow: rgb(187, 187, 187) 1px 1px 1px; font-size: 14px; color: rgb(0, 51, 0) !important; ">Editing Styles</h3><p style="min-width: 400px; margin-top: 2px; ">Based on the feedback from our users, we have improved the editing of CSS properties. Two separate fields are now used for a property name and value instead of one, and you can navigate between them (as well as between properties) back and forth with the <code style="font-family: Courier, Fixed; font-size: 13px; ">Tab</code>/<code style="font-family: Courier, Fixed; font-size: 13px; ">Shift-Tab</code> or <code style="font-family: Courier, Fixed; font-size: 13px; ">Return</code> keys. Available keywords for property values are suggested as you type, and can be auto-completed using the <code style="font-family: Courier, Fixed; font-size: 13px; ">End</code> or → keys, just like in the console view. The previous/next suggestions can be selected with the ↑ and ↓ keys. If you wish to accept the current suggestion and move on to another field, use the <code style="font-family: Courier, Fixed; font-size: 13px; ">Tab</code>/<code style="font-family: Courier, Fixed; font-size: 13px; ">Return</code>keys.</p>
<p style="min-width: 400px; text-align: center; "><img src="http://webkit.org/blog-files/inspector/css_autocomplete.png" alt="" width="325" height="70" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.496094) 0px 3px 25px; vertical-align: top; margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; "></p>
<p style="min-width: 400px; ">Additionally, you can paste a compound “<code style="font-family: Courier, Fixed; font-size: 13px; ">name: value</code>” property text into the name field, and inspector will break it up into “<code style="font-family: Courier, Fixed; font-size: 13px; ">name</code>” and “<code style="font-family: Courier, Fixed; font-size: 13px; ">value</code>”, putting each in its own field for you.</p>
<h3 style="margin-bottom: 0px; text-shadow: rgb(187, 187, 187) 1px 1px 1px; font-size: 14px; color: rgb(0, 51, 0) !important; ">Persisting Changes</h3><p style="min-width: 400px; margin-top: 2px; ">Every time you modify a style from an external style sheet, the respective resource text is updated in the Resources panel (this feature is work-in-progress) and the history is tracked for such style sheet resources while inspector remains open. Select any resource revision to see its differences from the original one, highlighted line-wise.</p>
<p style="min-width: 400px; text-align: center; "><img src="http://webkit.org/blog-files/inspector/css_rule_diff.png" alt="" width="615" height="238" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.496094) 0px 3px 25px; vertical-align: top; margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; "></p>
<p style="min-width: 400px; ">A textual resource node (including stylesheet revisions) can be drag and dropped onto most text editors to export the specific resource content.</p><h3 style="margin-bottom: 0px; text-shadow: rgb(187, 187, 187) 1px 1px 1px; font-size: 14px; color: rgb(0, 51, 0) !important; ">
Things You Might Not Know</h3><p style="min-width: 400px; margin-top: 2px; ">Please let us take this opportunity to tell a few things you might not know. While in the Styles pane, you can:</p><ul style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; ">
<li style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; list-style-image: url(http://webkit.org/images/green-bullet.png) !important; ">…add a new property to an editable style either by double-clicking in the blank space of the lines with opening and closing braces, or by hitting <code style="font-family: Courier, Fixed; font-size: 13px; ">Tab</code> while editing the last property value.</li>
<li style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; list-style-image: url(http://webkit.org/images/green-bullet.png) !important; ">…add a new rule by selecting the “New Style Rule” item in the Gear menu.</li>
<li style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; list-style-image: url(http://webkit.org/images/green-bullet.png) !important; ">…click a link in a property value (say, <code style="font-family: Courier, Fixed; font-size: 13px; ">background-image</code>) to navigate to the respective resource in the Resources panel.</li>
<li style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; list-style-image: url(http://webkit.org/images/green-bullet.png) !important; ">…click a color swatch next to a color value to cycle through available color representation formats.</li>
</ul><p style="min-width: 400px; ">We are currently experimenting with more improvements to style handling within Web Inspector. Stay tuned and check back often!</p></span><br>On Wed, Feb 9, 2011 at 11:27 AM, Patrick Mueller <<a href="mailto:pmuellr@muellerware.org">pmuellr@muellerware.org</a>> wrote:<br>
> I'm logged in (as near as I can tell - link at the bottom says "Log out"),<br>> and still get the error.  I don't have posting rights to the blog, nor do I<br>> want them.<br>><br>> On 2/9/11 2:20 PM, Adele Peterson wrote:<br>
>><br>>> You have to be logged into the blog to read drafts.<br>><br>> --<br>> Patrick Mueller - <a href="http://muellerware.org">http://muellerware.org</a><br>><br>> _______________________________________________<br>
> webkit-dev mailing list<br>> <a href="mailto:webkit-dev@lists.webkit.org">webkit-dev@lists.webkit.org</a><br>> <a href="http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev">http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev</a><br>
><br><br>