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:
- Parse the stylesheets and the document.
- For each element in the document:
- Decide which CSS rules apply.
- Perform the CSS cascade with those rules.
- Perform inheritance of properties if the result of the cascade is the keyword
'inherit' (or no specified value for inherited properties).
- 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).
- Lay out the document.
- 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:
- Parse the stylesheets and the document.
- For each element in the document:
- If it's a table, map out its structure.
- Decide which CSS rules apply.
- Perform the CSS cascade.
- Perform inheritance of properties, inheriting magically from
table columns if the column isn't inheriting its style itself.
- Lay out the document.
- 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
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.
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