I'm developing an offline web app that (for now) only targets Safari on the iPhone/iPod. Mostly for fun, but also as a way to lessen my dependency on jQuery event bindings (and thereby hopefully speed up UI responsiveness), I tried substituting some CSS3 for basic show/hide functionality.
The following code is a simplified example that works in Firefox 3.6.3 but not in the latest Safari, both desktop and mobile:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
input:not(:checked) ~ select { display: none; }
input:checked ~ select { display: inline; }
</style>
</head>
<body>
<input type="checkbox" id="cb" /> <label for="cb">Toggle select</label>
<select id="sel"><option value="">Select Box</option></select>
</body>
</html>
I wasn't really expecting this to work, but I was pleased to see that it does, at least in Firefox. Any idea why it doesn't work in Safari? In it, the <select> is initially hidden, which is correct, and the Web Inspector tells me that the proper display value is being set upon each click of the checkbox, yet the element fails to show.
I've done a similar successful experiment where I wrap the text inside the <label> in an <a href="#sel> tag and use a select:target { display: inline; } rule, but that's not the behavior I ultimately desire.
Am I reaching too far? Is this kind of stuff best left to Javascript?