The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Language Subtag Lookup tool updated

Source: ishida blog » cssr12a • 26 December 2014 08:11 AM

This update to the Language Subtag Lookup tool brings back the Check function that had been out of action since last January. The code had to be pretty much completely rewritten to migrate it from the original PHP. In the process, I added support for extension and private use tags, and added several more checks. I also made various changes to the way the results are displayed.

Give it a try with this rather complicated, but valid language tag: zh-cmn-latn-CN-pinyin-fonipa-u-co-phonebk-x-mytag-yourtag

Or try this rather badly conceived language tag, to see some error messages: mena-fr-latn-fonipa-biske-x-mylongtag-x-shorter

The IANA database information is up-to-date. The tool currently supports the IANA Subtag registry of 2014-12-17. It reports subtags for 8,081 languages, 228 extlangs, 174 scripts, 301 regions, 68 variants, and 26 grandfathered subtags.

Thai character picker v16

Source: ishida blog » cssr12a • 21 December 2014 09:18 AM

I have uploaded another new version of the Thai character picker.

Sorry this follows so quickly on the heels of version 15, but as soon as I uploaded v15 several ideas on how to improve it popped into my head. This is the result. I will hopefully bring all the pickers, one by one, up to the new version 16 format. If you prefer, you can still access version 12.

The main changes include:

For more information about the picker, see the notes at the bottom of the picker page.

About pickers: Pickers allow you to quickly create phrases in a script by clicking on Unicode characters arranged in a way that aids their identification. Pickers are likely to be most useful if you don’t know a script well enough to use the native keyboard. The arrangement of characters also makes it much more usable than a regular character map utility. See the list of available pickers.

CSS Box Alignment Level 3 Updated

Source: CSS WG Blogfantasai • 19 December 2014 09:48 PM

The CSSWG has published an updated Working Draft of CSS Box Alignment Level 3. This module defines extends the Flexbox alignment properties to apply to all layout models and adds additional controls for logical positioning, space distribution, and handling overflowing elements.

This is the vertical centering module, people.

This module’s syntax and functionality is in the process of stabilizing now and we need your feedback. Think of all the cool things you could do with the new alignment properties! Imagine them! Examine them! Make examples! Write rants! And tell us what is awesome and what is stupid so that we can fix it to be better before it gets locked down in shipped browsers.

Changes since the last Working Draft are listed in the Changes section.

As always, ideally send feedback to the (archived) public mailing list with the spec code ([css-align]) and your comment topic in the subject line. Alternatively, post your comment here or in the more discussion-friendly cross-post. (Or, if that’s still too scary, email the editors directly.) Please do not expect us to go fishing for your comments in the ether. We won’t know it’s there and we will therefore deliberately and mercilessly ignore it. If it’s on your blog, email the link or post it as a comment. It’s super not that hard. Thanks.

CSS Box Alignment Level 3 Updated

Source: CSS3 . Infofantasai • 19 December 2014 06:45 PM

The CSSWG has published an updated Working Draft of CSS Box Alignment Level 3. This module defines extends the Flexbox alignment properties to apply to all layout models and adds additional controls for logical positioning, space distribution, and handling overflowing elements. This is the vertical centering module, people. This module’s syntax and functionality is in […]

WWW 2015, the 24th International World Wide Web Conference, …

Source: W3C's Cascading Style Sheets home page19 December 2014 05:32 PM

18 May 2015 WWW 2015, the 24th International World Wide Web Conference, will be held in Florence, Italy, May 18–22, 2015.

This week: CSP for Gmail, CSS1 is 18 years old, W3C CEO on after HTML5, etc.

Source: W3C Blog Coralie Mercier • 19 December 2014 04:20 PM

This is the 12-19 December 2014 edition -the last of the year 2014- of a “weekly digest of W3C news and trends” that I prepare for the W3C Membership and public-w3c-digest mailing list (publicly archived). This digest aggregates information about W3C and W3C technology from online media —a snapshot of how W3C and its work is perceived in online media.

W3C and HTML5 related Twitter trends

[What was tweeted frequently, or caught my attention. Most recent first]

Open Web

W3C in the Press (or blogs)

5 articles since the last Digest; a selection follows. You may read all articles in our Press Clippings page.

Thai character picker v15

Source: ishida blog » cssr12a • 18 December 2014 02:35 PM

I have uploaded a new version of the Thai character picker.

The new version uses characters instead of images for the selection table, making it faster to load and more flexible, and dispenses with the transcription view. If you prefer, you can still access the previous version.

Other changes include:

For more information about the picker, see the notes at the bottom of the picker page.

About pickers: Pickers allow you to quickly create phrases in a script by clicking on Unicode characters arranged in a way that aids their identification. Pickers are likely to be most useful if you don’t know a script well enough to use the native keyboard. The arrangement of characters also makes it much more usable than a regular character map utility. See the list of available pickers.

More about the transcriptions: There are three buttons that allow you to convert from Thai text to Latin transcriptions. If you highlight part of the text, only that part will be transcribed.

The toISO-1 button produces an ISO 11940-1 transliteration, that latinises the Thai characters without changing their order. The result doesn’t normally tell you how to pronounce the Thai text, but it can be converted back to Thai as each Thai character is represented by a unique sequence in Latin. This transcription should produce fully conformant output. There is no need to identify syllables boundaries first.

