mezzoblue

Recent Entries

1

MikeyC says:

July 26, 10h

First of all Dave, you are doing a great job!

Now the feedback…

From the ‘CSS Zen Garden’ HTML page:

The media attribute specifies ‘screen’. This, of course, makes perfect sense as the designs are rich and visual in nature. They’re not meant for aural, print, small screen, etc…

However, some of the submissions use the ‘voice-family hack’ to deal with the IE 5 box model problem. While I definitely see the reasoning and value in using the hack (heck, I used it myself!), it ultimately results in validation error:

Property voice-family doesn’t exist for media screen : “"}"”

If I’m not mistaken (and if I am please feel free to correct me) but part of the reason that the Garden exists is to show the value of standards-based design. The ‘Garden’ page also uses a strict XHTML doctype so the assumption can be made that adhering to standards is paramount to making the case for standards-based design.

My humble solution: Include an (admittedly ugly) condtional statement in the head section if IE 5 must be supported. Yes it is an ugly hack (arguably not more so than adding extra div tags for purely presentational reasons), *but* its completely valid. Its not *valid* in the sense that its tricking the validator either, but actually valid in that its really just a comment in the mark-up to every browser but IE 5+.

This is what I use on my site Zeit.ca:

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” media=”screen” class=”/style/hacks.css”>
<![endif]–>

I do this to keep my main stylesheet free of hacks and at some future date it makes removing IE 5 support incredibly easy as all the hacks are stored in their own file.

This addition would not break any current designs and would allow authors the ability to support IE 5 in their design without resorting to hacks that prevent validation.

2

MikeyC says:

July 26, 10h

The commenting system stripped out a line from my last message:

“From the ‘CSS Zen Garden’ HTML page:
<style type=”text/css” media=”screen” title=”currentStyle”>”

3

Dave S. says:

July 26, 11h

Oh, for Pete’s sake. I just changed the media type last week from “all”, and hadn’t realized it broke the box model hack.

Guess why I changed it? That’s right: accessibility concerns. Specifying media=”all” has issues with Fahrner Image Replacement in screen readers, since they’ll pick up the display: none;. I figured an easy way out was changing the media type, and as an added bonus it got me thinking about opening the floodgates for print media style sheet submissions too.

Well, I guess that’s out.

4

Dave S. says:

July 27, 01h

Alright — onload javascript dropped, and media type deleted. So that opens me up again to people complaining about FIR breaking JAWS, but in this case I’m going to have to choose valid CSS over a small accessibility concern which isn’t entirely relevant anyway.

5

Minz Meyer says:

July 27, 01h

The Zen Garden is well linked in a lot of german weblogs, as far as I read them. It was mentioned a lot of times in the css-d-mailing list (that’s where I heard of it the first time) which is pretty multinational.
It is suggested as reference in the IWA/HWG CSS Intermediate online course.
So I think that a far amount of potential submitters even outside US/UK/Canada should be aware of this project.

6

Didier Hilhorst says:

July 27, 02h

Dave - I understand your point of view. Besides, it’s absolutely not your fault that there is a lack of international submissions. And, of course, I understand that you’re not going to refuse outstanding submissions that fall within a certain geographic region that is already well represented.

Anyway, to make my point I decided it was time I roll up my sleeves and get to work to produce a submission. That way maybe Holland might get a place in that list (if it’s good enough).

7

MikeyC says:

July 27, 03h

Dave wrote: “media type deleted”

I am not “intimate” with the spec so please correct me if I am mistaken: If you don’t include a media type is that not the same as specifying a media type of ALL? Sure the CSS and XHTML will validate, but devices like webTV/small screen etc… would be correct in trying to render the site using the CSS provided when really they should not (WebTV renders it regardless, but that is besides the point).

Again, I completely understand your reasoning, however it just strikes me as being ‘incorrect’ (albeit pragmatic).

8

Simon Willison says:

July 27, 04h

Just one request: is there any chance you could lose the status bar effect? It’s annoying in browsers that support multiple tabs as it tends to stick around on other pages, but more importantly it makes it impossible to see which images are being loaded while watching the page render, which helps the visitor understand how the design is structured (particularly when on a slow connection).

9

Dave S. says:

July 27, 05h

MikeyC - yes, AFAIK, no media type is the same as media=”all”

