Mozilla Firefox tips

For ages I’ve been wishing it were possible to highlight part of a webpage and just view the source for that part, rather than scouring the whole page’s source for the relevant section. Now I discover, to my annoyance and delight, that Firefox can do this… sort of…

If you hold down the CTRL key and left click on part of a web page, that section of the page will be highlighted. If you right click on the selection and choose ‘View selection source’, the source code for that part of the page will be displayed.

That comes from a tips & tricks article on the MozillaZine Forums, which is crammed full of useful snippets like this. Many of them have been sorted into this knowledge base article, but I didn’t see the above one in there.

It’s not quite accurate. ctrl-click actually selects a table cell, not any arbitrary block. So this limits its usefulness. But it’s helpful for sites that are still using masses of nested tables for layout.

The two extensions I cannot live without are Web Developer and Session Saver.

Ordering of dynamic pseudo-class blocks in stylesheet

The best order for dynamic link pseudo-class blocks in your stylesheet is (from W3C):

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

The order matters because these dynamic pseudo-classes are not mutually exclusive in CSS2 (some of them were in CSS1), and later rules override earlier ones if they clash. In the example above, if a:link were placed last, all links would be the same colour (red) irrespective of whether they are visited, active or hovered.

Actually this doesn’t only apply to links; in some browsers any element can have :hover, for example.

CSS Golden Rules: Class Names

Name your CSS classes according to what they are for, not what they look like.

That is, use names like codeblock, quotation, document-title, error-message and so on.

I’m currently having to deal with a mess of stylesheets for a client which are full of classnames like bigblack and reddots and bottomrightbox. They are just not helpful. I can see what it looks like by reading the stylesheet, what I want to know is what these classes are expected to be used for! If you have classnames like this, they’ll end up being used indiscriminately, and then you’re in real trouble if you ever want to change anything, because you have no idea what might be affected. But inevitably, at some point, the presentation of the class will get changed, but you can’t change the name because it’s too widely used, so it becomes downright misleading — you have a bigblack class which actually makes the text green or something…

Even worse are names like nobordertable. Here we have an extra dose of useless or wrong information, with the implication that this class is for use with tables (again without telling me what *sort* of table it’s for). Well why not specify that with a selector like table.classname? Then maybe I wouldn’t be finding this class applied to divs, spans, blockquotes….

Addendum 22nd March 2005: The W3C’s explanation is probably clearer.

X Terminal Program Comparison

As a result of eye problems, I started to investigate the visual features offered by different X terminal programs, such as support for TrueType fonts or vertical spacing adjustment. This article features a comparison table and some notes about what I have found so far. It may be of particular interest to the partially sighted or anyone who works long hours in terminal windows. Continue reading X Terminal Program Comparison