Scott Hanselman

Skip Intro - CSS3 is the new Flash

January 23, '12 Comments [45] Posted in HTML5
Sponsored By

FutureSplash Animator, ahem, Splash ScreenI remember spring of 1996 when FutureSplash Animator came out. That was 16 years ago, youngsters. Our minds were blown. No one had seen a cell-based animation editor before that was so easy. This was the beginning of Flash. Macromedia bought them, and then Adobe bought them.

Now, almost fifteen years of amazing animations, full screen fun, loading screens, auto-play music and skip intro links, Flash (and browser plugins for general use) seem to be on the way out. Proprietary binary formats are being replaced by angle brackets and curly braces.

Just when we think we've seen the limits of HTML5, CSS3 and JavaScript, another Danish 12 year old succeeds in a complete emulation of a Commodore 64 using only CSS3 or some other such magic.

But why do we hate Flash? Is it because it's a browser plugin? Is that the only reason, and even then, is it a good one? Why hate Flash? It brought us sites like this one and, of course, the greatest flash site in history.

Just to level set, take a moment and type "about:plugins" into Chrome or Firefox's address bar.

Don't fool yourself into thinking that you're browsing a plugin-free web. My Chrome instance has 15 plugins, including Google Update, Google Talk, Quicktime, Acrobat, Java, Silverlight and Flash just for starters.

In fact, today, more people have Flash or Silverlight than have Webkit. LiveScript, then Java, Flash, Silverlight, then JavaScript again, Google NaCl, and on. You've likely heard of Google NaCl (Native Client). Here's a fun quote from Matasano Security in an article called The Security Implications Of Google Native Client.

Google NaCl is, on its face, a crazy-talk idea. It’s a browser plugin that downloads native x86 code from a website and runs it on your machine. If this sounds familiar, it’s because Microsoft tried it over a decade ago with ActiveX.

You can tell how excited people are about any new Web Technology by measuring how long it takes until the obligatory "An Entire Desktop Operating System recreated in New Technology" examples show up. Ahem. I mean, seriously. Just the fact that I can Google with Bing for "Windows 7 in CSS3" and get more than one example of how to emulate Windows 7 using CSS.

However, just because you CAN do something doesn't mean you SHOULD. I prefer to use HTML5, CSS and JavaScript to create clean sites that use responsive design and progressive enhancement and are viewable as documents everywhere. I predict a clearer line will be drawn soon between sites and applications. Ironically, rather than updating  a hundred apps to get the latest features, I'll instead update my browser a hundred times.

Check this amazing webkit abuse example: http://acko.net. He's truly pushing the limits of CSS3. Actually, no, it's the limits of the WebKit extensions to CSS3. As Pete Brown said, "wow, that's awesome. In the way that a circus is awesome."

UPDATE: Just to be clear, I love what Steven Wittens from http://acko.net is doing. I'm not meaning to pick on his site at all. One of the significant things worth pointing out about Steven's site is his use of media queries and CSS is all client site and works on any browser. It degrades cleanly. Yes, it's a "gaudy tech demo" but Steven backs it up with clean markup and a site that is smart enough to be functional on any browser (both past and future). His site is totally appropriate to his audience and is a good example of progressive enhancement.. I am in awe of his technical chops and encourage you to check out his content which is also excellent.

Here it is as an animated GIF. Why a gif? Because it's 100% compatible. ;) Maybe I should have used Flash.

The #1 benefit of HTML5, CSS3 and JavaScript is one thing. It's not what they can do, or how they do it. It's that they are owned by everyone. Angle brackets and curly braces are the tools of future, no question. I think we do need to ask ourselves what we want to build with those tools. HTML5, CSS3 and JavaScript of 2012 offer us all the power (and more) of FutureSplash from 1996. Let us not abuse that power and relive the sins of the father.

"The more freedom and power you have, the more you need someone to tell you what not to do." - Pete Brown

Funny thing about all this no technology. You still need a designer.


Sponsor: This week's ComputerZen feed was kindly sponsored by DevExpress. Do check out their new stuff like DXv2 and check out a free trial of their complete suite of Developer Tools. I've personally been a huge CodeRush fan for years.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Monday, January 23, 2012 8:18:32 PM UTC
How does CSS3 move forward? With browsers showing off their custom extensions, and then arguing it out in the W3C. There's nothing wrong with using them to show off cool concepts, as long as they fallback to something sane if your browser doesn't support them. I expect Firefox dev builds and others have these same extensions named with their own prefix even, and until the W3C approves it, their prefix will remain.

It sounds to me like you don't understand the process by which we have arrived a this point.

tl;dr There is nothing wrong with showing off what can be done with up and coming specifications.
Monday, January 23, 2012 8:28:17 PM UTC
FYI ... your 100% compatible animated GIF is not compatible with Outlook 2010's built-in feed reader -- it only shows a static image of the first frame.
Mike
Monday, January 23, 2012 8:30:09 PM UTC
"I think we do need to ask ourselves what we want to build with those tools."

Nailed it.

Personally I believe the web should be respected for what it is - web sites made up of web pages. Those pages should not be trying to emulate traditional apps, they should be embracing the simplicity of the web. Wasn't that one of the reasons why we started writing web apps in the first place?

My parents can use the web. Can they use computers? Nope.
Ben
Monday, January 23, 2012 8:45:42 PM UTC
I started working with Flash in 1999, and then Silverlight in 2009. One of the biggest advantages of both Flash and Silverlight has been their cross-browser compatibility. For the most part it's been something you can depend on. So you don't have to waste any time dealing with strange compatibility bugs.

With HTML5/CSS3/JavaScript we're forced to deal with cross-compatibility issues once again and still expected to crank out top notch interactive web applications. I need to play catch up with these technologies, but I'm not looking forward to the debugging that will surely be involved.
Monday, January 23, 2012 8:49:35 PM UTC
The reason that Flash sucks actually has as much to do with the toolkits which are necessary for Flash as the plugin itself. Flash Professional has been (seriously) broken for at least five years (there were problems before CS3) and there seems to be little interest in fixing it. And I'm not talking about "there are bugs in the IDE", I mean that there are fundamental bugs in the implementation of the language.

Whether you like AS3 (or AS2) or not, the only word you can really use for the implementation is "broken". Requirements like "no collision between instance names even if the objects are complete unrelated" (a problem experienced *frequently* in Flash Pro.), and memory leaks in basic components (like, say, the select tool) are unacceptable. I've lost at least a few man-months trying to get the Flash components to work as expected, and in some cases I simply had to give up (asdoc is a miserable piece of *expletive deleted*, RemoteObject is adequate, most of the time, but then it will fail without giving any useful feedback whatsoever (there was one time that I found that a module was not compiled correctly and it overwrote the majority of the class definitions related to Remoting)).

Then there is the fact that Air looks awful, and has terrible performance, but I suppose we should constrain ourselves to the browser.
Monday, January 23, 2012 8:56:02 PM UTC
Nathan - I'm very familar with the process and have worked on standards with standards orgs before. I'm not complaining about the process, the vendor prefixes or the showing off. My concern is when the showing off gets put into products without thinking. I realize that Steven Wittens is experiementing and I'm all for it. My concern is when technology demos become the next Skip Intro.

Mike - Outlook chooses to turn off the animation. They can animate, but they don't.
Monday, January 23, 2012 8:57:39 PM UTC
For some examples of truly amazing stuff done in only 1K of CSS3, check out CSS1K.com.
Monday, January 23, 2012 8:59:12 PM UTC
Flash is more expensive to develop in, and indefensibly insecure. Besides, we should already know CSS, so this means focusing more on that than spreading ourselves across more technologies.
Monday, January 23, 2012 9:07:34 PM UTC
Hanselman is going to receive one of those emails where he's been blind carbon-copied by the Silverlight product manager. :-)
Monday, January 23, 2012 9:36:19 PM UTC
Steve - ;) No, this isn't about Silverlight. It isn't even about Flash. It's just a subtle reminder to keep the user in mind.
Monday, January 23, 2012 10:24:52 PM UTC
I've been thinking this since I started investigating javascript (and CSS) vs Flash. There's no reason that javascript won't get abused just like Flash did in the wrong hands. The only difference is people won't be able to lay the blame in adobe's lap. The funny thing is javascript animations are just as CPU intensive (or more so) than Flash, with a much higher file size. They are also just as likely to be unusable on a mobile device. HTML5/css3 is only a revolution in that it will allow people to do some of the stuff that Flash did five years ago. People need to focus on usability, not what plugins you are using.
Monday, January 23, 2012 10:35:38 PM UTC
I disagree, this is .
Monday, January 23, 2012 10:38:37 PM UTC
I disagree, this is the greatest flash site in history.
(seems familiar though :-)
Monday, January 23, 2012 10:55:41 PM UTC
The Matasono link 404s. Actual link is

