It's amazing what you can achieve just by using HTML and CSS, but still I wonder why we mostly see websites with generic design and layout that only use common HTML and CSS elements.
Umm Compatibility reasons? It's probably also much easier to create certain things using a full range of tools rather than trying to implement it purely in css
Also because commonality of user experience has great value in satisfying the principle of least astonishment. It's true that a lot of web devs and designers don't get this right, but that's no reason to suggest they shouldn't be trying.
I think this work is valuable, but this is more R&D type work than a lot of people who are actually producing work with immediate value results, and tied to a business need
Imagine a quadrant chart that plots the superlatives of web solutions. The bbc sites resides in a different quadrant than these Css emphasized solutions...
First off, the work is awesome, don't get me wrong, but I'm a bit disappointed. From the title, I expect the examples to be written "Pure CSS, yet many examples, including the very first, are laden with HTML and JavaScript.
I once made a moderately interactive widget using pure CSS, and it was a relatively interesting experience. The widget itself had buttons that let you choose several parameters (about 400 combinations overall) and would render out a 'demo' of our product.
Some stuff I learned:
1. Most of css3 is supported in IE8, so we felt fine with using the widget in production.
2. With any reasonable LESS / SASS syntax, it's easy to generate complex stuff so long as it's limited to a discrete number of states. Stuff like tic-tac-toe are easily doable if you treat them as a state-machine.
3. It's way faster than JS, and there's a good reason for it. CSS can be totally figured out in one round of parsing, and so long as no JS is used to change it, the same parsed state can be used for all of your states. Even though it adds tens of kilobytes to the file size of both CSS and HTML, it's still faster than executing code.
This definitely isn't the right solution for all problems, but I think it's important to think about whether you problem can be solved in pure CSS, and to strongly prefer it for static sites and nearly-static sites.
I once made a CSS-only Todo List[1] that demonstrated chaining sibling selectors, using the :checked psuedo selector, CSS counters and some other things to "enhance" a Todo without using JS (technically JS is used in a Jade template to compile the necessary HTML and CSS). CSS is pretty powerful.
18 comments
[ 4.3 ms ] story [ 50.6 ms ] threadPlease use some caching solution to avoid your web host from shutting your site in cases like this.
* https://codepen.io/jaysalvat/pen/HaqBf
* https://codepen.io/juliangarnier/pen/idhuG
* https://codepen.io/rgg/pen/QbRyOq
* https://codepen.io/rgg/pen/vlrnd
* https://codepen.io/rgg/pen/eHGfj
But if there's someone who works on bbc.co.uk reading this, I salute you for the amazing work you do, because you often don't get enough credit.
Some stuff I learned: 1. Most of css3 is supported in IE8, so we felt fine with using the widget in production.
2. With any reasonable LESS / SASS syntax, it's easy to generate complex stuff so long as it's limited to a discrete number of states. Stuff like tic-tac-toe are easily doable if you treat them as a state-machine.
3. It's way faster than JS, and there's a good reason for it. CSS can be totally figured out in one round of parsing, and so long as no JS is used to change it, the same parsed state can be used for all of your states. Even though it adds tens of kilobytes to the file size of both CSS and HTML, it's still faster than executing code.
This definitely isn't the right solution for all problems, but I think it's important to think about whether you problem can be solved in pure CSS, and to strongly prefer it for static sites and nearly-static sites.
1: http://codepen.io/scryptonite/pen/oLGzdj?editors=1000
http://kong.詹姆斯.com/
I also wrote a short blog post describing some of the mechanics of the build for those that find that sort of thing interesting.
http://www.詹姆斯.com/blog/2016/07/html-kong
It's just down to how CSS and JS work.
Not always, but it's mostly true.
How many box-shadows is it using?