CSS shorthands!

By David Håsätherhzr. Thursday, November 24, 2011 12:13:32 AM

, ,

Have you ever tried to debug something like border: 1px solid rgb(255, 0, 0); in Opera Dragonfly's CSS inspector, only to be greeted by a bunch of expanded properties?

Opera Dragonfly CSS inspector showing expanded properties

No more! Opera Dragonfly now has support for CSS shorthands, so the previous declaration will now be presented like this:

Opera Dragonfly CSS inspector showing the same properties in shorthand

Values that have been partially overridden will also be shown in this compact shorthand view:

The shorthand properties, with overridden partial values struck through

The implementation is not fully done yet. For example, the color swatch isn't added to a color if it's part of a shorthand value. Also, default values for things like the background property will always be visible. Both of these issues will be fixed.

And if you're a fan of expanded properties, you can still right-click in the CSS inspector and enable "Expand shorthands".

We would appreciate a lot of testing on this experimental release, as a lot of code has been refactored. So edit away, disable declarations and so on, and report back if something breaks.

We've also added per-language builds available as ZIP files for offline use.

Running Opera Dragonfly offlineStyle profiler preview

Comments

Daniel Davistagawa Thursday, November 24, 2011 3:25:41 PM

Excellent, I've been hoping for this. CSS debugging just got a whole lot easier.
Thanks!

d-u-a-l Thursday, November 24, 2011 4:55:37 PM

That's a really good news! But a lot of work ahead - just try to inspect, let's say, this textarea:
border: 2px rgb(0, 0, 0);
border-bottom: 2px rgb(0, 0, 0);
border-bottom-width: 2px;
border-left: 2px rgb(0, 0, 0);
border-left-width: 2px;
border-right: 2px rgb(0, 0, 0);
border-right-width: 2px;
border-top: 2px rgb(0, 0, 0);
border-top-width: 2px;
border-width: 2px;
margin: 0px 0px 7px;
margin-bottom: 7px;
padding: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;

And there's still very annoying bug in Scripts, when you click on plus to expand contents of some object in right panel and get most text of Dragonfly window selected
Win 7 x64, Opera 10.60.1147

David Håsätherhzr Thursday, November 24, 2011 5:04:27 PM

Originally posted by d-u-a-l:

That's a really good news! But a lot of work ahead - just try to inspect, let's say, this textarea


What's the issue?

Abhinavdecodedthought Thursday, November 24, 2011 5:13:10 PM

the full view was/would be helpful for those who are still learning CSS like me ... but its good in a way that I would do more work to keep up with this change up

Unregistered user Thursday, November 24, 2011 5:14:47 PM

siavash keshmiri writes: cool but in borders,text-shadows and box-shadows we have not color picker:(

Eli Mitchellcyberstream Thursday, November 24, 2011 8:08:23 PM

Excellent! I was just wishing for this feature a couple days ago.

I agree with what @siavash is requesting. My previous comment request.

Siavash Keshmiritenet Thursday, November 24, 2011 8:30:04 PM


background has problem in this version , dragonfly shows

background: none 0% 0%/auto repeat scroll padding-box border-box rgb(223, 223, 223);

instead this:

background:#dfdfdf;

for example

David Håsätherhzr Thursday, November 24, 2011 10:59:31 PM

Originally posted by decodedthought:

the full view was/would be helpful for those who are still learning CSS like me

As mentioned, to get the expanded properties back, just right-click in the CSS inspector and enable "Expand shorthands".

Originally posted by anonymous:

cool but in borders,text-shadows and box-shadows we have not color picker:(

Originally posted by tenet:

background has problem in this version

Right, and both of these issues are mentioned in the blog post.

Pablo MendozaPabloMendoza Friday, November 25, 2011 2:36:26 AM

up

RobMintsoft Friday, November 25, 2011 8:04:19 AM

Awesome smile

D1sasterp1ece Friday, November 25, 2011 2:07:36 PM

Is it normal for Opera to take some 70-80% of the CPU time just when I open Dragonfly? I know my machine is old, but this still doesn't seem normal.

Unregistered user Friday, November 25, 2011 3:39:40 PM

Anonymous writes: Anyone ever tried enabling print view while the focus in in the dragonfly frame? Puts dragonfly in print view...

Spadar ShutSpShut Friday, November 25, 2011 4:15:09 PM

The values for multicolumn text is a total mess. This is what I have in my css file:

.center .column-two{
column-count:2;
column-gap:81px;
column-width:356px;
column-rule: 1px dashed #ccc;

}

and this is what I see in Dragonfly:

.center .column-two {
column-rule: 1px dashed rgb(204, 204, 204);
columns: ;
}

And what's more, column-gap doesn't work, but if I write it by hand in dragonfly - the rule gets applied.

Martin RauscherHades32 Friday, November 25, 2011 6:55:55 PM

Fantastic! And the JS exceptions display is even cooler!

Maciej Bałutambaluta Friday, November 25, 2011 8:48:26 PM

It would be nice if colours would be presented in the way they are written in CSS. Now it's always converted to RGB.

David Håsätherhzr Saturday, November 26, 2011 12:30:10 PM

Originally posted by SpShut:

The values for multicolumn text is a total mess.

Thanks, I can see issue. Will be fixed in the next release.

And what's more, column-gap doesn't work, but if I write it by hand in dragonfly - the rule gets applied.

Will look into that.

Unregistered user Monday, November 28, 2011 2:23:17 AM

Anonymous writes: higher cpu usage in opera 11.60 build 1173 when using opera dragonfly

LLleonardolaporte Monday, November 28, 2011 8:03:53 AM

I like to manage my sites with the dragonfly.

Excellent initiative.

All clear now!

Spadar ShutSpShut Monday, November 28, 2011 10:09:04 AM

Originally posted by SpShut:

And what's more, column-gap doesn't work, but if I write it by hand in dragonfly - the rule gets applied.


Sorry for misleading, it was my fault, in "column-gap" the "c" letter was cyrillic "с", therefore the rule didn't work.

Unregistered user Monday, November 28, 2011 4:03:52 PM

Anonymous writes: xellant made it so much easier thanx

FataL Monday, November 28, 2011 7:10:48 PM

CSS shorthands are generally better than multiple separate properties. up
But most useful for debugging is true CSS source (like in Web Inspector).
I would like to see a color value the way it was assigned (hex, rgb, rgba, hsl, hsla, color name) and not interpreted value.
The closer you get to the source -- the better. Remember that web developers are not debugging browser engine, they are debugging their web pages.

Dragonfly:
textarea, input, select, button { 
    font: inherit inherit inherit inherit/inherit inherit;
}
Firebug, Web Inspector, actual CSS source:
textarea, input, select, button { 
    font: inherit;
}

Only Opera and IE still show px after zero: 0px. This is worsening readability of code.

АндрійSATAB Friday, December 2, 2011 8:01:38 PM

body {
text-shadow:....
}
bug in Opera Mini!

Unregistered user Tuesday, December 6, 2011 6:12:11 AM

Operafan writes: Dragonfly still doesn't work at all with images set to cached only. (And having javascript disabled has its kinks too). Every time I want to inspect a page I have to reload it in Chrome. Only thing keeping me from using Chrome exclusively is the lack of support for no-image browsing.

Rafald.i.z. Wednesday, December 7, 2011 6:08:05 PM

@"Anonymous": that should be fixed in Opera 11.60.

Write a comment

New comments have been disabled for this post.

Next builds

New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.

To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.

Useful resources

Source code

Bug reports / feature requests