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:
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.
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.
Wrap text so that it completely surrounds elements, instead of limiting elements to floating to the left or right of text.
CSS3 3-D Transforms
Translate, rotate, and scale elements in both 2-D and 3-D space.
Animate elements by automatically varying CSS properties smoothly over time.
Access advanced typographic features in OpenType fonts that include them.
Add color gradients to any property that accepts images.
Create simple animations by smoothly changing CSS property values from a start value to an end value.
Scrolling and zooming with touch
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.
If you are new to CSS3 and Windows 8 development in CSS3, the presentation below will give some good overview about the subject.
Great Demo on Grid Layout, Flex Layout, Multi-column layout, and Exclusions from Christian Stockwell’s presentation “Designing Metro style apps using CSS3”
•Internet Explorer 10 Developer Guide for CSS
•CSS3 For Windows 8 Demo
•IE Team Blogs