The toISO-2 and toIPA buttons produce an output that is intended to approximately reflect actual pronunciation. It will work fine most of the time, but there are occasional ambiguities and idiosynchrasies in Thai which will cause the converter to render certain, less common syllables incorrectly. It also doesn’t automatically add accent marks to the phonetic version (though that may be added later). So the output of these buttons should be treated as something that gets you 90% of the way. NOTE: Before using these two buttons you need to add spaces or hyphens between each syllable of the Thai text. Syllable boundaries are important for correct interpretation of the text, and they are not detected automatically.

The condense button removes the spaces from the highlighted range (or the whole output area, if nothing is highlighted).

Note: For the toISO-2 transcription I use a macron over long vowels. This is non-standard.

Minutes Santa Clara F2F Part II 2014-10-27: Shrink-to-fit, Sizing, Grid, Test Suites

Source: CSS WG Blog Dael Jackson • 18 December 2014 02:33 AM


Full Minutes || Spec Referenced


Full Minutes || Spec Referenced


Full Minutes || Spec Referenced

Test Suites

Full Minutes

Minutes Santa Clara F2F Part I 2014-10-27: CSS3 UI, ::selection and Pseudo-Elements issues, Animations, Media Queries

Source: CSS WG Blog Dael Jackson • 18 December 2014 02:31 AM


Full Minutes || Spec Referenced

::selection and Pseudo-Elements issues

Full Minutes || Spec Referenced


Full Minutes || Spec Referenced

Media Queries

Full Minutes || Spec Referenced

Minutes Telecon 2014-12-17

Source: CSS WG BlogDael Jackson • 18 December 2014 01:18 AM

Full Minutes

The CSS WG updated the Working Draft of CSS Box Alignment Mo…

Source: W3C's Cascading Style Sheets home page18 December 2014 12:00 AM

18 Dec 2014 The CSS WG updated the Working Draft of CSS Box Alignment Module Level 3 and published the first draft of CSS Inline Layout Module Level 3

Minutes Telecon 2014-12-10

Source: CSS WG BlogDael Jackson • 11 December 2014 03:49 PM

Full Minutes

Tibetan character picker v15

Source: ishida blog » cssr12a • 06 December 2014 10:39 PM

I have uploaded a new version of the Tibetan character picker.

The new version dispenses with the images for the selection table. If you don’t have a suitable font to display the new version of the picker, you can still access the previous version, which uses images.

Other changes include:

About pickers: Pickers allow you to quickly create phrases in a script by clicking on Unicode characters arranged in a way that aids their identification. Pickers are likely to be most useful if you don’t know a script well enough to use the native keyboard. The arrangement of characters also makes it much more usable than a regular character map utility. See the list of available pickers.

Mongolian variant forms

Source: ishida blog » cssr12a • 06 December 2014 10:13 AM

There is some confusion about which shapes should be produced by fonts for Mongolian characters. Most letters have at least one isolated, initial, medial and final shape, but other shapes are produced by contextual factors, such as vowel harmony.

Unicode has a list of standardised variant shapes, dating from 27 November 2013, but that list is not complete and contains what are currently viewed by some as errors. It also doesn’t specify the expected default shapes for initial, medial and final positions.

The original list of standardised variants was based on 蒙古文编码 by Professor Quejingzhabu in 2000.

A new proposal was published on 20 January 2014, which attempts to resolve the current issues, although I think that it introduces one or two issues of its own.

The other factor in this is what the actual fonts do. Sometimes they follow the Unicode standardised variants list, other times they diverge from it. Occasionally a majority of implementations appear to diverge in the same way, suggesting that the standardised list should be adapted to reality.

To help unravel this, I put together a page called Notes on Mongolian variant forms that visually shows the changes between the various proposals, and compares the results produced by various fonts.

This is still an early draft. The information only covers the basic Mongolian range – Todo, Sibe, etc still to come. Also, I would like to add information about other fonts, if I can obtain them.

Minutes Telecon 2014-12-03

Source: CSS WG BlogDael Jackson • 04 December 2014 01:52 AM

Full Minutes

Minutes Telecon 2014-11-16

Source: CSS WG BlogDael Jackson • 26 November 2014 08:54 PM

Full Minutes

The SVG WG and the CSS WG published two Working Drafts: Geom…

Source: W3C's Cascading Style Sheets home page25 November 2014 12:00 AM

25 Nov 2014 The SVG WG and the CSS WG published two Working Drafts: Geometry Interfaces Module Level 1 and Filter Effects Module Level 1

Minutes Telecon 2014-11-19

Source: CSS WG BlogDael Jackson • 20 November 2014 11:03 PM

Full Minutes

The WebApps WG and the CSS WG published a Note to indicate t…

Source: W3C's Cascading Style Sheets home page18 November 2014 12:00 AM

18 Nov 2014 The WebApps WG and the CSS WG published a Note to indicate that no further work is expected on Fullscreen

Picker changes

Source: ishida blog » cssr12a • 17 November 2014 10:51 PM

If you use my Unicode character pickers, you may have noticed some changes recently. I’ve moved several pickers on to version 14. Most of the noticeable changes are in the location and styling of elements on the UI – the features remain pretty much unchanged.

Pages have acquired a header at the top (which is typically hidden), that provides links to related pages, and integrates the style into that of the rest of the site. What you don’t see is a large effort to tidy the code base and style sheets.

So far, I have changed the following: Arabic block, Armenian, Balinese, Bengali, Khmer, IPA, Lao, Mongolian, Myanmar, and Tibetan.

I will convert more as and when I get time.

However, in parallel, I have already made a start on version 15, which is a significant rewrite. Gone are the graphics, to be replaced by characters and webfonts. This makes a huge improvement to the loading time of the page. I’m also hoping to introduce more automated transcription methods, and simpler shape matching approaches.

