You are currently browsing the archives for the Experiments category.
I was inspired by the menus on the Star Trek – The Next Generation DVD menus and wondered if you could do a navigation like that in pure CSS. And voila you can:
Star Trek TNG styled pure CSS navigation
Feel free to use it, in case you feel like geeking out, too :-)
Human behaviour is rather predictable. When guessing passwords for example it is quite a good bet to check for names of family members and birthdates. It is also possible to predict what a person will choose when following certain rules, as the Mind Reader proves.
Internet Explorer once again manages to amaze me. Sadly enough not in a positive way.
I am working on a dynamic A to Z listing for a local council page (they are a legal requirement), and thought marking them up as a list of links pointing to named anchors is enough.
It is for Firefox, and old browsers, but Internet Explorer has one big bug. Try to tab through the A to Z navigation via keyboard and press enter. MSIE takes you to the section you have chosen, and the logical next move is to hit tab again to reach the first link in that section – in this case, the link back to the navigation. If you do it though, you’ll find that MSIE takes you back to the navigation!
A workaround is giving the named anchor an href, or, and now comes the really odd bit, nest the link inside an element and give it a width in the CSS.
More information about the bug on Jim Thatcher’s site.
A lot of web designers complain about CSS lacking constants you could define once and reuse throughout the CSS document. CSS was not meant for that and does not support it.
What you can do though is use a server side language to simulate a CSS file by setting the appropriate header. However, this means you need to stick to the language syntax.
Playing with that idea, I came up with a small PHP script that parses any CSS given to it via a variable and reads and replaces the defined constants in the CSS.
This page shows how it can be used. You apply the CSS with the invalid constants syntax by looping it through the PHP script:
$colour1 = '#999';
$colour2 = '#363';
$colour4 = '#696';
$colour3 = '#cfc';
And you can use them throughout the whole CSS document:
#footer{
padding:.2em .5em;
margin:0;
background:$colour1;
}Any improvements?
I am aware that this is butchering the idea of CSS as presentation only, and means you design invalid CSS in the raw form, but it fills a gap and it might make CSS maintenance a bit easier. You can still validate your CSS by looping it through the script:
http://icant.co.uk/articles/cssconstants/cssconst.php?c=demo.css.
A lot of people cherish the pure CSS popups technique published by Eric Meyer in the long long ago.
The only problem with these is that they are not accessible. While screen readers and browsers without CSS happily display the texts, users without a mouse have no chance to get to the content of the spans embedded in the links.
What we can do though is use Javascript to check if a mouse is available, and make our CSS dependent on a class set to the body if that is the case:
CSS:
body.mouseenabled a span{
position:absolute;
left:-999em;
}
body.mouseenabled a:hover{
color:#fff;
}
body.mouseenabled a:hover span{
position:relative;
left:0;
}
Javascript
window.onload=function()
{
if(!document.getElementById || !document.createElement){return;}
document.body.onmousemove=function()
{
if(!/bmouseenabledb/.test(document.body.className))
{
this.className+=this.className?' mouseenabled':'mousenabled';
}
}
}
Benefits:
Drawbacks: