Internet Explorer 10 in the Windows Developer Preview introduces two new CSS features designed to make it easier for developers to create rich text-centric Web pages and apps. CSS3 Regions provides a lightweight mechanism to flow content through multiple non-contiguous areas. IE10’s support of CSS3 Hyphenation gives developers a simple mechanism to hyphenate text in a wide range of languages.
These two new features complement other great CSS features we previously announced, including CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Multi-column Layout, and Positioned Floats. Taken together, this set of standards-based features provides developers powerful new tools for designing great Web apps and sites that scale across a variety of screen resolutions and form factors.
Here’s an illustration of how you can use CSS3 Regions:
CSS has traditionally been a styling language optimized to lay out content on bottomless, vertical-scrolling Web pages. CSS defines properties that developers can use to position content, including several mechanisms to handle ‘overflow’—the handling of content that doesn’t fit within its containing space. Most typically, Web pages manage overflow by adding scrollbars. Experts in such matters have blogged on the impact of scrolling on reading speed and comprehension.
It’s traditionally been challenging on the Web to creating complex text-centric designs that look great—like newspapers or magazines—without relying heavily on scrollbars.
A few short months ago Adobe introduced the CSS3 Regions working draft at the W3C with Internet Explorer’s Alex Mogilevsky as co-editor. CSS3 Regions offers developers a new approach and is a great addition to the Web platform. Internet Explorer 10 in the Windows Developer Preview gives developers their first look at CSS3 Regions in vendor-prefixed (-ms-) form.
To enable advanced scenarios, the CSS3 Regions specification also defines an event, a property, and a method that, together, enable developers to create and manage regions dynamically through JavaScript. We have an early version of those capabilities available in IE10. The current draft of the W3C CSS3 Regions specification describes these in detail.
The ietestdrive.com demo Hands On: CSS3 Regions provides an interactive example of CSS3 Regions in action (Internet Explorer 10 in Windows Developer Preview required).
As HTML5 Web applications continue to evolve, we expect developers will want to use CSS3 Regions to create complex text layouts designed to adapt fluidly to a variety of different screen resolutions and form factors.
These two new features complement other great CSS features we previously announced, including CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Multi-column Layout, and Positioned Floats. Taken together, this set of standards-based features provides developers powerful new tools for designing great Web apps and sites that scale across a variety of screen resolutions and form factors.
CSS3 Regions
CSS3 Regions adds a new mechanism to manage content overflow. In addition to adding scrollbars, clipping content, or letting content spill outside of its container, developers can now direct the overflow from one element into another using a pair of new CSS properties.Here’s an illustration of how you can use CSS3 Regions:
DOCTYPE HTML>
<html>
<head>
<style>
iframe {
-ms-flow-into: contentIdentifier; /* causes the iframe to hide */
}
#div1, #div2 {
-ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */
width: 120px;
height: 300px;
float: left;
border: solid 2px lightblue;
margin-right: 8px;
}
style>
head>
<body>
<iframe src="content.html">iframe>
<div id="div1">div>
<div id="div2">div>
body>
html>
It’s traditionally been challenging on the Web to creating complex text-centric designs that look great—like newspapers or magazines—without relying heavily on scrollbars.
A few short months ago Adobe introduced the CSS3 Regions working draft at the W3C with Internet Explorer’s Alex Mogilevsky as co-editor. CSS3 Regions offers developers a new approach and is a great addition to the Web platform. Internet Explorer 10 in the Windows Developer Preview gives developers their first look at CSS3 Regions in vendor-prefixed (-ms-) form.
To enable advanced scenarios, the CSS3 Regions specification also defines an event, a property, and a method that, together, enable developers to create and manage regions dynamically through JavaScript. We have an early version of those capabilities available in IE10. The current draft of the W3C CSS3 Regions specification describes these in detail.
The ietestdrive.com demo Hands On: CSS3 Regions provides an interactive example of CSS3 Regions in action (Internet Explorer 10 in Windows Developer Preview required).
As HTML5 Web applications continue to evolve, we expect developers will want to use CSS3 Regions to create complex text layouts designed to adapt fluidly to a variety of different screen resolutions and form factors.
Комментариев нет:
Отправить комментарий