Sencha Inc. | HTML5 Apps

Blog

The HTML5 Family: CSS3

June 01, 2010 | Jay Robinson

Overview

HTML5As Michael mentioned last week in the HTML5 overview, many of the benefits people associate with “HTML5” are actually provided by CSS3 and Javascript. Ultimately, HTML only defines content structure, while Javascript provides behavior and CSS provides presentation. CSS3 builds on the widely supported CSS2.1 spec, and allows for truly stunning interfaces. One of the most interesting features of CSS3 is CSS Animations, which, in addition to CSS Transform, provides a robust visual experience rivaling Flash or even desktop applications.

What follows is a high-level overview of the massive CSS3 spec, subdivided into a variety of modules. Subdividing the spec into modules means that one contentious module does not hold up the development of the spec, and browser vendors can implement modules incrementally. While CSS3 includes many different modules in various stages of approval, this article will cover those considered a higher priority by the World Wide Web Consortium (W3C).

Download Sencha CSS3 Cheat Sheet

Transitions & Animations

Perhaps the most exciting modules of CSS3 are Transitions and Animations. The Transitions API allows the developer to specify that when CSS property is changed it animates from its initial state to its final state in a smooth transition. For example, a user hovering a link could trigger a color change and increased font-size over a time period of one second. CSS Transition rules can be added to elements in the DOM on the fly via Javascript, making their implementation simple for developers. CSS Transitions only apply to properties that vary continuously For example, you can’t use Transitions to animate between z-index positions.

An example of a CSS3 Animation in action at Panic.com.

The Animations API, on the other hand, allows for multiple changes in CSS properties values over time. Animations can iterate a number of times, or repeat infinitely. Animations use keyframes, allowing the developer to divide the animation into stages, i.e. 0%, 50%, 100%, in order to specify what properties are added at what point in time. Visual effects that transition between keyframes are automatically calculated by the browser, which provides an enormous performance gain when compared to Javascript animations.

A great example of CSS Animation exists on Panic.com’s Transmit page, in which they style a div to behave like a card. The user is presented with content on the front of the card and clicks to start an animation as the card flips over and presents more information on the back.

2D & 3D Transforms

The Transformations API allows for rotating, scaling, skewing and moving page elements in 2D or 3D space. Transforms can be used in conjunction with CSS Animations to introduce a new level of interactive 3D experiences. Have a look at this demo created by Andy Clarke: by combining CSS Animations and Transforms, Andy has created a new way to browse posters in a much richer way than a standard color change or border.

Selectors

The new Selectors module introduces a variety of new methods for finding elements to style. Some of the most useful additions are the ability to select elements based on their placement in the DOM or on the existence of an attribute. Two fantastic new pseudo-selectors are :first-child and :last-child which easily enable the targeting of the first and last item in a container.

