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.

Minutes Telecon 2014-10-22

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

Full Minutes

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

Source: W3C's Cascading Style Sheets home page22 October 2014 01:01 PM

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

The W3C 20th Anniversary Symposium on The Future of the Web …

Source: W3C's Cascading Style Sheets home page22 October 2014 01:01 PM

29 Oct 2014 The W3C 20th Anniversary Symposium on The Future of the Web will be held 29 October in Santa Clara CA, USA and is open for registration.

DotCSS is a new English-language conference about CSS for de…

Source: W3C's Cascading Style Sheets home page22 October 2014 01:01 PM

14 Nov 2014 DotCSS is a new English-language conference about CSS for developpers. The first edition is in Paris, France, on November 14. With, among others, Daniel Glazman and Bert Bos.

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 IV 2014-09-09: Initial Letters, Animations

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

Initial Letters

Full Minutes || Spec Referenced


Full Minutes || Spec Referenced

Minutes Sophia-Antipolis F2F Part III 2014-09-09: Motion Path as FXTF, Future F2F Meetings, GCPM3/GCPM4

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

Motion Path as FXTF

Full Minutes || Spec Referenced

Future F2F Meetings

Full Minutes


Full Minutes || Specs Referenced: GCPM3 and GCPM4

Minutes Sophia-Antipolis F2F Part II 2014-09-08: z-index and SVG, Prioritizing image(color), randomize(), Animation and calc() of Keywords, Motion Path, Issues in Media Queries 4

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

z-index and SVG

Full Minutes

Prioritizing image(color)

Full Minutes || Spec Referenced


Full Minutes

Animation and calc() of Keywords

Full Minutes || Spec Referenced

Motion Path

Full Minutes || Spec Referenced

Issues in Media Queries 4

Full Minutes || Spec Referenced

Minutes Sophia-Antipolis F2F Part I 2014-09-08: CSS3 Text, Display Module, Backgrounds, Line Grid, CSS UI, Geometry Working Draft

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

CSS3 Text

Minutes Sophia-Antipolis F2F Part V 2014-09-10: CSS UI, Next F2F Dates, New W3C Process, Flexbox

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


Full Minutes || Spec Referenced


Full Minutes

Next F2F Dates

Full Minutes

New W3C Process

Full Minutes


Full Minutes || Spec Referenced

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

Environments for Humans organizes the 3-day CSS Dev Conf 201…

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

13 Oct 2014 Environments for Humans organizes the 3-day CSS Dev Conf 2014, in New Orleans, Louisiana, USA, on 13–15 October. Deadline for paper submissions is April 15.

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.

CSS: It was twenty years ago today — an interview with Håkon Wium Lie

Source: Dev.OperaBruce Lawson • 09 October 2014 10:00 PM

Håkon Wium Lie Opera’s CTO Håkon Wium Lie

Twenty years ago today, Opera’s CTO Håkon Wium Lie published Cascading HTML style sheets – a proposal. If Paul McCartney were a web developer, and writing ‘Sergeant Pepper’s Lonely Hearts Club Band’ today, he would almost certainly write:

It was twenty years ago today
That Håkon wrote a doc to say
That if the Web’s gonna last a while
Then we need a way to define style.
So may I introduce to you
a way to add visual treats:
It’s Sergeant Håkon’s Cascading Style Sheets!

However, when we went round to Paul’s house to ask him to sing this for us, he declined and set his guard dogs, FontTag and Bgcolor, on us. So, instead, to mark this occasion, Bruce sat down with Håkon to ask a few questions about the past, present and future of CSS.

CSS was conceived twenty years ago. Are you happy about how your baby, child and teenager has turned out?

Yes, I’m very happy with CSS. CSS is a cornerstone web specification and web pages are more beautiful as a result of CSS being there. The fact that HTML is still alive and well is also a testimonial to the success of CSS. As with all youngsters, however, there is room for improvement.

You’ve been quoted as saying you proposed CSS “to save HTML”. Please explain.

HTML would have been very different if CSS had not appeared. Authors who came to the web from a desktop publishing background were baffled by the lack of <color> and <font> tags. Including myself. In my first real publication on the web, I resorted to making images with text in it — you can see it in this publication from 1993. If this development had continued, the web would have become a giant fax machine where pictures of text would be passed along. This would have been terrible for blind users and search engines alike. CSS was proposed to prevent this development by giving authors a way to express their designs without adding new HTML tags.

