The Future of Style

Dev.Opera: Understanding the CSS Transforms Matrix

Tiffany Brown — 2012-05-23T15:37:22+00:00

In this article we explain how transform matrices work — these involve some rather complicated math, but they are not so hard to understand when you sit down and check out a few examples! Once you understand how to put together matrices, you can use them inside the CSS transform: matrix(); and transform: matrix3d(); functions to apply transform effects to your web pages.

Surfin' Safari: Last week in WebKit: Input padding, 8-bit canvas and CSS Variables

Peter Beverloo — 2012-05-22T19:07:04+00:00

This update addresses last week’s 820 changes to WebKit’s repository, up to revision 117727.

The debugger sidebar for Web Inspector’s Script Panel can now be toggled using a button. Console messages about Content Security Policy violations now name the directive and support for saving snippets has been implemented.

Using the latest CSS Flexible Box module now requires you to define an element’s display property as “-webkit-flex” as opposed to the previous “-webkit-flexbox”. Input elements are now two pixels smaller in width, as one pixel of unnecessary padding has been removed from either side.

Image smoothing for the <canvas> element may now be disabled. Loading video files served through scripts without a supplied mime-type will now work, and two issues with CSS 2.1 support have been fixed, namely text baselines in the first row of a table and wrapping stand-alone table columns in anonymous tables.

A compile-time flag has been introduced for toggling support for CSS Variables in WebKit ports. Furthermore, an initial test-suite to test the status of the implementation has landed as well.

Other changes which occurred last week:

Cloning DOM nodes has become ~10% faster, as WebKit no longer reparses the style attribute.
Chromium has enabled support for <datalist> for e-mail input fields.
The Qt port enabled support for SVG Fonts, while the EFL port is working on Web Intent support.
Both the BlackBerry as the EFL ports have enabled support for the Full Screen API.
No warning will be shown in the console anymore for sites using layerX/layerY.
Levi Weintraub now is a WebKit Reviewer, congratulations!

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Shaping and Paging Flows

fantasai — 2012-05-19T01:20:37+00:00

Regions

Alan and Florian presented several ideas for generating styleable
pseudo-elements to hold content flows:

overflow: repeat, which would redirect overflow into creating a repetition of the element as it’s sibling. Individual repetitions can be targetted and styled with an ::nth-copy(An+B) pseudo-selector.
A generic ::slot() pseudo element
A Page Templates proposal

There was consensus to replace all the examples in Regions with some combination of the above techniques. There was also consensus that the proposals need to be developed further, and that overlap and interaction among them needs to be carefully considered.

Shapes and Exclusions

Discussed how shapes/exclusions impact wrapping content. (It’s just like floats.)
Discussed using background images to define shapes/exclusions
Discussed concerns about mixing with absolute positioning and the resulting collision-prone layouts.

GCPM

Reviewed some features in GCPM, including new float keywords, columns() notation in float property, and float position snapping.

Fragmentation

Resolved: The gap between a breakpoint and the end of the page does consume specified height. The box’s background and border are only drawn in that gap if box-decoration-break is slice and the element has auto height.
Resolved: Publish an updated Working Draft of CSS3 Fragmentation in a week after edits announced if there are no objections.

Full minutes: Regions, Shapes, and Exclusions, GCPM and Fragmentation

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Flexbox

fantasai — 2012-05-19T01:19:31+00:00

Flexbox: Box Construction

Resolved: Don’t create anonymous flexbox items that are only whitespace.
Resolved: A flex item with visibility: collapse stays in box tree, but has special layout: Do layout once normally, then collapse it to a strut of its line’s cross size and lay out again. (This keeps the cross-size stable if the flexbox has only one line.)

Flexbox: Flex Property

Resolved: Give flex the longhands flex-grow, flex-shrink, and flex-grow.
Resolved: box-sizing affects flex-basis
Resolved: Use flex-basis for sizing flex items, even inflexible ones.
Resolved: Flex items are flexible by default.
Resolved: On flex items, a flex-basis of auto computes to the computed width or height (as appropriate); on elements that are not flex items, it always computes to auto.

Flexbox: Flex/Cross Sizing

Resolved: Accept Alex’s new formulation for negative flexibility.
Resolved: Negative flexibility is 1 by default.
Resolved: Add new auto keyword as the initial value of min-width and min-height. On CSS2.1 display types it computes to zero; on flex items it is treated as min-content.
Resolved: For cross-sizing of a flex line, adopt proposal C.

Flexbox: Pagination

Resolved: break-before/after: always triggers a flex-line break, and all values that trigger fragmentation on an item in a row flexbox get propagated to the flex line.
Resolved: Make page-breaking algorithms for flexbox informative, as an example; UAs can do better.

Flexbox: Terminology