http://chargen.matasano.com/chargen/2009/8/27/the-security-implications-of-google-native-client.html
Monday, January 23, 2012 11:12:44 PM UTC
"People need to focus on usability, not what plugins you are using."

David - True. And Scott touches on this above.

I hear complaints all the time about how people hate Flash. Their reasoning is often illogical. Sometimes they simply have a distaste for Flash based on websites they've seen that are extraordinarily annoying. This is not unique to Flash, as you stated. We will surely be seeing plenty of annoying websites using HTML5 in the future, as well.
Monday, January 23, 2012 11:13:30 PM UTC
Say what you like but a plugin technology is the way to go. Users just need the plugin - I don't see this as a negative or what the big deal is. Write it once and it will work everywhere the plugin is installed. CSS, Javascript and the rest STILL have the same problem and that is each browser does it differently - what a waste of time for everyone to get a site working everywhere!
DotNetDude
Monday, January 23, 2012 11:23:52 PM UTC
DotNetDude - In a sense I agree with you. Too bad so many people disagree. I wonder how the tables would turn if the tools for developing with Flash and Silverlight were entirely free.

As it is developers like to complain that the reason they avoid Flash and Silverlight is that they're proprietary technologies. But would that really matter if the tools were free?
Monday, January 23, 2012 11:35:30 PM UTC
DotNetDude - Ah, but the whole browser is a plugin now. Chrome can update weekly if they want (and daily, as some branches do). Why update a plugin when you can update the whole browser?
Monday, January 23, 2012 11:39:05 PM UTC
It's a bit of a tangent to the actual point about the value of good design but the article about NaCl goes on to say:

"Repurposing an idea from the mid-’90s, NaCl employs a very simple trick to make native X86 programs reliably verifiable. And if you can verify an X86 program, you don’t need a layer between the program and the OS: you can just have rules, and refuse programs that break the rules."

So highlighting how it's pretty much the exact opposite of ActiveX.

I only bring it up since NaCl being like ActiveX is a popular misconception and didn't want anyone to be confused.

Thanks,


Ian Ellison-Taylor
Monday, January 23, 2012 11:41:19 PM UTC
Ian - Thanks for that, although then it begs the question, why aren't all applications verified and why are there viruses at all? Honest question. If this is an idea that's 20 years old, why isn't it commonplace?
Monday, January 23, 2012 11:42:54 PM UTC
Steve - it's probably also the fact that devs don't trust companies with plugin technologies. They could invest a lot of time in mastering the technology only to see it die off or even worse get expensive. The community could start a plugin technology to avoid this though.

All I'm saying is there are times where choice and flexibility are useful/needed but IMO we need to be locked down a bit to produce consistent cross-browser sites.

Another option is for us devs to develop sites in a higher level plugin technology and have it spit out cross-browser markup to the clients. I just don't want to have to worry about the different browsers myself while developing.
DotNetDude
Monday, January 23, 2012 11:45:00 PM UTC
Scott - true about the browsers updating but I still don't want to worry about subtle differences between browsers while developing. Solve that for me and I'm on board. :-)
DotNetDude
Monday, January 23, 2012 11:52:27 PM UTC
Scott, they very well might be some day!

Although the idea is old it has taken some ingenuity to get it to a shippable state. NaCl is, as far as I'm aware, the first practical example and it's only been out since December :)
Ian Ellison-Taylor
Tuesday, January 24, 2012 2:49:47 AM UTC
@Scott: The operating system actually protects against the same things, though in a different way: it checks that you don't mess up other programs or the operating system - plugins and the browser in NaCl - by using protected memory and restricting the process boundary to system calls - verification and the plugin boundary in NaCl.

The biggest difference is that verification runs before any code, rather than memory protection's late failure. (Of course, virtual memory is a bit more general in usage than just memory protection)
Tuesday, January 24, 2012 3:44:06 AM UTC
I've done a lot of Flex work in the past 3 years, and I will be happy if I never touch it again. The first company I worked for was converting the front end to their entire huge internal web app into Flex, and run it on their aging P4s. Ouch. The decision was questionable, and we weren't doing anything that couldn't be accomplished with JS.

