Tantek's Thoughts

• • home
  • blog
    • previous
  • css examples
  • favelets
  • exit
• skip extraroll

  • connections

    • Technorati links search
    • Rubhub XFN links

  • events

    Subscribe...
    • 11/30 9pm-2am - Crush - at underground, 424 Haight @ Webster, San Francisco
      Progressive Trance, Progressive House, Techno. No Cover, Free Parking! 21 & over w/ ID. Every Wednesday.
    • 12/2 Aeon Flux - The Movie
    • 12/6 7:30--18:00 - When 2.0 - at Stanford, CA
    • 12/13-14 Syndicate Conference @ San Francisco Hilton, 333 O'Farrell St.
    • 2/27-3/3 W3C Technical Plenary @ Sofitel, Mandelieu, France
    • 3/10-14 SXSW 2006 Interactive Conference - at Austin, TX, USA
    • 3/10-18 SXSW 2006 Film Conference & Festival - at Austin, TX, USA
    • 3/15-19 SXSW 2006 Music Conference & Festival - at Austin, TX, USA
    • 5/10-12 CSS WG f2f - at somewhere in Europe (maybe)
      Possibly in Amsterdam hosted by CWI, possibly in Paris by Daniel Glazman.
    • 5/16-19 Xtech - at Amsterdam
    • 5/17-19 W3C AC Meeting - at Edinburgh
    • 5/22-26 WWW2006 - at Edinburgh
    • 10/9-11 CSS WG f2f - at Mozilla Corporation

  • books

    • reviewing

      1. by Carrie Bickner
      2. by Dan Cederholm
      3. by Craig Grannell

  • People

    • regulars

      • Amber
      • Jeffrey Zeldman
      • meyerweb
      • Stopdesign
      • Glazblog
      • photomatt
      • David Baron
      • Hixie
      • jluster.org
      • Relax, Everything Is Deeply Intertwingled
      • Davidx.org
      • ctrl-ault-del
      • To Wish For Impossible Things
      • Joi Ito
      • Kevin Marks
      • What's That Noise?!
      • Sifry's alerts
      • This is Powazek
      • A Fresh Start
      • Bradley Allen
      • Scobleizer (2)
      • Nick Finck
      • kottke
      • Aaron Swartz
      • apophenia

    • recently met

  • news filters

    • T: NewsTalk
    • boingboing!
    • Y! News

  • badges

    • 
    • 
    • B2 d++ t++ k++ s+ u f i++ o++ x e+ l c-
    • 
    • orkut profile
    • 
    • 
    • 
    • 
    • 
    • 
    • 
• skip intraroll

  • search tantek.com

    • Technorati search

      this blog all blogs
    • using Yahoo!
    • using AltaVista
    • using A9

  • current projects

    • Technorati

      • main site
      • developer's wiki
      • Attention.xml

    • microformats

      • hReview
      • hCard
      • hCalendar
      • RelTag
      • RelLicense
      • VoteLinks
      • XOXO

    • GMPG

      • XFN 1.1
      • XMDP

  • semantics

    • Markup language design notes, 20040727
    • Class for meaning, not for show, 20040720
    • A comment is a comment is a comment, 20030104
    • A Touch of Class, 20021216
    • Anorexic Anchors, 20021128
    • Bed & BReakfast, 20021022

  • CSS hacks

    • IE5/Mac Band Pass Filter, 20040706
    • IE5.x/Windows Filters, 20031023