Resolved: Rename display:flexbox to display:flex.
Resolved: Change spec terminology from “flexbox” to “flex container”, and “flexbox item” to “flex item” to be more consistent with other specs.

Full minutes

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Miscellaneous

fantasai — 2012-05-19T01:19:12+00:00

Administrative and Testing

The CSSWG is getting overloaded; discussed ways of scaling the WG resolution process to handle the higher flux of issues. Some ideas, no conclusions.
Tentatively scheduling F2Fs in Tucson next February and Tokyo in May.
Resolved:

Send Style Attributes spec to PR once implementation reports are published on www.w3.org.

Håkon encourages people to review the new tests in the multi-col test suite.

Discussed separating the test approval process from the test review process, as we did for 2.1

Full minutes

XSL:FO and CSS3 Layout

Liam Quin presented an overview of XSL:FO and proposed folding the remainder of the XSL:FO WG into CSS
Bert Bos presented on a collection of various layout challenges and how they can or cannot be solved with proposals in the CSSWG
Steve Zilles started a discussion on harmonizing the divergent CSS3 layout proposals

Full minutes

Spec Editing

vhardy showed off a tool to help editors synchronize specs with Bugzilla
plinss explained plans to host test-annotated /TR specs

Full minutes

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Text Layout and Typography

fantasai — 2012-05-19T01:07:14+00:00

CSS3 Text

Resolved: Pending Jonathan Kew’s okay, keep text-transform:capitalize word-boundary rules undefined, with only an informative reference to UAX29.
Resolved: Disallow combinations of values in text-transform for this level.
Resolved: Changing currentColor to resolve at used-time is okay with the SVGWG; we’re just waiting on Color to be errata’d.
Resolved: The behavior of letter-spacing at element boundaries is kept as-is in the draft. A note should be added about using padding to put extra spacing on either side of an element, for the use-cases in which that is important.
Resolved: Remove the avoid value from text-wrap.
Resolved: Remove the longhands (text-wrap, text-space-collapse) for white-space.
Resolved: Change overflow-wrap back to word-wrap. Allow CSS Property Aliasing (future spec) to define that it aliases to overflow-wrap. Next time Text revs, change the property name officially and talk about aliasing.
Resolved: Drop the full-size-kana value from text-transform in level 3.
Resolved: Don’t change nowrap keyword, even though it’s lack of a hyphen is confusing.

CSS3 Writing Modes

Resolved: Nobody cares too strongly, so fantasai should decide whether to use isolate bidi-override or isolate-override.
Resolved: no UA dependent values for text-orientation
Resolved: Put our own table of behaviors for mixed-right and upright values in the Writing Modes spec until UTR50 stabilizes.

CSS3 Fonts

Resolved: Fallback for font-variant-position occurs per run rather than per-glyph.
Resolved: The font-variant-position property is defined independent of the existing use of the font-size/vertical-align properties to synthesize subscripts/superscripts.
Discussed small-caps fallback per-script rather than per-font, and using text-transform rules for synthesizing small-caps.
Noted some proposed updates to prose for font-family syntax to match CSS 2.1 errata.

Full minutes: Writing Modes and Text, Fonts

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Layout, Values and Units

fantasai — 2012-05-19T01:05:15+00:00

Box Alignment

fantasai presented a proposal to converge all layout models on a single set of alignment properties.

Resolved: fantasai to continue working on this proposal
Resolved: flexbox alignment properties to be renamed to css3-align equivalents.

Grid Layout

Resolved: rename the values of grid-flow so that row adds rows, column adds columns, and layer just stacks grid items on top of each other.
Resolved: add row-gap and column-gap to the specification such that they provide uniform gutters
Also discussed scoping of Grid Layout vs. Template, ways to remove overlap, and scoping things for Level 1 vs. higher. No conclusions.

Values and Units

Resolved: Disallow values with commas in toggle() at this level. (LC Issue 12)
Resolved: Won’t fix level-skipping in this level (except we’re renaming to toggle() because of it). (LC Issue 13)
Resolved: Rename cycle() to toggle(), leave behavior as is.
Resolved: Fix error the UA stylesheet rule for <ul>. (LC Issue 14)
Resolved: Add a note to clarify computed style comparisons better. (LC Issue 15)
Resolved: Reject deferring cycle() to L4. (LC Issue 16)

Full minutes: Box Alignment and Grid Layout, Values and Units

W3C Blog: Help create a world of mobile Web apps

Marie-Claire Forgue — 2012-05-15T14:33:13+00:00

The new mobile Web training course launched last February was so well received (full course!) that we are announcing a new session before this summer. The "Mobile Web 2: Applications" online course will be 6 weeks long, from 11 June to 22 July 2012, and registration is now open.

Based on students' feedback, our trainer Marcos Caceres will teach an updated program which covers all the important aspects of mobile Web application development: basics of creating a Web application that runs on mobile devices, HTML5 elements and new CSS properties, powerful Javascript APIs and libraries, and finally how to make Web apps available off-line.

