Posts from 2009

(This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008’ series.)

The portion of the feedback devoted to shapes had two overarching themes, as I saw it.  That makes this entry a bit short, but when I tried to combine it with my feedback on “Graphical Effects“, it quickly got too long.  So, a little amuse cerveau, as it were.

Animations, transformations, and so on — the WebKit team have of course been having a field day in this area, and what they’ve done will likely make is way to other browsers.  Or not.  I don’t know.  I’m not entirely thrilled about the effort that’s gone into those properties when there are so many other, more basic things that need love and care, but there’s no denying the essential coolness of slowly rotating an entire page.  Which I totally need to do the next time I give a presentation.

I’m not going to get into the “these things are behavior and therefore JavaScript!” argument.  CSS already does behavior (think :hover) and it’s going to do more over time.  I don’t see how that historical pressure can be resisted for much longer, short of outright refusing to take on any more behaviors and thus making itself a prime candidate for replacement with something else.  We may as well do our best to make sure CSS does good behaviors well, in ways that makes the most sense to the most authors.

So that’s basically my feedback: since we’re going to do it, let’s do it right.  Apple’s made a start, and unless the syntax they’ve defined in their CSS Animations draft is completely unworkable in other browsers for technical reasons, then let’s just roll with it.  And please note I said the syntax, not the overall concept.  (Ditto for their CSS Transforms draft.)

Stuff that isn’t rectangular — including both polygonal element boxes and polygonal floats.  I’ve wanted these for at least a decade, so it’s little surprise that I’m in favor.  Ragged floats were invented as a hack to make the latter happen, of course, and the basic idea’s been improved upon more than once.

The tricky part, of course, is actually defining polygons.  Regular polygons, as in hexagons and octagons and dodecagons, are not terribly difficult; but creating an irregular polygon requires defining a set of point coordinates in relation to some origin and resolving what happens when the lines cross over each other and… well, yeah.

The build-on-what-exists approach would just adopt the syntax HTML area elements use in the coords elements.  There would be two interesting questions there, which are what happens with negative coordinate values, and what happens if you draw a polygon that cuts through some of the element’s content.  For example, you have a div containing an image, and you define the polygon to be smaller (in places) than the image.  Is the browser obligated to prevent content overlap in such cases?  I would tend to say no but I can see arguments for the opposite view, particularly when it comes to floats.

Then there’s the problem that you’d have to define a separate polygon for every element that needed a non-rectangular float, as Bert Bos notes in his thoughts on the topic from a couple of years ago.  His contour idea is certainly interesting, though I’d then start to wonder how you define a contour point on, say, an irregular faded gradient.

Anyway, I thought about adapting clip to the purpose of defining float polygons, but then I remembered the long, tortuous hell that is the history of clip (and offset-clip) and decided that a new property is the way to go.  Clean break, start fresh, et cetera.  I don’t know what it would be called.  content-shape, maybe, to go with element-shape.  Or not.

• CSS3 Feedback: Animated Shapes was published on Thursday, February 19th, 2009.
• It was assigned to the Commentary, CSS, Standards, W3C, and Web categories.
• There have been fourteen replies.

(This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008’ series.)

Not surprisingly, there was a lot of community feedback asking for better layout mechanisms.  Actually, people were asking for any decent layout mechanism at all, which CSS has historically lacked.  Floats mostly work, but they’re a hack and can be annoyingly fragile even when you ignore old-browser bugs.  Positioning works in limited cases, but does not handle web-oriented layout at all well.

Why do we use floats for layout, anyway?  clear.  That’s pretty much the whole answer.  The unique in-flow/out-of-flow nature of floats means they interact with each other and with the normal flow, which means they can be cleared, which makes them useful.  Because with clear, we can float layout blocks around and then push other non-floated blocks, like footers, below the floats.

