<pedrocorreia.net ⁄>

<Find computed styles in IE, Firefox, Opera or Safari ⁄ >

clicks: 3413 3413 2008-05-06 2008-05-06 goto misc myNews misc  Bookmark This Bookmark This

At my recent Web 2.0 Expo talk, I exhorted developers to get comfortable outside the Firebug/Firefox safety zone. By rotating between Opera, Safari and even IE as our primary development environments, we can really get to know those browsers - and perhaps learn to utilize their non-standard features. Switching things up, however, can inhibit productivity until you learn your way around each browser's tools.

To that end, I offer these step-by-step instructions for finding computed styles in all four A-grade browsers. I chose the display of computed styles as my "debuggers are cool" use case because it's an obscure but useful feature for CSS debugging. Most of the time I can debug styles by looking at my debugger's snapshot of the current cascade for a given element. But sometimes that's not enough. If I've assigned a value of "inherit" to the font-family of an element, then the cascade snapshot won't tell me what font is actually applied to that element. (Not being a designer, I often can't tell the difference between various sans-serif faces, especially at small sizes.) Luckily, computed styles can give me the information I need.

As these examples demonstrate, debugging tools have come a long way in the last couple of years. Let's make the most of them for all of our UI-layer needs.

este é só um excerto do artigo, para aceder ao artigo completo, clique no link em baixo:
this is just a small excerpt from the article, to access the full article please click in the link below:


Subscribe News RSS  Subscribe News Updates by E-mail

myNews <myNews show="rand" cat="misc" ⁄>

Adobe Photoshop CS6: Improvements for Web and UI Designers new ...

Photoshop CS6 has been hailed as a huge improvement for web and UI designers. I'm going to share wit (...)

clicks: 17464 17464 2012-05-14 2012-05-14 goto url (new window) webdesign.tutsp... goto myNews misc

Camera Exposure Modes Explained new ...

If you're just getting started with photography, the letters on your camera's dial might feel like h (...)

clicks: 15365 15365 2012-05-13 2012-05-13 goto url (new window) photo.tutsplus.... goto myNews misc

45 Fresh Collection of High Quality Free PSD Files new ...

What else can be so great for a designer than finding out high quality Photoshop PSD files? This is (...)

clicks: 9437 9437 2012-05-09 2012-05-09 goto url (new window) smashingapps.co... goto myNews misc

15 Free High Quality ToolTip PSD's new ...

A tooltip or infotip can be defined as a graphical hint that is incorporated with the website design (...)

clicks: 11046 11046 2012-05-07 2012-05-07 goto url (new window) smashingapps.co... goto myNews misc

40+ Elegant Examples of River Photography

River photography is one of the beautiful type of photography, photographers take pleasure in this w (...)

clicks: 6911 6911 2012-05-04 2012-05-04 goto url (new window) smashingbuzz.co... goto myNews misc

40 Fresh And High Quality Free Icon Sets In PSD Format

Here is yet another exciting collection of high quality Free Icon PSD files for the designers that t (...)

clicks: 7424 7424 2012-02-19 2012-02-19 goto url (new window) smashingapps.co... goto myNews misc

15 jQuery Calendar Date Picker Plugins

In this collection, you will see some of the best jQuery Calendar Date Picker Plugins that will allo (...)

clicks: 7344 7344 2012-02-18 2012-02-18 goto url (new window) smashingapps.co... goto myNews misc

50 Beautiful Yet Free HTML5 And CSS3 Templates

HTML5 templates are getting very popular these days because all professional HTML5 templates are com (...)

clicks: 7923 7923 2012-02-17 2012-02-17 goto url (new window) smashingapps.co... goto myNews misc