This course is also looking at device APIs (geolocation, device orientation, touch events) as well as looking at what new standards are coming from the W3C.

We encourage you to follow this course to learn how to develop open mobile Web apps with HTML5, accessible from any browser on any system. As Tim Berners-Lee urged conference participants in his last month WWW2012's keynote: “The solution is in your hands: develop Web apps, not apps!”

In summary:

W3C Course: "Mobile Web 2: Applications"
Start Date: 11 June 2012
Duration: 6 weeks
Trainer: Marcos Caceres
Early bird rate: 195€ - register soon!
Full Price: 225€ (after May 25)

Take a look at the course sections on “Who Should Attend?” and “What do I need?” to find out about the target audience and pre-requesites for this course. Looking forward to welcoming you soon online!

IEBlog: Sharing Links from IE10 on Windows 8

ieblog — 2012-05-14T20:53:50+00:00

Sharing a link to a Web page is a common activity on the PC, and it gets better with IE10 on Windows 8. One of the new features on Windows 8 is the Share charm, which allows you to seamlessly send content between apps on your PC. Previously, if you wanted to share an interesting article with your friend, or post a funny picture on your blog, you’d copy the link from the address bar, switch to a different site or app, and then paste it. Now, with the Windows 8 Share charm, you can share directly from the browser without ever leaving your current page.

When you use the Share charm to share a site from the browser, IE10 creates two data formats that contain relevant content – the URI, and some HTML that includes a rich representation of the page. Here are two examples of data that get shared for a YouTube video:

The URI (of the current site)

http://www.youtube.com/watch?v=4DbgiOCTQts

The HTML (with a link preview)

An example of IE10's rich preview of Web pages

Both of these data formats are created for an “implicit” share, which is the name for what happens when you share the site that you are currently viewing. Since Web pages can be represented as hyperlinks or a rich HTML link preview, IE10 includes both types of data. Of course, if you aren’t sharing the whole page, but rather, some content that you’ve highlighted, IE10 will share the HTML of your selection instead of the URI and the link preview. In this case, sharing a selection would be called an “explicit” share, and does not include the link. This post describes the link sharing case, how IE10 participates in the Windows 8 Share contract using HTML, and how Web developers can create link previews with just a few meta-tags.

The Share Charm and IE10

Here’s a video of how a user might share links from the browser to an app that uses HTML.

Sharing from IE10: Link Previews in Action

In this video, “Stash” is a sample link saving app that makes use of the Windows share charm with HTML. The sample app simply supports the HTML data format for sharing, and IE provides the link preview. Link previews are HTML that contains a title, image, and description for every shared link. This makes it easy for you to recognize the site content. If you have Windows 8 Consumer Preview and Visual Studio 11 Beta, you can download and run Stash on your own PC. Stash integrates with the Windows 8 Share contract as a target app, as you can see below. Below, you can see a high-level diagram that shows how links are shared from IE10.

Diagram: Sharing a link from IE10 to target apps, using the Share charm’s data package

Windows 8 Share charm handles the coordination between the source and target apps to provide an integrated sharing experience across all apps. This removes the need for target and source apps to be aware and coordinate between each other.

Sharing the Web is Better, Start to Finish

The Web is made up of HTML. That’s why HTML is one of the most important data formats in IE10’s integration with the Share contract. IE10 creates link previews to both provide a better sharing experience for users, and to help connect Web developers to Windows 8 Share. With a little extra meta-data markup, sites can define what information is included in their link previews. On the other end of the share contract, target apps that support the HTML data format can get the full experience of contextual Web hyperlinks without having to parse a single site. The end result is a rich, modern, and fluid sharing experience, from end to end.

Screenshot of target apps available in Share pane

Screenshot of Stash’s Share Pane

When you share a Web site, IE10 parses that site to create a link preview. In the example above, it’s a short snippet of content that represents a movie page on IMDb. The goal of sharing HTML, in addition to the URI, is to share the best possible representation of what the user intended to share, so IE10 creates link previews for all implicit shares. The benefits of HTML are that it can include more information than a URI, and the content of the HTML is more meaningful than a hyperlink. In the words of Leslie Knope, no one wants to share that “complicated nonsense.”

From NBC’s Parks and Recreation, Season 4, Episode 16

So, as you can imagine, we would have never ordered a sign with all this complicated nonsense because, you know, we’re not insane.

Depending on the target app, though, sometimes rich content is not the best kind of data, and a URI is more useful. For example, blogging apps can take advantage of rich HTML content, and SMS apps would do best to use the URI. Developers of Metro style apps choose the data format(s) that make most sense for their app to receive, following the Windows 8 Share guidance.

Sites Use Markup to Define What IE10 Shares