On my personal projects, I just hope that I'm getting the colors of gradients right, and not recreating an abomination reminiscent of Geocities.
Tuesday, January 24, 2012 3:49:38 AM UTC
When it comes to great Flash sites, how can anything compare to zombo.com? Everything is possible at zombo.com.
Tuesday, January 24, 2012 5:59:12 AM UTC
I agree that Flash needs to die and be replaced with something more secure, more open, more functional and easier to develop for.

But to suggest that the current state of HTML meets that requirement is missing the mark a little IMHO.

I'm not advocating flash here, far from it. But here's a list of things off the top of my head that flash has that HTML needs before we can kill it:

- audio
- proper video (codecs,licensing,buffering,switching&serving)
- unified canvas (why separate HTML/Canvas/SVG?)
- animation (tweening&tooling)
- language (why are we still shipping source code around?)
- dev tools

Sure, there are many, many really cool examples of the great new things that the latest wave of advances in browser technologies has brought. I like http://www.chromeexperiments.com/. But these are all written by highly-technical experts. It'll be a long time until your average 'flash guy' will be able to create with HTML what they could with Flash. Although, for some, that's a good thing.
Tuesday, January 24, 2012 12:10:14 PM UTC
One difference is you can always open dev tools and simply remove the intro, in case there is no `skip` button. ;)
Plugins have the problem that they don't integrate well with the browser and different in different browsers, or have you ever seen a full Flash/Silverlight page that wouldn't make you cry? The user has much more control over the html. Also performance can be better managed, e.g. scripts could be disabled by the browser, when for example battery goes low.
The problem with developing html/js/css is that there are no good tools out there(No tools like for Silverlight).
I'm still waiting for Native Client to gain traction =)
Tuesday, January 24, 2012 3:14:33 PM UTC
@David Wallin

We currently have a rotator on our website that brings any computer with IE7 to a crawl written in JavaScript. Flash solution is simpler and quicker and off the shelf. However management doesn't want any flash on the site, and tbh I am not entirely sure why.

Overall I think Flash is pretty good if used as it should be ... a as part of the webpage.
Tuesday, January 24, 2012 3:29:09 PM UTC
Flash performs rather poorly on phones and iPad's.
Tuesday, January 24, 2012 3:30:17 PM UTC
as soon as there is a Skip Intro behaviour we will hate CSS3 and HTML5 the way we hate flash and there will be no equivalent to the Flash ad blockers unless people are kind enough to locate the idiocy on offsite links that TPLs can block. UX is subject to the usual power/responsibility colocation; as in, thank you for saying this but I don't expect anyone to listen ;-( ;-)
Mary B
Tuesday, January 24, 2012 5:05:54 PM UTC
Thinking about what others said on plugins and browser compatibility. I've been following this compatibility stuff since I don't know when, but I recall at some point many years ago alistapart.com and others started really pushing for HTML/CSS standards and killing off browsers that didn't have decent support. This has gone a long way over the years. There are still some compatibility issues, but it's not near as bad as it once was. The death of IE6 was the culmination of this.

A point Hanselman makes here though is also critical. The browsers are being updated frequently. At least this is the case with Chrome and Firefox. It's changed the game. We're really in a new world now of continuous deployment. As the browsers have been upgraded, their compatibility problems are being addressed.

Perhaps the solution to your compatibility complaints is to stop worrying about older browsers? Ignore anything less than 3 years old. So no more IE7, no more Firefox 3.x, etc.

Is that wrong? Think about it, is IE7 a growing market? Is Firefox 3.x? No. What is? Tablets and smartphones on which your plugins don't work. So why are you worrying about a dying product and ignoring a growing market?

Something to think about.
Tuesday, January 24, 2012 7:44:52 PM UTC
@Steve Sheldon.

It ultimately depends on your user statistics. My previous employer who was a charity most of our donations and page views were from IE7 and IE8, FireFox came distant third and we received £5 donation from Mobile users in 3 months (compared to several 100ks from desktop machine). Also overwhelmingly it was Windows Machines ... since the silver surfer crowd mainly donated.

We did have enough iOS users to hack together a video player that would play both flash (if available) and mp4 for iOS. However even that was motivated by the fact that trustees had iPads and not user statistics.