With attribute selectors, the exact name or spelling of the attribute does not matter, as the browser will match the attribute name whether it’s valid or not. For example, to target every anchor with a href attribute that starts with 'http://www.extjs.com/', the CSS3 Selector is a[href|=http://www.extjs.com/]. There are lots of practical uses for this: for instance, you can style all external links on a site differently than internal ones.

These new selectors allow CSS3 to stay relevant as HTML coding practices continue to evolve.

Backgrounds & Borders

The CSS3 Backgrounds and Borders module allows for multiple backgrounds on elements and a new array of features for styling borders. The new border-image property allows the use of an image to define a CSS; enabling rich, sustainable visual styles, like chat bubbles and intricate frames. CSS3 includes many other text and box effects such as box-shadow, text-shadow and border-radius that standardize popular web design and UI effects.

The new CSS3 gradient() allows a web designer to specify a background-color gradient that shifts from one color to the next programmatically. This means that the browser does all the rendering and saves the designer the trouble of generating an image.

Color

The Color module includes a handful of different ways to specify transparency values in colors and background-colors. For example, the use of an Alpha value in the new rgba() color function allows a web designer to use a black for a box-shadow effect that has 20% transparency. E.g. rgba(0, 0, 0, 0.8);

Fonts

The CSS3 Fonts module allows for a font file to be included as an asset of a webpage, and accessed by a font-family designation in stylesheets. Broad implementation of the Font module would eliminate the need for various image replacement techniques (like Cufon or sIFR) for styled HTML headings.

Some version of the Fonts module, also known as @font-face, has existed since CSS2 and was initially supported by IE5. However, getting vendors and spec writers to agree on one font format has proved to be a long path. It is important to use a properly licensed font for web use, either from a commercial or open-source provider.

Layouts

Multi-Column Layout defines new CSS properties for columns of text. Content can flow into multiple columns, with a gap, and optionally a rule, between them.

The Flexible Box Layout module defines a new display value which allows for flexible layouts that previously required complicated floats with nested divs, or required resorting to tables for layout. The ability to vertically align block level elements is also a welcome addition. These features provide robust layout options like those available with Ext JS.

Media Queries

Media queries are an enhancement of the @media rules already in CSS. The new Media Queries in CSS3 make it easy to target specific devices in different circumstances. For instance, stylesheets could be defined to be used on TVs, on mobile devices, or only in print view. Additionally, media queries can be set to target specific resolutions, which is helpful with the ever-rising number of mobile devices.

And the rest…

Other modules included in CSS3 include CSS Paged Media, which includes notes on how to use headers, footers and page numbers in printed webpages; CSS Ruby (or ruby with a small ‘r’ when referred to in the CSS3 spec), useful for marking up text inline with a pronunciation guide; CSS Marquee, a set of specifications for automated text-scrolling in the manner of an electronic marquee sign; and CSS Speech, which includes notes on how speech synthesizers should modulate while reading text.

There are still many other modules not yet ready for recommendation. The W3.org website has a complete list.

What does it all mean?

While HTML5 seeks to rectify some ill-considered practices or elements in HTML4 and XHTML1.1, CSS3 only enhances or further defines the already robust CSS2.1 spec. As you can see, CSS3 has many different modules, and promises to be a vital tool in web site and application design. It cannot be said that CSS3 has targeted one particular goal, but rather that these various modules work together to allow an overall richer web experience: pages will be easier to style, more pleasing to interact with, and work in expected ways across the wide variety of devices used to access the web today.


The HTML5 Family

Our continuing coverage of the many technologies which make up what people refer to as “HTML5”, we call The HTML5 Family. See all our published posts here:

  1. A HTML5 Primer for the Overwhelmed
  2. Web Storage
  3. CSS3 « Currently reading
  4. Web Workers

There are 18 responses. Add yours.

nickevin

4 years ago

Nice post, I wonder how important CSS5 for ExtJS 3/4+ ?
I am looking forward to the next step.

Rob

4 years ago

CSS3 has NOTHING to do with HTML5 and works equally well with HTML4.01 and XHTML. It is NOT part of the “HTML5 familoy” and it doesn’t matter what markup language you use. If it works in the browser, it works…period!

Michael Mullany

4 years ago

@Rob, this is part 2 in a blog series, you might want to read the initial HTML5 overview where we actually make your exact point but then propose a more expansive definition of these next generation technologies as “HTML5 Family” As far as I know, there won’t be a browser that supports CSS3 but not HTML5

Webstandard-Blog

4 years ago

CSS3 & HTML5 are definitely the future, but using it now means thinking about fallbacks for all those browsers that don’t support those standards not just yet. And that means sometime a lot of overhead. Unfortunately!

praveer

4 years ago

nice post.
thanx

ken the tech

4 years ago

CSS3 and HTML5 are the same generation brothers but there is no direct connection between since CSS3 is working on HTML4.1 as Rob already said.
Waiting for the day both will be implemented largely into the web browsers.

Stormchild

4 years ago

Some of you guys really went out of your way to miss the point of the article.

Neeke

4 years ago

We need to wait for a moment to use it.

Quan Tin Tan Ban

4 years ago

If your browser is not up to date, throw it away.

No fallback support should be given for any user that do not update to the latest Chrome/Firefox/IE, ..

IE6 should definitely be obsolete.

Alex S

4 years ago

Great continuation post.  I still see it taking another 2-4 years to play with the shinny stuff within enterprises.  Once everyone upgrades to the latest IE, FF, Safari, Chrome or insert flavor of the month…. We’ll still have issues.  Kinda makes me miss the good ol’ days of IE only development j/k.  Ext saved me from that hell.

Eric Berens

4 years ago

CSS3 and HTML5 are great, but a very small percentage will be using it until there is a large online movement to force users with old browsers to update. How long has history shown us that an old browser sticks around for? It’s the catering to them by creating “fallbacks” that keeps them around for so long. A lot of the internet population doesn’t even know that their browser is old and outdated.

What should be done? Take YouTube…they are nudging users to upgrade by removing support for IE6. What do you think would happen if Facebook, Twitter, or any other large site for that matter followed in the same footsteps of YouTube. Do you think people would just stop using those sites? Nah, I don’t think so. We have to create the reason behind why people should upgrade.

There should be a threshold of supporting old but it shouldn’t extend back 10+ years just to include the old as a fall back.

annuaire généraliste

4 years ago

I like do some things with CSS3 that before i needed photoshop. It’s crazy to know that HTML 5 support video. Nice!

waringprowafflemakh

3 years ago

i am unquestionably impressed and justifiable dictate to conjecture thanks as a waiting to the abhorrent info cry update us repayment in brace of fit portion in your be prudent of thanks surely again.

waringprowafflemakd

3 years ago

i am justly impressed and even-handed after to round thanks with a item the extraordinary info happiness update us switch in search thorough allocate in your be loath of thanks beyond again.

RBBlelm

3 years ago

Thanks for your ideas. One thing really noticed is the fact that banks and financial institutions are aware of the spending behavior of consumers as well as understand that a lot of people max away their real credit cards around the getaways. They smartly take advantage of that fact and commence flooding your own inbox and snail-mail box having hundreds of no interest APR card offers shortly when the holiday season closes. Knowing that if you are like 98% of the American community, you’ll jump at the opportunity to consolidate financial debt and transfer balances towards 0 interest rate credit cards.

Rya

3 years ago

awesome blog. a lot of good info. thanks for the post.

??????????? ?????????

3 years ago

       
Well done, my essay was a real success among tutors. I am so satisfied with your work.

??????????? ?????????

3 years ago

         
That was an excellently written essay, thank you so much.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.