Since IE10 uses existing markup meant for sharing on the Web, many sites will already look great when sharing HTML link previews on Windows 8. We support the Open Graph protocol as a simple way to add meta-data about the page. When users share sites on Facebook and through Windows 8 and IE10, you can use OpenGraph to control the way your Web page appears to others.

Here’s an example of an IE test drive demo that uses this markup:


<head>
<meta name="description" content="Brick Breaker TestDrive Demo Game, Performance and Touch benchmark" />
<title>Brick Breaker</title>
<meta property="og:image" content="Views/Homepage/Icons/BrickBreaker.png" />
</head>

IE looks for the following tags in the site’s markup to create the page’s link preview.

Property	HTML tag	Character limit
Title 1	<meta name="title" content="Insert Site Title Here” />	160
Title 2	<title>Insert Site Title Here</title>	160
Description	<meta name="description" content="Insert Site Description Here” />	253
Image 1	<meta property="og:image" content="insert_image_link_here" />	2,048 (limit for image URI)
Image 2	<link rel="image_src" href="insert_image_link_here" />	2,048 (limit for image URI)
Image 3	<meta name="image" content="insert_image_link_here" />	2,048 (limit for image URI)
Image 4	<meta name="thumbnail" content="insert_image_link_here" />	2,048 (limit for image URI)

Note that this is the order in which we parse for each attribute. For example, if both Image 1 and Image 2 tags are present, we’ll use the Image 1 tag. Additionally, if more than one tag of any type is present, we use the first one you list in your markup.

For character limits, if the description is longer than the maximum length, IE will put a “…” at the end in the preview.

Make sure to include at least one of each property in your site markup to get your pages looking great for sharing in Windows 8. See this demo on the IE Test Drive site for more on how the markup works.

Apps Get the Benefit of a Powerful Web Browser

If your app supports the Share target app contract, you should consider whether it makes sense for it to support HTML as a shared data format. Apps that use HTML can benefit from the link previews shared by IE10 because IE10 does all of the heavy lifting. It parses the site and puts together a short and informative link preview, and all your app needs to do is display and host the HTML. The hyperlink is embedded within the preview, so it functions just like a Uri, but looks much better. This way, apps that don’t have the resources to parse the Web to condense pages into small, rich previews, can still display contextual links as HTML.

Many apps, in addition to IE10, will share HTML. Target apps that accept HTML must be agnostic about the source of the shared data. As noted above, IE10 shares HTML for both implicit and explicit sharing scenarios, so sometimes the HTML is a link preview, and sometimes it’s a user selection. In either case, the content of the HTML is the best possible representation of what the user intended to share. Here’s a snippet of what the link preview HTML generated by IE10 will look like when it’s added to the Share charm’s Data Package:


<html>
<body>
<!--StartFragment-->
<style>
/* IE10\uc1\u8217?s metro-style CSS attributes */
</style>
<a class="snippet-URL" href="http://site_link_goes_here">Website Title goes here</a>
<table>
<tr>
<td class="snippet-image">
<img src="image_link_goes_here" />
</td>
<td class="snippet-text">Website description goes here </td>
</tr>
</table>
<!--EndFragment-->
</body>
</html>

For an example of an app that uses HTML from IE10, download the sample app “Stash” seen in the video above. This app demonstrates how a Metro style app can use HTML data as a share target.

Here’s a code snippet from the app, which shows how Stash uses HTML sent from the Share charm.


