Skip Intro - CSS3 is the new Flash
I 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.
About Newsletter
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.
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.
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.
Mike - Outlook chooses to turn off the animation. They can animate, but they don't.
(seems familiar though :-)
http://chargen.matasano.com/chargen/2009/8/27/the-security-implications-of-google-native-client.html
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.
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?
"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,
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.
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 :)
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)
On my personal projects, I just hope that I'm getting the colors of gradients right, and not recreating an abomination reminiscent of Geocities.
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.
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 =)
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.
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.
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".
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.
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
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
Wow. I'm sorry, that's a typical advertisement for Microsoft isn't it... months/years behind everyone else... as usual.
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.
Which tool do you use to make those gif-videos?
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.
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.