• Posts

  1. Pandora's Box (Model) of CSS Hacks And Other Good Intentions

     created

     11/26 6:20 PM

     content

     tags:

     • pandora
     • box
     • model
     • boxmodel
     • css
     • hack
     • hacks
     • csshack
     • csshacks
     • cssfilter
     • cssfilters
     • principles
     • hindsight
     • unintended
     • consequences
     • alistapart
     • jeffreyzeldman
     • ie6
     • ie7
     • css21

     This Thanksgiving I've decided it's about time that I provided some more background and analysis on one of the things I am certainly unintentionally (in)famous for. This entry was started at 7pm on Thanksgiving evening, but took me until now to complete.

     Before CSS hacks

     I don't know who first came up with using the presence of a 'media' attribute on <link> or <style> to hide CSS from Netscape 4, but it was the first technique that I remember hearing of to use a perfectly reasonable HTML feature (yes, the 'media' attribute is in HTML, not CSS) to deliver CSS selectively to browsers that supported a certain feature. This HTML-based "filter" was perhaps the first such technique, though it would be many years before the term "filter" was introduced as a general term for such techniques.

     Banishing version four browsers

     The first filter I came up with (again, before they were named as such) was perhaps the @import with quotes filter, which I didn't even bother writing a page about in particular because it seemed so simple: @import "foo.css"; is only supported by IE5, NS6, Opera3 and better. I just posted an example usage at the time for Web Standards Project's Browser Upgrade Campaign (BUC). That particular legacy contribution was also made anonymously to one of the ALA redesigns, though I believe Jeffrey has outed me at some point since.

     Neither the HTML 'media' attrribute filter nor the CSS @import quotes filter, in my humble opinion, qualified as hacks, because they lacked what some might term the essence of a hack: either a kludge, or the opposite of a kludge, as in a clever or elegant solution to a difficult problem. Neither of those filters were particularly kludgy (warning, not a Scrabble word), nor clever. In other words they were too "obvious" to really be considered hacks.

     Seemed harmless

     Anyway, the @import filter seemed harmless enough. At the time the only big difference it made was to filter out IE4.x (both Mac and Windows), which had already been obsoleted by IE5 (both versions). And it was praised as: ... for people who make websites, that is nothing short of revolutionary. Sidenote: note the fact that that article on ditching <table>s for layout is almost FIVE years old yet those of us that are real professionals still have to repeat the message .

     Thus the idea of using a feature of CSS to essentially do a lightweight form of browser specific style sheet switching was born, but the Pandora's Box (Model) of CSS Hacks had yet to be opened. That would come exactly one week later.

     Hacking open the Box Model and releasing the filters

     Jeffrey Zeldman expressed to me how nice it was that it was possible to write CSS without having to worry about what might look bad in (or even crash) obsolete browsers like Netscape 4. Having been freed to use more of (and depend more on) CSS, he and many others following A List Apart's suggestions quickly ran into the next issue which was the inconsistent box model treatment between IE5.x/Windows and IE6/Windows.

     If only there were a way to send one width to IE5.x/Windows, and another width to modern browsers which supported the CSS box model... is a rough approximation of what Jeffrey said (emailed) to me at the time.

     Eager to be helpful, and armed with the intuitive knowledge that the key to Pandora's Box of CSS hacks could be hidden amongst the jungle of CSS1 section 7.1 parsing tests, I went hunting. It didn't take long until (with Todd Fahrner's help) I discovered how test twentyb (rotation-code: "\"}\""; — look familiar?) messed up all versions of IE5.x/Windows, but no other modern browser. After that it was a simple manner of finding an abandoned CSS2 property which accepted arbitrary string values.

     I had opened Pandora's Box (Model) of CSS Hacks, and there was no turning back.

     Shortly thereafter, I generalized the Box Model Hack to enable hiding entire style sheets from IE5.x/Windows and CSS Filters were born. More followed soon thereafter.

     Intelligently designed hacks

     Implicit in the story above are a set of design principles which I kept in mind when I first set about creating CSS hacks, and which I really should have noted at the time. Given all the hand-wringing about CSS hacks incited by my colleague Markus Mielke, it's about time I documented these principles. More on the hang-wringing later.

     A CSS hack should (or MUST in the RFC2119 sense if you prefer):

     1. Be valid. Invalid hacks are unacceptable. Back in the heyday of Web 1.0 (i.e. the late 1990s), the The Web Standards Project and numerous others were already spreading the message of better coding through validity, and thus hacks themselves had to validate as well. (Nevermind that many/most so-called "Web 2.0" sites can't be bothered to validate. See above about the real professionals having to repeat the message).
     2. Target ONLY older/frozen/abandoned versions of user agents / browsers. When the Box Model Hack was introduced, we were already playing with betas of IE6/Windows (back when we expected there would be an IE6/Mac), and so we knew how to make sure it wasn't affected. And now we're playing with betas of IE7.
     3. Be ugly. It's actually a good thing that a hack be visually ugly from a coding aesthetic point of view in the hopes that the ugliness will be a reminder that the hack is a hack, and should incite a tendency for people to a) minimize it's usage, and b) remove it's usage over time. At it's core, browser switching is one of those things you really shouldn't, but must, do to get your job done. Hacks' ugliness are like the equivalent of persistent warning tags, a reminder to dispose of them when no longer necessary.

     Explosion of CSS hacks and filters

     But I didn't document those principles at the time. Once said Pandora's Box was opened, it didn't take long for the notion that hacking CSS was a "good idea" to spread far and wide in the web design and development community (much further than I could have possibly expected, to the #4 result for 'hack' on Google, and even onto t-shirts!). Of course once hacks for IE5.x/Windows had been discovered, and refined into the concept of "filtering" which browsers got to see whole style sheets, it was only a matter of time before hacks were developed and documented for nearly every browser. Nevermind that so many of the hacks violated the above-mentioned principles. Those ideas spread and mutated without any such strings attached.

     At this point I can only strongly recommend that people evaluate these myriad hacks based on the above principles before using them.

     IE7 Team Puts CSS Hacks On Notice

     Now, about that inciting and hand-wringing that took place last month.

     The irony is that I don't disagree with the details of Marcus's MSDN post. Note that his "Call to action: Please check your pages" does not mention a single one of the CSS hacks I developed. The one partial overlap is the use of the child ">" selector, which was introduced as part of the Box Model Hack to "Be Nice To Opera" (Opera 5 in particular, which at this point is probably ignorable — anyone even hear of anyone that still uses Opera 5, even for testing purposes?).

     The sad thing is that most of the hand-wringing could have been avoided (as noted in the comments) if people would first try fully standards based cross-browser solutions before resorting to hacks.

     However, the undertone of that blog post (and what Markus and Chris Wilson have expressed to me and others in person) is that web developers must stop using CSS hacks altogether.

     I know that's perhaps a bit of a hyperbole, but that's the message that's been heard nonetheless. However, such a message is, with all due respect, the impractical perspective of folks who are not a professional web designers / developers. I know this, I was there once too.

     Avoid Targeting Current Versions Of Browsers

     To be specific, the problems with hacks have arisen because of hacks that are targeted at a current browser, namely, IE6/Windows. E.g.

     * html

     Using A CSS2 Feature Is NOT a Hack

     And a misperception that the use of an implemented feature is a hack.

     E.g. people (ahem, starting with the "BMH" as noted) have used the child selector to send "valid CSS" to "compliant implementations", e.g. with

     html>body

     That's not a hack. It's not targeting a specific browser. It's actually inclusive of all browsers who would support CSS2(.1) selectors.

     Sending valid CSS to compliant implementations is proper behavior.

     400 Tiny Violins For the Newcomer

     (With apologies to Star Trek)

     Does this make it harder for new/late implementations (like IE7) to come along and support that selector?

     Why yes it does. This is no surprise.

     If you support the child selector, now all of a sudden you have to compliantly support all the other properties/values of CSS2(.1) that authors have been successfully using with the child selector.

     But given that several other browsers do so (otherwise authors wouldn't be using the child selector), and thus the market has demonstrated this is not a problem, this is a reasonable expectation.

     However, if a browser is somehow unable to do so, then the answer is simple.

     Don't implement that selector, until that browser is able to do so. IE5/Mac did so, so can IE7, more than five years later...

     This may seem "unfair" that that these features (a CSS2(.1) selector and some CSS2(.1) properties/values) are now "tied" together in terms of requiring implementation support, but guess what?

     CSS2(.1) doesn't say you can implement part of the spec. You're supposed to implement the whole spec in the first place.

     The Red Queen Problem

     Obviously this was hard (in fact, impossible for self-contradicting and ambiguously written REC-CSS2 in 1998), and browser vendors (yours truly included) tried to do the next best thing, which is to implement logical "chunks" of CSS2(.1).

     Well it's been 7 years since REC-CSS2, and those logical "chunks" have simply grown, more, chunky, as it were. They've also been clarified down to previously unseen levels of details in CSS2.1

     You need to keep coding just to keep up.

     Support CSS 2.1 NOW!

     The bottom line: eventually what will happen (within a couple of years at most?) is that so many browsers will have implemented all of CSS2.1, and authors will be writing with that in mind, that any new browser that wants to support part of CSS2.1 will have to support all of it in order to support the style sheets in the wild.

     IMHO, that's called progress.

     For Now

     But we don't have any fully compliant CSS 2.1 browsers yet. And we still have obsolete/abandoned browsers with enough marketshare (or machine dependence) to warrant the incremental bit of effort to support them. So for now:

     1. First try to simply author standards-based cross browser designs.
     2. Validate, validate, validate.
     3. Check any browser differences to see if your code is perhaps depending on an implicit browser default style sheet (like the example of the visible empty <legend> in IE6/Windows), and specify that styling explicitly instead of depending on the defaults.
     4. Use CSS hacks and filters sparingly (and only as needed) to get non-compliant obsolete/abandoned browsers to comply to your presentational wishes.
     5. And keep the pressure on the browser vendors to implement the web standards all of us web developers depend on to get our jobs done.

     If you've made it this far, you've been extraordinarily patient and have the attention span of a savant. I wish you a happy Thanksgiving holiday.

     Also blogged at Webstandards.org

     Comments

     1. Molly Holzschlag
     2. Kimmo Katajamäki
     3. Hot LInks
     4. Anne van Kesteren
     5. Arve Bersvendsen
     6. Chris Casciano
     7. Steven Clark
     8. Ben Buchanan
     9. Åke Järvklo
     10. Chris Hanscom
     11. Virginia DeBolt
     12. Steve Ganz
     13. Rob Dickerson
     14. Robert Scoble
     15. Eric Setiawan
     16. Bruce Alderson
     17. Carlos Sanches
     18. Simon Willison
     19. Ray Henry
     20. Russo
     21. Dion van Huyssteen
     22. John Dowdell
     23. Isil Flynn
     24. FORGETFOO
     25. Jeff Croft
     26. Nick Bradbury
     27. Futile
     28. Andy
     29. Paul Bissex
     30. SXSW Speakers in the News
     31. Robert S. Goodlatte
     32. Blogosfere
     33. Michael Grosch
     34. Mark Bernstein
     35. Sufian Siddiqi
     36. Sarvesh
     37. Kemie Guaida
     38. Frank Hunck
     39. Dan Cederholm
     40. Jay Forbes
     41. Robin Wood
     42. Sean Burgess
     43. Ryan King
     44. 高小六
     45. C. David Gammel
     46. Glen C.
     47. Peter Müller
     48. Alessandro Fulciniti
     49. Stilbüro
     50. Nick Cowie
     51. Colleen Taugher
     52. Paul Hammond
     53. Daniel Torres Burriel
     54. Ashley Bowers
     55. Tim Callahan (original link)
     56. Wilfred Nas
     57. Amrit Hallan
     58. Dave Massy
     59. Kimberly Blessing
     60. Timo Wirth
     61. Matthew Gifford

  2. Optimism Tax

     created

     11/20 9:40 AM

     content

     tags:

     • personal
     • friends
     • philosophy
     • attitude
     • trust
     • optimism
     • freedom

     I related some recent no fun experiences to my friend and co-worker Derek, in particular experiences relating to trying to be helpful, and then being taking advantage of, or having stuff neglected, or just being treated like I didn't matter, which was very odd, since I was the one providing help! I don't want to get into the details because frankly I don't wish to dwell on them.

     Suffice it to say, Derek pointed me to his friend John's (who I happen to know as well) post on "Optimism Tax". Go read the whole thing.

     My loss in this recent case was more emotional than financial (though I probably have about a couple of hundred dollars worth of stained pillows and blankets which might be treatable, as if I have the time to deal with that).

     But regardless, John's philosophy still makes a lot of sense, and is something that I am learning to accept and embrace because it makes a lot of sense to me.

     If you're nice to people, and help them out, sometimes you're going to get taken advantage of and lose some time, or some stuff. Hopefully you won't lose a friend, but sometimes that can happen as well.

     I'll also consider the loss of time and stuff to be part of my optimism tax. I'll accept that from time to time I will have to pay this fee in exchange for optimistic freedom.

     I prefer to pay this tax, and remain optimistic about people, and the world, rather than be focused on the negatives.

     As John says: the cost to my quality of life (by worrying more) is far more expensive than the cost of losing some stuff.

     Comments

     1. Paul Schreiber
     2. Micah Sittig

  3. No fun November, Fun November

     created

     11/19 9:25 PM

     content

     tags:

     • personal
     • struggle
     • november
     • nofun
     • fun
     • socialtext
     • wikiwednesday
     • microformat
     • microformats
     • hResume

     Suffice it to say it's been a rough couple of weeks and more, continuing on where Halloween left off. But in addition to dwelling on some of the crap I've had to deal with so far this month, I'm going to mention a few positive highlights.

     • No fun: all day meetings where people point out problems which are given lipservice and then summarily ignored.
     • Fun: Wiki Wednesday hosted by SocialText.
     • No fun: having to drop the car off at the dealer for them to perform the promised wash and vacuum which they forgot (blew off?) after the 45k service.
     • Fun: brainstorming with James Levine of SimplyHired, and Ryan King on an hResume microformat.
     • Fun: Creative Commons celebration at Aurobora Press
     • Fun: Hanging out with Aaron Swartz at Ritual Coffee Roasters and discussing how much of doing something is believing that you can do it (reference: BarCamp, which was conceived, and planned in mere days, by a group of eager independents who had never put on a conference (or unconference) before).
     • Fun: Discussing life goals and aspirations while sitting in a car parked in a "passenger loading zone", waiting for the parking restriction to expire at 6pm.
     • Fun: Making fun of overpriced tacky wacky outfits at Neiman Marcus Union Square.
     • Fun: A mid-week date with my sweetheart at the "Cheesecake Factory", with an abbreviated wait thanks to Dani.
     • Fun: Amber's housewarming party.
     • Fun: Showing up late wearing masks at SuperHappyDevHouse 5 and having nobody recognize us.
     • No Fun: SuperHappyDevHouse 5 being dead at 4:20am, and their network being just as dead to both my laptops, in both OS9 and OSX, using both wifi and ethernet.
     • Fun: Meeting up with Jane for fun and frank conversations.
     • No Fun: Learning of someone's sins of past neglect which have apparently continued to the present day.
     • No Fun: Dealing with picking up after a neglected pet.
     • No Fun: Meeting with people who are apparently obsessed with "the Dark Side".
     • Fun: Quietly representing microformats at the "106 Miles" meet up.
     • Fun: Seeing John Battelle speak frankly about Search, and sneaking in food and drink into the main auditorium at the Microsoft Silicon Valley Campus which specifically prohibited it.
     • No Fun: Wasting a bunch of time organizing a bunch of things that were supposed to get cleaned (but were not).
     • No Fun: Driving from San Francisco to Santa Cruz by myself.
     • Fun: Weekend in Chaminade with a bunch of legendary hackers.
     • No Fun: Missing the group photo because I was working on some obligatory monthly powerpoint slides.
     • Fun: Presenting and demonstrating microformats to a l33t crowd, and having a few of them exclaim that they had finished implementing microformats on their sites by the end of the talk.
     • Fun: Sitting in a quiet outdoor hot tub by myself and coming up with a simple taxonomy of irritants based on skin defects: zit, mole, wart, cancer. More on that later.
     • No Fun: Dealing with an uncomfortable situation involving neglect, minor property damage, rudeness, disrespect, unappreciation, and disappointment, among other things.

     Well that's still more fun things than no fun things. I guess part of it just how busy the month has been so far, and that's not even counting the meetings, events, tasks etc. omitted from the above list. Another part of it is perhaps the fact that the no fun things have so far overshadowed the fun things even if they didn't outnumber them.

     Comments

  4. Finishing October

     created

     11/19 7:12 PM

     content

     tags:

     • personal
     • travel
     • family
     • claremont
     • losangeles
     • kingtut
     • egyptian
     • lacma
     • maya
     • mayan
     • tagcamp
     • microformat
     • microformats
     • socialtext
     • wiki
     • hcard
     • structuredwiki
     • moinmoin
     • mediawiki
     • hcalendar
     • hreview
     • halloween

     Our weekend in LA was warm and pleasant. That Saturday was packed. My parents took Amber and I to the special "Tutankhamun & Golden Age of Pharaohs" exhibit (9am "showing" - ouch!) at the Los Angeles County Museum of Art (LACMA). Having enjoyed far too many science fiction movies and TV shows which have borrowed liberally from Egyptian history and mythology (Ahem. Battlestar Galactic (original), Stargate, Stargate SG1, The Mummy, The Mummy Returns, The Scorpion King), it was nice to get some of the real background, and see artifacts 1000s of years old in person. Amazing.

     We had lunch afterwards in the Plaza Cafe, a nice cafeteria style restaurant next to the museuem bookstore. Since the special King Tut tickets got us into the rest of the museum, we checked out the special Mayan exhibit as well. It was quite interesting to see the artifacts of two different very old cultures that lasted for many hundreds of years, each becoming an artifact of history themselves.

     Taking advantage of the warm sunny weather, we drove to Newport Beach, set out a blanket, chairs, and played a new card game called Quiddler which was a lot of fun. Unable to resist the water I jumped in while everybody else looked at me like I was crazy. Dried off, changed out of my new swim trunks, and stopped across the street at the Crab Cooker for Manhattan clam chowder, smoked salmon, and tartar sauce wrapped up to go. Those plus all the other goodies mom had cooked made for quite a feast when we got home.

     Sunday was a day for sleeping in, and going shopping with Amber at all my classic hometown spots: Some Crust Bakery and Rhino Records in downtown Claremont, and of course the various stores at Montclair Plaza, the local two story indoor mall.

     Returned home that evening to a load of stressful things, personal, professional, situational etc.

     The one pleasant exception being the success of TagCamp, including the surprise last minute deployment of the hCard Kwiki plugin by SocialText's Casey West and Brian "Ingy" Ingerson. Check out the TagCamp ContactList which automatically aggregates all the hCards across the entire TagCamp wiki. In one fell swoop the SocialText guys have demonstrated that microformats work well for structured wikis (in addition to structured blogs). Well done Casey and Ingy!

     Now that SocialText has raised the bar for structured wikis with their support of the hCard microformat in the Kwiki platform, I'll make the call official.

     MediaWiki, MoinMoin, and all other open source wikis: let's see plugins, additions, patches etc. for hCard, hCalendar, and hReview to start with. Go copy liberally from the Creative Commons attribution (by-2.0) licensed hCard creator, hCalendar creator, and hReview creator. Let's see what you can do!

     The weeks leading up to Halloween I was far too busy and preoccupied with many too many annoying time-wasting things, so never had the time to prepare anything for Halloween itself, neither costume, nor candy, nor party. So I spent the evening barely finishing up a yawner of an obligatory weekly status report before falling unconsciously asleep. A waste of a perfectly good Halloween, which is truly sad, as it's probably the biggest holiday in San Francisco.

     Comments

• • Technorati claim
  • © 1996-2005,
    Tantek Çelik
    (get vCard), All Rights Reserved.
  • Valid:
    • XHTML
    • CSS
    • Atom