29
January
2008
I’m doing some experiments with navigation lists in CSS and have come across a stumbling block which relies on DOM scripting to work around. The examples given here are not intended to work, we would know it as “parent selectors”
Aside from this being a really cool sounding technique you could throw across the dinner table as “have you tried the reverse cascade trick” which is what I would name the technique, after the juggling trick, I actually know this is impossible to do with CSS as it involves cascading “up” not “down”. At source the W3C have decided that would take too much processing power to “cascade up”. Andy Budd has tackled this on his blog long with many others. CSS is one directional, for good reason I can see why cascading backwards is not a great idea, but equally it’s on of those brilliant contradictory evil ideas.
It’s nearly 2010, do you know how close the second decade is? Contradictory evil ideas are all around us, but it amazes me why this parent selector has been left to fill blogs all over the world, such a useful feature and as we push into a “must work without JavaScript” world this has to happen.
However imagine the power the parent selector would give us if we have a simple navigation list with some sub navigation which is hidden. This is great until we would like to “fold out” the sub navigation without reloading the page and adding classes to fold out certain bits of the menu. Although we have hidden the sub menus with CSS we cannot un-hide with CSS alone (this is not drop down in nature, more explorer tree), we can’t really use mouse events and the way keyboards traverse navigation lists is through the anchor tags, which is really inconvenient for this.
<ul id="nav">
<li><a href="/">Home</a>
<li class="selected"><a href="/about/">About Us</a>
<ul>
<li><a href="/about/history/">History</a></li>
</ul>
</ul>
--
ul#nav ul { display : none; }
ul#nav li.selected ul { display : block;}
So I could in theory trigger an a:focus in the main navigation list, but because my sub nav is contained in the LI above the A tag, I can’t use the A tag to fold out the sub nav, and li:focus doesn’t make sense as the keyboard would tab through the A tags. That’s pretty useless as the A usually is closed right away, it doesn’t make structural sense to move the end of the A tag so that it wraps the UL block. We could train wreck it with DIV’s but let’s not go there.
However if we could reverse cascade we might be able to pass triggers back up the tree and re-cascade from that point onwards. How would that look for it to make sense? One of the beauties of of CSS is that the syntax is easy to understand so this must be maintained and it can’t break an existing conceptual model of how forward cascading works, the two have to coexist.
Example one
ul li < a:focus ul
Without confusion with other characters this could work, the single arrow could signify that the a:focus should be passed to the parent node only a double “<<" could pass the focus up two levels up the DOM tree.
Example two
ul li <- a:focus +> ul
Perhaps a little more long winded but we could say that the a:focus is a go between, in that it supplies the trigger to the LI with the “<-" character and then cascades normally from the "+>” character.
So would the world be a better place with reverse cascading or is the world just not ready for it? CSS classes rule the world and are used to forsake good structure in the HTML so what hope is there of moving away from className switches in DOM scripting?
Filed under: Code, CSS | No Comments »
21
April
2007
I was in Bristol this week for accessibility training from Nomensa, I learned a decent amount of stuff and had chance to double check if the kinds of things I was doing were the right things to do in terms of writing accessible HTML.
It was a great day and many thanks to Emily for delivering a great training session, really useful. I will back track eventually on what has happened and why this site seemed dead for a while. I have a new job, which going forward I’m really excited to have and thus work has been taking a lot of my attention and time and that’s where the trip to Nomensa came from, however it’s all good, got Search Engine Optimisation (SEO) in York soon, that should be fun, but I can rub off some accessible approaches to SEO there now.
I think also I’ve managed to fix the css on / images off issue with one of the image replacement techniques, allow me some more time and I’ll do a proper update on this with examples. Based around the Phark method there must be a way (with JS) to detect when images are off and thus write a new style rule into the DOM for the text-indent line and when JS isn’t there my theroy is that a :hover pseudo class can snap that text back into the viewport when focus is given, my only issue with that is does :hover get focus to something without a mouse, so can a keyboard tab press bring focus to an element and trigger the :hover, I’m sure it can. If you understood that congratulations, you are a top notch web developer! I haven’t tested, the code is not there, however it’s the kind of thing you think of when in the fast lane on the M5 coming back from Bristol as the sun sets, again that is if you are a geek like me.
Photos
Anyway to conclude this unneeded waffle, if you don’t want to read my geek speak but have got this far then after the training session was over I wandered around Bristol city centre obviously camera in hand, groovy place, fountains and water falls a plenty, so as a reward for getting through the brain dump, here are some photies to look at:
The use of water in Bristol is amazing, click for more photos
Filed under: Blog, CSS | No Comments »
26
October
2006
Quite a while ago now in fact I was working on some sexy CSS buttons. Not only did I want them to look good, I also wanted them to be bulletproof, elegant and technically simple but visually complex, with minimal image usage all at the same time.
Why are these buttons bulletproof? The actual dimensions are set to grow and shrink based on text size and the images are placed using spans, so that the icons can be themed. There is not one single img tag to be seen, it relies on background images, which right now can’t be scaled because CSS doesn’t yet support background image scaling. The button can still be readable without any images being present, because the text, is erm, well it’s text and so aids speech readers and search engines. Why create buttons out of images and place the text in the image? Surely only a webmaster with limted time would hard code the text inside the image in photoshop (please ignore my site header).
See the buttons in action on this page.
All code contained within the example page
Aside from all the niceness I wanted to allow a server side team to easily include the CSS and related HTML and change the orientation of these buttons based on selecting a class name. I chose to use unordered lists so that without CSS the links, which is essentailly what the buttons are, would still function. Plus of course the UL structure allows me to change the orientation of the buttons in CSS, by stating “display : inline”, or “display : block;”.
The main aim I had in mind was trying to visually tell the user when they had already clicked on one of these buttons and I did this using the pseudo class “:visited” on the a selector, to choose a different icon, of course this works in IE6 too because the a selector is the only thing IE6 supports this technique on. Beautiful code, well tested, well conceived, using bulletproofing to ensure the elements look right in any circumstance and the design isn’t too bad either, who said these had to be square, they could be splodges of paint on a childs painting game.
Filed under: Code, CSS | No Comments »