Obviously it is bad to build your site to a certain browser in the first place. But if time is running short, and I have it running in 99% of our users browsers then IMHO I think you can rest easy.

Also at my current employer, I asked if we supported Opera (not that I have many problems with it) when setting up my Development machine. The SEO chap that sits next to me said "Opera is less than 5%, but that is %5 of 20 million, so it might be a good idea".
Tuesday, January 24, 2012 8:04:49 PM UTC
@Steve Sheldon

Furthermore, I am not particular impressed by the continuous deployment situation. While progress is good, Firefox had some very irritating bugs, I can no longer trust it as my "front end dev" platform.

e.g. I recently couldn't login to phpMyAdmin. I thought I had typed the password wrong. After several attempts I typed the password into notepad and cut and paste, no joy.

I then tried in IE8 and it worked perfectly. Firefox cached the form submission :(. This IMHO is basic stuff. I am sure there are other that have had weird issues with FireFox since 3.6.
Tuesday, January 24, 2012 10:32:37 PM UTC
Am I the only one that thought of table salt when seeing "Google NaCl"?
Tuesday, January 24, 2012 11:08:57 PM UTC
@Steve Sheldon

Stop worrying about older browsers? You're dreaming if you think that's possible.

I recently finished a contract in the Australian government department where they were still guaranteeing their clients IE6 compatibility. I'm not saying IE6 is good or anything but there are many reasons why upgrading is not trivial in all cases.

LOL maybe we should forget html, javascript, css, etc, altogether and go with ClickOnce for everything. :p
DotNetDude
Tuesday, January 24, 2012 11:22:55 PM UTC
I love flash for allowing me to create, code and publish a fun little game in one piece of software in next to no time, and for the most part, it works the same in any browser.

I like using CSS and HTML to throw a pretty website together, but it will most likely need some awful hacks to get it to look identical on different browsers (I am pedantic), but that's just the way it is.

I think the vast majority of the arguments are personal preferences rather than actual technical points, but instead of it being different strokes for different folks, it should really be different tools for different jobs, just remember, the job comes first.

'Skip intro' is a perfect example. Remember, "With great power comes great responsibility"

:D
Tuesday, January 24, 2012 11:24:22 PM UTC
Scott, nope you're not the only one =)
Wednesday, January 25, 2012 12:29:11 AM UTC
Hi Scott, my apologies if this is a little blunt but, it's 23rd January 2012 and you have *only* just realised that modern web technologies like CSS3 are the way forward, and Flash is doomed?!

Wow. I'm sorry, that's a typical advertisement for Microsoft isn't it... months/years behind everyone else... as usual.
Wednesday, January 25, 2012 12:37:16 AM UTC
George - Hm, that's quite blunt and not very nice. If you've followed this blog on and off for the last decade or so you'll find that my position hasn't changed (regardless of my employer for the last few years). I've always been a web guy.

You might also note our Web Standards Update from last year if you are looking for more CSS3 support in Visual Studio. http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx

Remember, my blog is MY blog. It's not Microsoft's, nor are the opinions here anyone's but mine.

This post was about how CSS3 is being abused and the shiny demos may cause us (the collective US) to lose our focus on the user.
Wednesday, January 25, 2012 1:34:32 AM UTC
I bet we'll come back to a Flash-like thing in the next decade.
DotNetDude
Wednesday, January 25, 2012 9:27:48 AM UTC
Sir, just out of curiosity and totally out of topic:

Which tool do you use to make those gif-videos?
Wednesday, January 25, 2012 6:31:27 PM UTC
I'm all for CSS3 and HTML5 as I see it improving what we as developers can do in less code that would before before a clutter of code, for example rounded corners before we had the ability to let the browser do it for us. I'm just afraid more and more sites will come out of the wood works similar to the site you demonstrated on the post, this sorta thing happened with geocities back in the day. People started created sites that had a tail of text moving around your cursor and other strange oddities that they thought were cool just because they could do it.
Wednesday, January 25, 2012 7:36:25 PM UTC
Tugberk - That's Camtasia.
Wednesday, January 25, 2012 8:19:47 PM UTC
"Ah, but the whole browser is a plugin now."

Mind = blown.

Sometime in the not so distant future... when all of the fancy JS/CSS3 animated intros take up 100% cpu on the latest and greatest hardware.... someone will make a plugin that optimizes your javascript and css animations and converts it....to flash.
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.