

CSS3 toggle-button without JavaScript - rafaelc
http://lab.simurai.com/css/toggle/#

======
alanh
Probably goes without saying:

This is pretty cool and fun to inspect & maybe draw inspiration from, but
please don’t ever use code like this in production. Cool code ≠ reliably
cross-browser, accessible, or maintainable code.

 _Dear downvoters, I’m not criticizing the experiment or the visual appearance
of this trick. I love following simurai._

~~~
silvestrov
It is too clever for its own good, but the "reliable cross-browser reliable"
critic is way too MSIE friendly: The code is all standards based. There are no
vendor-specific prefixes such as -webkit or -moz.

The best method of obtaining maintainable code is to avoid buggy browsers that
need tons of workarounds and hacks.

~~~
alanh
Actually if you read the source code he explicitly says:

    
    
    	   /* AFAIK, not supported in moz/o[pera] yet */
    

and :target has incomplete browser support still. Nested <a> tags are a bit
unusual, too, even if they are legal (is this valid? I don’t even know,
because come on!)

But I’d like to make a slightly broader point that, on the web, if you want
something to work on as many clients (and that means on hundreds of different
mobile browsers as well, these days) then sticking to the mainstream is your
best bet, if perhaps boring :)

~~~
jerf
"Nested <a> tags are a bit unusual, too, even if they are legal (is this
valid? I don’t even know, because come on!)"

As it happens I've been fiddling with the HTML 4.01 DTDs in a project the past
couple of weeks, and I can answer this for at least HTML 4.01: No. An A
element may contain any inline element except for another A tag, which is
explicitly denied.

(It isn't entirely clear to me whether the standard permits something like
<a><b><a> or if the exclusions apply to all children, but the latter
interpretation makes more sense.)

------
ahrjay
His code uses an invalid technique that go against the spec[1]. You cannot add
generated content to a replaced element IE8 and Mozilla follow the spec,
webkit and Opera don't. It's a shame that this is the case.

[1]<http://www.w3.org/TR/css3-content/#replacedContent>

------
benjoffe
This doesn't work in Opera.

A better approach in my opinion is to use a checkbox (hidden) with a label
pointing to it, then the styling can be applied with the CSS '+' selector,
though this won't work with IE6, at least it's using sensible markup.

------
gue5t
I've been using a more efficient and portable approach for a while. It looks
something like this: <http://www.autoplay.org/content/object-icon-
checkbox.gif>

------
ivankirigin
This fails on chrome on os x. The background windows flashed when toggling.

~~~
matt2224
Works fine for me on Chrome OS X. :)

------
mcs
I added items to my back button history. Really annoying.

~~~
sainttex
Yeah, that's the horrible curse of the anchor tag.