Some of the pickers I already upgraded to version 14 have mechanisms for transcription and shape-based identification that took a huge effort to create, and will take a substantial effort to upgrade to version 15. So they may stay as they are for a while. However, easier to handle and new pickers will move to the new format.

Actually, I already made a start with Gurmukhi v15, which yanks that picker out of the stone-age and into the future. There’s also a new picker for the Uighur language that uses v15 technology. I’ll write separate blogs about those.


[By the way, if you are viewing the pickers on a mobile device such as an iPad, don't forget to turn Autofocus off (click on 'more controls' to find the switch). This will stop the onscreen keyboard popping up, annoyingly, each time you try to tap on a character.]

Minutes Telecon 2014-11-12

Source: CSS WG BlogDael Jackson • 13 November 2014 01:12 AM

Full Minutes

Living on the Edge – our next step in helping the web just work

Source: IEBlog ieblog • 11 November 2014 05:58 PM

Today we are rolling out a new Windows 10 preview build with significant Internet Explorer interoperability updates. In line with our commitment to interoperability and compatibility, this update includes over 2000 fixes for interoperability issues, support for 20 new platform features, and our new architecture for advancing interoperability and compatibility. We’re excited to be sharing this work at such an early stage in our development process and we look forward to hearing your feedback. We're also rolling out this preview build to users of our new RemoteIE service, available for Windows, Mac OS X, and other platforms.

Introducing the “living” Edge document mode

The cornerstone of this update to IE is the “Edge” mode platform—a new document mode designed with interoperability at its core. With this mode, we’re applying the highly successful interoperability strategy of Windows Phone 8.1 Update to Windows 10.

As we announced in August 2013, we are deprecating document modes as of IE11. With our latest platform updates, the need for legacy document modes is primarily limited to Enterprise legacy web apps. With new architectural changes, these legacy document modes will be isolated from changes in the “living” Edge mode, which will help to guarantee a much higher level of compatibility for customers who depend on those modes and help us move even faster on improvements in Edge. The next major version of IE will still honor document modes served by intranet sites, sites on the Compatibility View list, and when used with Enterprise Mode only.

Public Internet sites will be rendered with the new Edge mode platform (ignoring X-UA-Compatible).  It is our goal that Edge is the "living" document mode from here out and no further document modes will be introduced going forward. We need your help in testing this new mode so we are enabling it on by default for a small percentage of the Windows Insider user base and those of you that manually select the mode (see below).

Edge mode introduces an interoperable UA string designed to get today’s modern Web content, and to avoid old IE-only content. We’ve also spent a lot of time ensuring that the IE platform behaves like modern Web content expects.

In cases where these changes necessarily differ from standards, we’re following through with standards bodies and other browsers to update specs and implementations to reflect the interoperable behavior.

New features in preview

Also in Edge mode are early implementations of several in development features (we’ll blog more about these in depth soon):

CSS Preserve-3D – A popular developer request, this feature enables CSS transforms on multiple elements to be composed as a part of a 3D scene rather than flattened together.

Without preserve-3d  With preserve-3d


Content Security Policy 1.0 – CSP is the next step forward since HTML5 Sandbox in preventing cross-site scripting. Pages provide a policy via the Content-Security-Policy header. This policy defines the origins from which resources on the page (JS, CSS, plugins, images, etc) are allowed to be loaded. This adds a defense-in-depth mechanism for preventing malicious content from being injected into the page. Resources blocked by CSP are reported through F12 tools and, optionally, as a report back to the server.

CSP violations reported in F12 Tools

CSS Interaction Media Queries (Level 4) – A key component in responsive design is responsive input handling. We’ve talked before about adapting UX for input types, and this feature gives Web developers a new tool to do just that. Stylesheets can now use pointer and hover media queries to adapt UI based on the general precision of the user’s input (fine/coarse) and whether the device supports hover.

Gamepad API – First previewed earlier this year, Gamepad API is now in the preview for Windows 10. Plug in an Xbox One or Xbox 360 controller and check out our demo code on GitHub.

WAV Audio – This audio format uses PCM audio for lossless quality. With this release, WAV is supported in the <audio> element and will eventually be supported with Web Audio in a future release.

Selection API– We've improved our interoperability for the Selection object by implementing APIs like Selection.extend(), containsNode(),and setBaseAndExtent(). We have also helped get the W3C Selection API specification to First Public Working Draft and ensured it covers all of these interoperable APIs.

ECMAScript 6 Features – New language features from the latest ES6 “Harmony” draft specification:

Classes – syntax for declaring classes in ES6.

Promises – allows easier and cleaner asynchronous coding. Adds the Promise constructor, along with the 'all' and 'race' utility methods to the language itself.

Iterators – enables iteration over iterable objects (including arrays, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Arrow Function – the arrow (=>) provides a shorthand for the function keyword with lexical 'this' binding.

Math, Number, Object, String Built-ins – dozens of new utility functions and properties for manipulating and inspecting data.

Object Literal Enhancements – adds computed properties, concise method definitions, and short-hand for properties whose value is initialized to a same-named variable.

Spread – the spread operator expands iterable expressions into individual arguments. For example, a.b(…array) is roughly the same as a.b.apply(a, array).

Template Strings – string literals that allow for expressions to be evaluated and concatenated with the string literal.

Symbols – allows properties to be added to existing objects without the possibility of interference with the existing properties, unintended visibility, or with other uncoordinated additions by any other code.

Proxies – enables JavaScript programmers to implement objects with new kinds of custom behavior.

Weak Set – a set of objects such that those objects will be collected if they are not referenced anywhere else.


Experimental Features

Also in this release is the introduction of a new experimental features dashboard, accessed by browsing to about:flags. Here you’ll find new platform experiments that you can enable to try out the very bleeding edge of what we’re working on. Future experiments may include new standards we’re working on, interoperability fixes we’re trying out, new performance or security architectures, and more.

Given the sheer volume of changes in Edge mode, we’re going to progressively roll out the new mode by choosing a random set of Windows Insiders to get Edge while the rest remain in 11 document mode. Our data science and quality engineering teams will leverage user feedback and anonymous telemetry to guide the roll out while we make tweaks to the platform in future preview builds accordingly.

If you’re a developer coding against new features or testing for compatibility, you can head over to about:flags and choose Edge mode explicitly by setting “Enable Experimental Web Platform Features” to “Enabled” (“Automatic” restores you to the default roll out and “Disabled” lets you compare with 11 mode).

New about:flags page for enabling experimental features

At any time, developers can identify the mode a page is in via F12 tools. Note that dynamically switching between Edge and other document modes from F12 isn’t yet supported (we told you these experiments may bite!). For now, use about:flags for switching when developing and testing.

Giving Feedback

We’re sharing our changes earlier in the process than ever so we can collect your feedback to help shape the product. Last month, we introduced the IE Platform Suggestion Box on UserVoice where developers can suggest and vote on improvements to the platform. In this release, we’re adding a feedback tool right in the top-level UI. Just click the smiley face icon to “send a frown” such as reporting a problem on a site. If the page is running in Edge mode, you can also try reloading in the “compatibility mode” (IE11 behavior). As always, you can also report issues through Connect or the Windows Feedback app in the Windows 10 Tech Preview.

Click the smiley to report a web site problem

We’re excited to share with you an early look at what we’ve been working on. Join our engineering team on Twitter at 11am PST Friday November 14 where we'll be answering your #AskIE questions, and follow along with some of the other work we’re planning at status.modern.IE.

Jacob Rossi (@jacobrossi) - Senior Program Manager, Internet Explorer

Update 11/12/2014 : Added ES6 Proxies and WeakSet to the list of features in this preview build, removed RegExp built-ins (still in development)

Minutes Telecon 2014-10-22

Source: CSS WG BlogDael Jackson • 23 October 2014 03:02 AM

Full Minutes

Opera published an interview with Håkon Wium Lie to mark the…

Source: W3C's Cascading Style Sheets home page22 October 2014 12:00 AM

22 Oct 2014 Opera published an interview with Håkon Wium Lie to mark the 20th anniversary (10 Oct) of the first public message mentioning “Cascading [HTML] Style Sheets.” (For more history, see: chapter 2 of Cascading Style Sheets, designing for the Web; a list of alternative style sheet proposals; and Håkon's PhD thesis.)

Notes on Tibetan script

Source: ishida blog » cssr12a • 18 October 2014 05:48 AM

See the Tibetan Script Notes

Last March I pulled together some notes about the Tibetan script overall, and detailed notes about Unicode characters used in Tibetan.

I am writing these pages as I explore the Tibetan script as used for the Tibetan language. They may be updated from time to time and should not be considered authoritative. Basically I am mostly simplifying, combining, streamlining and arranging the text from the sources listed at the bottom of the page.

The first half of the script notes page describes how Unicode characters are used to write Tibetan. The second half looks at text layout in Tibetan (eg. line-breaking, justification, emphasis, punctuation, etc.)

The character notes page lists all the characters in the Unicode Tibetan block, and provides specific usage notes for many of them per their use for writing the Tibetan language.

See the Tibetan Character Notes

Tibetan is an abugida, ie. consonants carry an inherent vowel sound that is overridden using vowel signs. Text runs from left to right.

There are various different Tibetan scripts, of two basic types: དབུ་ཙན་ dbu-can, pronounced /uchen/ (with a head), and དབུ་མེད་ dbu-med, pronounced /ume/ (headless). This page concentrates on the former. Pronunciations are based on the central, Lhasa dialect.

The pronunciation of Tibetan words is typically much simpler than the orthography, which involves patterns of consonants. These reduce ambiguity and can affect pronunciation and tone. In the notes I try to explain how that works, in an approachable way (though it’s still a little complicated, at first).

Traditional Tibetan text was written on pechas (དཔེ་ཆ་ dpe-cha), loose-leaf sheets. Some of the characters used and formatting approaches are different in books and pechas.

For similar notes on other scripts, see my docs list.

Minutes Sophia-Antipolis F2F Part VI 2014-09-10: CSS3 Text, Survey of All the Specs

Source: CSS WG Blog Dael Jackson • 15 October 2014 11:32 PM

CSS3 Text

Full Minutes || Spec Referenced

Survey of All the Specs

Full Minutes

Opera 25 released

Source: Dev.OperaMathias Bynens • 14 October 2014 10:00 PM

Opera 25 (based on Chromium 38) for Mac and Windows is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers.

The <picture> HTML element

Yes, <picture> is now available in Opera (and Chrome) by default! This new HTML element can be wrapped around any good ol’ <img> element to enable art direction, different images types, high-DPI images, changing image sizes, and more. We recommend you read Yoav Weiss’s introduction to native responsive images, or look at Andreas Bovens’s list of responsive image use cases with documented code examples.

Screen Orientation API

The Screen Orientation API provides the ability to read the user’s screen orientation type and angle, to be informed when the screen orientation state changes, and be able to lock the screen orientation to a specific state. This functionality is available under the window.screen.orientation object.

Notifications API

Opera now supports the Notifications API, available under the window.Notification object. Even though the Chromium project has supported this feature for a long time, we wanted to get the UX right before shipping this in Opera.

The way Chromium deals with notifications makes it seem non-native to the operating system on most platforms. We wanted to make it feel native on all our supported platforms, and we worked on it to make it happen. As a result, Opera’s web notifications look and behave like native notifications. We believe this is a much better experience for users.

Opera add-ons can make use of this functionality through the chrome.notifications API. Note that because of our native OS integration, only simple notifications (similar to non-rich web notifications) are supported in Opera; rich chrome.notifications are not.

File constructor

The global File constructor can be used to programmatically generate file objects on the client side:

var html = '<!DOCTYPE html><title>Test</title><h1>Hello world!</h1>';
var file = new File([html], 'test.html', {
        'type': 'text/html'

Here’s a demo that generates files on the client side and offers download links for them.

TextEncoder/TextDecoder API

The WHATWG Encoding Living Standard defines TextEncoder and TextDecoder interfaces that make it easy to translate between raw bytes and native JavaScript strings, regardless of which of the many standard encodings you need to work with.

// Encode a string using UTF-8:
var encoder = new TextEncoder('utf-8');
var encoded = utf8encoder.encode('foo𝌆bar');
// → an ArrayBuffer containing the bytes for this string as per UTF-8
// → [0x66, 0x6F, 0x6F, 0xF0, 0x9D, 0x8C, 0x86, 0x62, 0x61, 0x72]

// Decode the UTF-8 bytes back into a string:
var decoder = new TextDecoder('utf-8');
// → 'foo𝌆bar'

For more information on this feature, see Easier ArrayBuffer ↔ string conversion with the Encoding API.

ES6 iterators and for-of

ECMAScript 6 introduces a new for-of construct, which iterates over iterable objects like arrays, array-like objects, strings, iterators, generators, maps, and sets.

var iterable = ['a', 'b', 'c'];
for (var item of iterable) {

My favorite example of this is iterating over all characters in a string. With for-of, supplementary Unicode symbols are automatically treated as a single unit, just like you’d expect. In ES5 you had to write a lot of boilerplate code to make that happen.

var string = 'foo𝌆bar';
for (var item of string) {
// → 'f', 'o', 'o', '𝌆', 'b', 'a', 'r'

ES6 Map

A Map object is a simple key/value map. Unlike regular objects in JavaScript, which store their keys as strings, Maps accept any value — both primitive values and objects — as keys and values. Here’s a simple example:

var map = new Map();
var person = { 'name': 'John Smith' };
// Store a value in the Map that is tied to this `person` object.
map.set(person, 'foo');
// Later, we can check if the Map contains a matching value:
map.has(person); // true
// That value can be retrieved based on the `person` object:
map.get(person); // 'foo'

// Iterate over the items in the Map using `for-of`.
for (var item of map) {
                item[0], // key
                item[1]  // value

ES6 Set

A Set object is a collection of unique values. Sets accept values of any type — both primitive values and objects.

var set = new Set();
var person = { 'name': 'John Smith' };
// Store some values in the Set.
set.add(42); // Note: duplicates are ignored.
// Later, we can check if the Set contains a value:
set.has(42); // true
set.has(person); // true

// Iterate over the items in the Set using `for-of`.
for (var item of set) {

ES6 Symbols

A Symbol is a unique and immutable data type that allows properties to be added to existing objects without the possibility of interference with the existing properties, unintended visibility, or with other uncoordinated additions by any other code.

Here’s an example:

(function() {
        var symbol = Symbol();
        var object = {};
        object[symbol] = 42;
        console.log(object[symbol]); // 42

Due to the use of Symbols, it’s impossible to extract the private value 42 from the object unless you have access to the symbol reference variable.

Object.getOwnPropertySymbols can be used to programmatically list the Symbol properties on a given object. Here’s an example that demonstrates that Array.prototype makes use of Symbols:

// → [Symbol(Symbol.unscopables), Symbol(Symbol.iterator)]

ES6 unscopables

Unscopables allow properties to be hidden from with statement lookup rules. This makes it possible to add new properties to existing host objects, both in JavaScript and in the DOM, without breaking backwards compatibility.

ES6 math functions

ES6 defines lots of new mathematics-related functions, which we’re happy to support in this new release:

Various SVG improvements

SVG <text> elements got a nice performance boost.

Also, SVG <feBlend> elements now support the following additional blend modes (for use in <feBlend mode="…">):

Removal of support for SVG web fonts

Only Presto (i.e. Opera ≤ 12) and WebKit-based browsers ever implemented support for SVG web fonts in @font-face. Nowadays WOFF and WOFF2 are a much better choice.

As of this release, SVG web fonts are no longer supported, except on Windows systems which use GDI-based font rendering instead of DirectWrite-based font rendering (i.e. Windows < 7). Note that although the feature still works on those systems for now, it is considered deprecated, and support will eventually be removed completely.

64-bit release on OS X

Opera for Mac is now a 64-bit browser. This offers many benefits for speed, stability and security.

The flip side of this change is that the 32-bit Silverlight plug-in for Mac no longer works, which obviously affects Silverlight-based applications, such as Netflix. At the moment, a 64-bit version of the Silverlight plugin is not available.

Other than Silverlight, Netflix also supports video using Encrypted Media Extensions (EME). However, given that Opera doesn’t support EME, this option unfortunately does not work either.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Application Foundations for the Open Web Platform

Source: W3C Blog Jeff Jaffe • 14 October 2014 05:45 PM

Bringing HTML5 to the status of W3C Recommendation (in October 2014) is a defining moment in the development of the Open Web Platform (OWP), a set of technologies for developing distributed applications with the greatest interoperability in history. This year is also the 25th anniversary of the Web and 20th anniversary of W3C, making this an even more meaningful time to engage with the community about the Next Big Thing for the Web Platform.

My starting point for this discussion is that, now that HTML5 is done, W3C should focus on strengthening the parts of the Open Web Platform that developers most urgently need for success. I call this push for developers “Application Foundations.”

This is a new formulation, shaped in part by discussion at the September Extensible Web Summit in Berlin, as well as discussions within the W3C staff. I am planning further discussion at W3C’s TPAC 2014 meeting at the end of the month, and I welcome your feedback to this post and in the months ahead.

While this formulation is new, most of the work is not new. Rather, this represents a new way of looking at the considerable work that is already in the Web community, and placing some structure around the considerable work in front of us.

The Focus on Developers

The OWP is widely deployed, improving in function every day, and transforming industry after industry. According to a survey earlier this year, 42% of developers are using HTML5, CSS, and JavaScript when building applications. The promise of the Open Web Platform is to lower the cost of developing powerful applications to reach the most people, on any device.

As popular as the OWP is, it is still too challenging for developers to create some types of Web applications. Lack of broad interoperability for some features complicates development. Lack of standard features in the platform drives developers to create hybrid applications, implying a larger mix of tools, libraries, and interoperability issues. There is more work to meet growing expectations around privacy, security, and accessibility.

There are many ways to focus on developers. Many W3C activities outside of standards development are geared toward enabling developers, including tools (validator), documentation (Web Platform Docs), training (W3DevCampus, W3Conf), participation (Community Groups, draft Webizen program).

The question I want to get at in this post, however, relates to our open standards agenda: are we building the platform that developers need? How can we find out?

That is where the Application Foundations come in. They give us a way to think about the Open Web Platform that will make it easier for the W3C community to converge on the top priorities for developers.

Illustration of application foundation top-level categories and a few second-level topics

What are Application Foundations?

Platforms mature predictably in the following way: at a given time, some capabilities are core and “applications” rely on the core. Invariably, there comes a time when certain features are so pervasively used as services by other applications, the “next generation” of the platform must subsume some of those features (via libraries, platform services, daemons, etc.).

Operating systems provide a familiar example. Typically, an operating system kernel provides the key lower layer functions that a computer needs for its programs (aka applications): program execution, memory management, support for devices, etc. In early versions of many operating systems, there are also higher layer functions (such as networking, security, GUIs, etc.). Often these functions have some manifestation in the kernel, but also some manifestation in applications. Over time, given experience with the higher layer functions, people recognize that some must mature into major subsystems (aka foundations) that are above the kernel, leveraged by many applications. Modular design of these subsystems allows experts in different areas (security, communications protocols, and so on) to deliver solutions that will best serve all the other parts of the platform.

We see this pattern with the Open Web Platform as well. There was a time that video would have been viewed as an application of the Web, but in HTML5, video has unquestionably been absorbed into the core infrastructure (e.g., via the HTML <video> element). An apt metaphor is to call the programmable Open Web Platform of today the first generation operating system of the Web. In the past couple of years, important subsystems have already started to emerge, and in this post I propose a taxonomy of eight Application Foundations to focus our discussion on the next generation:

Each Foundation represents collection of services and capabilities that should be available for all applications. For example, the Security and Privacy Foundation includes capabilities such as crypto, multi-factor authentication, and resource integrity.

We expect each Foundation to evolve independently, driven by experts in that topic. We also know that there will be interconnections, such as Security implications of Device Interactions, or Accessibility considerations of streaming Media.

Below I will begin to enumerate the capabilities we have associated with each Foundation, both long-standing and new or planned work that will substantially advance the capability of the OWP.

In our internal discussions there was quick consensus on the usefulness of an Application Foundations paradigm. There was also passionate debate about taxonomy itself. Did we come up with one that will speak to developers? Did we neglect some important piece of functionality? Should this or that second-level item be a top-level category or vice versa? To help structure the broader debate to come, I’d like to provide some background for the choices proposed here.

Principles for Thinking about these Foundations

Bearing in mind that we are looking for a best fit to structure discussion, not a perfect dissection, here are some key principles for thinking about these Foundations:

Putting the Foundations to Use

Although this framework is meant initially only as a communications vehicle —a way of describing the substantial work we have to do to enhance the OWP— we may find other uses later. Once fleshed out and road-tested, for example, the W3C Technical Architecture Group (TAG) might use this model for architectural discussions about the Open Web Platform.

Ultimately, with such a framework, it becomes easier to identify what is missing from the platform, because we will think more cohesively about its key components. And where there are similar capabilities (e.g. different functions that show up in the same Foundation), it will make it easier to identify where synergies can simplify or improve the platform.

By definition, Foundations are common subsystems useful not only for “horizontal applications”, but also for a variety of industries such as digital publishing, automotive, or entertainment. In a separate exercise we plan to work with those industries to create a view of the Foundations specific to what they need from the Open Web Platform.

So let’s get started. In each paragraph below, I outline why we think this area deserves to be a Foundation. I list some absolutely critical problems the community is currently addressing. This will help motivate why each Foundation was chosen, and the technology development required to give rise to the next generation Web.

Application Foundations

Security and Privacy

The Web is an indispensable infrastructure for sharing and for commerce. As we have created the OWP, we have become increasingly sensitive to making this a secure infrastructure. See, for example, our 2013 “Montevideo” statement calling for greater Internet security.

The vulnerabilities have become increasingly prominent. They vary in range and style. There are vulnerabilities that result from criminal exploitation of security holes for financial gain. There are numerous situations where information and communications that was intended to be private has found its way into unauthorized hands.

From a pure technical point of view, there is a tremendous amount of security research and there is knowledge on how to make an infrastructure secure. Many security advances are available in devices that are connected to the Web today. Nonetheless, security exposures abound: because it is too difficult for applications to leverage the security that is available; because new security techniques are not yet in place; and because users are not encouraged to rely on strong security.

We do not expect all developers to be security experts, so we must make it easier to use the security mechanisms of operating systems. The Crypto API provides access to some of those services from within JavaScript, and is already being deployed. This trend will be extended as platforms add stronger security such as multi-factor authentication, biometrics, smartcards, all discussed at our September Workshop on Authentication, Hardware Tokens and Beyond. We also need to add a more comprehensive Identity Management system which discourages weak passwords.

To strengthen this Foundation, we are working closely with a number of organizations, including the IETF, FIDO Alliance, and Smartcard Alliance.

Core Web Design and Development

Developers use many widely deployed front end technologies for structure, style, layout, animations, graphics, interactivity, and typography of pages and apps. HTML5 brought native support for audio and video, canvas, and more. Dozens of CSS modules are used for advanced layout, transformations, transitions, filters, writing modes, and more. SVG is now widely supported for scalable graphics and animations, and WOFF is beautifying the Web and making it easier to read.

Still, the work is not complete. Much new work will be driven by the adoption of the Web on a broader set of devices, including mobile phones, tablets and e-book readers, televisions, and automobiles. The responsive design paradigm helps us think about how we need to enhance HTML, CSS, and other APIs to enable presentation across this wider set of devices.

One exciting direction for this Foundation is Web Components, which will make it easier for developers to carry out common tasks with reusable templates and code modules, all leveraging standards under the hood.

Another area of anticipated of work will be driven by a more complete integration of digital publishing into the Web. In the past, advanced styling and layout for magazines has remained an area where special purpose systems were required. In this Foundation, we will ensure that we have the primitives for advanced styling and layout so that all publishing can be done interoperably on all Web devices.

Our Test the Web Forward activity, though relevant across the Foundations, has been particularly influential for Core Web Design and Development, and we invite the community to contribute to that active testing effort.

Device interaction

Closely related to the Core Foundation is the Device Interaction Foundation, which describes the ways that devices are used to control or provide data to applications. New Web APIs are proposed weekly to give access to all of the features offered by supporting devices. For mobile phones, APIs exist or are in development for access to camera, microphone, orientation, GPS, vibration, ambient light, pointer lock, screen orientation, battery status, touch events, bluetooth, NFC, and more.

The next generation of Web attached devices will introduce new challenges. For instance, the Automotive and Web Platform Business Group is developing APIs to access information about vehicle speed, throttle position, interior lights, horn, and other car data that could help improve driving safety and convenience. We anticipate some of that work will advance to the standards track. In general, wearables, personal medical equipment devices, home energy management devices, and the Internet of Things will drive developer demand for data in applications, and for Web abstractions to simplify what will be new complexity in underlying networks. To achieve that simplicity for developers, the TAG, Device APIs Working Group, Web Apps Working Group, and Systems Applications Working Group all have a role to play in capturing good practices for API design.

Application Lifecycle

The proliferation of environments —both mobile and non-mobile— in which an application may run has created new challenges for developers to satisfy user expectations. People expect their apps to be useful even when there is no network (“offline”), to do the right thing when the network returns (“sync”), to take into account location-specific information (“geofencing”), to be easy to launch on their device (“manifest”), to respond to notifications (from the local device or remote server), and so on. The Application Lifecycle Foundation deals with the range of context changes that may affect an application. For example, developers have made clear that that AppCache fails to meet important offline use cases. so we must come up with a superior solution.

The emerging approach (“Workers”) for addressing many these lifecycle requirements involves spawning important tasks as asynchronous processes outside of an application. For instance, a Worker can be used to manage a cache and update it according to network availability or receive server-sent notifications, even when an application is not actively running. Enhancing these Foundations these will enable developers to create superior user experiences.

Media and Real-Time Communications

A number of communications protocols and related APIs continue to serve developers well, from HTTP to XMLHttpRequest to Web Sockets. But to meet the growing demand for real-time communications and streaming media, we must add new capabilities, the focus of this Foundation.

The promise of WebRTC is to make every single connected device with a Web browser a potential communications end point. This turns the browser into a one-stop solution for voice, video, chat, and screen sharing. A sample use case driving interest in real-time in the browser is enabling “click-to-call” solutions for improved customer service. WebRTC has the potential to bring augmented reality to the Web and create a brand new class of user experiences – an exciting direction for this Foundation.

For audio and video, developers will have a variety of tools to manipulate media streams, edit audio input, and send output to multiple screens (“second screen”). This last capability is of particular interest to the entertainment industry. For example, in the US, a majority of people have a second device nearby while watching television, allowing for new interactive experiences such as social interactions or online commerce.

Performance and Tuning

Open Web Platform functionality has moved steadily to the client side, which creates a variety of new challenges related to security, application lifecycle management, but especially performance. JavaScript engines have improved dramatically in the past few years. But for high-end games, media streams, and even some simple interactions like scrolling, we still have much to do so that developers can monitor application performance and code in ways that make the best use of resources. This is the focus of our Performance and Tuning Foundation.

Today we are working on APIs for performance profiling such as navigation timing and resource hints. In various discussions and Workshops, people have asked for a number of enhancements: for understanding load times, enabling automatic collection of performance data, providing hints to the server for content adaptation, improving performance diagnostics, managing memory and garbage collection, preserving frame rates, using the network efficiently, and much more.

The responsive design paradigm mentioned in the Core Web Design and Development Foundation also plays a role in the world of performance: we can make better use of the network and processing power if we can take into account screen size and other device characteristics.

Usability and Accessibility

The richness of the Open Web Platform has raised new challenges for some users. It is great to be able to create an app that runs on every device, but is it easy to use or klunky? It’s great to offer streaming media, but do developers have the standards to include captions to make the media accessible?

Designers have pioneered a number of approaches (responsive, mobile first), that can improve accessibility and usability, and W3C’s Web Accessibility Initiative has developed some standards (such as WCAG2 and WAI-ARIA) to enable developers to build accessible applications. But we have more work to do to make it easier to design user interfaces that scale to a wide array of devices and assistive technologies. We have confidence that designers and developers will come up with creative new ways to use standards for new contexts. For example, the vibration API used by some mobile applications might offer new ways to communicate safely with drivers through the steering wheel in some automotive apps, and could also be used to create more accessible experiences for people with certain types of disabilities.

Less than one third of current Web users speak English as their native language and that proportion will continue to decrease as the Web reaches more and more communities of limited English proficiency. If the Web is to live up to the “World Wide” portion of its name, it must support the needs of world-wide users at a basic level as they engage with content in the various languages. The W3C Internationalization Activity pursues this goal in various ways, including coordination with other organizations, creation of educational materials, coordination on the work of other W3C groups, and technical work itself on various topics.


Earlier I mentioned the pattern of widely used applications migrating “closer to the core.” While this is true for all the Foundations, it is especially clear in the Services Foundation, where today we are exploring the four most likely candidates for future inclusion.

The first is Web payments. Payments have been with us for decades, and e-commerce is thriving, predicted to reach $1.471 trillion this year, an increase of nearly 20% from last year. But usability issues, security issues, and lack of open standard APIs are slowing innovation around digital wallets and other ways to benefit payments on the Web. W3C is poised to launch a group to study the current gaps in Web technology for payments. The Payments group will recommend new work to fill those gaps, some of which will have an impact on other Foundations (e.g., Usability, Security and Privacy). Because a successful integration of payments into the Web requires extensive cooperation, the group will also liaise with other organizations in the payments industry that are using Web technology to foster alignment and interoperability on a global scale.

The second is annotations. People annotate the Web in many ways, commenting on photos or videos, when reading e-books, and when supporting social media posts. But there is no standard infrastructure for annotations. Comments are siloed in someone else’s blog system, or controlled by the publisher of an e-book. Our vision is that annotations on the Web should be more Web-like: linkable, sharable, discoverable, and decentralized. We need a standard annotation services layer.

The third is the Social Web. Consumer facing social Web services, combined with “bring your own device (BYOD)” and remote work policies in enterprise, have driven businesses to turn increasingly to social applications as a way to achieve scalable information integration. Businesses are now looking for open standards for status updates (e.g., Activity Streams) and other social data. These same standards will give users greater control over their own data and thus create new opportunities in the Security and Privacy Foundation as well.

The fourth is the Web of Data. The Semantic Web and Linked Data Platform already provide enhanced capabilities for publishing and linking data. These services have been used to enhance search engines and to address industry use cases in health care and life sciences, government, and elsewhere. But we know that more is necessary for developers to make use of the troves of data currently available. One upcoming activity will be to collect ontologies of how linked data should be organized for different applications (notably for search).


Web technology continues to expand by leaps and bounds. The core capability is growing, the application to industry is growing, and we continually find new devices for web technology and new use cases. To be able to focus on this expansion we need modular design, and a principle in modular design is to be able to clearly and succinctly talk about categories of function. Hopefully this post begins a healthy discussion about the framework for the Open Web Platform going forward.

As part of that discussion will continue to develop a new Application Foundations Web page and invite feedback via our public Application Foundations wiki.


I acknowledge extensive discussions within the W3C Team, but especially with Phil Archer, Robin Berjon, Dominique Hazaël-Massieux, Ivan Herman, Ian Jacobs, Philippe Le Hégaret, Dave Raggett, Wendy Seltzer, and Mike Smith. At the Extensible Web Summit, I received great input from Axel Rauschmayer, Benoit Marchant, and Alan Stearns.

The CSS WG changed seven drafts into Notes, to indicate that…

Source: W3C's Cascading Style Sheets home page14 October 2014 12:00 AM

14 Oct 2014 The CSS WG changed seven drafts into Notes, to indicate that no further work on them is expected: CSS TV Profile 1.0, CSS Presentation Levels Module, CSS Mobile Profile 2.0, CSS Marquee Module Level 3, Behavioral Extensions to CSS, CSS3 Hyperlink Presentation Module and The CSS ‘Reader’ Media Type

This week: CSS 20th anniversary, autowebplatform progress, TimBL’s keynote, Physical Web, etc.

Source: W3C Blog Coralie Mercier • 10 October 2014 02:31 PM

This is the 3-10 October 2014 edition of a “weekly digest of W3C news and trends” that I prepare for the W3C Membership and public-w3c-digest mailing list (publicly archived). This digest aggregates information about W3C and W3C technology from online media —a snapshot of how W3C and its work is perceived in online media.

W3C and HTML5 related Twitter trends

[What was tweeted frequently, or caught my attention. Most recent first]

Open Web & net neutrality

W3C in the Press (or blogs)

22 articles since the last Digest; a selection follows. You may read all articles in our Press Clippings page.


The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.


Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed