A rarely used CSS property that can be very useful given the right circumstances is the table-layout property. It has great rendering speed benefit when used properly. Obviously this will only apply to HTML <table>s, which I know none of you would EVER overuse. Tables are not totally evil, they have their proper implementations and their really, really bad ones. OK, on to the code:

/* Set table to "fixed" (fastest render) layout */
.fixed_table {
    table-layout: fixed;
}

/* Set table to "auto" (best fit) layout. This is the default */
.auto_table {
    table-layout: auto;
}

Or alternatively in JavaScript:

    $('elementID').style.tableLayout = "fixed";

When you want to use table-layout: fixed

So how fixed table layout works is that the browser looks at the first row of the table and determines how to render the table based on the table width and the columns but NOT on the content of the columns. This allows large tables to be rendered faster but risks the table not displaying “optimally”. The best place to use table-layout: fixed is on larger tables (probably > 50 rows) and fairly uniform table cells (as in the cells should evenly divide the table). The benefit can be significant when the browser does not have to calculate the optimal width of each table cell.

When you want to keep the default style table-layout: auto

There is almost no benefit to setting a small table totable-layout: fixed. Furthermore, if the cell content varies greatly in length, your table may look really funky and different browsers may display your table in quite odd ways. Let me show you what I mean. Here is a quick example:

Fixed table-layout

Header 1	Reallyreallyreallyreally looooong header	Header 3
Reallyyyyyyyyyy Looooooong cell conteeeent	short	Normal cell content
short	ReallyyyyyyyyyyLooooooong cell conteeeent	Normal cell content

Auto table-layout

Header 1	Reallyreallyreallyreally looooong header	Header 3
ReallyyyyyyyyyyLooooooong cell conteeeent	short	Normal cell content
short	Reallyyyyyyyyyy Looooooong cell conteeeent	Normal cell content

So don’t mess with table-layout: auto in these circumstances because it is just too unreliable. The harsh reality here with the automatic table layout is that the:

algorithm is sometimes slow since it needs to access all the content in the table before determining the final layout

This is why nesting or otherwise overusing <table>s is a bad idea.

For those interested, here is the official spec from the W3C. Have you ever used the table-layout CSS property? Was it useful and what was the result? Let’s hear it!

It’s been awhile since we tweaked our Firefox chrome, and it’s about time we get to hack Mozilla’s wonderful email client Thunderbird.

In this post I’ll give you the necessary tools to change the look of Thunderbird and give you some suggestions (and code, of course :) to help you along the way. First, let me give credit to Twister MC’s wonderful post that I will be using as a reference for the label coloring scripts below. OK, let’s get started!

To start off we are going to need to setup our userChrome.css file for Thunderbird. Here are the instructions for that. We just basically need to create a chrome directory in our Thunderbird profile with a userChrome.css file in it. Another note here is that you can create a Stylish script using the Stylish Add-on for Thunderbird and putting these CSS snippets in there. Does Stylish have any limitations here? Let me know in the comments if so.

Right! So open up your userChrome.css file in your favorite text editor (not Microsoft Word, I recommend jEdit) We’ll need to begin the file by defaulting to the XUL namespace:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */

Then we get to the good stuff. Here are some snippets I have created for you to put in the userChrome.css file:

/* Change menu and dialog font sizes */
menupopup > * {
    font-size: 12px !important
}

/* Change font-size of email list */
.tree-rows {
    font-size: 10px !important;
}

/* Change all fonts to Century Gothic */
* {
    font-family: "Century Gothic", sans-serif !important;
}

/* Hide status bar */
#status-bar {
    display: none !important;
}

/* Get rid of the throbber */
#throbber-box {
    display: none !important;
}

/* Make Sidebar header big and bold */
#folderpane-title {
    font-size: 1.2em !important;
    font-weight: bold !important;
}

/* Hide Menus: menu_File, menu_Edit, menu_View, messageMenu, ltnCalendarMenu, tasksMenu */
#menu_File, #menu_Edit, #menu_View {
    display: none !important;
}

/* Remove disabled toolbar buttons until enabled */
toolbarbutton[disabled="true"] {
    display: none !important;
}

/* Make unread messages blue and italic */
treechildren:-moz-tree-cell-text(unread) {
    color: #CCCCFF !important;
    font-style: italic !important;
}

/* Change background color of unread messages to slightly red */
treechildren::-moz-tree-cell(unread) {
    background-color: #330000 !important;
}
treechildren::-moz-tree-cell(unread,selected) {
    background-color: #660000 !important;
}

/* Change colors of replied messages */
treechildren::-moz-tree-cell(replied) {
    background-color: #003300 !important;
}
treechildren::-moz-tree-cell(replied,selected) {
    background-color: #006600 !important;
}
treechildren::-moz-tree-cell(replied,current) {
    background-color: #009900 !important;
}
treechildren:-moz-tree-cell-text(replied,current) {
    color: #FFFFFF !important;
}