function activatedHandler(eventArgs) {
// In this sample we only do something if it was activated with the Share contract
if (eventArgs.detail.kind
=== Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
// We receive the ShareOperation object as part of the eventArgs
var shareOperation = eventArgs.detail.shareOperation;
if (shareOperation.data.contains(
Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
shareOperation.data.getHtmlFormatAsync().then(
function (htmlFormat) {
// Extract the HTML fragment from the HTML format
var htmlFragment = Windows.ApplicationModel.DataTransfer
.HtmlFormatHelper.getStaticFragment(htmlFormat);
// Display the HTML in the Share pane.
id("htmlArea").innerHTML = htmlFragment;
});
}
}
}

The above code lets Stash accept HTML when the user selects it as their Share target. For more on developing a Share target app on Windows 8, see the MSDN Quickstart page for receiving shared content.

Happy sharing!

—Alex Feldman, Program Manager, Internet Explorer

Surfin' Safari: Last week in WebKit: Tab sizing and strings for IndexedDB

Peter Beverloo — 2012-05-14T14:54:07+00:00

A total of 650 commits landed in WebKit’s repositories last week, ending with revision 116915.

Web Inspector’s search box supports CSS selectors again, JavaScriptCore timers will now show up on the timeline and a context menu has been added for tabs.

Text decorations, such as underlines, will now be rendered for text in :first-line selectors. Implementation of the :first-letter selector was aligned with the specification. Eric landed stylesheet inheritance support for seamless iframes, as well as the ability to inherit styles from their parent iframe. The RadioNodeList interface is now supported, background-size is now part of the “background” shorthand and, albeit disabled, the <intent> element has landed.

IndexedDB now uses strings instead of numeric constants. Violation reports generated by Content Security Policy now also include the referer, original policy and the URL which got blocked. The File System API is now able to deal with cross-file system operations, widths and heights are now exposed for <input type=image> images, and the offsetLeft property was broken when used together with CSS Columns.

WebKit has also gained support for the tab-size CSS property. This property, which is also supported by Firefox and Opera, allows you to define the number of spaces a tab should be equal to.

Included among other minor updates on the WebKit website, the conditions under which the WebKit trademark can be used are now available on the Mac OS Forge website.

Other changes which occurred last week:

Half a megabyte of memory was saved by Andreas when viewing the full HTML5 specification.
The IETC CSS Values and Units tests have been added to WebKit’s test suite.
A first step towards implementing the HTML Media Capture API has been made.
Pages served with an XHTML-MP doctype will now automatically use a suitable viewport.

CSS3 . Info: Updated CSS3 Preview – CSS3 Attribute Selectors

2012-05-14T12:20:42+00:00

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”. These new selectors are as follows: [att^=val] – the “begins with” selector [att$=val] – the “ends with” selector [att*=val] – the “contains” selector Read the complete updated article in our CSS3 Preview section »

Surfin' Safari: Last weeks in WebKit: sub-pixel layout and seamless iframes

Peter Beverloo — 2012-05-08T14:08:08+00:00

Since there wasn’t an update last week, this one briefly covers changes between revisions 114867 and 116271.

Web Inspector now offers the ability to disable all JavaScript execution on a page, and also allows Web Socket frames to be inspected. The shortcut overlay has received some UI polish and the Timeline Frame Mode has been taken out of experimental.

Fixed placeholders have been implemented for date input types, a form field’s entries supplied through a <datalist> are now barred from validation. The Apple Mac port removed support for BlobBuilder and the Selector APIs have been aligned with the specification when pseudo-element selectors are used.

Retrieving a canvas’ image data will now return a Uint8ClampedArray instead of a CanvasPixelArray object. In preparation of supporting getUserMedia on Chromium, the Peer Connection API implementation has been separated with a compile time flag. Tables now support the createTBody() method and the IndexedDB implementation can now open cursors based on an IDBKey, and advance cursors as well.

Eric landed the first parts of support for seamless iframes in WebKit, namely some tests, sandbox and styling and navigation. A vendor-prefixed version of the Performance Timeline API landed, the getUserMedia() method now takes an object instead of a string and the noteOn and noteOff methods of the Web Audio API’s oscillator got implemented.

Antti made it possible to share stylesheet data structures between documents, decreasing memory usage by several megabytes (take note, kling) depending on the port’s implementation. Furthermore, parsed stylesheets may now be cached, increasing performance of subsequent page loads.

Per commit 116009, Levi and Emil were able to close the meta bug for supporting sub-pixel layout in WebKit. While this has not yet been enabled for any port, this is a significant milestone for the project. This article provides some insight in the importance.

Other changes which occurred last week:

Code supporting positioned floats has been removed from WebKit, pending proper implementation.
The EFL port has enabled support for the <track> element, the Web Timing API and the Web Audio API!
The BlackBerry port enabled support for the download attribute on anchors.
Abhishek Arya (inferno) is now a WebKit Reviewer, congratulations!
Alexis Menard is now a WebKit Reviewer as well, congratulations!
Chromium is working towards enabling getUserMedia by default.
Multiple input channels are now supported for the JavaScriptAudioNode.

CSS WG Blog: CSS Regions Level 3 Updated

Alan Stearns — 2012-05-03T14:48:54+00:00

The CSS Working Group has published an updated Working Draft of CSS Regions.

CSS Regions allows you to collect content in a named flow, then flow this content through boxes in a region chain.

The most important change in this new draft is the ability for region boxes to automatically size to the fragment of content they receive. This is described in a new visual formatting section which explains the processing model that enables this new behavior. In particular the auto sizing processing model allows regions to have height:auto and size themselves to accomodate content between breaks. There is a thorough example that walks through the steps, and a quick summary on www-style.

Another big change is an updated and expanded CSSOM section. It incorporates extensive feedback from specification and implementation work.

The introductory example has been reworked to include a final region that sizes to accommodate the remainder of the flow content and use grid layout to position the various regions. The code for the example has been collected in one place to improve readability.

A new section describes how multicolumn properties interact with region chains.

There are too many other changes to list here, but you can look through the change list to see the record of every difference from the last working draft.

This new draft is still a work-in-progress, but many improvements have been made since the last official publication. All of the known needed work on outstanding issues is captured in the draft with links to the latest discussions.

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css3-regions]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

