loge.hixie.ch

Hixie's Natural Log

2003-12-02 17:14 UTC The mystery of why only four properties apply to table columns

Have you ever wondered why columns in CSS can only have four properties applied to them?

On the face of it, it seems strange — if you wanted to make all the cells in a column of prices be red and right-aligned, the following snippet of CSS would seem to make sense:

col.prices { color: red; text-align: right; }

...and indeed, IE6 supports this. So why does the spec say it shouldn't?

The answer to this question lies in another question: How would you implement it?

The colour of text is dependent on the 'color' property of its element. Unless specified, the 'color' property (basically) defaults to 'inherit', which means "take the value of the parent element".

So for some text in a cell, the colour is determined by the 'color' property of the cell, which is taken from the row, which is taken from the table, which is taken from the table's parent, and so on.

What about the column? Well, the column isn't one of the cell's ancestors, so it never gets a look-in! And therein lies the problem.

Now, while that explains why it doesn't apply in the current model, it doesn't actually explain why the model couldn't be changed a little. For example you could say that if a cell has no value set, it should inherit from the column instead of the row.

Unfortunately, you then run into two problems. The first is that in CSS, everything is always set. That isn't a huge problem, because you could always say that the initial value of certain properties was 'auto' or 'normal', and have that value Do The Right Thing when inherited. It wouldn't be pretty, but it could be done. (This is the approach I used to solve some similar problems in the CSS3 Generated and Replaced Content module.)

The second problem is rather more fundamental, and to explain it we'll take a look at the overall processing model for CSS.

As you read this, remember that what we want to do is compute the value of 'color' on cells from the appropriate table column.

Here is how CSS works, at a very high level:

  1. Parse the stylesheets and the document.
  2. For each element in the document:
    1. Decide which CSS rules apply.
    2. Perform the CSS cascade with those rules.
    3. Perform inheritance of properties if the result of the cascade is the keyword 'inherit' (or no specified value for inherited properties).
    4. Perform computations (turn 'em's into 'px's, etc). According to CSS2.1, the getComputedStyle() DOM method returns these values.
    At this point, every element has a value for every property ('display', 'color', etc).
  3. Lay out the document.
  4. Paint the document.

Now, columns are only columns because their 'display' property is set to 'table-column', and a cell is only a cell because it's 'display' is 'table-cell', and the exact relationship between a cell and a column can only be calculated when laying out the document, since you have to take into account what cells span several columns, etc.

So you know which cell is in which column during stage 3, and not earlier. But the stage where you would work out what the color property of a cell is step 2! And at this stage, you don't yet know which column applies to which cell, so you can't go and ask the column for the value.

Hence why the spec limits the properties that apply.

So why does it work in IE6? Well, it can do this despite what I said above because it doesn't support explicit CSS inheritance (the 'inherit' keyword), it doesn't support getComputedStyle(), and it doesn't support 'display: table-column' and the other table display types. In IE6, the model is probably more like:

  1. Parse the stylesheets and the document.
  2. For each element in the document:
    1. If it's a table, map out its structure.
    2. Decide which CSS rules apply.
    3. Perform the CSS cascade.
    4. Perform inheritance of properties, inheriting magically from table columns if the column isn't inheriting its style itself.
  3. Lay out the document.
  4. Paint the document.

As you can see, this is rather different from what the specs say, and is only possible because the model has been quite radically changed, at the expense of a number of useful features.

By the way, if anyone has a way to solve this problem, the working group would probably be very interested in hearing it. The www-style@w3.org mailing list would be the place to make such suggestions.

Pingbacks: 1 2

2003-11-30 19:43 UTC Boring Web log

People keep complaining that this site's presentation is boring. (Actually what they usually complain about is that the stylesheets are ridiculously complicated, find way too many bugs, and that once fixed, the result isn't even interesting enough to warrant the effort. But I know what they mean.)

Fair enough, I thought, I can see what they're complaining about. After all, I haven't made my text unreadably small, I haven't used fifteen different font faces, and I haven't tried to make colours disguise the fact that underneath the shell, the content is remarkably boring.

However, my attempts at coming up with something more "fun" and "exciting" and "pretty" were somewhat, ah, unsuccessful. The basic truth of the matter is that I suck at Web site design. My idea of a good Web page is a green square with no red present.

And then, earlier today, I came across a set of screenshots of pretty looking Web logs. Interesting, I thought, maybe I can get some "inspiration" from these guys.

Now, one thing to note about this Web log is that there is no list of links, no calendar, no search tool, no fancy categories, no display of what CD I'm listening to right now no copyright, no colophon, indeed, there is precious little except my rambling entries, the header, and a single link to one of my other sites.

So as I looked at the screenshots, I mentally blocked out all the extraneous nonsense that most Web logs appear to saddle themselves with and concentrated on how the content was styled. What I learnt surprised me. It turns out that in the majority of cases, the actual Web log content of these sites and other logs that I read is styled in an even more boring way than my own!

