With all this cool JavaScript and DOM stuff going on, it’s sometimes difficult to remember that it’s possible to contort some pure CSS and HTML into acting like an interactive site without any scripting at all. I suspect that most readers here will have seen Eric Meyer’s css/edge, where he demonstrates some of the neat capabilities of CSS, but there’s a lot more you can do.
Enter Stu Nicholls and his CSS Playground. First example of something that will make you think “that’s just CSS??” is the amazing puzzle. Give it a try. And go “ooooh, that’s clever”.
The major way of implementing some form of interactivity through pure CSS is with the :hover directive, and the major thing standing in the way of this is that IE doesn’t support :hover on anything other than links. Nonetheless, some impressive things are possible: see Stu’s photo gallery for one example. It’s not that these techniques are revolutionary, it’s more that they do exist and can be exploited to add some neat things to your sites without any scripting at all.
Related posts:
- The Power of Follow Up Do you take the time to follow up with potential...
- Progressive Enhancement Techniques 2: the CSS In the second of a 3-part series, Craig explains how...
- SitePoint Podcast #26: The Power is Yours symbolics.com, the first commercial domain name registered on the Internet...
- How to Override Inline CSS Styles Inline CSS can be applied to any HTML element using...
- The Power of Persuasion Persuasion can play a prominent role in business relationships. Alyssa...
That puzzle is pretty cool. With no JS/Java/Flash, it’s very quick on a 733MHz computer!
February 25th, 2005 at 1:31 am
Pure CSS is a nice thought – but considering all the problems it gives on various browsers i have gone back to tables on many websites.
Honestly, even Eric Meyers css tricks show up wrong on my browser, and i am using XP with IE 6 – together with about half the world.
What is the point using CSS if you have to hack your way through several box models just in order to make your page appear correct on different platforms?
CSS – only? In a few years maybe, when all the dust is settled. I just don’t have time for it now…
February 25th, 2005 at 1:39 am
have a look at the advanced version of my csszengarden entry “door to my garden“. should also degrade nicely, although i seem to remember netscape 6 still had problems with it…
February 25th, 2005 at 8:58 am
To Ewout, who said: What is the point using CSS if you have to hack your way through several box models just in order to make your page appear correct on different platforms?
————
No matter how many hacks I end up having to put into a site (which usually isn’t very many), it’s still ten times easier than hacking together a table site was 4-5 years ago for me. The differences between IE and the modern browsers is often a little overblown in articles; for practical purposes it doesn’t take much to make everything work. The benefit is *forward* compatibility, more important and cost-effective IMO than backward, plus you get the benefit of being built with accessibility.
Sure, Stu Nicholls’ stuff is either non-compatible or very difficult, but not all of us have to be on the cutting edge, and I learned a lot of very interesting things from his site when I first stumbled onto it (like opacity, whose cross-browser implementation is fairly easy). Maintenance in the past year since I’ve been using CSS2 instead of tables has saved me big bucks and a ton of sanity– it’s not all hacking and cursing.
February 25th, 2005 at 9:51 am
the problem with ‘waiting until the dust settles’ is that it never will as long as developers are scared to update their skillset.
start using it now, and vendors will either release products that work right or risk fading away.
February 25th, 2005 at 10:05 am
I have to agree with Ewout de Graaf. To a certain extent if you are designing with css in mind then it can be effective but if a designer gives you a design form a photoshop image and you need to replicate in html. It can be near on impossible to get it working in all browsers with css techniques. The fact that some wizz kid / expert can after 7 days of work is totaly conter productive. It should be easy to implement, but i guess it’s no ones fault really just the browsers aren’t consistent.
conclusion.. will have to wate a few years before the browers catch up.
February 25th, 2005 at 1:11 pm
The image gallery is impressive :)
I’m not a fan of some of the other aspects of Stu’s site. It’s really markup + css heavy.
Writing 10k of extra data to the markup is NOT cutting edge.
Its the equivalent of reproducing a photo using coloured table cells. Sure its possible, but its pretty obvious that its not appropriate.
The photo gallery is very nice :) Im not keen on all the images being fully downloaded.. but hey, it works well once its loaded.
CSS and standards are easy and cost effective if you practice and get good at them.
Of course its going to take time to do a design thats given to an inexperienced HTML + css dev.
For some reason people initially learn the incorrect methods for using HTML before they learn the right/enlightened way.
There is basically no transferable knowledge between the CSS + div, and table layout methods for creating web pages, so of course transisitioning will take time.
February 26th, 2005 at 4:29 am
Ned, Stu isn’t necessarily trying to code best practice CSS here.
In the mid 60’s some guys in the University of Illinois got a single plasma cell to glow on command. Not particularly useful, but the idea led to the million-cell Plasma TV’s we have today.
Stu’s stuff is the kind of laboratory madness that shows what is technically possible. Hopefully next time you’re considering a real-world problem with, say, a navigation panel, you’ll think “now if that guy got CSS to work like a maze game, I’m sure we can use a small part of his technique to get these dropdowns to work properly”
February 27th, 2005 at 6:37 pm
AlexW, I’m not convinced.
Its not about best practices, or even whats possible.. its about whats insane. Some of the stuff is great :).
Plasma cells to glow = AWESOME. There are possibilities with the plasma cell (as with Stu’s image gallery) to do great things. I dont believe this to be the case with a lot of the other research.
Appropriateness is wot its about.
Eg, 1960s some guy decides he can generate inefficient cumbersome technique for making paint that has NO benefits over existing techniques.
I’ve been using CSS + tableless navs + layout for the best part of 2 years, and I shudder to think how horrible it would be reverse engineering one of those maze games to get my first CSS nav working.
March 1st, 2005 at 8:07 pm
The gallery looks nice, but there is no way to print it. It’d be much better if the image change was initiated not on :hover, but on :active, so that the image would stay changed after it was clicked and when the mouse was moved away.
March 3rd, 2005 at 12:16 am
What can be done with CSS is pretty amazing, but I think sometimes designers can go too far in trying to use “pure CSS”. Peter-Paul Koch wrote a great article on when to use CSS and when to use JS:
http://www.digital-web.com/articles/separating_behavior_and_presentation/
March 3rd, 2005 at 12:41 am
1)css is the future, mocking up designs in PS then converting is so old skool. 2) some things may be innapropriate use, but do you remember the blink tag? ICK! 3) And what about box-model hacks? Tables ARE hacks, and they only work for those who have it figured out. We use css in multiple nested columns with ssi and things work just fine.
March 3rd, 2005 at 2:04 am
Stu’s home page won’t display using Safari 1.2.4 (just shows an empty page) and is completely misaligned on IE for Mac. That’s a little too bleeding edge …
The individual examples display fine. The photo gallery is nice. Unlike an earlier poster, I like that the enlarged images don’t stay displayed (and can’t be printed). I’m working on a site for a photographer and was looking for ways to prevent easy swiping of photos. Stu’s method isn’t perfect in this regard but at least it takes care of the “right-click–save to file” way of grabbing an image.
March 5th, 2005 at 2:55 pm
A retraction (of sorts): Stu’s home page does display, at least some times, but he’s doing something that trips up Safari. Not sure what’s causing it but I start getting blank pages (nothing shows but a View Source indicates the page was loaded).
March 5th, 2005 at 9:58 pm
Paul:
at least it takes care of the “right-click–save to file” way of grabbing an image.
becomes… click -> right click -> save to file
heh.
March 6th, 2005 at 6:05 pm
Paul: I think I must be missing something, ‘cos I had no problem saving the image. I have seen something similar recently where the image was part of the background of a div, but even then you just do ’save background as’
March 8th, 2005 at 5:55 pm
dereko,
If it takes a “whiz kid” 7 days to slice up a ps image and get it to display in a css design, he ain’t no whiz kid. 7 minutes is much closer to reality if you know what you’re doing. 7 days is how long it takes the clunky table based layout to display. :)
March 10th, 2005 at 7:37 pm
Why the annoying delay in shadowscript?
E.g I have a link to a counter. If that one not conect at once the shadow effect will be delayed.
March 16th, 2005 at 8:16 am
I’m no whiz kid, at 58, but I do see the benefits of CSS and explore them as much as possible. The site has been redesigned recently and should now display in Safari.
April 19th, 2005 at 11:25 am