Positioning, of course, permits total layout freedom in the sense that you can put a layout block anywhere with respect to its containing block.  The downfall is that absolutely positioned elements are entirely out of the normal flow, so they can’t stay out of each others’ way like floats do, and you can’t clear anything with respect to a positioned element.  If there had been a position-clear or its equivalent from the outset, we’d never have bothered with floats.

(And if we can just add position-clear to CSS, that would be completely awesome.  It’s been done with JavaScript and it will most likely be done again and better.  It wouldn’t even be that hard to implement, at least for 99.5% of cases.)

All this is why the old “only use tables for layout” argument keeps coming up over and over: strip away the overheated rhetoric and obvious link-baiting, and you find the core of a real need.  Because as powerful as CSS can be, table cells do certain things very easily that CSS makes very, very hard.  Cells stretch vertically, keeping equal heights as a matter of their intrinsic nature.  They stay out of each others’ way, while still being allowed to sit next to each other and use any sizing dimensions.  They tie their layout to their parent elements, and vice versa.

There are no equivalents in CSS.  There have been various very clever attempts to replicate bits and pieces of those capabilities using CSS.  What CSS does, it does very well: if you don’t need equal-height layout blocks, then no problem.  If you do, it’s a massive pain.  Clever techniques provide substitutes, but can’t replace what tables already do.

And please, let’s put the whole “display: table-cell will grant those abilities through CSS” to rest.  Saying that is just saying “use tables for layout” with different words.  Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse.  Using element names other than table and td to create layout tables, and then claiming it’s not using tables for layout, borders on self-deception.

Not to mention doing things that way means you’re doing your layout in a highly source-order-dependent fashion, which was one of the things about table layout we were trying to get away from in the first place.

So how do we get really powerful source-order-independent layout?  I wish I knew.  The Advanced Layout module has been sitting around for a while now, and even if you’re a fan of defining layout as ASCII art—which I find repels and appeals in equal measure, but that’s probably just me—there appears to be close to zero implementor interest.  So how do we get those abilities in a form that implementors will, y’know, implement?  I don’t know.  I don’t care.  We just need it, and have needed it for a good decade or so.  Without it, CSS is a styling language but not a layout language.  We’ve bent it into being something close to a layout language, which is nice but not really ideal.

Maybe CSS isn’t the place for this.  Maybe there needs to be a new layout language that can be defined and implemented without regard to the constraints of the existing CSS syntax rules, without worrying about backwards compatibility.  Maybe that way we can not only get strong layout but also arbitrary shapes, thus leaving behind the rectangular prison that’s defined the web for almost two decades.

I don’t have a concrete idea to propose here, because it’s not up to us any more.  A solution was worked out over the course of several years and then found wanting by the implementors.  Really, it’s up to the implementors to figure it out now.  I personally would like to just lock the browser teams from Microsoft, Mozilla, Opera, and Apple in a room and not let them out until they’ve defined something that works and they’ve all agreed to implement soonest.  I might even supply food and water.

And yes, I just advocated doing this outside the W3C process.  Why wouldn’t I?  The process has, in the last decade, not produced anything even remotely resembling an answer to this problem.  Time to try another path and see if it gets any closer to the goal.

No doubt someone’s going to spin this as “See, even noted standards zealot Eric Meyer now says CSS is flawed!”—only they’ll be wrong because this isn’t a now thing.  I’ve been saying this for years in interviews, in person, and in general.  Any time someone asks me what CSS is missing or should do better, the answer has always been a variant on “a strong layout system”.  I’ve been saying it for at least a decade.  So I’m not saying it now.  I’m saying it again.  And again and again and again and…

If I sound frustrated, it’s because I am, and have been for a good long while.  I’m not the only one.  It rankles to have CSS be, as Winston Churchill would have put it, the worst form of layout except for all the others that have been tried.

• Wanted: Layout System was published on Tuesday, February 17th, 2009.
• It was assigned to the Browsers, CSS, Rants, Standards, and W3C categories.
• There have been one hundred thirty-eight replies.

(This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008’ series.)

In this round, layout.  Not all of it, but the bits that struck me as either really useful or really, really way too long overdue.

Float containment — yes, we need a property that does just that.  As long as we’re tied to floats for layout—and I plan to rant about that soon—there should be a clear, unambiguous, intentionally defined property that tells elements to wrap themselves around floated descendant elements.  overflow works in most cases but can fall down in unusual circumstances (I’ve seen scrollbars appear where none were actually needed) and anyway, it wasn’t intended to provide the wrapping effect in the first place.  That it does so is a happy side effect, but it’s still a side effect.  The rest of the float-wrapping techniques are even more convoluted.  “There are already ways to do that so we don’t need a property” is rather like saying “we can already do layout with tables so why do we need CSS layout?”.

Positioning by center — yes, please.  The way to center an absolutely positioned element within its containing block is to set the top and left to 50% each and then define negative top and left margins that are half the positioned element’s height and width.  That’s just awful, and requires at least an explicit width, if not an explicit height.  When I did the structured timeline, here’s how I got the version numbers to center below the dots:

#timeline tbody td p {
	position: absolute;
	top: 50%;
	width: 2.1em;
	margin: -5px 0 0 -1em;
}

See that -1em left margin, and the 2.1em width?  Just to get the center of positioned elements’ boxes sit on top of a certain left offset (defined elsewhere in the CSS).  Ditto the negative top margin, to pull it upward just enough so that the elements’ boxes would have the point five pixels down from their tops line up with the vertical midpoint of their containing blocks.

I wanted to do something like this:

#timeline tbody td p {
	position: absolute;
	top: 50%;
	position-anchor: 50% 5px;
}

That would have said that the point in the center of the absolutely positioned element should be placed at the point in the containing block 21.7% down from the top and 44% of the way across from the left.  That would hang the positioned element’s center on that point, regardless of the size of the positioned element—note that I took out the width.  I could stop defining explicit sizes and just let the elements be the size they want to be to show their content.

The problem is that approach doesn’t fit at all well with the way positioning layout is defined.  Suppose I said this:

#timeline tbody td p {
	position: absolute;
	top: 50%; bottom: 0;
	left: 50%; right: 25%;
	position-anchor: 50% 5px;
}

Now what?  I’m not even sure myself.  Maybe define rename it to position-offset and define percentages to be relative to the height and width of the positioned element (not its containing block), so that it doesn’t interact directly with the offset properties like top and right?

All I want is a way to hang elements off of offset points, and not be restricted to the corners of the elements, and have the solution work even when the elements have automatic height and width, and not require extra markup to make it happen.  Oh, and a ponycar.

Box sizing — what in the nine hells of Valeria is taking so long?  We needed that one ten years ago.  I no longer care if it’s done as its own property or as new keywords on height and width.  I just want it.  Someone will make it happen, with or without the WG or implementors—mark my words.

Same-height elements — yes, a way to tie element heights (whether they’re siblings or not) together would be welcome, although I can see how specifying it in an implementable would be tricky; no, display: table-cell  is not the answer.  Soon I will rant about this.  Soon.

• CSS3 Feedback: Layout was published on Monday, February 16th, 2009.
• It was assigned to the Commentary, CSS, Standards, W3C, and Web categories.
• There have been fourteen replies.

(This is part of the Feedback on ‘WaSP Community CSS3 Feedback 2008’ series.)

Out of all the selector feedback, selector blocks was the part that really caught my attention.  I also see the usefulness of a parent selector, but that one has come up many times before, and it’s always died at the doorstep of implementors, who point out that it’s far too difficult to implement without serious performance penalties and even risk of browser lockup.  See, for example, the comment left by David Hyatt on Shaun Inman’s post on the idea.  Similarly, I think constants (or macros or whatever they’re called) are a great idea and would be very helpful, especially if you’re coding up a Jason Special.  Both are loaded with use cases, so I don’t feel like I can add a lot; besides, constants are already in the WG charter, so there’s once more hope in the land.