CSS WG Blog: CSS Exclusions and Shapes Level 3 Updated

Alan Stearns — 2012-05-03T14:32:23+00:00

The CSS Working Group has published an updated Working Draft of CSS Exclusions and Shapes.

CSS Exclusions and Shapes allows you to define non-rectangular shapes for wrapping content, for instance around the outside of floats. It also extends content wrapping functionality previously limited to floats: now any element can become an exclusion.

This new draft contains an update to the exclusions processing model, which describes how exclusions cause content to wrap around their shapes. Several updated examples show how the model works using varying positioning schemes such as floats and grid layout.

The draft also goes into much more detail on how floats work with all of the new capabilities. A new example using floats has been added, and a new section clarifies how floats and exclusions interoperate.

CSS Exclusions and Shapes is still a work-in-progress, but many other improvements have been made in this draft since the last official publication. All of the known needed work on outstanding issues is captured with links to the latest discussions.

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css3-exclusions]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Writing Modes Module Level 3

2012-05-03T00:00:00+00:00

3 May 2012 Updated Working Draft of CSS Writing Modes Module Level 3

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Regions Module Level 3

2012-05-03T00:00:00+00:00

3 May 2012 Updated Working Draft of CSS Regions Module Level 3

CSS WG Blog: Minutes and resolutions telcon 2012-05-02

Bert Bos — 2012-05-02T18:46:37+00:00

The main topic of the telcon was the Disposition of Comments for the March draft of Values and Units.

Resolved: Errata CSS 2.1 to disallow ‘inherit’ after comma in ‘font-family’
Resolved: Include the sign in the NUMBER token in CSS 2.1.
Resolved: The result or attr() is of integer type if all operands are integer and there is no division.
Resolved: Allow attr() in calc() and disallow cycle().
Resolved: cycle() is top-level only; when attr() is not at top level then the type of the fallback must match.
Resolved: Drop minimum supported multipliers for repeated components from 30 to 20.

Full minutes

CSS WG Blog: CSS Writing Modes Level 3 Updated

fantasai — 2012-05-02T03:54:59+00:00

The CSS Working Group has published an updated Working Draft of CSS Writing Modes Level 3. This CSS module covers bidirectional text and vertical text layout.

The primary changes in this update are to integrate references to Unicode Technical Report #50 (which will define the default orientation of all Unicode characters) and to adjust the algorithm for auto sizing in orthogonal flows to account for the size of the containing block. Significant changes since the last Working Draft are listed in the Changes section.

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css3-writing-modes]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

CSS WG Blog: CSS3 Media Queries reaches Proposed Recommendation

Florian Rivoal — 2012-05-02T03:44:56+00:00

The CSS Working Group has published CSS Media Queries as a Proposed Recommendation. Media Queries allows authors to tailor the style that they want to apply to a document based on characteristics of the environment the document is being rendered in.

Changes since CR are corrections of errors in non normative text and clarifications, and are detailed in the Changes section. A Disposition of Comments is also available.

As always, please send feedback to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-mediaqueries] in the subject (alternatively you can email one of the editors and ask them to forward your comment).

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Writing Modes Module Level 3

2012-05-01T00:00:00+00:00

1 May 2012 Updated Working Draft of CSS Writing Modes Module Level 3

IEBlog: Building cross-browser plugin-free experiences

ieblog — 2012-04-26T22:04:49+00:00

We've talked about how the transition to a plug-in free Web is happening today. Lots of Web browsing happens on devices that simply don’t support plug-ins. Web sites that use plug-ins need to understand what their customers experience when browsing plug-in free. In case you missed it, check out Rey Bango’s blog post where he lays out clear guidance for developers on building cross-browser plugin-free experiences and addressing issues like cross-browser CSS, media playback, and touch.

-- John Hrvatin, Program Manager Lead, Internet Explorer

Surfin' Safari: Last week in WebKit: The Contributors Meeting and datalists

Peter Beverloo — 2012-04-26T00:01:25+00:00

A total of 652 changes landed last week in various branches of WebKit’s repository. This update covers changes up to revision 114894.

Last Thursday and Friday, Apple kindly hosted the 2012 WebKit Contributors Meeting in Cupertino. With contributors from many different vendors around, a large number of subjects were covered in presentations and discussions. Transcripts of most of these are available on WebKit’s Trac, including a group photo of all attendees.

An experimental Style Panel has been introduced to Web Inspector which mimics the interface of the Script Panel, which also features an open stylesheet-dialog. Cross-frame security error spam when typing in the console is gone, calling document.open() will now reset the Elements Panel and the Inspector is now shimming the startsWith() and endsWith() methods on the String prototype, anticipating implementation of Microsoft’s proposal.

