As you will see on this page, Internet Explorer 10 will support some new CSS3 features. Here’s a list of these features, and in a blog series I’ll review the ones I find most interesting. Today I’ll review CSS Exclusions.
Advanced Layout
- CSS3 Exclusions
- CSS3 Regions
- CSS3 Multi-column Layout
- CSS3 Flexible Box (“Flexbox”) Layout
- CSS3 Grid Alignment
- CSS Device Adaptation
Visual Effects
- CSS3 3-D Transforms
- CSS3 Animations
- CSS3 Fonts
- CSS3 Gradients
- CSS3 Transitions
- CSS3 Text
- Text Drop Shadows
- Hyphenation
Panning and Zooming
Removal of Style Sheet Limits
Specifying Selectable Text
1. CSS Exclusions (formerly known as positioned floats):
These things are just great. This msdn page covers this features in depth.
CSS Exclusions are new in Internet Explorer 10 and Metro style apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats.
Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.
Support for CSS Exclusions in Internet Explorer 10 and Metro style apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application.
CSS Exclusions Example
Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Metro style apps using JavaScript, such as CSS Grid, CSS Multi-column, and CSS Flexbox. CSS Exclusions are defined in the World Wide Web Consortium (W3C)’s CSS exclusions and shapes draft. The following subsections provide a brief overview of CSS Exclusions and how to implement them.
For more information about CSS Exclusions, please refer to this page.