[This documentation is preliminary and is subject to change.]
With strong support for Cascading Style Sheets, Level 3 (CSS3) in Windows Internet Explorer 9 and Windows Internet Explorer 10 Consumer Preview, you can be sure that your website's design" just works" across all popular browsers. This portion of the Windows Internet Explorer Dev Center shows you some of the potential that enhanced support for the Cascading Style Sheets (CSS) standard creates for your website's content design and layout.
In this section
| Topic | Description |
|---|---|
|
By using CSS3 to round the corners of layout elements, you can refine the appearance of your website. This topic demonstrates a few basic ways to make your website layout more compelling by using the new built-in support for rounded corners in Internet Explorer 9. | |
|
This topic shows you how to add drop shadows to the outside or inside of your layout elements by using Internet Explorer 9 and CSS3. Shadows even follow the corner curves that you create with the new rounded corner support in Internet Explorer 9. | |
|
With CSS3 and Internet Explorer 9, you can create visually compelling buttons with just a little bit of markup. This topic shows you how to transform a simple hyperlink into a button styled completely with CSS. | |
|
This topic shows you how to incorporate new CSS3 Fonts features into your website so that your type design is emphasized in both Internet Explorer 9 and other modern browsers. |
Introduction
If you're a seasoned web developer, you know how frustrating it can be when different browsers offer varied levels of support for the cutting-edge features you want to use. Microsoft has worked hard with both standards bodies and other browser vendors to close this feature gap. We're a member of the CSS Working Group (CSSWG), and we know that regular engagement with the World Wide Web Consortium (W3C), developers of other browsers, specification editors, and experts invited from the broader community is necessary to advance the state of the web for all users.
To that end, we have added support for many CSS3 features in Internet Explorer 9, and have introduced even more in Internet Explorer 10. You can see a full list of new features in the Internet Explorer 9 Guide for Developers and the Internet Explorer 10 Guide for Developers. Here are some highlights:
- Built-in support for rounded corners on layout elements using the border-radius property
- Fun built-in visual effects using 2-D transforms
- Enhanced typography with support for new font formats and font linking
- Full support for the opacity property, enabling you to set the level of transparency you want on page elements, plus new color models
- Support for drop shadows on layout boxes
- Media Queries support enables you to adapt your page to whatever device your customers use
- Plus support for CSS3 namespaces, new values and units, new selectors, and expanded support for CSSOM Views
Internet Explorer 10 brings even more new design and layout features:
- New advanced layout options, including full multi-column support
- New visual effects, including 3-D transforms, transitions, animations, gradients, and text-shadow support
- And more!
Internet Explorer team blog posts
The IEBlog is your direct line to the Internet Explorer team at Microsoft. You can find out about the latest developments in content design and layout by viewing the posts tagged with "CSS."
Here are several recent blog posts you might find useful:
| Title | Description |
|---|---|
|
With cross-browser support for both the CSS3 @font-face rule and the Web Open Font Format (WOFF) font packaging format, modern Web typography has expanded far beyond the realm of "Web-safe fonts." | |
|
Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and Internet Explorer 10 allow Web developers to create richer experiences than they previously could. Two related features, CSS3 Transitions and CSS3 Animations, give Web developers a declarative way to add personality to webpage interactions easily. | |
|
Internet Explorer 10 introduces two new CSS features designed to make it easier for developers to create rich text-centric webpages and apps. CSS3 Regions provides a lightweight mechanism to flow content through multiple non-contiguous areas. Internet Explorer 10’s support of CSS3 Hyphenation gives developers a simple mechanism to hyphenate text in a wide range of languages. | |
|
Internet Explorer 10 introduces support for hardware-accelerated CSS3 text-shadow. The text-shadow property is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text. | |
|
Internet Explorer 10 introduces vendor-prefixed support for CSS3 Gradients. | |
|
Internet Explorer 10 contains many new CSS3 features all developed as implementations of evolving Web standards. This post looks at three of those CSS features—CSS3 Grid Layout , Flexible Box Layout , and Multi-column Layout. |
Internet Explorer samples gallery
The Internet Explorer Samples Gallery can inspire you to implement some of the new design and layout features in Internet Explorer.
Here are just a few samples:
| Sample | Description |
|---|---|
|
CSS Flexbox lets you create webpages with elements, controls, forms, toolbars, and menus that can resize and reposition themselves when the user changes the size of the browser window. | |
|
While printed newspapers are giving in to electronic versions, the column is alive and well online. CSS Multi-column layout enables you to create attractive text layouts in a number of variations. | |
|
CSS Grid enables you to create webpages with a layout where the elements overlap and respond to changing window size, without requiring complicated pixel calculation. | |
|
CSS Exclusions enable you to create webpages where text and other content can wrap around specific elements. This sample shows how to use exclusions to create complex layouts with elements absolutely positioned relative to a container. |
Internet Explorer Test Drive demos
The Internet Explorer Test Drive is a great way to explore the possibilities of content design and presentation in both Internet Explorer 9 and Internet Explorer 10. For the full list of available demos, see the Test Drive Site Map. Some of our favorite CSS demos are listed here:
- Rounded corners: Border Radius & Hands On
- 2-D Transforms: Hands On & Flickr Postcards
- CSS3 Fonts: Web Fonts and More Web Fonts
- Opacity/transparency: Hands On
- Box shadows: Hands On
- CSS3 Media Queries: CSS3 Media Queries & Media Query Listeners
- Grid: Hands On
- Flexbox: Hands On
- Regions: Hands On
- Exclusions: Hands On
- Multi-column: Hands On
- 3-D Transforms: Hands On
- Transitions: Hands On
- Animations: Hands On
- Gradients: Hands On
- Text shadow: Hands On
Build date: 3/13/2012