There’s really no elegant solution for this one. Either our CSS as media=”screen” breaks the validator when we use Tantek’s hack, or all devices get the same CSS and it validates.

I’d prefer to use screen, but not at the expense of validation. If someone can come up with an elegant solution that doesn’t involve stripping out all Tantek hacks and placing them in a separate CSS file, I’m all ears. Not only would accessibility concerns be solved, I’d be able to also add media=”print” and open that up for submissions too.

10

MikeyC says:

July 27, 06h

“There’s really no elegant solution for this one.”

Perhaps in a year’s time the act of simply hiding CSS from IE 5 can be assessed (using the high pass filter or whatever), just as CSS is currently hidden from Netscape 4. IE 5 currently has around 30-40% marketshare?? How low must it go before you would feel comfortable hiding CSS from it and its broken box model?

11

Dave S. says:

July 27, 06h

How low? Consider some still code for NN4.x’s 1.5% or lower market share… Me personally, on the Zen Garden? I’d say 10% or lower would be enough for me to start hiding CSS from IE5, but you can guarantee I’d get a lot of e-mail about that if it ever happened.

The Garden is seen in a lot of different lights; some think it goes too far and isn’t practical on today’s web, while others think it doesn’t go far enough and is overloaded with unsemantic junk. The majority gets it, but the splinter groups on either side seem to be the most vocal.

Still, it’s about practical CSS that can be used today (for the most part — I broke a few rules with ‘mnemonic’, and have bent them once or twice for other designs) and supporting IE5 is well within that definition.

12

Didier Hilhorst says:

July 27, 07h

I noticed you have an impressive list of translations available of the CSS Zen Garden. However, there’s not much of an international representation in the list of official designs. It’s mostly anglosaxon designers that dominate the list (errr, and Germany). I think it’s time the international webdesign community outside the US, UK and Canada wake up and submit their work. In the future it might be an idea to limit submissions to countries that are not yet represented. Of course this would mean (positive) discrimination, but heck, it would limit the number of submissions.

You could have an “International Submission Month”, a month where the only submissions that will be accepted or those of designers from countries not yet listed. Sure, quality matters. It still has to be good! After that month, submissions can resume to normal. Ah well, just a suggestion.

13

Dave S. says:

July 27, 09h

Good points Simon - I’ve had others complain about that too. It may yet go.

Didier - If designers outside English-speaking countries need to be better represented, it’s up to them to submit. Maybe the Garden needs to be better-promoted on non-English webogs; I can’t do this on my own, not the least reason of which is that I pretty much speak English only.

I’m not playing the political game, so if you see a deficiency, it’s only because I haven’t received anything. Your ideas are interesting, but I’m not going to start denying good work just because it doesn’t match my geographical criteria ;)

14

Seamus says:

July 27, 09h

I have now create a second example for the reformatted table.

15

Jai says:

July 28, 02h

The problem I’m finding is that as soon as I put any position (relative or absolute) on the extra divs, they imediately assume relativity to the top and left of the entire page body (as they should, based on what they ARE relative to). So the furthest down on the page I can get them is where bottom of the initial screen loads (and after that they stick there and don’t move with the scrolling).

If you know a way around this, let me know. My suggestion of a few extra divs within the #container would be a viable workaround, but if there’s a way to do it without that change, I want to know what it is (so I can use it!).

(It’s very possible that I just am overlooking something. Any suggestions from anybody?)

16

Grammar Wank says:

July 28, 02h

The Garden is fantastic, a real eye opener for people who think that using CSS imposes a boring sameness. However, I do have one little grammatical weed to point out. The first sentence is either in the past tense, which seems a bit odd, or you have mispelled “lie”. In other words, the sentence should be:

“Littering a dark and dreary road lie the past relics of browserspecific tags, incompatible DOMs, and broken CSS support.”

See this page for an explanation of “lay” versus “lie”.

17

Dave S. says:

July 28, 03h

Jai — maybe it’s your floats. If large parts of your design are floated, it’s possible the extra divs are starting from a different spot than the bottom of the document. Since position: relative; completely relies on where the element starts from, this is relevant.

Try this:
#extraDiv1 {
position: relative;
top: -20px;
left: 20px;
}

If it’s showing up anywhere but the bottom of the page (possibly overlapping elements on the bottom) then something’s wrong.

The first sentence is either in the past tense, which seems a bit odd, or you have mispelled “lie”.

Possible. I can’t remember what process made me pick “lay” over “lie”, but I seem to remember struggling with this one. Do others concur?

18

MikeyC says:

July 28, 04h

Dave wrote: “I’ll take a closer look at this when I have some time. It looks promising, but I’d a) have to throw IE6 into Quirks mode (which would involve heavy retro-fitting)”

Would it really? Wouldn’t it simply require adding an xml prolog to the beginning of the document (above the doctype) to throw IE 6 into quirks mode while leaving Mozilla, Opera, Safari in standards mode…

” I’d have to write a special section on using it instead of the Tantek hack.”

Let’s not forget that we end up in the same place anyways: validation error. Using CSS 3 is not valid as its not a final recommendation yet. Even if it were: Using the vendor-specific -moz- won’t validate either. I think it just makes the situation worse quite frankly. As you stated before: as long as IE 5 must be supported there really is no “elegant” solution.

19

Dave S. says:

July 28, 04h

Would it really?

Yes it would. Notice how adding -border-box-sizing forces Mozilla into using IE5’s broken box model, rather than vice-versa. Consider the Tantek hacks at work in the Garden, and that the designs take for granted the proper W3C box model. If we go and swap box models on them, they will break.

Let’s not forget that we end up in the same place anyways: validation error.

This is the more relevant of the points; I haven’t tried out the technique in any capacity yet, so I was taking Brownstone’s word for it that it doesn’t get flagged as an error. I wasn’t even aware box-sizing was a CSS-3 property, actually; -moz-box-sizing obviously isn’t.

The goal: a validating box model hack that allows me to use media=”screen” without having to add a secondary style sheet specifically for the hacks. Will this do it? I don’t know. I’ll investigate when I have time.

20

MikeyC says:

July 28, 04h

Dave wrote: “Consider the Tantek hacks at work in the Garden”

Yes, I didn’t account for current submissions…my oversight… otherwise i think its sound:

IE 5 in quirks mode using IE box model;
IE 6 in quirks mode due to XML prolog, therefore using IE box model;
Mozilla in Standards mode using the CSS-property & vendor-specific -moz- gives you the IE box model;
Opera in standards mode using the CSS-property gives you the IE box model (Opera in quirks mode would give you the IE box model too, btw)

You could serve up a legacy page for existing submissions and a new page for anything from here on out…just a suggestion… ;)

21

Mr. Brownstone says:

July 28, 05h

As you stated before: as long as IE 5 must be supported there really is no “elegant” solution.

But there are easier ways to overcome IE5’s limitation. Tantek’s hack, while ingenious, adds an awful lot of confusing guff to a CSS file. Which brings me to…

If we go and swap box models on them, they will break.

But you wouldn’t have to sit down and think out new values, because they already exist as part of the hack those “broken” box-model values are already in place. You just have to remove the W3C box-model values and the voice- hack specifics and you’re home free. But then, I would say that, since I’m not the one who has to do it. ;o)

I wasn’t even aware box-sizing was a CSS-3 property, actually; -moz-box-sizing obviously isn’t.

Only Opera supports box-sizing as far as I know, and yes; the -moz equivalent is proprietary to Mozilla of course. Even so, the validator didn’t even raise an eyebrow when I tested it.

22

MikeyC says:

July 28, 05h

“You just have to remove the W3C box-model values and the voice- hack specifics and you’re home free.”

Personally, I don’t like the idea that authors would be restricted from using the correct box model for the sake of IE 5. I think if you travel down that road it has the potential to severely undermine the Garden’s credibility.

23

Mr. Brownstone says:

July 28, 05h

They do not have to be restricted; you can leave all the current styles as-is, and just draw attention to the above solution for those who would create a Garden design in the future. All Mr. Shea would need to do is add the XML prolog to the top of the HTML file, and Tantek/Non-Tantek hacked style-sheets could live happily on the same server.

Where designers would be restricted is if the box-sizing hack were added in-line to the HTML file, before the @import statement to load the chosen style.

24

Mr. Brownstone says:

July 28, 05h