In the first proposal, there was a percentage of influence specifier, e.g. h1.font.size = 24pt 100%, described as follows:

The percentage at the end of the line indicates what degree of influence that is requested (here 100%). If this is the initial style sheet (i.e. the one under user control), this request can be fulfilled, i.e. all headline elements will be rendered using Helvetica. If the statement comes in a later style sheet, any unclaimed influence is granted.

Why was this dropped?

The mechanism you refer to was there to try combine the needs and preferences of both authors and readers. It was inspired by an idea from the MIT Media Lab: TVs in the future would not have controls for brightness and color, but for sex and violence, or left-wing and right-wing, perhaps. The CSS proposal was to have sliding scale where the author was fully in charge in one end of the scale, and the user was fully in charge in the other end of the scale. In between, the browser would try to mix requests to make everyone happy. This works well for certain properties (like font-size) but is hard to do for others (like font-family). In his first response to the CSS proposal, Bert criticized this idea:

The idea that two designs can be averaged to come up with an intermediate style seems utterly wrong to me. What happens when my blue-on-yellow style is combined with somebody else’s yellow-on-blue? Do I get green-on-green? Or who wants to look at a page with Avant-garde titles over Helvetica paragraphs?

I responded:

Some attributes mix better than others. A typical use of “weighted average” is to soften the author’s attempt to be distinct, e.g. the suggested font sizes – while the user still gets the message. One doesn’t have to use this feature, but while “100%” is equal to a binary “1” there is no going back from a binary syntax. In general, I think computer interfaces are much too binary.

Of course, Bert was right (he is, almost always) that the proposal created more problems than it solved, and the mixing was dropped.

Ditto the JS-style dot syntax. Why did it change?

It’s interesting you call it JS-style syntax. When I first proposed CSS, JavaScript was not around so I couldn’t borrow it from there. Rather, the syntax was inspired by X resources from the X11 Window System, another inspirational project coming out of MIT.

The reason for changing the CSS syntax from font.size to font-size was twofold. First, the hyphen makes it look more like written English, which improves human readability. Second, DSSSL and DSSSL-Lite used hyphenated property names. James Clark, who wrote the first draft of DSSSL-Lite, participated in the first W3C workshop on style sheets, and Bert and I borrowed the hyphen from DSSSL. On the downside, the hyphen represents minus in math, which sometimes confuses parsers.

How did Bert Bos get involved, and how did you work together?

Bert Bos reviewed my initial proposal. His background and focus was a bit different from mine, but when he wrote up his own proposal we quickly realized that two proposals could be combined into one. At that point, the web project was being kicked out of CERN and W3C was formed. I was starting up the European branch of W3C at INRIA and Bert was hired immediately. Most of CSS1 was hammered out on a whiteboard in Sophia-Antipolis in July 1995. Bert is still working for W3C in Sophia-Antipolis. Whenever I’m struggling with a difficult technical problem, I wish Bert and the whiteboard were there.

When listing people who made CSS possible, I must also mention Thomas Reardon and Chris Wilson of Microsoft. Thomas was the program manager for Internet Explorer (IE) who early caught onto the idea of adding style sheets to the web. Chris Wilson was the programmer who added CSS to IE3. IE3’s implementation was far from the standard, but one must remember that it was released before CSS1 was finished. Simon Daniels (also of Microsoft) wrote some impressive demos in IE3, and together they committed a major software company to support an emerging standard.

Were there any competing proposals? Why was yours better?

There were a dozen or so proposals for style sheets languages to be used. However, not all of them were suitable due to the characteristics of the web. For example, browsers use progressive rendering to display documents, and they must handle situations where style sheets are not accessible. There’s a wide range of web devices out there and you can’t write a style sheet for each one. So, style sheet languages must express designs that are scalable and responsive. It’s a fascinating area of study and I’ve written a PhD Thesis, which compares the approach taken by the various style sheet proposals.

Naturally, I’m biased in the second part of your question. But I believe CSS has several notable features which makes it especially suitable for web use: cascading, pseudo-classes and pseudo-elements, forward-compatible parsing rules, support for different media types, strong emphasis on selectors, and the amazing em unit.

What’s the biggest mistake you (and Bert) made?

I devote a chapter in my PhD thesis to problems in CSS. There are some, even self-inflicted ones. But the biggest problem CSS1 experienced was not in its design (which is pretty good, if you ask me), but rather in the initial implementations. Jeffrey Zeldman described the situation:

If Netscape 3 ignored CSS rules applied to the <body> element and added random amounts of whitespace to every structural element on your page, and if IE4 got <body> right but bungled padding, what kind of CSS was safe to write? Some developers chose not to write CSS at all. Others wrote one style sheet to compensate for IE4’s flaws and a different style sheet to compensate for the blunders of Netscape 4.

Microsoft and Netscape both deserve some blame, but we — me, Bert, W3C — could have avoided many problems by producing a test suite along with the CSS1 specification. The first real CSS test appeared in October 1998 when Todd Fahrner published his Acid test. The test was creative, visual, and developers could immediately see whether they passed the test or not. In the beginning, no browsers passed. But then, with a strong push from the CSS community, things started to improve. The WaSP played a key role in assuring support for standards. The Opera browser also played a role by showing it was actually possible to implement CSS correctly. When I realized how solid Opera’s CSS implementation was — much better than Microsoft’s or Netscape’s — I joined Opera.

One of Opera’s claims to fame before I joined was that the browser would fit on a floppy disk (which is 1.44 MB). “Fits on a floppy” was a great slogan in those days. When CSS was added, a few more bytes were needed and Opera would no longer fit. “Almost fits on a floppy” doesn’t quite have the same ring to it.

The original Acid test inspired Acid2 and Acid3, which use the same formula: a visual and demanding web page which tests a wide range of features. The development of Acid2 was triggered by an open letter from Bill Gates, where he praised interoperability. Making IE7 follow the CSS standards seemed like a natural follow-up item, and Microsoft was challenged by Acid2. In fairness, other browsers also had issues, and Acid2 exposed bugs in all of them. Microsoft ignored Acid2 in IE7, but — magic sometimes happens — IE8 supported it perfectly. As do all current browsers.

Why did you decide on the box model whereby margin, padding, border are added to declared width rather than the IE5 box-sizing: border-box model?

There are good use cases for both models, I believe. If you want want an image to stretch out to fill the whole content box, the original CSS box model is the one to use. However, if it’s important that padding and borders do not extend outside a certain area, the IE5 model is better. Personally I think there are more use cases for the CSS box model, but some people that I respect highly think otherwise. The conflict has been gracefully resolved by the addition of the box-sizing property which all browsers now support.

I’ve always disliked absolute positioning. Am I wrong? How did it come about in the spec?

Your question takes me back to some heated debates in 1996. The short story is that Microsoft proposed absolute positioning in a draft called CSS Regions: Absolute Positioning and Z-Ordering (discussions took place on W3C member-only lists, I’m afraid; the closest public document is WD-positioning). Several members of the newly formed CSS Working group had reservations, and Bert and I wrote up a simplified counter-proposal. Our proposal got rid of the position property (display was used instead) and only described relative positioning (which would give us time to think through absolute positioning). Microsoft, however, had already implemented their proposal and were reluctant to remove functionality. In the end, the only material changes were to add the right and bottom properties (to balance left and top), and to add position: fixed. This became part of CSS2.

Like you, I have never become comfortable with absolute positioning. That being said, absolute positioning has found its place on the web and I use it from time to time to achieve things that would otherwise be hard, if not impossible, to encode.

I’ve heard people say that you shouldn’t use floats for layout, as they “weren’t intended” for that — they were just to wrap text around images. Does the intention matter, if they work?

Having text wrap around images is one of the basic layout techniques. For sure, floats should be used for layout. One area I’d like for CSS to progress into is paginated onscreen presentations. When you paginate content, floats become even more useful because you can float elements to the top and bottom of the screen.

If you could wave a magic wand, which bit of current CSS would you banish from the world, and what would you magically add and implement everywhere?

I’d banish browser-version-specific code like: <!--[if lt IE 7 ]>. While technically not expressed in CSS, these kinds of “comments” should not be necessary and they lower the standards of the web.

The second part of your question is even more interesting: what parts of CSS should be magically implemented everywhere? In 2006, I would have said web fonts. In 2007, I would have said the <video> element (straying into HTML-land for a while). Both of these are now implemented in all browsers.

In 2011, seeing that many apps used pages (and not scrollbars) to create compelling presentations, I started advocating for web pages to become real pages. The idea is that the style sheet would trigger paged mode so that content is split into pages. Users would navigate from one page to the next with gestures, or perhaps with PageUp and PageDown. I want it to be possible, even easy, to create ebook-readers in browsers. For this to happen, a bit of magic would be helpful. Could you sprinkle some fairy dust on the pillows of all browser vendors, please?

