A A A

Archive for the 'css' Category

FireScope: Referencing for Firebug

By Nick Dawe, on 30 January 2009

The Firefox add-on ‘Firebug‘ has become an essential requirement for HTML, CSS and JavaScript development in the past few years. It allows you to inspect page elements on screen, view and edit all its related code, and also includes some basic JavaScript debugging functionality.

Firefox add-on Firebug with FireScope

Last week SitePoint released a new extension for this called FireScope. In addition to the normal information Firebug gives you about a page element, FireScope will also provide comprehensive reference information. It’s particularly handy for those who may be new to developing stylesheets and need quick information about the various rules being shown on screen.

Debugging CSS and JavaScript in Internet Explorer 6

By Nick Dawe, on 14 October 2008

I’ve always preferred developing sites in Firefox because a) it’s a standards based browser, and b) it has a vast array of helpful web developer add-ons*.

Sadly, the reality is that many users will still be viewing your site in Internet Explorer 6. This is particularly true for sites aimed at UCL staff, as StaffWTS is currently using this browser.

I’ve recently been trying to build a Javascript application that works on all browsers, and unsurprisingly had a nightmare trying to get the thing to work in IE6: not only does this browser treat HTML/CSS standards with disdain, but its implementation of JavaScript is of course slightly different.

However, there are a small number of very, very useful tools now available, which really do help when developing for IE6.

MS IE Developer Toolbar screenshot

1. Microsoft’s Internet Explorer Developer Toolbar (pictured above)- Similar to Firebug’s Inspect Mode. View the DOM tree of a page; select page elements; view elements’ CSS properties

2. DebugBar – A web developer toolbar for IE. As well as being able to analyse the DOM tree, you can check javascript functions, validate HTML code, find screen color codes, resize the window to different screen sizes, and much more.

3. Companion.JS - A reasonably detailed JavaScript debugger for IE. IE’s JavaScript error messages are normally quite intelligible, so this is invaluable.

4.  Position Is Everything’s primer on IE vs Standards – Not a tool as such, but just a helpful few pages on CSS problems in IE. To be honest, as helpful as all the tools above are, the most useful thing seems to be to try understand how IE works with JS and CSS, and hopefully avoid even getting as far as having to rip hair out while debugging…
*If you don’t know what I’m talking about, at least see Firebug, the Web Developer Toolbar, and  ColorZilla

Taking a look at CSS frameworks

By Nick Dawe, on 10 September 2008

I’ve really been quite ignorant of the use of CSS frameworks, and felt that I needed to investigate how they worked, and whether they could be used to speed up website development. The idea of a CSS framework (just like frameworks for other programming languages) is that developers can take advantage of core CSS items that are abstracted and therefore able to be used again and again through different sites.

For instance, when developing a site, I often find myself using the following CSS declarations:

.click
{
cursor:hover;
}

.small
{
font-size:0.8em;
}

… ad nauseum. I’ll also always use Eric Meyer’s reset.css code, and so in effect I’ve already constructed a very basic framework of commonly used items.

At the moment, there are now dozens of detailed frameworks available, that will contain reusable items like grid layouts, clean typography, possible ‘widgets’ (e.g. drop-down menus etc). The ultimate aim of course, is that developers can take one of these frameworks, and in a short time create a standards based CSS layout that looks good and theoretically works well on all systems.

Screenshot of Blueprint CSS framework being implemented

Above: Screenshot of Blueprint CSS framework being implemented

This sounds fantastic, and after looking at some frameworks available, I’ll certainly be trying to create a framework of common items that I tend to use repeatedly, which will (hopefully) speed development time up.

However, the downsides are interesting. Including the framework in your site will probably mean that you’re also loading many unused items (this is especially true for some of the more comprehensive frameworks available). If you’re relying on frameworks for layouts, I’d also imagine you’d find yourself frustrated when trying to make small layout changes that haven’t been covered by these frameworks. One further point, and possibly most important of all, is the semantic effect of using this kind of framework.

Many frameworks that are used for constructing layouts rely on generic classes such as ‘span-1′, ‘span-20′, ‘prepend-1′, etc. For the developer these are descriptive of the CSS properties inside each class (e.g. span-1 might refer to a width of 10px, and span-20 might refer to a width of 200px). But this bears  absolutely no relation to the content within the various divs that might use these items. With all the talk of the semantic web, surely it’s worth ensuring ids and classes are more descriptive; that sidebars, news feeds, footers, etc. can actually be identified as such. Of course, it’s always possible for developers to add and edit CSS and HTML to make up for these problems, but that’s surely beginning to defeat the time-saving point of the framework.

Personally, I’m at least inspired to create more formal frameworks for my own development work, but currently won’t be using these methods for more detailed work, such as layout. Having said that, this is the web, and so I’m sure it won’t take long for these issues to be dealt with and for some more ‘mature’ frameworks to be made available.

See also: