Arkanis Development


CSS3 with Firebug and Opera Dragonfly


I was playing around with some CSS3 stuff lately and while doing so I noticed that Firebug seems to be buggy as soon as you use some CSS3 rules like box-shadow:

A paragraph highlighted in Firebug

These funny blocks that look like parts of a picture are indeed parts of the header image. Looks like the margin and padding highlight somehow displays the wrong stuff. Just as a reference, the above usually looks like this:

The same paragraph viewed normally

I'm sure this Firebug bug :) gets fixed pretty fast but it made me remember that Opera contains a similar development tool: Dragonfly. It's not as hot and pretty as Firebug but the basic functionality looks pretty solid.

Viewed in Dragonfly with layout highlighted

After this experience I will fire up Opera a bit more often when doing design stuff (right now I use Opera only for browsing). For the usual grunt work Firebug is absolute invaluable (alone the JS debugging …) but it's good to know that there is an alternative at least for some situations. I like variety.

Leave a new comment

Having thoughts on your mind about this stuff here? Want to tell me and the rest of the world your opinion? Write and post it right here. Be sure to check out the format help (focus the large text field) and give the preview button a try.


Format help

Please us the following stuff to spice up your comment.

An empty line starts a new paragraph. ---- print "---- lines start/end code" ---- * List items start with a * or -

Just to keep your skill sharp and my comments clean.