Anyway, if anyone feels they know what this Web log should look like, I would ask them to please mock it up in a graphics package and send me the idea as a JPEG. (Whatever you do, don't try to do it in CSS or send me a stylesheet or try to change the markup or anything. I won't be using your CSS anyway, and the markup isn't changing, at least not for any stylistic reasons.) If I like any of the ones I get, I'll look into writing a stylesheet for it. If you're interested in doing this, it may interest you to know that the same stylesheet will be used for index.hixie.ch, www.hixie.ch, software.hixie.ch, etc.

2003-11-18 16:44 UTC Movement

I moved again yesterday. I now live in a recently renovated flat in an old building closer to the center of town. I would take the bus to go to work, except that the bus stop nearest to my new flat is actually the bus stop nearest to work, so that wouldn't really work.

Actually I technically moved on Sunday, because that's when Cutter very kindly moved my stuff for me (he lives in the new flat too). I didn't see the flat until yesterday though as I was out of town.

Also, it snowed today. I may have to stop cycling to work if it does much more of that!

2003-11-14 18:23 UTC An hour in the life of gate A22

The Braathens plane is parked at gate A22, the gate's bridge firmly pressed against the plane's forward left door, passengers arriving in dribs and drabs.

Outside, the plane's gate is surprisingly calm, nobody milling about. At the front, a cable rising from a panel in the ground is plugged into the plane, near the cone, on the right hand side. Orange and white cones stand calmly around the wings, presumably warning people of the danger of walking under them. Baggage carts are littered around the front and back of the plane, two at the front, one at the back. The baggage hold doors, both forward and aft, are open.

A baggage cart tractor drives past, stopping briefly to leave its sole cart behind, near the rear of the aircraft. Other airport vehicles (taxis, baggage tractors, empty and full baggage trains, unidentified trucks with squat shapes) keep passing the plane on their way to and from more interesting places, without paying it any heed.

Now the passengers are streaming in, and a queue has formed in the bridge. Another tractor arrives, and leaves its baggage cart at the back of the plane before leaving again.

Then, a short blue truck arrives and parks near the front of the aircraft, leaving its sidelights shining. A man gets out, and pokes at the plane, near where the cable is plugged in. He proceeds to look in the baggage hold and steps towards the back of the plane, out of sight.

A white van parks under the gate's bridge briefly to unload some unidentified bags into a nearby container. Meanwhile, a member of the ground crew personnel leaves the plane via the bridge, walks down some steps, and enters his own van. The two vans drive away in different directions.

The plane's taxi arrives. It is an oddly shaped vehicle with a small cabin and two wheeled prongs extending out of the front. Its driver calmly gets out and walks to the rear of the aircraft, possibly to speak with the guy who arrived in the short blue truck, whose side lights are still illuminated.

The stream of passengers has mostly died down. A couple of late arrivals in camouflage army uniforms walk down the bridge to the plane. A man in a suit carrying an overpacked briefcase and a file, which he is intently trying to entice into the briefcase, follows them.

Movement at the back of the plane. The carts are being moved around, empty carts pushed out of the way, carts still carrying baggage being pushed towards the hold. The taxi driver walks away from the plane, behind the bridge's support tower.

One of the cart tractors returns to collect the empty carts. The driver hops out, links three of them together, hooks them up to his tractor, and drives off, making a wide sweeping circle to get back onto the road. Vehicles are still occasionally passing the road, of all shapes and sizes. A squat flat truck with what appear to be manholes. A big truck with a two man lift on an extendible arm.

Blue truck man takes some orange paper from the front of the taxi and attaches it to the front wheel of the plane, unplugs the plane from its ground connection, and drives the taxi into the plane's ront wheel, where mandibles move out of the taxi's prongs and take hold of the plane's wheel. He then gets out of the taxi and leans back against his blue truck.

The taxi driver returns, pulling behind him a small suitcase, which he pushes into the hold, before firmly shutting the hold door. He walks to the back wheels of the aircraft, and removes a couple of rubber wheel wedges that were holding them in place.

Blue truck man walks off and finds another suitcase which he brings to the back of the aircraft, where the two men together shove the case into the hold. The taxi driver picks up one of the clearly ineffective warning cones on his way back and throws it to the gate A20 bridge tower, then gets into his taxi. Meanwhile blue truck man walks around the plane, presumably to check all is well.

A long and lean SAS aircraft moves past in the background. A white van stops unnoticed for a few minutes then departs, its mission unknown.

A man in the bridge picks up a phone briefly, then sees one of the gate clerks run down the bridge to hand him a piece of paper.

The man with the blue truck gets bored and walks towards the taxi, where he opens the door and begins chatting to the taxi driver.

Another SAS plane is taxied down the taxiway in the opposite direction. An short Air France plane silently moves back across towards where the original SAS plane went.

A short bright orange tanker truck speeds past on the road in front of the gate, quickly followed by a small empty baggage truck.

Someone in the bridge drives the extendible bridge arm back from the plane. The taxi pushes the plane back along the gate, blue truck man walking alongside. Suddenly, a puff of smoke comes out of one of the aircraft's engines! Blue truck man seems unmoved. At the end of the yellow line along which the plane has been pushed, the taxi unhooks itself from the plane and drives backwards, pausing only briefly for the blue truck man to put his orange piece of paper, previous attached to the front wheel of the plane but now retrieved, back on the taxi. The taxi then speeds away, quickly followed by the short blue truck which, once its driver has returned to it, makes a wide but fast circle and rejoins the road.

After a moment's pause, the aircraft makes a very tight turn and drives itself away towards the runway.

The gate returns to its earlier calm state, the bridge having now been closed from the outside environment by an automatic folding panel. A member of the ground crew is busying himself with whatever business is needed in the bridge.

As this happens, another blue truck, this one with four empty baggage carts attached, comes tearing into the gate and stops near the two abandoned carts. The driver gets out, and moves the carts about. A tractor arrives, and its driver has a few words with the first driver, before driving away again.

The blue cart's driver reopens the panel in the ground and pulls out the long cable and two rubber wheel wedges. After waiting a few minutes, he returns into his blue truck, which proceeds to release clouds of smoke from its exhaust pipe.

The man in the bridge is still pouring over whatever he is finding so fascinating. The man in the truck, clearly bored beyond help, cleans his wing mirrors.

A ramp vehicle comes racing through gate A22 on its way to gate A20, rapidly followed by an empty baggage truck. A black bird swoops down to follow them.

Gate A22 continues idling, oblivious to the frenzy of activity going on in the adjacent gate. A white and blue van with a line of red and white stripes parks in gate A22, although no-one gets out. The empty baggage truck that had sped after the ramp vehicle into gate A20 comes speeding back out through gate A22, unconcerned that mere moments ago, that same course would have sent it crashing into the now departed plane.

Smoke continues to billow out of the back of the blue truck.

An airport patrol car slowly drives past, apparently eager to find evidence of illicit activity. Gate A22's stillness appears to disappoint it, however, and it doesn't stop.

Another black bird flies about and then lands on the bridge. It looks around for a few minutes, but seeing no activity except for the smoke still pouring out of the waiting blue truck, it pecks ineffectually at the gate's roof then flies off, onto greener pastures.

Fog closes in. Finally, a plane uncertainly emerges from the fog and makes its wobbly way onto the yellow line, which it then follows towards the front of the gate. The man in the truck gets out of the truck, the man in the bridge opens the bridge's folding panel. As the plane comes to a stop, the bridge extends slowly towards the plane door, creeping forward centimeter by centimeter. The truck man plugs the cable into the aircraft, and an empty baggage trucks swings into the gate. The rubber wedges are placed against the back wheels of this new aircraft. The lights in the bridge come on, and passengers come streaming out, the bridge now pressed firmly against the aircraft.

Baggage is shovled out of the baggage hold and into the empty baggage carts. A car marked "127" drives into the gate and parks, although nobody gets out. Passengers continue to stream out of the plane, walking along the bridge and up the moving staircase into the terminal.

The door of the white and blue van with a line of red and white stripes opens and a man gets out, walks up the stairs onto the bridge, and into the plane.

The two baggage carts that have been sitting in the gate since before the previous plane left are filled to capacity, and the driver of the empty baggage truck hooks them up to his truck and drives away. The driver of the blue truck with the four baggage carts drives them to the back of the plane in a cloud of smoke and begins loading the baggage onto those empty carts.

A flat squat truck with what appear to be manholes in the top drives into the gate, followed by a truck with pipes. The flat truck parks near the front of the aircraft and plugs large pipes into the plane; the second truck drives on.

Another hour in the life of gate A22 begins.

Pingbacks: 1

2003-11-09 22:27 UTC SSSS

Since my boarding pass was once again marked SSSS this morning I took the opportunity to ask what could trigger a quad-S screening selection. Apparently they are not allowed to profile based on nationality, but paying by cash and changing flight plans at the last minute are only 2 of 30 criteria that they use to pick customers that should be screened extra carefully. In addition, there is a 15% chance that people who don't match those 30 criteria will be selected randomly.

It really is no big deal though. When you are used to it, you can actually use the SSSS marking to fast-track yourself through the security checkpoint during peak hours. Just skip the queue and show your quad-S marking, which lets you go through a special lane. Take your shoes off, put everything that is in your trouser pockets into your coat pockets. When you get to the baggage screening machine, take your laptop out and put everything (shoes, coat, bag, laptop) into the trays provided. (You have to do this anyway, even if you are not marked for extra screening).

Then when you arrive get the other side of the metal detector, follow the security personnel to their extra-screening area, and simply follow their instructions to the letter (sit here, lift this leg, lift that leg, stand, arms up, and so forth). In no time, you'll be out of the security area, on the "safe" side, while the people who are not marked for extra screening will be still queueing, providing a largely unprotected soft target for terrorists.

It's rather ironic that the measures for increasing security actually result in making the higher-risk passengers safer and the normal passengers an easy target.

Pingbacks: 1