/* Change color of deleted messages */
treechildren::-moz-tree-cell(imapdeleted) {
    background-color: #999999 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted) {
    color: #FFFFFF !important;
text-decoration: line-through !important;
}
treechildren::-moz-tree-cell(imapdeleted,selected) {
    background-color: #333333 !important;
}
treechildren::-moz-tree-cell(imapdeleted,current) {
    background-color: #666666 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,selected) {
    color: #DDDDFF !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,current) {
    color: #DDDDFF !important;
}
treechildren::-moz-tree-cell-text(imapdeleted, offline) {
    background-color: #DDDDDD !important;
    text-decoration: line-through !important;
}

/* Folder pane(color/text) and Message pane(color) */
treechildren {
    background-color: #2D2D2D !important;
}

/* change Message Pane text */
treechildren:-moz-tree-cell-text(unread) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
    color: #D50000 !important
}
treechildren:-moz-tree-cell-text(read) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
}

/* Set no-label (default) bottom border */
treechildren::-moz-tree-cell {
    border-bottom: 1px solid #FFFFFF !important;
}

/* Default Important Label */
treechildren::-moz-tree-cell(lc-FF0000) {
    border-bottom: 1px solid #FF0000 !important; background-color: #FFCCCC !important;
}
treechildren::-moz-tree-cell-text(lc-FF0000) {
    color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-FF0000, selected) {
    background-color: #FF0000 !important;
}
treechildren::-moz-tree-cell-text(lc-FF0000, selected) {
    color: #FFFFFF !important;
}

/* Default Work Label */
treechildren::-moz-tree-cell(lc-FF9900) {
    border-bottom: 1px solid #FF9900 !important;
    background-color: #FFCC99 !important;}
treechildren::-moz-tree-cell-text(lc-FF9900) {
    color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-FF9900, selected) {
    background-color: #FF9900 !important;
}
treechildren::-moz-tree-cell-text(lc-FF9900, selected) {
    color: #FFFFFF !important;
}

/* Default Person Label */
treechildren::-moz-tree-cell(lc-009900) {
    border-bottom: 1px solid #009900 !important;
    background-color: #99FF99 !important;}
treechildren::-moz-tree-cell-text(lc-009900) {
    color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-009900, selected) {
    background-color: #009900 !important;
}
treechildren::-moz-tree-cell-text(lc-009900, selected) {
    color: #FFFFFF !important;
}

/* Default Todo Label */
treechildren::-moz-tree-cell(lc-3333FF) {
    border-bottom: 1px solid #3333FF !important;
    background-color: #CCCCFF !important;}
treechildren::-moz-tree-cell-text(lc-3333FF) {
    color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-3333FF, selected) {
    background-color: #3333FF !important;
}
treechildren::-moz-tree-cell-text(lc-3333FF, selected) {
    color: #FFFFFF !important;
}

/* Default Later Label */
treechildren::-moz-tree-cell(lc-993399) {
    border-bottom: 1px solid #993399 !important;
    background-color: #FFCCFF !important;}
treechildren::-moz-tree-cell-text(lc-993399) {
    color: #000000 !important;
}
treechildren::-moz-tree-cell(lc-993399, selected) {
    background-color: #993399 !important;
}
treechildren::-moz-tree-cell-text(lc-993399, selected) {
    color: #FFFFFF !important;
}

You can add to these easily by using the Thunderbird DOM Inspector. I know my brilliant readers have some more of these up their sleeves so let’s see what tweaks you have for Thunderbird in the comments!

Among the types of CSS selectors, one that is often overlooked is the CSS Adjacent Selector.

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

The CSS code

h4 + p {
    font-weight: bold;
    color: #FFFFFF;
}

The text below is a simple example of the above code:

This is normal heading 4 text

This is the <p> after the heading. It should be bold and white.

What’s even better is that this seems to work perfectly in IE 7 (UPDATE: it seems that this does not work in IE6, so it will be a bit before this is usable on any large scale. However, it is still good to understand these obscure CSS selectors because you may come across them as a professional, especially if IE8 successfully puts IE6 out of the top 5 browsers), Firefox, Opera, and Safari. Now I know what you’re thinking. Where in the world am I going to use this?

Perhaps we could use something like this to do something to all rows in a table except the first row? What if we knew the next element after an <img> tag was going to be a custom caption that we wanted to place properly underneath our image? The only problem I see is that this couples the HTML and CSS more than we might like sometimes. However, there are many places that probably would benefit from something this simple. Simplicity rules. Now that you know how to use it I have every confidence you can come up with a brilliant use for it.

What ideas do you have to use this CSS gem? What other selectors have you found useful but don’t often see?