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.

Latest articles

The CSS Days 2018 in Amsterdam are this year on 14 & 15 …

Source: W3C's Cascading Style Sheets home page25 May 2018

14 Jun 2018 The CSS Days 2018 in Amsterdam are this year on 14 & 15 June (with workshops on the 13th). The first day's theme is user interaction. Speakers include Eric Meyer and Greg Whitworth.

Updated CR of the CSS Containment Module Level 1

Source: CSS WG Blog Florian Rivoal • 24 May 2018

The CSS WG has published a Candidate Recommendation and invites implementations of the CSS Containment Module Level 1. This CSS module describes the contain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.

This update to the previous CR brings bug fixes and clarifications. No new feature has been added, nor has any feature been removed. All changes since the previous CR come with a test in Web Platform tests.

Significant changes sine the last CR are listed in the Changes section. A disposition of comments is available.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list with the spec code ([css-contain]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

The Code Leaders program is live!

Source: Web Directions Blog John • 24 May 2018

You spend years developing you capabilities as a developer program and architect, and so one day, you’re asked to do something entirely unrelated–manage people. To interview and hire, mentor and lead. To influence decision makers in your organisation.

And yet few companies and organisations help people prepare for and grow within these roles.

So, last year we launched a new conference, Code Leaders, focussing on the challenges that more senior engineering professionals in our industry face. The focus in 2017 was around two thirds engineering, and one third leadership and management, but after feedback from attendees (which was overwhelmingly positive), we’ve changed up that focus to be more on the latter, and less on the former.

The day begins with a session on the current front end landscape, with presentations by Sara Soueidan on the current state of CSS and SVG, and Marcos Caceres on the Web Platform–browser APIs and more.

Our second session focusses on hiring and building world class teams, with Ryan Biggs looking at the challenge of hiring juniors, Stefano Fratini outlining how they’ve built a world class engineering team at SiteMinder. We wrap the hiring session with Emma Jones focussing on unconscious bias, and techniques for overcoming its influence on team building.

After a fantastic lunch, we’ll return to focus on leadership and management techniques, including insights into leadership from data with Jo Cranford, a deep dive into the ‘Team of Teams‘ model as developed by US General Stanley McChrystal with Kevin Yank, and rounded out by a frequently requested session on managing remote teams (and managing remotely) by former DTO CTO Lindsay Holmwood.

The final session of the day focusses on you–developing your capacities and capabilities, the ethics of what you work on and who you work for–your “why” in Simon Sinek’s terms. Karolina Szczur will consider more ethical tech innovation, Jeremy Nagel argues that being a missionary, rather than a mercenary might be in your best interest (as well as the right thing to do), and the day finishes with the inspirational Isabel Nyo who’ll help you Survive & Thrive as an Engineering Leader.

Throughout the day participants are seated at round tables with 7 others, and a facilitator to help make sure great conversations and connections take place. It’s as much about sharing experiences ideas and connections as it is about the (amazing) content.

If you lead and manage teams, or aspire to doing so, Code Leaders is for you, and we’d love to see you there!

The post The Code Leaders program is live! appeared first on Web Directions.

Minutes Telecon 2018-05-23

Source: CSS WG BlogDael Jackson • 24 May 2018

Full Meeting Minutes

New Candidate Recommendation: CSS Writing Modes Level 4. Upd…

Source: W3C's Cascading Style Sheets home page24 May 2018

24 May 2018 New Candidate Recommendation: CSS Writing Modes Level 4. Updated Candidate Recommendation: CSS Writing Modes Level 3. Updated Candidate Recommendation: CSS Containment Level 1.

Announcing the Code ’18 program

Source: Web Directions Blog John • 23 May 2018

Programs for conferences take a long time to come together. Sometimes we’ve been working with someone to have them come to speak for years, waiting for the stars tho align. Other times a quick email and reply and we’ve lined up a speaker in a matter of hours, or even (very rarely) minutes!

Then there’s the call for presentations aspect – we always want these to go as far and wide as possible, and find new speakers, with fresh ideas. Sadly many have to miss out, often not because they wouldn’t be great presentations, but simply because they don’t quite fit the program this time around.

But once all that effort is done, all those hours of research, emailing, Skype calls, programs are usually announced in one go.

Today we are really excited to announce the program for Code ’18, taking place in Melbourne August 1 and 2.

Sara Soueidan, Mark Zeman, Hui Jin Chen, Maximiliano Firtman

In the coming weeks we’ll dive more deeply into the program, and its various themes and areas of focus, like performance, architecture, CSS, JavaScript, and emerging technology and practices.

But for now, we just want to highlight a few of the speakers, several speaking for the first time in Australia

All alongside sessions on a broad range of topics of relevance to front end developers from Junior to Senior.

Code ’18 is already 66% sold, and will sell out a long way in advance, so if you are keen, don’t wait and register today!

The post Announcing the Code ’18 program appeared first on Web Directions.

Release Notes for Safari Technology Preview 56

Source: Surfin' Safari 16 May 2018

Safari Technology Preview Release 56 is now available for download for macOS Sierra and macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 230913-231553.

This is the last release of Safari Technology Preview that will install and run on macOS Sierra. To continue testing or living on the latest enhancements to Safari and WebKit, please upgrade to macOS High Sierra.








Web Inspector

Minutes Berlin F2F 2018-04-10 Part III: Sizing, Flexbox, Overflow

Source: CSS WG Blog Dael Jackson • 13 May 2018


Full Meeting Minutes || Specs Referenced: Sizing L3, Sizing L4


Full Meeting Minutes || Spec Referenced


Full Meeting Minutes || Spec Referenced

Minutes Berlin F2F 2018-04-10 Part II: Spacial Navigation, CSS Floats, Grid L2, Grid L1, Box Alignment

Source: CSS WG Blog Dael Jackson • 13 May 2018

Spacial Navigation

Full Meeting Minutes || Specs Referenced: Spacial Navigation, Backgrounds & Borders, CSS Overflow

CSS Floats

Full Meeting Minutes || Spec Referenced

Grid L2

Full Meeting Minutes || Spec Referenced

Grid L1

Full Meeting Minutes || Spec Referenced

Box Alignment

Full Meeting Minutes || Spec Referenced

Minutes Berlin F2F 2018-04-10 Part I: 2018 Snapshot, F2F Planning, Accumulating Compat Issues via Ambiguity, Page Floats, CSS Sizing, CSS 2.1, Overscroll, Writing Modes

Source: CSS WG Blog Dael Jackson • 13 May 2018

2018 Snapshot

Full Meeting Minutes || Spec Referenced

2019 F2F Planning

Full Meeting Minutes

Accumulating Compat Issues via Ambiguity

Full Meeting Minutes

Page Floats

Full Meeting Minutes || Spec Referenced

CSS Sizing & CSS2.1

Full Meeting Minutes || Specs Referenced: CSS Sizing, CSS2.1

CSS Overscroll

Full Meeting Minutes || Spec Referenced

Writing Modes

Minutes Telecon 2018-05-09

Source: CSS WG Blog Dael Jackson • 10 May 2018

Full Meeting Minutes

What’s new in Chromium 66 and Opera 53

Source: Dev.OperaJens Widell • 10 May 2018

Opera 53 (based on Chromium 66) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

New ImageBitmap rendering context for <canvas>

The new rendering context allows for more efficient rendering of an image to a canvas. Instead of creating an <img> element and rendering it to the canvas, which causes multiple copies of the image to be stored in memory, an ImageBitmap object can now be displayed in the canvas directly, effectively by transferring ownership of the pixel data to the canvas element.

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');

Since the source image can be fetched and decoded asynchronously, this can be used in e.g. a WebGL game to load textures on the fly, without jank.

CSS Typed Object Model

The CSS Typed Object Model exposes the values of CSS properties to scripts as typed JavaScript objects, instead of as CSS formatted strings. This makes it more straight-forward to write code that reads and manipulates CSS properties, and the code will typically execute faster.

Opera 53 implements the object model for a subset of CSS properties.

Asynchronous clipboard API

A new asynchronous clipboard API has been added that is simpler to use than the old document.execCommand("copy") API, and that integrates with the Permissions API.

With this new API, copying some text to the clipboard is as simple as

try {
    await navigator.clipboard.writeText("some text");
} catch {
    console.error("Could not copy text to the clipboard!");

and reading text from the clipboard is equally easy:

const text = await navigator.clipboard.readText();
console.log("Clipboard text:", text);

For more information about the new API and how to use it, see Unblocking Clipboard Access.


The AudioWorklet API provides a synchronous JavaScript execution context that allows developers to programmatically control audio output with lower latency and higher stability than the legacy ScriptProcessorNode API, which will be deprecated eventually.

Demos and other AudioWorklet resources can be found at Google Chrome Labs.

Other web platform features in this release

Deprecations and Interoperability improvements

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.

Release Notes for Safari Technology Preview 55

Source: Surfin' Safari 02 May 2018

Safari Technology Preview Release 55 is now available for download for macOS Sierra and macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 230521-230913.






Web Driver

Web Inspector




Bug Fixes

CSS Grid Level 2 Updates: Per-axis Grid and ‘ar’ units for gutters

Source: CSS WG Blog fantasai • 27 April 2018

The CSS Working Group has published an updated Working Draft of CSS Grid Level 2. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio–controlled gutters.

The main goal of this level is to have a completed spec for subgrids as soon as possible—so while we might cull some other minor features from the list of requests, more complex feature requests will be deferred to Level 3. Changes from the last draft consist mainly of dropping the simplified “dual-axis” subgrid proposal in favor of the more powerful “per-axis” proposal and switching the syntax for aspect-ratio–controlled gutter justification to use ar units in place of bare numbers. We’ll be working through individual issues filed against these features going forward, such as control over gaps and interaction of parent/subgrid named lines, etc.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list with the spec code ([css-grid-2]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: CSS Grid Layout Level 2.

Source: W3C's Cascading Style Sheets home page27 April 2018

27 Apr 2018 Updated Working Draft: CSS Grid Layout Level 2.

Minutes Telecon 2018-04-25

Source: CSS WG Blog Dael Jackson • 26 April 2018

Full Minutes

Visualizing Layers in Web Inspector

Source: Surfin' Safari 25 April 2018

Recent releases of Safari Technology Preview contain a new experimental feature for Web Inspector: the Layers tab. Building upon the legacy Layers sidebar, this tab introduces a 3D visualization of the inspected page’s compositing layers, to provide developers with a more hands-on (and hopefully fun!) way to understand where layers are being generated and in what order they will render.

Layers tab

In this post, we’ll look at how the Layers tab can be used to find unexpected memory consumption or excessive repaints on a web page.

A Whirlwind Introduction to Layers

Before introducing any debugging tool, it’s important to clarify what we’re aiming to debug in the first place. At first glance, a layer visualization may appear quite similar to a DOM visualization (such as Firefox’s Tilt), yet compositing layers and DOM elements are conceptually different entities. While web developers are intimately familiar with the DOM tree as the structure of elements on a page, the way in which these elements end up rendered on screen tends to only be learned as a need arises.

DOM elements are not just painted to the screen one by one. After the position and size of each element has been calculated, they are drawn onto a series of surfaces called layers. It is these layers which are then composited in a particular order to produce the resulting appearance of the web page. All pages have a root layer corresponding to the document itself, but any DOM element can cause a new layer to be created. Among the reasons for this are element type (e.g. <canvas>), presence of certain CSS properties (e.g. 3D transforms), or interaction with other layer-generating elements.

Layers have a significant impact on rendering performance. Without layers, animating any element (e.g. sliding a header down) would mean having to wastefully repaint the whole page on every frame. If the element has its own layer, however, it may be possible to skip repainting altogether and animate by simply recompositing the layers on screen. Of course, the trade-off for this computational savings is memory cost. Creating too many layers—intentionally or otherwise—can have disastrous results on memory-constrained devices. Like any performance concern, finding the right balance is an empirical issue, so having a suitable debugging tool is crucial!

Identifying Compositing Issues with the Layers Tab

The Layers tab features two real-time representations of the layers on the page, a 3D visualization and a data table. We can use these in conjunction to discover potential performance problems.

We might begin by exploring the visualization to understand each layer’s position, size, and rendering order. To navigate, use left-drag to rotate, right-drag to pan, and scroll to zoom. Clicking a layer in the visualization highlights the corresponding row in the layer table.

We can then use the table to identify the costliest layers, sorting by Memory to prioritize memory consumption (default) or by Paints to prioritize repaint count. Selecting a row in the table displays information about why the layer exists as well as its composited and visible dimensions (visualized as an outline and a plane, respectively). This also recenters the visualization on the selection, clarifying how that layer fits into the larger picture.

explore table

At this point, perhaps we’ll take notice of an oddly-positioned layer nearby and jump to it accordingly. Or we could simply inspect each of the most expensive layers in turn. If a layer seems suspicious, we can click the arrow icon in its table row to switch to the Elements tab and examine the DOM element that generated it. And if that’s not enough to explain an unusually high repaint count, we can turn to the Timelines tab to figure out where those paint events are being triggered.

Once we’ve identified our issue, it’s just a matter of making the appropriate HTML/CSS modifications!


The Layers tab is available in the latest Safari Technology Preview. To enable it, visit the Experimental panel on Web Inspector’s Settings tab and check the “Enable Layers tab” setting. Give it a try and let us know what you think! Reach out at #webkit-inspector on Freenode IRC, to @webkit on Twitter, or by filing a bug.

Web Inspector Styles Sidebar Improvements

Source: Surfin' Safari 25 April 2018

In Web Inspector that recently shipped with Safari 11.1 on macOS High Sierra, the Elements tab sidebar panels and the styles editor got a lot of attention from the Web Inspector team. We’ve re-written the styles editor to provide an editing experience more familiar to web developers, and rearranged the sidebar panels to improve access to the most used tools. The design refresh brings new behaviors and fine-tuning to enhance web developers’ ability to access and understand the elements they’re inspecting.

Tabs Layout

article figcaption {text-align: center}article figcaption::before {display: none} figure>img{object-fit: contain;} styles tabs before & afterBefore / After

In the Elements tab, Styles and Computed are the most commonly used panels. We made them top-level tabs, so it takes a single click to switch between them.

Styles Panel

styles panel information density before & afterBefore / After

The redesigned Styles panel of the same size now fits more data:

Syntax Highlighting

styles syntax highlighting

Property values are now black to make them easier to distinguish from property names. Strings are still red, but links are now blue.

We added curly braces back so copying CSS would produce valid CSS. Curly braces, colons, and semicolons are light gray so they won’t distract from the content.

Styles Editor

We rewrote the styles editor from scratch. This is the first major overhaul of the styles editor since 2013. Instead of a free-form text editor, we changed to cell-based style editing.

Styles tab and shift-tab behavior

CSS property names and values are now separate editable fields. Pressing Tab (⇥) or Return navigates to the next editable field. Pressing Shift-Tab (⇧⇥) navigates to the previous editable field.

Also, typing a colon (“:”) when focused on the property name focuses on the corresponding property value. Typing semicolon (“;”) at the end of the property value navigates to the next property.

Styles add new property behavior

To add a new property, you can click on the white space before or after an existing property. Pressing Tab (⇥) or Return when focused on the last property value also adds a new property.

Styles remove property behavior

To remove a property, you can remove either a property name or a property value.

Styles up and down arrow behavior

Completion suggestions display right away when focused on the value field. Completion values apply right away when selecting using Up and Down arrow keys.

Styles more arrow key behaviors

While editing a property field, Up and Down arrow keys now can increment and decrement values. You can change the interval by holding modifier keys:

Legacy Settings

Legacy settings screen with the Legacy Style Editor setting

The previous version of the styles editor is still available in the in Web Inspector settings, but it’s no longer maintained.

The Visual Styles Panel never gained enough traction to remain in Elements tab by default. It is no longer maintained. Along with the Legacy Style Editor, the Visual Styles Panel can still be enabled in the Experimental settings.


Please report bugs and feature requests regarding the new styles editor on If you’re interested in contributing or have any questions, please stop by the #webkit-inspector IRC channel.

Web Inspector is primarily written in HTML, JavaScript, and CSS, which means that web developers already have the skills needed to jump in and contribute a bug fix, enhancement or a new feature.

CSS Box Alignment Level 3 Updated WD

Source: CSS WG Blog fantasai • 23 April 2018

The CSS Working Group has published an updated Working Draft of CSS Box Alignment Level 3.This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. It also includes the new cross-module gap properties (row-gap, column-gap, gap).

This update fixes various errors in the previous draft. At this point only one issue is open, and the biggest known problem is an insufficient number of illustrations, particularly in the baseline alignment sections. Other than that, we’re hoping we can wrap up and request a transition to CR soon. Changes since the last Working Draft are listed in the Changes section.

Special thanks to Melanie Richards for adding illustrations to the Positional Alignment section, especially as they were unexpectedly tricky to diagram due to internationalization-related complexities. Further editorial advice and/or diagrams that would help make this draft easier to understand are very welcome.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list with the spec code ([css-align-3]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: CSS Box Alignment Level 3.

Source: W3C's Cascading Style Sheets home page23 April 2018

23 Apr 2018 Updated Working Draft: CSS Box Alignment Level 3.

CSS Display Level 3 Update

Source: CSS WG Blogfantasai • 20 April 2018

The CSS Working Group has published an updated Working Draft of CSS Display Level 3. CSS Display describes how the CSS formatting box tree is generated from the document element tree and defines properties that control the types of boxes thus generated.

Changes this time around are fairly minor, mostly just tightening up definitions; see the Changes section. There are a handful of open issues, mostly editorial, but otherwise we expect (hope?) the draft will transition to CR in roughly its current form pretty soon.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list with the spec code ([css-display-3]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: CSS Display Level 3.

Source: W3C's Cascading Style Sheets home page20 April 2018

20 Apr 2018 Updated Working Draft: CSS Display Level 3.

Why Specs Change: EPUB 3.2 and the Evolution of the Ebook Ecosystem

Source: W3C Blog Dave Cramer • 16 April 2018

Drawing of four species of Galapagos Finches, showing the different beak shapes It takes much more than a village to make an ebook. Authors, publishers, developers, distributors, retailers, and readers must all work together. EPUB* requires authoring and validation tools as well as reading systems. The EPUB standard depends on the HTML and CSS standards, among others. There are millions of existing EPUB 2 and EPUB 3 files out there. Change anywhere is felt everywhere.

As this ecosystem evolves, the EPUB standard itself sometimes has to change to keep up. When the Web moved to HTML5, enabling better semantic markup and better accessibility, it was clear that EPUB could benefit. EPUB 3.0, which was released in October 2011, supported HTML5 as well as scripting and multimedia. EPUB could now be used for more kinds of books, better books, more accessible books. EPUB 3 was a big deal, significantly different from, and better than, EPUB 2. Today there’s no reason to use EPUB 2, and yesterday is the best day to start producing EPUB 3.

Sometimes the need for change comes from innovation inside the ebook world. As Apple and Amazon developed fixed-layout ebooks in the early 2010s, the IDPF knew they had to create a standard, to avoid fragmenting the marketplace. Sometimes specs just have bugs, or implementations discover an ambiguity. Some changes are large, like moving to HTML5, and some changes are small, like allowing multiple dc:source elements in EPUB 3.0.1. EPUB 3.0.1 was ultimately a maintenance release, incorporating in the fixed-layout spec, slightly expanding what sorts of attributes were valid in EPUB, and fixing various bugs. Existing EPUB 3s didn’t need to change to support 3.0.1.

In 2016, the IDPF’s EPUB Working Group started working on a more substantive revision, which would become EPUB 3.1. The goal was to bring EPUB closer to the rest of the Web Platform, and make the spec simpler and easier to read. The former was done partly by trying to remove seldom-used features in EPUB that were not part of the larger Web, such as the epub:switch and epub:trigger elements. The Group also clarified the relationship with CSS, moving from an explicit profile of supported properties (which had little bearing on what was actually supported) to using the W3C’s own official definition of CSS, which evolves. It did the same with HTML, referring to the latest version of HTML5, whatever version that might be. But most of our ambitious ideas were scaled back or dropped, such as allowing the regular HTML serialization of HTML5 in EPUB. EPUB 3.1 was officially finished in January 2017, before the IDPF became part of the W3C.

But remember that the spec is only a part of the ecosystem. Two factors proved fatal to EPUB 3.1. First, there are hundreds of thousands of EPUB 3.0.X files already out there. EPUB 3.1 changed the value of the version attribute in the package file, and so those existing files would need to be edited to comply with the new spec, even if they didn’t use any of the removed features.

Second, the validation tool EpubCheck was never updated to support EPUB 3.1.  Unlike the web, the ebook ecosystem is highly dependent on formal validation. EpubCheck is the gatekeeper of the digital publishing world, the tool that verifies compliance with EPUB standards. But EpubCheck is in trouble. It’s maintained by a handful of volunteers, and has almost no resources. There’s a backlog of maintenance work and bug fixes to do. Fifteen months after the release of EPUB 3.1, it still is not supported by EpubCheck, and thus no one can distribute or sell EPUB 3.1 through the major retailers. The Publishing Business Group is currently working to ensure EpubCheck’s future. Stay tuned!

EPUB 3.1 was a good spec—better-organized, easier to understand, clearer about the relationship between EPUB and the underlying web technologies. The EPUB 3.0.1 features it removed were seldom used, and often unsupported. But after 3.1 was completed, many people decided that, even if almost no existing EPUB 3 content was rendered incompatible with the new spec (aside from the version attribute), the price was too high. Better to live with some obsolete features, and guarantee compatibility, than require too much change. EPUB was having its “don’t break the Web” moment.

Early this year, Makoto Murata and Garth Conboy proposed that we roll back some of the changes in EPUB 3.1. This updated spec would be known as EPUB 3.2. The goals were:

  1. Guarantee that any EPUB 3.0.1 publication conforms to EPUB 3.2.
  2. Ensure that EPUB 3.0.1 Reading systems would accept and render any EPUB 3.2 publication, although graceful fallback may sometimes be required.

If you already have EPUB 3 files, you don’t need to make any changes to existing content or workflow to adopt the forthcoming 3.2 spec. You just have a few more options, much like the change from 3.0 to 3.0.1. If you don’t already have EPUB 3 files, start now (making 3.0.1)! There’s no reason to wait.

EPUB 3.2 will still be based on EPUB 3.1, and keep many of the changes in 3.1 that don’t affect compatibility, such as referring to the latest versions of HTML5 and SVG, and using the official CSS Snapshot rather than the old profile. 3.2 will also continue to include WOFF2 and SNFT fonts as core media types. Perhaps most importantly, making EPUB 3.2 closer to EPUB 3.0.1 will require much less work to upgrade EpubCheck.

The W3C EPUB 3 Community Group has started to work on EPUB 3.2, with the explicit goal of remaining compatible with all existing EPUB 3.0.1 files, while retaining the best features of EPUB 3.1. I expect this work to take six months or so; others are more optimistic. When final, EPUB 3.2 will become a W3C Community Group Report, as Community Groups do not create W3C Recommendations.

We need your help! Join the EPUB 3 Community Group at It’s free, you don’t have to be a W3C member, and everyone is welcome. Much of the discussion of technical issues will happen on GitHub; our repository is at

You can look at the early drafts of our spec, too:

    1. EPUB 3.2 Overview
    2. EPUB 3.2 Specification
    3. EPUB Packages 3.2
    4. EPUB Content Documents 3.2
    5. EPUB Media Overlays 3.2
    6. EPUB Open Container Format

*EPUB® is an interchange and delivery format for digital publications, based on XML and Web Standards. An EPUB Publication can be thought of as a reliable packaging of Web content that represents a digital book, magazine, or other type of publication, and that can be distributed for online and offline consumption.

New WebKit Features in Safari 11.1

Source: Surfin' Safari14 April 2018

Update: This post has been updated to omit Offscreen Canvas which is not available in Safari 11.1 on macOS and Safari on iOS 11.3. Offscreen Canvas is available as an experimental feature in Safari Technology Preview releases.

The recently shipped Safari 11.1 in macOS High Sierra and Safari on iOS 11.3 includes WebKit improvements that add support for a lot of exciting web platform technologies. These features offer new capabilities to developers to improve user-perceived performance of web content, it adds a new dynamic approach for offline experiences, and brings a standard approach to web payments that simplifies development. It also delivers redesigned developer tools in Web Inspector that improve overall usability and convenience.

What follows is a short tour of all of the new features and improvements available with Safari 11.1.

Service Worker API

The Service Worker API enables scripts that run in the background to handle generalized processing for web pages. Service Worker scripts commonly work with other complimentary APIs, such as the Cache API, also included in this release, to store fetch requests and responses that to improve network performance or provide an offline experience. WebKit’s implementation respects user privacy partitioning Service Workers by the top level document origin to help prevent cross-site tracking.

Read the “Workers at Your Service” blog post for more details about the WebKit implementation of Service Workers.

Payment Request API for Apple Pay

WebKit added support for the Payment Request API to perform Apple Pay transactions. This enables merchants to offer payment methods across multiple browsers using a standard API, greatly reducing the effort of supporting secure payments across different browsers and platforms.

See Introducing the Payment Request API for Apple Pay for more details.

Beacon API

Beacon API schedules asynchronous requests to send before the page is unloaded and completes them without a blocking request. This is useful for sending diagnostics data about the web application without impacting perceived page load performance.

See the Beacon specification for more information.

Directory Upload & Clipboard API Updates

The Clipboard API has a number of improvements focusing on a modernized implementation of the DataTransfer API. It adds support for dataTransfer.items, reading and writing of HTML content and custom MIME types, and fixed a number of bugs including copying & pasting images from native applications. WebKit also added support for uploading directories using DataTransfer.webkitGetAsEntry() and input.webkitdirectory, allowing interoperability with other browsers. Users can now upload an entire directory onto cloud storage and file sharing services such as iCloud or Dropbox.

Read more about the improvements to the Clipboard API and Directory Upload API.

Video as Image Assets

Animated image formats are very popular, but they easily become large, bandwidth intensive file sizes. To address the performance impact, WebKit in Safari now supports loading H.264 encoded MP4 video with an HTML tag. This allows content authors to replace animated GIF files that are much larger than H.264 video files and require more processing power to display. Beyond the performance gains, this change also allows web content authors to use videos as a CSS background-image.

Some detailed information about this change is available in the blog post Evolution of : Gif without the GIF by Colin Bendell.


Page authors have more control over font loading behavior using the newly support font-display descriptor. WebKit’s new default behavior will show invisible text for up to 3 seconds before switching to an installed font until the desired font finishes downloading. Using font-display, the page author can use the swap value to immediately show an installed font until the specified web font is downloaded. There is a fallback behavior to show an installed font for up to 3 seconds and if the desired font doesn’t load in that time, it will never be shown. Finally, the optional behavior will use the font if it is available in the browser’s cache. If it isn’t there, it skips using it at all. These provide a rich set of behaviors for web developers to control the loading and display experience that best suits the design of their web content.

Find more details in the CSS Fonts Module Level 4 specification.

HTML Image Decoding

Content authors sometimes need a loaded, fully decoded image that is available immediately. Loading and decoding large images or lots of images can cause page performance to suffer. The new HTMLImageElement.decode() function asynchronously starts decoding an image and returns a Promise that resolves when the decoded image is available. With it, developers now have control over when loaded images are decoded, without tying up the main thread. Developers can also declaratively indicate an image should load asynchronously using the decoding attribute on an <img> element.

<img decoding="async">
<img decoding="sync">
<img decoding="auto">

For more information, read the WhatWG proposal.

Passive Event Listeners

To avoid causing poor scroll performance when attaching event handlers to touchstart, touchmove, or wheel events, developers can specify their event listener as passive if the listener does not call preventDefault(). This enables Safari to continue to provide high performance scrolling without waiting for the event listener to finish.

More details on Passive Events Listeners can be found in the DOM specification.

Storage Access API

The new Storage Access API provides a solution to allow third-party embeds to request access to their first-party cookies when the user interacts with them in a world with Intelligent Tracking Prevention. This gives content providers the flexibility to provide embedded content, while offering users transparency about who they are sharing their information with.

Find out more about the Storage Access API on the WebKit blog.

Subresource Integrity

WebKit has added support for Subresource Integrity which enables websites to validate the integrity of resources and reject them if something has changed outside the site owner’s control. An integrity check compares a hash provided by the web content author in an integrity attribute on a <script> or a <link> element with a computed hash of the delivered resource. When the hashes don’t match, instead of applying a stylesheet, or executing a script, a network error is returned. This helps web content authors reduce impact a compromised content delivery network (CDN).

Read the Subresource Integrity specification to learn more.

WebDriver Improvements

Safari includes several improvements to the implementation of WebDriver. With Safari 11.1, WebDriver now supports file uploads and testing WebRTC functionality. In addition, several bug fixes improve the overall quality of the WebDriver implementation.

Web Inspector Improvements

Web Inspector has honed the design of several existing tools, and also adds a useful new tool to inspect HTML Canvas elements. The new Canvas tab allows web developers to understand the changes in recorded frames of canvas animations.

The Styles sidebar in the Elements tab was reworked to use a different, but familiar model for editing style rules, properties and values. It also features improvements in navigating between different style views.

Finally, the Network tab was redesigned, improving both the timeline of loading resources, and navigating to the network details of each resource such as content previews, headers, cookies, size and timing details.


Most of these improvements are available to users running iOS 11.3 and macOS High Sierra 10.13.4, as well as macOS Sierra and OS X El Capitan. The Storage Access API is only available on iOS 11.3 and macOS High Sierra 10.13.4. These features were also available to web developers with Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47. Download the latest Safari Technology Preview release to stay on the forefront of future web features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.

We love hearing from you. Send a tweet to @webkit or @jonathandavis to share your thoughts on this release, and any features you were hoping for that didn’t make it. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.

Updated Note: DOMMatrix interface. Updated Working Draft: CS…

Source: W3C's Cascading Style Sheets home page12 April 2018

12 Apr 2018 Updated Note: DOMMatrix interface. Updated Working Draft: CSS Layout API Level 1.

Updated Working Draft: CSS Fonts Level 4. Updated Working Dr…

Source: W3C's Cascading Style Sheets home page10 April 2018

10 Apr 2018 Updated Working Draft: CSS Fonts Level 4. Updated Working Draft: CSS Painting API Level 1. Updated Working Draft: CSS Typed OM Level 1.

Minutes Telecon 2018-04-04

Source: CSS WG Blog Dael Jackson • 05 April 2018

Full Meeting Minutes

Release Notes for Safari Technology Preview 53

Source: Surfin' Safari 04 April 2018

Safari Technology Preview Release 53 is now available for download for macOS Sierra and macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 229535-230029.

This release of Safari Technology Preview has a known issue where the modal won’t appear for websites that prompt for camera or microphone access.

Service Workers








Web Inspector

Minutes Telecon 2018-03-28

Source: CSS WG Blog Dael Jackson • 01 April 2018

Full Minutes

Publishing @ W3C goes to ebookcraft

Source: W3C Blog Tzviya Siegman • 28 March 2018

For many of us who work with ebooks, the highlight of our year is ebookcraft in Toronto. ebookcraft is a two-day conference devoted to ebook production, sponsored by Booknet Canada. The fifth edition was held last week, and it was a veritable who’s who of Publishing @ W3C.

Why do we love ebookcraft? It’s full of “practical tips and forward-thinking inspiration.” It’s impeccably organized, by the wizardly Lauren Stewart and her team. It’s warm and welcoming. There are cookies. More than half the speakers are women. It really is about making beautiful, accessible ebooks. Of course, that requires standards. The ebook world has suffered more than most, with interoperability being a dream rather than a reality. Many of the presenters are involved with standards work at W3C.

The first day of ebookcraft was devoted to workshops, where longer talks and smaller audiences allow for in-depth coverage of various topics. Naomi Kennedy (Penguin Random House) kicked off the day speaking about “Images in Ebooks,” addressing approaches to format, size, and color with the ever-popular Bill the Cat.

Romain Deltour (DAISY) asked his audience “Is Your EPUB Accessible?” I found out that mine was almost there but not quite (and I wrote some of the specs he was featuring, uh-oh!). Romain walked us through concepts such as how information gets from HTML to the user, what assistive technologies are, how to figure out if your content has accessibility support, and how to test your files. Romain is one of the developers behind Ace by DAISY, a command-line program to check EPUBs for accessibility, and he did a demo for us. Ace by DAISY is based on the EPUB Accessibility 1.0 spec.

There was a panel over lunch called “Everybody’s Working on the Weekend,” about volunteerism in digital publishing. The panelists were from Booknet Canada, some of the wonderful planners of the conference. Many of them also devote their time to standards development at Booknet Canada and other organizations. When it was time for audience participation, it was pretty clear that publishing is a world of volunteers. Everyone wants to help, but there’s a serious shortage of time and resources, given busy day jobs. And standards work can be daunting at first—we need to find ways to gently welcome newcomers.

Deborah Kaplan picked up after lunch with ”WAI-ARIA in Practice.” She walked us through ARIA best practices, perhaps most importantly when NOT to use ARIA. She also opened our eyes to the wide world of keyboard navigation and gave us a hefty reading list for learning more.

Peter Krautzberger spoke about MathML: Equation Rendering in ebooks offered an overview of the options available for equational content in EPUB. We looked at equations in SVG and MathML and many options for making them accessible.

Conference organizer Laura Brady participated in a panel with the NNELS (National Network of Equitable Library Services) called “We Tear Apart Your Ebooks.” The panel discussed the NNELS open system for sharing accessible publications. Once a book is in the NNELS system, it can be shared throughout Canada. Authorized users request accessible publications, and the NNELS team works to make them accessible. Laura recently audited several publishers in Canada to assess their level of accessibility (really not that great) and trained them to get much better.

On Day 2, we shifted from workshops to the big room. Who better to kick off the day than Liisa McCloy-Kelley, co-chair of the Publishing Business Group? Liisa’s topic was “Laser Focus: Don’t Get Distracter by that Shiny Object.” Liisa gave us a short tour of the history of ebooks and EPUB (and made sure we knew how to spell it). Publishing, reading, and writing have changed a lot over the years. We all get caught up on “shiny objects” that might catch our attention briefly, but it’s important to explore why you want to do it. Is it because a feature is cool? Is someone asking you to add it? Are you fixing something that’s annoying? Do you have a unique solution? There are many questions to ask that can help you decide whether you should implement a change, and when (and if) you will make the change. There are some issues that the entire industry must address. We need to stop making proprietary formats and embrace standards. Focus on improving image quality as screen quality improves. We should consider the external contexts provided by reading systems, how voice, AR, and VR might affect our content, and be patient.

The highlight of the day was Rachel Comerford’s “epub and chill” talk. Somehow Rachel managed to compare online dating with ebooks. The whole room was chanting “expose your metadata, not yourself.” The rules for dating and ebooks are pretty similar: 1. Remember Your Audience 2. Use Standards 3. Be Transparent 4. Don’t Play Hard to Get. I strongly recommend checking out the video when it becomes available.

Karen Myers (W3C) and I spoke about standards in Publishing@W3C in a talk entitled “Great Expectations—The Sequel.” We offered a brief history of Publishing@W3C and a deep dive into the work happening in the EPUB3 Community Group, the Publishing Business Group, and the Publishing Working Group. We offered a quick tour of the cast of characters that makes up the rest of the W3C. We shared some highlights from groups such as WOFF, WAI, and Verifiable Claims that could be of real interest and value to the the publishing community. We spoke about how to get involved and how to stay current.

Dave Cramer (co-chair of the EPUB 3 CG) and Jiminy Panoz went on an “Excellent CSS Adventure.” You’ll have to watch the video for Dave’s biblical opening. Dave and Jiminy explained the magic of CSS with some great tips, from the power of selectors and the cascade to the mysteries of pseudo-elements and inline layout.

Benjamin Young and I discussed an HTML-First Workflow at Wiley. We spoke briefly of Wiley’s 200+ year history of publishing books and journals. We have recently begun exploring an HTML-first workflow for our journal articles that looks at content apart from metadata. We have focused on layers of material. The content is in HTML. Metadata is in RDFa. Style is acheived with CSS, and internal processing is accomplished using HTML’s data-*. attribute. The Wiley team that is working on this project began with a set of technical requirements with the goal of improving output. It is still a work in progress, but we heard that lots of people are ready to dive into HTML now.

Ben Dugas offered his perspective as an ebook retailer at the End of the Conveyer Belt. Ben works in Content Operations at Kobo. His team looks at all the files that pass through Kobo’s pipeline. To summarize, content creation is hard, spec creation is hard, content QA is hard, and building support is hard. My favorite part of Ben’s presentation was when he pointed out that it takes a little time to get used to standards work, but once they got used to our quirks, they realized they had actual opinions and it was okay to offer them. Ben’s advice is to move on to EPUB 3 (and beyond), use epubcheck and Ace, test across platforms, think about the reader, and not accept the status quo. Sound advice.

If you’re involved in the creation of ebooks, be sure to come to ebookcraft in 2019! In the meantime, you can see what people said about ebookcraft on social media, follow @ebookcraft on Twitter, and eagerly await the videos of this year’s conference.

Many thanks to Dave Cramer for his thoughtful editing of this post.


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