But CSS is not just for browsers. Bert and I wrote a book on CSS and in 2005, for the third edition, we wanted to use CSS itself for formatting. The browsers were not up to the job, but then Prince came along. Michael Day and his colleagues in Melbourne made a terrific product which was able to create a beautiful PDF document from HTML and CSS which we could send to the printer. In order to them to fix my favorite bugs, I joined the board of directors. Prince has since been used to format hundreds of books. We will still have some paper books in the future, I believe. And they will be made from HTML and CSS.

Why do we still not have a method of laying out pages in CSS that doesn’t require a Doctorate in Rocket Surgery? (I’m looking at you, Flexbox…)

Layout is complex, and layout on the web is even more complex due to pages being displayed on so many different devices. CSS has several mechanisms for laying out content, including absolutely positioned elements, floats, multi-column layout, and CSS tables. The interaction between them can be complex, but I don’t think any doctorate is needed. I must admit to not having used Flexbox much, though.

What’s your opinion on pre-processors like SASS and LESS? Does CSS have anything to learn from them?

Yes, pre-processors make a lot of sense. We should probably take the five or so most popular features from pre-processors and add them to CSS itself. My own favorites would be nested selectors, and single-line comments (starting with //). When CSS turns 50 I’ll tell you why they were not part of CSS from the beginning.

You’re one of the members of the WHATWG. How did that come about?

WHATWG was formed when it became clear that W3C would abandon work on HTML and instead focus efforts on compound documents based on XHTML, XForms, SMIL and SVG. For browser makers, HTML was much too important to abandon. Therefore, Ian Hickson, who, at the time, worked in my group at Opera, set up WHATWG to continue working on the web as we know it. Also, we were concerned about Microsoft’s XAML, which had a thin layer of XML on top of a proprietary application language. The focus of WHATWG is therefore on applications, rather than documents. Ian continues to do an amazing job as the editor of the HTML standard.

You’re the father of CSS, yet you’ve recently published some specs under the WHATWG domain rather than the CSS WG in the W3C. Why?

Indeed, CSS Figures and CSS Books are work items of WHATWG. There are some important benefits to publishing the specification in WHATWG. The “living standard” model allows quick updates with little overhead; in the past it was difficult to publish W3C Working Drafts in this area. WHATWG’s goal of keeping the specifications a little ahead of the implementations but not so far ahead that the implementations give up is one that I strongly believe in.

Finally, is CSS still up to the job? Or should we try to move to another model — for example, Grid Style Sheets?

Ethan Munson and Philip M Marden wrote in 1999 that “style sheet languages are terribly under-researched”. This remains true today, and efforts to research and improve style sheet languages must be encouraged.

GSS is an interesting example which adds the “Cassowary” constraint solver to the style sheet mechanism. In my initial CSS implementation in 1995 I used the “SkyBlue” constraint solver to resolve conflicting style sheet statements. (By the way, “SkyBlue” and “Cassowary” were both developed at the University of Washington.) Having a constraint solver allows you to express relationships between arbitrary elements and have conflicts resolved automagically. However, things can get complex when elements disappear and new ones arrive, like they do through DOM operations. Circular dependencies must also be handled gracefully. Therefore, the idea of allowing CSS to express layout constraints between any elements were dropped at an early stage.

In the past, adding support for a new specification required you to convince all browser makers to devote precious developer time. This raised the bar, perhaps uncomfortably high. These days, it’s possible to extend browsers by way of JavaScript libraries. This makes it easier to experiment and perform some of the research style sheets deserve.

Returning to your question: is CSS still up for the job? I think so. I don’t see anything on the horizon that makes me think otherwise. New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.

Thank you. Happy CSS Birthday!

CSS Regions draft updated

Source: CSS WG Blog Alan Stearns • 09 October 2014 09:13 PM

The CSS Working Group has published an updated Working Draft of CSS Regions Level 1. CSS Regions gives the ability to say, “Display this content (a named flow) over there (a region chain).”

The changes from the last public working draft are only in the introduction. You may have looked into CSS Regions in the past and thought to yourself, “Magazine-style layout isn’t relevant to me.” If you have, please take a look at the new intro which now shows much more basic examples and motivations for the feature.

Please send feedback to the (archived) public mailing list with the spec code ([css-regions]) and your comment topic in the subject line.

(Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2014-10-08

Source: CSS WG BlogDael Jackson • 09 October 2014 12:20 AM

Full Minutes

The CSS WG updated the Working Draft of CSS Regions Module L…

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

9 Oct 2014 The CSS WG updated the Working Draft of CSS Regions Module Level 1

RealObjects released PDFreactor version 7, an XML-to-PDF for…

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

9 Oct 2014 RealObjects released PDFreactor version 7, an XML-to-PDF formatter, with support for, among other things, CSS Transforms, CSS Regions, Web Fonts, and running elements. Other features include support for HTML5 (including the <canvas> element), MathML, SVG, XSLT, JavaScript, and accessible PDF. (Java. Free personal version)

Decision by consensus or by informed editor; which is better?

Source: W3C Blog Jeff Jaffe • 07 October 2014 06:11 PM

There has been discussion in the Web standards community about which is the better way to advance technical specifications: by a formal consensus process or by having all decisions made by informed editors as they informally gather a consensus. After all, the W3C has long considered consensus a core value of W3C. On the other hand, the WHATWG describes a process whereby the relevant editor makes the decisions by trying to see where the consensus is, and is explicit about eschewing formal consensus. Which approach is better?

False dichotomy!

In my view, there are advantages to either approach. Clearly when there is an excellent spec writer who works with colleagues there is tremendous efficiency to having decisions made by informed editors. People make excellent progress with this approach both in the WHATWG and in many W3C Groups, including Community Groups (which typically have a high degree of flexibility in how they approach spec writing). In W3C Working Groups it is often the case that an informed editor is able to rapidly make progress in writing a spec and produces Working Drafts with the results. A W3C Working Draft does not necessarily represent a consensus of the Working Group, as it is not a finished product of the group.

While rapid progress can be made by informed editors, W3C will not give its imprimatur that a specification is a “Standard”, or a W3C Recommendation, however, unless it goes through the formal consensus process.

Billions of people and millions of developers rely on Web standards. Since the Web was invented by W3C Director Tim Berners-Lee 25 years ago, it has become a core infrastructure for personal communications, commerce, education, and entertainment. While implementers of standards can rapidly interact with informed editors, it is important that the entire ecosystem has the confidence of due process and is assured that they have their say. This ecosystem includes those who implement standards in browsers, web site developers, app developers, users, people with disabilities, corporate IT, procurement officers, telecommunication firms, ISPs, publishers, news outlets, marketing professionals, on-line e-commerce sites, researchers, educators, textbook authors, and de jure standards organizations such as the International Organization for Standardization (ISO). Significantly, the community is global.

To appreciate why this is important and necessary, it is worthwhile to review some of the key principles of OpenStand and explain their motivation.

OpenStand’s five fundamental principles of standards development

The consensus process has much to learn from Decisions by informed editors

As described in OpenStand, the consensus process has the right properties for developing standards as critical and pervasive as web standards. However, there are tradeoffs, prominent among them that introducing review and accountability to those review comments typically has an impact on speed and agility. We have much to learn from other processes such as “decisions by informed editors”. We are currently looking at a prime example of that, HTML4 was standardized in 1999, and it is taking us 15 years to get to HTML5 – due to be standardized later this year. Three years ago we began revamping our processes in W3C to achieve much of the agility that the industry needs, without sacrificing OpenStand principles. Here are some of the key recent process innovations that W3C has taken to get the best of both worlds.

So in the end, which is better?

There are advantages to having decisions made by informed editors. But W3C must keep its commitment to the OpenStand consensus principles. For good reasons as described above. At the same time, we must improve our processes to foster agility and learning from other approaches.

This week: W3C turned 20, Typography, Mozilla/Ford Open Web Fellowship, etc.

Source: W3C Blog Coralie Mercier • 03 October 2014 03:35 PM

This is the 26 September – 3 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)

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

Minutes Telecon 2014-10-01

Source: CSS WG BlogDael Jackson • 01 October 2014 11:17 PM

Full Minutes

CSS Display Level 3 Updated

Source: CSS WG Blogfantasai • 27 September 2014 08:00 PM

About a fortnight ago, the CSS WG published an updated Working Draft of the CSS Display Level 3. This module describes how the CSS formatting box tree is generated from the document element tree and defines properties (like the display property) that control the types of boxes thus generated.

Significant changes since CSS2.1 include:

Significant changes since the previous draft are listed in the Changes section.

We have a couple of key issues open that we would particularly like feedback on:

Our plan going forward is to resolve all the open issues (obviously), defer the longhands of display to another level[1], and hopefully transition to CR in the next six months.

As always, please send feedback to the (archived) public mailing list with the spec code ([css-display]) and your comment topic in the subject line. Alternatively, you can email the editors and ask them to forward your comment, or post a comment here.

CSS Flexbox Level 1 Revision 1 Update, Call for Comments

Source: CSS WG Blogfantasai • 27 September 2014 06:17 PM

The CSS Working Group has published another Last Call of CSS Flexible Box Layout Level 1 in response to feedback on the recent changes. Flexbox is a new layout model for CSS: the contents of a flex container can be laid out in any direction, can be reordered, can be aligned and justified within their container, and can “flex” their sizes and positions to respond to the available space. This is an update to fix various problems, particularly in the layout algorithm, found through implementation review and experience during the Candidate Recommendation phase. As before, the CSSWG is not revoking the call for implementations: we’re just issuing an LCWD to process the changes.

To help with review and with correctly updating implementations, exact diffs since the original Candidate Recommendation, and their justifications, are available in the Changes section. A Disposition of Comments is also available. The Last Call comment period ends 25 October 2014: please either send comments by then, or request an extension; we plan to process them during TPAC.

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

Better @font-face with Font Load Events

Source: Dev.OperaZach Leatherman • 25 September 2014 10:00 PM

@font-face is an established staple in the diet of almost half of the web. According to the HTTP Archive, 47% of web sites make a request for at least one custom web font. What does this mean for a casual browser of the web? In this article, I make the argument that current implementations of @font-face are actually harmful to the performance and usability of the web. These problems are exacerbated by the fact that developers have started using @font-face for two completely different use cases: content fonts and icon fonts, which should be handled differently. But there is hope. We can make small changes to how these fonts load to mitigate those drawbacks and make the web work better for everyone.

First—let’s discuss what @font-face gets right.

Initiating a Font Download

What happens when you slap a fancy new @font-face custom web font into your CSS? As it turns out—not much. Just including a @font-face block doesn’t actually initiate a download of the remote font file from the server in almost all browsers (except IE8).

/* Does not download */
@font-face {
        font-family: 'open_sansregular';
        src: /* This article does not cover @font-face syntax */;

So, how does one go about initiating a font download? Peep your eyes on this source:

<!-- Initiates download in Firefox, IE 9+ -->
<div style="font-family: open_sansregular"></div>

<!-- Initiates download in Chrome, Safari (WebKit/Blink et al) -->
<div style="font-family: open_sansregular">Content.</div>

This means that WebKit and Blink are smart enough to know that even if a node exists in the document that uses our new font-family but the node is empty—the font does not download. This is great!

What if we create the nodes dynamically in JavaScript?

/* Does not download */
var el = document.createElement('div'); = 'open_sansregular';

/* Initiates download in Firefox, IE 9+ */

/* Initiates download in WebKit/Blink */
el.innerHTML = 'Content.';

All but IE8 wait until the new node has been appended into the document (is not detached) and as previously mentioned, WebKit/Blink browsers even wait until the node has text content.

Now we know what @font-face got right. Now let’s get our hands dirty.

Request in Flight

What happens to our content while our little @font-face request is in flight? To the elements affected by the new font-family, most browsers actually hide their fallback text. When the request completes, the text is shown with the new font-family. This is sometimes referred to as the Flash of Invisible Text, or FOIT.

Since @font-face is largely used for content fonts the FOIT seems counterintuitive, given that the alternative has better perceived performance and the web has historically favored progressive rendering. However, this behavior’s use with icon fonts is useful, given that some code points in icon fonts are mapped to existing Unicode glyphs or using the free-for-all Private Use Area. For example, U+F802 is a pencil icon in OS X Safari and Opera, but a generic default Unicode square in Firefox and iOS Safari. Worse, the Private Use Area is chock-full of multicolor emoji on iOS Safari. You don’t want an unpredictable fallback to show while the icon is loading.

Multicolor Emoji Characters in the Private Use Area on iOS Safari Multicolor Emoji Characters in the Private Use Area on iOS Safari

Conversely, Internet Explorer (including Windows Phone 8) just lays all its cards on the table and always shows the fallback font. In my opinion, this is the correct default behavior for content fonts, but is (again) undesirable for icon fonts.

Remember when the text used to load before the images did?

— @aanand May 10, 2014


In order to walk the perceived performance vs. usability tightrope, some browsers decided to introduce a timeout to @font-face requests. This can often result in elements flashing fallback font families after a certain time period. This is commonly referred to as a Flash of Unstyled Text, or FOUT, but might be more accurately referred to as the Flash of Fallback Text.

In Chrome (36+), Opera (23+), and Firefox there is a three second timeout, after which the fallback font is shown. The timeout is a great benefit for use with content fonts, but for icon fonts this can have an undesirable effect.

If the @font-face request doesn’t complete in a browser that doesn’t have a timeout (Mobile Safari, Safari, Android, Blackberry), the content never shows. Never. Worse, in Safari, if the font loads after 60 seconds, the response content is thrown away. Nothing is shown. It’s important to recognize that font requests should not be a single point of failure for your content.

The Stop Button

Ok, so the @font-face request hangs. Can’t the user just press the stop button? Actually, no. In all browsers, hitting the stop button had no positive effect on @font-face requests.

Some browsers (Safari 7, Mobile Safari 7, Firefox) pretend as if the stop button had never been triggered, with the exception of Chrome. If you hit the stop button after the three-second timeout in Chrome, it re-hides the fallback text and waits an additional three seconds.

Worse, other browsers (Mobile Safari 6.1, Blackberry 7, Android 2.3, 4.2) accept the Stop button but don’t show any fallback content, ever. Your only recourse in this situation is to reload the entire page.

Ideally, the fallback font should be immediately shown if the stop button is pressed. Disregarding Internet Explorer which always shows a fallback font, none of the tested web browsers got this right.

Font Loading Events

We need more control over our @font-face requests. The two main use cases: prevailing content fonts and not-to-be-forgotten icon fonts require much different loading behavior even in the face of increasingly divergent default browser behavior.

One way we can regain control over the loading behavior is to use font load events. The most promising font loading event solution is a native one: the CSS Font Loading Module; which is already implemented and available in Chrome and Opera.

document.fonts.load('1em open_sansregular')
        .then(function() {
                var docEl = document.documentElement;
                docEl.className += ' open-sans-loaded';

By placing a JS-assigned class around any use of our custom @font-face, we regain control over the fallback experience.

.open-sans-loaded h1 {
        font-family: open_sansregular;

Using the above CSS and JS for content fonts, we can show the fallback text while the font request is in flight. If you want to use it for icon fonts, you can easily modify the approach to hide the fallback text avoiding the timeout FOUT as well.

If a user hits the stop button while the text is loading, it may not stop the @font-face from loading and triggering the font event, but at least a fallback font is always shown in all supported browsers.

A Cross-Browser Solution

The above solution works great for Chrome and Opera that support the native API, but what about other browsers? Of course, if you’re already using TypeKit’s webfontloader on your page, you could reuse that—but as of the time this article was written it does not reuse the native API where supported (and is somewhat large to use solely for this purpose—currently 7.1 KB after minification and gzip).

Alternatively, you can use the FontFaceOnload utility, which reuses the native API where supported. It is not a one-to-one polyfill for the CSS Font Loading API and as such the syntax is different:

FontFaceOnload('open_sansregular', {
        success: function() {
                var docEl = document.documentElement;
                docEl.className += ' open-sans-loaded';

If you’d like a full one-to-one polyfill of the CSS Font Loading API, you can follow along with Bram Stein’s in-progress FontLoader polyfill.


Content fonts and icon fonts must be treated differently in order to effectively use them in our pages. In order to make our content usable as soon as possible to our visitors, we must embrace fallback fonts. In order to remove the confusion from sometimes unpredictable icon fonts, we must hide fallback fonts. I hope you’ll consider these inconsistencies and attempt to solve them in your web pages—your users will be happier for it.

Addendum: Browser Support

When the article mentions “all browsers” above, it includes this list:

and WebKit/Blink:

Web Browsers purposefully excluded: no @font-face support:

The CSS WG issued a new last call for CSS Flexible Box Layou…

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

25 Sep 2014 The CSS WG issued a new last call for CSS Flexible Box Layout Module Level 1

Minutes Telecon 2014-09-24

Source: CSS WG BlogDael Jackson • 24 September 2014 11:58 PM

Full Minutes


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