Display Tags For 'firefox'

Find Unused CSS Selectors With CSS Usage, A Firebug Extension

Neal Grosskopf
1/27/2010 10:05:00 PM

As a website grows so does its stylesheet. The problem is, the opposite is not true. As a pages get removed, seldom do the selectors in the external stylesheet. This becomes even worse with multiple employees, especially if people come and go. Enter CSS Usage.

Example of CSS Usage

CSS Usage

Above is an example screenshot showing selectors in green that were found and selectors in red that were not. As a website is browsed, the tool will continue to re-analyze the stylesheet.

I found this Firebug extension a couple weeks ago and thought it was worth talking about. CSS Usage shows up as a tab within Firebug so if you don't have that extension yet, head over to Mozilla's addon site and download it - https://addons.mozilla.org/en-US/firefox/addon/1843

CSS Usage tab within Firebug

The jist of CSS Usage is to scan your stylesheet selectors and HTML to determine if each selector is used. Used selectors are colored in green while unused selectors are colored in red. Selectors previously found on other pages are colored in dark green

By default it will only analyze a page if you hit 'scan' but I like to turn on the auto-scan feature and just browse around my site for about 20 pages to give it a good mix of selectors. After that I had only a handful of selectors that were left unused. I took those selectors and did a site wide search to try to identify if they were used.

Cons

There are a few drawbacks with the addon. Currently it will only scan pages you visit. It does not have the ability to scan your entire site. Sites with 100's of pages may be difficult to scan with this tool. I also found the line numbering to be a bit flaky (as seen in my screenshot above).

Pros

Some great pros of this addon include cleaning up your stylesheets and reducing filesize. You can also save a little bandwidth by making them smaller in size.

Download

Head over to the CSS Usage page on Mozilla's addon site and give it a try.

Replies:12
Views:39100

A List of New CSS Features In Firefox 3.6, Set to be Released Tomorrow

Neal Grosskopf
1/20/2010 6:15:00 PM
Firefox 3.6

Firefox 3.6

Firefox 3.6 looks to have plenty of new features for web developers to play with.

Firefox 3.6 is set to be released January 21st and is packing several new and exciting properties in it. Perhaps we can rename Firefox 3.6 to Firefox: Background Edition since the majority of those properties are background related.

CSS Background Gradients

Backgrounds gradients are something I've been requesting for a long time now. It looks like the browser vendors finally listened! To use CSS gradients you'll need to use them within the context of a background-image.

This example will create a horizontal white to black gradient.

html { background-image: -moz-linear-gradient(left, #fff, #000); }

Advanced Gradients

Firefox also supports more advanced gradients such as radial (circle) gradients and linear gradients at an angle (i.e. diagonal gradients) much like one would create in Photoshop or Fireworks. It will also support color stops which are midpoints in your gradient.

Each of these topics are worthy of their own full length tutorial so I'm not going to dig too deep into them right now. Just be aware that they are now supported by Gecko (Firefox) and Webkit (Safari, and later Google Chrome) based browsers.

To learn more about CSS gradients check out the Mozilla Developer Center page on CSS Gradients.

Multiple Backgrounds in CSS

Multiple backgrounds are what we've all been waiting for. Gone are the days of nesting DIVs like this:

<div id="top-bg"> <div id="bottom-bg"> <div id="inner-bg"> Content </div> </div> </div>

We can now use a single element if our page requires multiple backgrounds using the code below:

html { background-image: url(image1.png), url(image2.png), url(image3.png); background-repeat: no-repeat, no-repeat, repeat; background-position: right top, left bottom, top; }

To learn more about multiple backgrounds check out the CSS Spec on Multiple Backgrounds.

CSS Background Scaling

Another background related addition to Firefox 3.6 is the -moz-background-size property. This allows us to resize background images, that are perhaps too big or too small for the element they are in.

If the our image image.png default size is 150px x 75px this would scale the image up larger:

div { background: url(image.png) no-repeat left top; -moz-background-size: 300px; }

Try It Yourself

Head over to http://www.mozilla.com/firefox/ and grab a copy for yourself.

Replies:10
Views:21387

<< Back