Addendum to the above post Bugger; does the Tantek hack work in IE6? If not, then I guess the XML prolog thing wouldnt work. I didnt think of that before I posted.

25

MikeyC says:

July 28, 05h

Mr. Brownstone: “They do not have to be restricted; you can leave all the current styles as-is, and just draw attention to the above solution for those who would create a Garden design in the future.”

But if you add the XML prolog it throws IE into quirks mode and because it lacks the same parsing bug as IE 5 the voice family hack has no effect. Therefore existing submissions that use the W3C box model would break .

26

MikeyC says:

July 28, 05h

“Bugger; does the Tantek hack work in IE6?”

hehe…i guess i was writing my submission while u were writing your appendum…see my previous post where it appears I am stating the obvious.

27

Jai says:

July 28, 06h

Hey Dave, would it break anybody’s existing CSS submissions if you threw in a few extra blank divs within the #container div? I just think that could be helpful for people who want to position things on the bottom of the page (like bottom corners).

If it would break current designs, forget I said anything :)

28

Dave S. says:

July 28, 08h

Jai — the blank DIVs are already at the bottom of the page; I don’t think another set within a specific DIV will help very much. And if I do that, I should put them in the header as well, so it’s balanced, right? ;)

The 6 extra DIVs are for hacks, basically — creative use of CSS should mean they’re not needed, and most designs don’t use them, but they’re around just in case. I’ve made use of them on occasion, so they are definitely valuable; just against the spirit of what CSS should do.

29

Dave S. says:

July 28, 08h

Also, Finnish and Japanese translations are now up.

30

Mr. Brownstone says:

July 28, 08h

I would like to suggest an alternative for Tantek’s IE hack, which I use myself and does not seem to be caught by the validator. (Even though most of my personal CSS files are riddled with other kinds of errors, this doesn’t seem to be one of them ;-):html * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}All this does is force Mozilla, Opera, – and any other CSS3 savvy browser that understands box-sizing – to work with the IE-based box-model rather than the W3C default. Since IE’s model makes much more sense to most people, it’s quite a convenient hack. You need only specify one value for width, height, and so on, and these values in turn are easier to figure out.

The inspiration for this hack came from Peter-Paul Kochs box-model tweaking and * selector pages. Indeed, it is simply a rip-off of both to get the result I wanted.

I hope a viable solution can come of it.

31

Jai says:

July 28, 10h

I hear what you are saying, Dave, but hear me out a moment on the extra divs.

The Garden page is kinda like this:

-Body
-container
-intro
-supplemetal text
-end container
-extra divs
-end Body

I understand eth value of having the extra divs under everything- so they can be absolutely positioned from the top:0 and left:0, but on designs that scroll down (which is most of them), nothing can be attached to the bottom (unless there is a property I am unaware of- I know Mozilla can relatively position divs with a “bottom:” command, but IE seems to ignore that). If there was one or 2 extra divs in the #container, that would allow relative div alignment to the bottom of that container.

I agree, in the “Real world” of designing, extra divs just don’t make sense,- but for the purposes of a very customizable CSS demonstration, I think that they do make sense.

Of course, it’s your garden :) Plant whatever tomatoes you want! I’m just suggesting that cherry tomatoes would grow nicely in it ;)

32

Dave S. says:

July 28, 11h

I hope a viable solution can come of it.

I’ll take a closer look at this when I have some time. It looks promising, but I’d a) have to throw IE6 into Quirks mode (which would involve heavy retro-fitting) and b) I’d have to write a special section on using it instead of the Tantek hack. It will most likely be too much trouble, but you never know.

Jai — think about it a bit more; those DIVs are already at the bottom of the document. Using relative, not absolute positioning, or even just using them in place without modifying the positioning, you should be able to accomplish whatever you need to down there. They’re outside of #container, granted, but that shouldn’t be much of a problem with some creative CSS.

33

Anne van Kesteren says:

July 29, 04h

I use the following solution, it’s spawn off from Tantek’s hack:

div#name{
px;
padding:10px;
}
body > div#name{
px;
}

And off course you need to put IE6 into quircks mode, but that isn’t a big deal.

34

MikeyC says:

July 29, 05h

More of the same:
Vermin in the Garden

I’ve basically just reiterated my personal stance on dealing with the problem.

35

Tom says:

July 29, 08h

N