So anyway, selector blocks.  To pick one recent example, while working on a project that should very soon see the light of day, I had a situation involving the following chunk of rules.

h1, h2, h3, h4, h5, h6, table {
   font: 1em Arial, "Helvetica Neue", Helvetica, sans-serif;}
h1 {font-size: 275%;}
h3:first-child {margin-top: 1em;}
p.tagline {margin: -0.25em 0 1.25em;
   font-size: 125%;
   color: #7B7960;}
h3 {margin: 1.5em 0 0.25em; font-size: 125%;}
h3:before {font-size: 75%; counter-increment: subhead;}
h4 {margin: 2.5em 0 0.75em;
   text-transform: uppercase; font-size: 125%;
   color: #928F59;}
p {margin: 0 0 1em;}
ul {padding-left: 1.5em;}
ul li {list-style: disc; margin: 0.5em 0;}

Nothing unusual about them, of course, unless you count my use of counters.  These rules had been written early on in development, and the design had evolved around that part of the document.  As more page components were added, I realized that I needed to scope all these rules to one section of the document: specifically, a div with a class of main.  So here’s what I had to do.

.main h1, .main h2, .main h3, .main h4, 
.main h5, .main h6, .main table {
   font: 1em Arial, "Helvetica Neue", Helvetica, sans-serif;}
.main h1 {font-size: 275%;}
.main h3:first-child {margin-top: 1em;}
.main p.tagline {margin: -0.25em 0 1.25em;
   font-size: 125%;
   color: #7B7960;}
.main h3 {margin: 1.5em 0 0.25em; font-size: 125%;}
.main h3:before {font-size: 75%; counter-increment: subhead;}
.main h4 {margin: 2.5em 0 0.75em;
   text-transform: uppercase; font-size: 125%;
   color: #928F59;}
.main p {margin: 0 0 1em;}
.main ul {padding-left: 1.5em;}
.main ul li {list-style: disc; margin: 0.5em 0;}

This, on the other hand, is what I really wanted to do:

.main {
   h1, h2, h3, h4, h5, h6, table {
      font: 1em Arial, "Helvetica Neue", Helvetica, sans-serif;}
   h1 {font-size: 275%;}
   h3:first-child {margin-top: 1em;}
   p.tagline {margin: -0.25em 0 1.25em;
      font-size: 125%;
      color: #7B7960;}
   h3 {margin: 1.5em 0 0.25em; font-size: 125%;}
   h3:before {font-size: 75%; counter-increment: subhead;}
   h4 {margin: 2.5em 0 0.75em;
      text-transform: uppercase; font-size: 125%;
      color: #928F59;}
   p {margin: 1em 0;}
   ul {padding-left: 1.5em;}
   ul li {list-style: disc; margin: 0.5em 0;}
}

Or, if necessary, to put the whole original chunk into its own style sheet and then do one of the following:

div.main {@import url(main-style.css);}

<div class="main" style="@import url(main-style.css);">

Interestingly, the latter is theoretically possible, thanks to the more advanced profiles in the CSS module “Syntax of CSS rules in HTML’s ‘style’ attribute“.  I’m not aware of the former having been seriously considered (despite my best efforts, once upon a time), though it’s always possible I missed something.

But either one of those approaches would be a last resort, in my opinion.  I’d much rather just wrap the whole chunk in .main { }, like I showed previously, and be done with it.  That capability would also simplify certain annoyingly repetitive patterns, like the very first of those rules.  I think it’s pretty obvious which of the following is easier to write and maintain:

body.home #content .entry h2, 
body.home #content .entry h3, 
body.home #content .entry h4, 
body.home #content .entry h5, 
body.home #content .entry h6 {...}

body.home #content .entry {
   h2, h3, h4, h5, h6 {...}
}

I mean, just look at the former, and imagine what one goes through to write it in the first place.  Copy, paste, paste, paste, paste, paste… maddening.  And that’s just for a small block of CSS like this one.  Imagine the tedium of doing this for a block of 50 rules, or 150.  (Also, this is the the same thing that was requested in the feedback as “Grouped Alternates“, albeit with a different syntax.)

One objection to this sort of pattern is that it increases dependence on descendant selectors, which are computationally inefficient.  But it doesn’t: I had to create a whole bunch of descendant selectors as it was, and did so far more clumsily.  And had I missed a command-V somewhere, I’d have had styles that applied outside their intended subtree.  Introducing a way to nest blocks like this doesn’t change anything except make it easier and more maintainable to do what we already do.  Honestly, it’s pretty much impossible to increase dependence on descendant selectors.  The best we can do now is make them less difficult to write.

I realize that the syntax I depict would cause backwards-compatibility problems, as in older browsers would not behave as intended when exposed to this sort of thing, but I’ve also stopped being concerned about that.  We can’t keep holding ourselves hostage to decisions made a decade or more back.  Provide the capability and authors will use it when they can.  Over time, its use will become more prevalent—kind of the same way authors adopted CSS in the first place.

I also realize that this case has been made time and again by many, many other people.  This isn’t even the first time I’ve made this case, though I think the other times were within the WG and therefore off the public record.  The fact that it keeps being made is a strong indicator that the need exists, and dismissing the idea because the same end effect can be achieved with existing selector syntax (as shown above) isn’t acceptable.  That’s like saying that complex selection effects can be achieved with JavaScript or XPath, so there’s no need for advanced CSS selectors.

So that’s my use case.  I actually have a bunch more, but they all follow the same basic pattern: the desire to group rules together into subsections of a document, or to otherwise simplify the writing of CSS.

• CSS3 Feedback: Selector Blocks was published on Thursday, February 12th, 2009.
• It was assigned to the Commentary, CSS, Standards, W3C, and Web categories.
• There have been thirty-eight replies.

Back before holiday season hit, Elika Etemad—better known as Fantasai—published WaSP Community CSS3 Feedback 2008.  I gave it a read and came away with a number of things I wanted to say.  So many things, in fact, that I’ll need to split them up into a series of posts.  This here post will serve as introduction and hub, with links to the follow-on entries added as they’re published.  All very Bray-ny, no?  (Go ahead, groan.  It only encourages me.)

Here you go:

1. Selector blocks
2. Layout
3. Wanted: Layout System
4. Animated Shapes
5. Graphical Thoughts

I want to make clear up front that I’m not going to address every single point in the feedback document: it’s just too incredibly huge.  I did think about making my own copy and then just filling in my reactions to each point, but that didn’t scale very well.  Not only did it seem really overbearing and maybe just a touch egotistical, but some of my reactions were based on related topics in separate areas of the original.  Besides, I know what it’s like trying to read a really, really long article, so breaking it up and just focusing on the parts that got me fired up made way more sense.

There is one thing I want to address before I start serving up the follow-on installments.  At the end of Fantasai’s post, there’s a link to my 2006 post about the benefit of having a community liaison, someone who bridges the gap between the WG and the public.  She then asks if anyone is interested in volunteering, but personally, I don’t see the need.  The WG already has a community liaison:  it’s you, Fantasai.  It has been for some time now, thanks to your regular and informative CSS WG blog posts and other outreach work such as “WaSP Community CSS3 Feedback 2008”.  The job is being done, and being done very well, I don’t think there’s any doubt that the Working Group is much, much better for it.

• Feedback on ‘WaSP Community CSS3 Feedback 2008’ was published on Wednesday, February 11th, 2009.
• It was assigned to the Commentary, CSS, Standards, W3C, and Web categories.
• There have been five replies.

Human beings say, “It never rains but it pours.”  This is not very apt, for it frequently does rain without pouring.  The rabbits’ proverb is better expressed.  They say, “One cloud feels lonely”…

—Richard Adams, Watership Down

The past few weeks have been a bit more intense than usual.  It all started on Inauguration Day, in fact, though that’s pretty much just coincidence.

It all started with a cold.  Carolyn stayed home with a terrible cough and a slight fever, which meant she got to watch the inauguration with us.  A couple of days later, she was fine, and Rebecca was sick.  Nothing unusual about that, of course: you have two kids, they pass germs along to each other.

In Rebecca’s case, though, it didn’t seem to get better.  By the time, a few days later, she spent most of an afternoon sitting very still on my lap, whimpering softly, her skin burning with fever, Kat started to suspect a common but serious childhood illness.  A trip to the doctor confirmed it.  The child in the next examination room had the same illness and was unlucky: two inhaler treatments had little effect, and he was sent to the hospital.  Rebecca fared much better: one treatment and she was much improved.

That was lucky for us all, because we had a long road trip ahead of us.  The night before Rebecca’s doctor appointment, Kat’s mother died after a very long and difficult illness.  We had known it was coming, thanks to the hospice nurses.  We had known for a very long time that this is how it would one day end.  Most of the mourning had been done ahead of time, to be honest, but at the same time it’s never easy to lose a loved one, no matter how much you may have prepared.

We needed to be on Long Island by Sunday night.  Plane fare was far too expensive, even with the bereavement discount.  So we packed up the nebulizer, treatments, and everything else we needed to drive eleven hours to our hotel.  Pennsylvania, as anyone who’s made the drive will tell you, goes on forever.  It’s an even longer forever when you have to make extra stops, as will happen with four people, two of them children.

A very good friend of ours watched the girls as we attended the graveside ceremony, and we spent the next couple of days with Kat’s family as they sat shiva.  And then we drove back to sit our own.

I had to be in Boston the following week for client work, and while a great many awesome things happened on that trip, it was hard to leave so soon after everything else.  In the middle of everything else, really.  I left on the second day of our two-day shiva; the rabbi finished his prayers and remarks and five minutes later I was pulling out of our driveway to catch my flight.  And of course the illnesses, traveling, and general upheaval in our lives had pretty well shattered both girls’ sleeping patterns, and I couldn’t be there to help.

The day after I got back, Kat finally went to the doctor to see about her sore thumb.  It turned out to be broken.  She’s wearing a brace now.  Two days after that, I quite unexpectedly suffered an anaphylactic reaction to a food I’d had many times before.  It was the whole works, too: sore stomach, tightness in the chest and throat, dizziness, itchy hands, and, so my wife tells me, a blue tinge around the lips.  It was a new and wholly unwelcome experience, I assure you.  We’re not completely sure of the ingredient that caused it, but there’s a very strong candidate: avocado.  So no more guacamole for me, it would seem.

All that knocked me even more offline than usual, which is why further writings about HTML5, CSS3, and other topics of note have persisted in collectively playing the parts of Sir Not-Appearing-On-This-Site.  I’m hoping that by getting all this off my chest, I’ll clear up some of the blockage and get things moving again.

So how about you—what’s the first month-or-so of 2009 been like for you?  If it’s been similarly stressful, unload and lighten the burden.  If it’s been good, tell us about it so we can all share a little bit of uplift.  I know I could use a little!

• Life’s Rich Tapestry was published on Monday, February 9th, 2009.
• It was assigned to the Carolyn, Personal, and Rebecca categories.
• There have been twenty-four replies.

Hey all, and especially those of you in the EU: I’m going to be doing an all-new one-day workshop in London in early March via the offices of Carson Workshops, for whom I’ve done workshops in the past.  Previously I’ve done two-day gigs with a beginner-to-intermediate skill range, but this time we’re trying something different.  I’m going to get down and dirty with some tough topics, and really push hard at the limits of what CSS and semantic markup can do.

You can get the details at the CW site, and note the special price for the first quarter of the seats.  That’s right, this will be a small, intimate workshop, with plenty of chances for questions about and challenges to what I’m saying.  Previous workshops have featured some really great conversations among everyone there, and I expect the same this time around.

I had meant to blog this before life intervened and took me out of my wifi cloud (and more on that soon), so time is a little more of the essence than usual—if you know someone who you think might be interested, pass the word on, willya?  Thanks!

• London CSS/XHTML Workshop was published on Thursday, January 29th, 2009.
• It was assigned to the (X)HTML, CSS, and Speaking categories.
• There have been six replies.

How many times have you played out the following scenario?

1. Makes local changes to your style sheet(s).
2. Upload the changes to the staging server.
3. Switch to your browser and hit “reload”.
4. Nothing happens.
5. Force-reload. Nothing happens.
6. Go back to make sure the upload is finished and successful.
7. Reload again.  Still nothing.
8. Try sprinkling in !important.  Upload, reload, nothing.
9. Start swearing at your computer.
10. Check Firebug to see what’s overriding your new styles.  Discover they aren’t being applied at all.
11. Continue in that vein for several minutes before realizing you were hitting reload while looking at the live production server, not the staging server.
12. Go to the staging server and see all your changes.
13. Start swearing at your own idiocy.

This happened to me all the time as we neared completion of the redesign of An Event Apart.  It got to the point that I would deliberately add obvious, easily-fixable-later errors to the staging server’s styles, like a light red page background.

Now that we’re launched and I have time to actually, you know, think about how I do this stuff, it occurred to me that what I should have done is create a distinct “staging” style sheet with the obvious error or other visual cue.  Maybe repeat the word “staging” along the right side of the page with a background image, like a watermark:

html {background: url(staging-bg.png) 100% 50% repeat-y;}

Okay, cool.  Then I just need to have that served up with every page on the staging server, without it showing up on the production server.

One way to do that is just make sure the image file never migrates to production.  That way, even if I accidentally let the above CSS get onto production, the user will never see it.  But that’s inelegant and wasteful, and fragile to boot: if the styles accidentally migrate, who’s to say the image won’t as well?  And while I’m sure there are all kinds of CMS and CVS and Git and what-have-you tricks to make sure that doesn’t happen, I am both clumsy and lazy.  Not only do I have great faith in my ability to screw up my use of such mechanisms, I don’t really want to be bothered to learn them in the first place.

So: why not send the link to the style sheet using HTTP headers?  Yeah, that’s the ticket!  I can just add a line to my .htaccess file on the staging server and be done.  Under Apache, which is what I use:

Header add Link "</staging.css>;rel=stylesheet;type=text/css;media=all"

Those angle brackets are, so far as I can tell, absolutely mandatory, so bear that in mind.  And of course the path in those brackets can be absolute, unlike what I’ve shown here.  I’m sure there are simple PHP equivalents, which I’ll leave to others to work out.  I really didn’t need to add the media=all part, but what the heck.

Seems so simple, doesn’t it?  Almost… too simple.  Like there has to be a catch somewhere.  Well, there is.  The catch is that this is not supported by all user agents.  Internet Explorer, for one; Safari, for another.  It does work in Opera and Gecko browsers.  So you can’t deploy this on your production server, unless of course you want to use it as a way to hide CSS from both IE and Safari.  (For whatever reason.)  It works great in Gecko-based production environments like mine, though.

I looked around for a quick how-to on do this, and couldn’t find one.  Instead, I found Anne van Kesteren’s test page, whose headers I sniffed in order to work out the proper value syntax; and a brief page on the Link header that didn’t mention CSS at all.  Nothing seemed to put the two of them together.  Nothing until now, that is.

• Using HTTP Headers to Serve Styles was published on Thursday, January 22nd, 2009.
• It was assigned to the CSS and Web categories.
• There have been forty-two replies.