HTML and CSS Reference
In-Depth Information
So if you're animating for modern browsers, stop using
setInterval
or
setTimeout
in JavaScript and learn
to take advantage of
requestAnimationFrame
. Otherwise, use CSS3 based animations when you can and where
it's supported. Learning and using both will save time and headaches down the road, especially when you have to
optimize or debug due to publisher kickback or get assets handed off from creative agencies.
CSS3 vs. Flash
All you have to do is read through web articles stating Flash is dead and it shouldn't be long until you get a sense of the
complete madness on the Web. The mob screams, “Long live HTML5!” Coming back to reality for a moment, I'm not
here to pick sides or even discuss in depth on that trivial topic. It's not what this topic is about, nor do I want to waste
your time on it. Simply put, both technologies have their pros and cons, but one thing is for certain: HTML5, CSS3,
and JavaScript are here to stay, so whether you choose to use them or not, you should damn well learn them. Flash is
still an amazing platform in my book and has many years on the latest web standard.
However, CSS3 particularly for its animation features to emerging browsers natively, demonstrate how web
standards will soon be the standard going forward. A really good side-by-side comparison on Sencha's blog showcases
how two identical ads, one created with CSS3 and one with Flash, pair up (
http://dev.sencha.com/deploy/css3-ads
).
Improvements are necessary, but for an initial look, they are pretty darn close and it shows the plugin-free but rich
web is right around the corner. What's not apparent is that this example also demonstrates something much
broader: that CSS3 ads live in the same domain as Flash ads and my thought is that this is where web advertising
will be for some time: a combination of Flash and web standards (HTML5/CSS3/JS) living side by side in harmony.
(Cue inspirational music . . .)
One thing that comes to mind is file size. Having created web advertisements for quite some time and knowing
that publishers keep tight control on the file size spec, I have a couple questions I'd like answered.
•
How much k-weight should HTML/CSS/JavaScript ads have?
•
Can loading of assets and external files be controlled in sequence?
•
How are analytics and measurement affected?
•
What happens to performance and user experience if multiple units are loaded onto the page
at once?
These questions come up more and more often as clients want to use HTML5 for reach, and really, there is no
silver bullet until the specifications are set, tested and adopted. Ads using the Flash Player weren't adopted overnight
so what makes this any different? One thing is for certain, though: publishers, agencies, and ad-serving platforms, as
well as the IAB, need to work out and agree on a set of standards to remedy these pressing issues before they become
a very apparent and widespread problem throughout the industry. Luckily, there is an active working group dedicated
to this initiative and many others that fuel our industry. You can learn more about these functions by heading over to.
CSS3 Presentations and Style
Now that I've covered a lot on CSS3 animations and how they play out in the space, this section reviews the new CSS3
presentation enhancements in the modern Web. Traditionally, CSS stood for layout and style, but with the latest
features coming in to play—shadow, transforms, and gradients—more can be done with CSS than ever before. Having
already covered some of the new selectors, pseudo classes, web fonts, and animation, let's dig in and take a look at
some of the other enhancements to CSS's conventional approach to presentation and style.