Parsing rules of the :nth-*() pseudo-classes has been aligned with the specification. Clipping issues with the CSS drop-shadow filter have been resolved and the “-webkit-filter” CSS property will now show up when enumerating over an element’s computed style.

Support for the HTML5 <datalist> element has been enabled for Chromium. It provides similar functionality to suggestions by the browser based on what you previously entered in a text field, with the difference that these suggestions are provided by the website.

Other changes which occurred last week:

The WebKitGTK port has enabled the Web Timing implementation.
Performance of several String-returning DOM attribute and property getters has been improved for v8.
The localStorage.setItem() method cannot override methods on the Storage prototype anymore.
The footprint of an element’s attributes has been reduced to a minimum for common usage.
The IndexedDB implementation can now retrieve values or keys by IDBKeyRanges.

W3C's Cascading Style Sheets home page: W3C members have until May 23 to review the Proposed Recomme…

2012-04-26T00:00:00+00:00

26 Apr 2012 W3C members have until May 23 to review the Proposed Recommendation of Media Queries.

Surfin' Safari: Abhishek Arya is now a WebKit reviewer!

Ryosuke Niwa — 2012-04-25T23:03:04+00:00

Abhishek, better known to the community as inferno, joined the WebKit community in March 2010, and he has been fixing security bugs in CSS, DOM, editing, rendering, and various other components in WebKit. Abhishek has contributed more than 260 patches, many of which are fixes to severe security bugs.

Please join me in welcoming Abhishek Arya as a new WebKit reviewer.

W3C's Cascading Style Sheets home page: The slides for the CSS3 tutorial at WWW2012 by Eva Kasal and…

2012-04-23T00:00:00+00:00

23 Apr 2012 The slides for the CSS3 tutorial at WWW2012 by Eva Kasal and Bert Bos are online.

IEBlog: Guidelines for Building Touch-friendly Sites

ieblog — 2012-04-20T18:14:00+00:00

In Windows 8 Consumer Preview, IE10 enables fast and fluid multi-touch experiences on the Web. Most sites work fine with touch in IE10 with no changes to the site. This post provides four simple guidelines to ensure your customers who use touch can most effectively use your site.

We’ve written before about how new input devices and touch screens make the Web more fun, interactive, and immersive. We’ve also talked about the importance of ensuring a no compromise browsing experience in IE10 so the real Web works great with touch.

Of the four guidelines below, the first two make sure touch users can access all of your site’s functionality. The last two provide tips to make your site easier to use with touch.

DO NOT Hide Content Behind Hover

A mouse can hover content (point at it) without activating it (clicking it). However, with touch a tap is both hover and activation in one action. So functionality that requires hover without activating will not work for touch users. Instead, consider making all behaviors click (tap) based.

DO Configure the Browser for the Default Touch Behaviors That Work Well For Your Site

Users expect to be able to pan and zoom sites using touch. Therefore, the browser consumes touch moves, pinches, and double-taps by default and does not send events for these interactions. If your site needs to provide special functionality for these interactions instead, you must configure IE10 to provide only the default behavior you want, if any.

When a user touches an element, the -ms-touch-action CSS property determines the default behavior that IE10 provides.

-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

The table below describes the five possible values.

Value	Description
`auto`	The browser determines the behavior for the element. This is the default value for `-ms-touch-action`.
`none`	No default behavior is allowed.
`manipulation`	Only panning, pinch zoom, and swiping to navigate forward or back are allowed.
`double-tap-zoom`	Only double-tap zooming is allowed.
`inherit`	The element inherits the value of `-ms-touch-action` from its parent.

For example, a canvas painting application might use:

canvas {

-ms-touch-action: double-tap-zoom;

}

With this configuration, the user can double-tap to zoom in to the canvas element, but sliding a finger on the canvas element will send events to it rather than pan the page.

DO Identify Input Types Using HTML5 Forms

IE10 introduces support for HTML5 input controls, all of which are touch optimized. For text inputs, you can further improve your users’ touch experiences by identifying the specific input type, when applicable. Internet Explorer will show a tailored touch keyboard layout for that input type on Windows 8:

The touch keyboard shows @ and “.com” buttons for email addresses.

The touch keyboard shows a number pad for telephone numbers.

The touch keyboard shows forward slash and “.com” for URLs.

DO Provide Ample Room for Users’ Fingers

To build Windows 8’s touch-first experience, we’ve done a ton of research to formulate some helpful guidelines for developers. The average width of a finger is 11mm. As targets for tapping get larger, the percentage of accidental missed taps drops off quickly.

Ideally, a target is at least 11mm (about 40px) square with at least 2mm (about 10px) of padding around it.

			40px or more target size

10px or more between targets

If you want to adjust the spacing only for users with touch hardware, use feature detection.

To detect that user has touch hardware:

if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {

// Supports multi-touch

}

Going Beyond These Basics

