One pseudo-class, one document, two layouts
By glazou on Monday 28 November 2011, 18:21 - CSS and style - Permalink
It's possible at super-minimal cost to have for the same document liquid AND fixed-width layout, thanks to ZE POWA of CSS...
In a fixed-width document named index.html, you usually have a rule setting the width or max-width of the main element. Something like
#main750 {
max-width: 750px;
}
Right? Now think :target pseudo-class and tweak your style rule as followed:
#main750:target {
max-width: 750px;
}
Do you understand the trick?
Yeah, your document now has liquid layout if called by URL index.html and fixed-width layout if called by index.html#main750
TADA !

Comments
Fantastic! http://people.opera.com/howcome/201...
<body class="main750 main500 main1024 main320"> perhaps?
A death sentence for "jump links"
@sil: that would not work as the key is the hash (that matches an ID not a class)
d'oh. Ignore me, I'm stupid.
A very good adaption of my area:target image-zoom example that you saw the other day
https://bugzilla.mozilla.org/attach...
I don't get it - isn't the content of the second rule not supposed to be the same as the first one?
Someone explain to me
(not supposed to be) -> (supposed not to be)
Ha, sympa l'astuce M'sieur Glazou
How about IE user? Sounds like IE 7 and 8 doesn't support that??