Happy 2010, readers of CSS Newbie! It’s a bitterly cold day here in Des Moines, Iowa — the sort that causes me to question the wisdom of throwing off the blankets in the morning. However, today I get to reflect on the last year of CSS Newbie, and that’s enough to warm my heart, if not my toes.
I’ve said it before and I’ll say it again: CSS Newbie is nothing without you awesome readers out there. This year, more than a quarter million people stopped by, visiting more than half a million pages. For that, I am very, very grateful. It also makes me excited to see what we can do for those numbers in 2010!
To celebrate the year gone by, I’d like to recap the Top 10 CSS Newbie Articles of 2009. The first five I’ve left up to you — they’re the five most visited articles in the last year. The second five were my choice. They include articles I enjoyed writing or include content that I thought particularly useful or interesting. Read On…
This means these skills are just as important as the CSS my site’s name suggests you’ll learn. Read On…
Have you tried out Firebug yet? If not, you might want to consider giving it a go. It’s one of a few Firefox extensions that I use almost daily in my web development work, and I can guarantee that it’s made my life at least a little bit easier. And isn’t that what we’re all after… you know, deep, deep down? It ranks right up there with a giant trampoline in my book.
I most often use Firebug for its ability to “inspect” various elements on the page. If you’re running into a problem where a specific element on your page just isn’t working properly, you can just open Firebug and click the “Inspect” button. Then just mouse over whatever element is misbehaving and Firebug will give you a ton of detail on that item. You can see where it’s sitting in your XHTML, to see if your element is nested the way you thought. You can also see what CSS rules apply to that element, and (perhaps cooler still) see which CSS rules have been overwritten by other CSS rules. That can be a huge help when your CSS file starts reaching filibuster-appropriate lengths.
Another great feature of Firebug is the Net tab. If your page is loading slowly, just pop the Net tag open and take a look at the available charts. There, every single part of your page is broken down into its constituent elements, their size, and how long it took to download that particular element. And at the bottom of the chart, you can see the number of requests to the server your page required, the total number of KB downloaded, and the time it took to put it all together.
Firebug isn’t perfect, however. It can sometimes slow down certain pages if it’s running in the background – particularly, it seems, pages that make a lot of calls to the server. So AJAX-y pages (such as Gmail) or pages that refresh often can slow down significantly if you’re using Firebug. However, you do have the option to disable Firebug for specific websites. Simply go to that website, and go to Tools -> Firebug -> Disable Firebug for [whatever website]. The program won’t run on those pages: problem solved.
Some of the best tools in any web developer’s toolset are completely free. Today I’m going to talk a bit about the Firefox Error Console, and how it can help you become a better CSS author.
First, it’s important to mention that not only is the Error Console completely free, but it’s a pre-installed function of Firefox – you don’t have to go hunting down any special plugins or anything. Simply open a webpage and go to Tools –> Error Console to open the console.
Once you’re there, you’ll see a selection of buttons across the top like in the image above. The one we’re most interested in is the “Warnings” button, because that’s where all of our CSS errors show up. Simply click the Warnings button and you suddenly have a very precise and concise view of what Firefox thinks of your CSS. I’ll warn you, though: it isn’t always pretty.
Take the first item in the list of the image above, for example. Firefox is telling me that it’s had some problems parsing a “display” property in the CSS of one of my (many) WordPressplugins. If I click the URL below the error, it pops open a “view source” window with the offending line already selected. In this case, here was the line in question:
display:inline-block; /*for Opera & IE*/
As the comment behind the property states, this style only works in Opera and Internet Explorer. Firefox doesn’t support an inline-block display setting. Therefore, it throws an error and ignores the property. This can be pretty useful knowledge if Firefox isn’t behaving like you’d expect it to, or if another browser is rendering better than Firefox.
Or consider the third (highlighted) item in the image. Here, Firefox is having problems with a vertical-align property, but Firefox understands vertical-align. So I clicked the URL to look at the source and found this code:
Here, the problem lies with the code, not the browser. There is no “center” value for the vertical-align property. The author of the code should have written “vertical-align: middle” instead. It’s a small difference in semantics, maybe, but it makes a big difference in how that element is displayed.
So I encourage you to check out the Firefox Error Console sometime. I think you’ll find that it’s a great resource for figuring out why your CSS isn’t behaving like you thought it should. As I mentioned earlier though, it can sometimes be a bit scary to see how many errors a single page can through. The front page of CSSnewbie, for example, throws 18 CSS errors! My only (small) consolation is that all of those errors come from plugins I have installed – my template’s style sheet is clean.
If you have another commonly available tool that you use on a regular basis and would like to see mentioned, please let me know. I’d love to do a review on it. You can either leave a comment on this post or use the contact form. Thanks!