Introduction to CSS3: Responsive Web Design Training with Presentation|Video
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
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. |
|
Take the available space into account when defining box dimensions, thereby enabling relative sizes and positioning. |
|
Flow content into multiple columns that allow for a gap and optional rule between them. |
|
|
(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
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. |
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.
Introduction to css3 from Doris Chen
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
•https://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx
•CSS3 For Windows 8 Demo
•Feature-specific demos
•Real-world demos
•IE Team Blogs