You can do much more to create a great touch-first experience. For example, you may choose to optimize for touch by supporting custom multi-touch interactions or gestures. Here are a few links to get you started:

We plan to write more about these methods in future blog posts. Applying these guidelines today will ensure your sites work well with touch in IE10.

— Jacob Rossi, Program Manager, Internet Explorer

CSS WG Blog: CSS3 Images reaches Candidate Recommendation

fantasai — 2012-04-18T21:57:33+00:00

The CSS Image Values and Replaced Content Module Level 3 specification has been published as a W3C Candidate Recommendation. This module includes syntax for CSS gradients, image slices, and fallbacks; as well as several properties to control replaced element sizing and rendering.

W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-images] in the subject (alternatively you can email one of the editors and ask them to forward your comment).

CSS WG Blog: Updated CR of CSS3 Backgrounds and Borders

fantasai — 2012-04-18T21:57:24+00:00

The CSSWG has published an updated Candidate Recommendation of the CSS Backgrounds and Borders Module Level 3. Changes since the last CR are mostly correcting errors and clarifications, and are detailed in the Changes section. A Disposition of Last Call Comments is also available.

W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text [css3-background] in the subject (alternatively you can email one of the editors and ask them to forward your comment).

W3C's Cascading Style Sheets home page: W3C published CSS Image Values and Replaced Content Module L…

2012-04-17T00:00:00+00:00

17 Apr 2012 W3C published CSS Image Values and Replaced Content Module Level 3 as a Candidate Recommendation.

W3C's Cascading Style Sheets home page: W3C re-published CSS Backgrounds and Borders Module Level 3 …

2012-04-17T00:00:00+00:00

17 Apr 2012 W3C re-published CSS Backgrounds and Borders Module Level 3 as a Candidate Recommendation.

The Future of Style

Dev.Opera: Understanding the CSS Transforms Matrix

Surfin' Safari: Last week in WebKit: Input padding, 8-bit canvas and CSS Variables

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Shaping and Paging Flows

Regions

Shapes and Exclusions

GCPM

Fragmentation

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Flexbox

Flexbox: Box Construction

Flexbox: Flex Property

Flexbox: Flex/Cross Sizing

Flexbox: Pagination

Flexbox: Terminology

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Miscellaneous

Administrative and Testing

XSL:FO and CSS3 Layout

Spec Editing

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Text Layout and Typography

CSS3 Text

CSS3 Writing Modes

CSS3 Fonts

CSS WG Blog: Minutes and Resolutions Hamburg F2F May 2012: Layout, Values and Units

Box Alignment

Grid Layout

Values and Units

W3C Blog: Help create a world of mobile *Web* apps

IEBlog: Sharing Links from IE10 on Windows 8

The Share Charm and IE10

Sharing the Web is Better, Start to Finish

Sites Use Markup to Define What IE10 Shares

Apps Get the Benefit of a Powerful Web Browser

Surfin' Safari: Last week in WebKit: Tab sizing and strings for IndexedDB

CSS3 . Info: Updated CSS3 Preview – CSS3 Attribute Selectors

Surfin' Safari: Last weeks in WebKit: sub-pixel layout and seamless iframes

CSS WG Blog: CSS Regions Level 3 Updated

CSS WG Blog: CSS Exclusions and Shapes Level 3 Updated

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Writing Modes Module Level 3

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Regions Module Level 3

CSS WG Blog: Minutes and resolutions telcon 2012-05-02

CSS WG Blog: CSS Writing Modes Level 3 Updated

CSS WG Blog: CSS3 Media Queries reaches Proposed Recommendation

W3C's Cascading Style Sheets home page: Updated Working Draft of CSS Writing Modes Module Level 3

IEBlog: Building cross-browser plugin-free experiences

Surfin' Safari: Last week in WebKit: The Contributors Meeting and datalists

W3C's Cascading Style Sheets home page: W3C members have until May 23 to review the Proposed Recomme…

Surfin' Safari: Abhishek Arya is now a WebKit reviewer!

W3C's Cascading Style Sheets home page: The slides for the CSS3 tutorial at WWW2012 by Eva Kasal and…

IEBlog: Guidelines for Building Touch-friendly Sites

DO NOT Hide Content Behind Hover

DO Configure the Browser for the Default Touch Behaviors That Work Well For Your Site

DO Identify Input Types Using HTML5 Forms

DO Provide Ample Room for Users’ Fingers

Going Beyond These Basics

CSS WG Blog: CSS3 Images reaches Candidate Recommendation

CSS WG Blog: Updated CR of CSS3 Backgrounds and Borders

W3C's Cascading Style Sheets home page: W3C published CSS Image Values and Replaced Content Module L…

W3C's Cascading Style Sheets home page: W3C re-published CSS Backgrounds and Borders Module Level 3 …

W3C Blog: Help create a world of mobile Web apps