CSS3-LogoCSS3-LogoCSS3-Logo

Internet Explorer 10, as well as Windows Store apps using JavaScript in Windows 8, adds support for several new Cascading Style Sheets (CSS) features, including new advanced layout, visual effects, and panning and zooming capabilities. This trend began with Windows Internet Explorer 8 and continued with Windows Internet Explorer 9 (support for CSS rounded corners, multiple background images, new color models and opacity, CSS3 Fonts and Web Open Font Format (WOFF), 2-D Transforms, Media Queries, CSS3 Namespaces, and more). Internet Explorer 10 continues this progress by introducing support for the CSS features.

Responsive web design (according to Wikipedia) is an approach to web design in which a designer intends to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

CSS3 feature are the elements of responsive web design.  Here is the list of grouped CSS3 feature that we will go over with:

Important: These features work identically in Internet Explorer 10 and Windows 8 Store apps using JavaScript.

Media Queries

The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a very small screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (that has a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.

Advanced Layout

CSS3 Grid Layout

Divide space for major regions of a webpage or web app, and define the relationship between parts of an HTML control in terms of size, position, and layer.

CSS3 Flexible Box ("Flexbox") Layout

Take the available space into account when defining box dimensions, thereby enabling relative sizes and positioning.

CSS3 Multi-column Layout

Flow content into multiple columns that allow for a gap and optional rule between them.

CSS Exclusions 

(positioned floats)

Wrap text so that it completely surrounds elements, instead of limiting elements to floating to the left or right of text.

Visual Effects

CSS3 3-D Transforms

Translate, rotate, and scale elements in both 2-D and 3-D space.

CSS3 Animations

Animate elements by automatically varying CSS properties smoothly over time.

CSS3 Fonts

Access advanced typographic features in OpenType fonts that include them.

CSS3 Gradients

Add color gradients to any property that accepts images.

CSS3 Transitions

Create simple animations by smoothly changing CSS property values from a start value to an end value.

New Features

Scrolling and zooming with touch

Using CSS, you can control the scrolling and zooming views of your touch-optimized webpage in Internet Explorer 10 or your Windows Store app using JavaScript in Windows 8.  Two key components of touch interactions are scrolling (or panning) and zooming. Touch-enabled webpages and applications use scrolling and zooming to enable users to access more content, move through items in a list, view more detail in a photo, and much more.

To view working sample code that incorporates CSS features, download the Scrolling, panning, and zooming with touch input sample from the Internet Explorer Samples Gallery on MSDN.

Presentation

If you are new to CSS3 and Windows 8 development in CSS3, the presentation below will give some good overview about the subject.

Video Presentation

Great Demo on Grid Layout, Flex Layout, Multi-column layout, and Exclusions from Christian Stockwell’s presentation “Designing Metro style apps using CSS3”

Resources

•Internet Explorer 10 Developer Guide for CSS

http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx

•CSS3 For Windows 8 Demo

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

•Feature-specific demos

http://ie.microsoft.com/testdrive/

•Real-world demos

http://www.beautyoftheweb.com/

•IE Team Blogs

http://blogs.msdn.com/b/ie/