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

Publishing Working Group TPAC 2017 Summary

Source: W3C Blog Tzviya Siegman • 17 November 2017

On November 6 and 7, the Publishing Working Group held a face-to-face meeting in Burlingame, California. The meeting was part of W3C’s massive TPAC conference, where immersion in spec work was the goal. Having TPAC at an airport hotel meant there were no distractions, which was perfect. We had participants from five continents, ranging in age from “don’t ask” all the way down to less than one.

Ivan Herman focuses his attention on a baby.

Ivan Herman, Garth Conboy, and a PWG guest

Update on FPWD for WP and PWP

The working group’s overarching goal is to publish first public working drafts (FPWD) of both the Web Publications (WP) spec, edited by Matt Garrish, and the Packaged Web Publications (PWP) spec, edited by David Wood. We hope to publish these in the next few weeks, and TPAC was the chance to discuss and hopefully resolve many of the major issues.

Of course, a specification without tests is just words, and we have lots of volunteers to help with testing, but no one (yet) to lead the testing effort.

Web Publication Lifecycle and Manifest

Naming things is hard—we even use the term “bikeshedding” to describe arguing about names. We’d previously used the term “manifest” to describe the components and structure of a web publication, but the term is so overused in other contexts that we decided to use “waybill” as a working term to avoid confusion for now.

One of those contexts is the Web Application Manifest (WAM). Through discussion in the group and with Kenneth Rohde Christiansen, we agreed that we will likely reuse some of the terms from WAM, and perhaps WAM will be able to adapt some terms from publishing. However, we have different processing models, and PWG may need to diverge from WAM when it comes to processing. The PWG will continue to work with WAM as we sort out the details of our metadata requirements. We hope we can contribute to their work, and they can contribute to our work.

Tim Cole suggested that we use terminology from FRBR to discuss the lifecycle of a WP: Discover, Identify, Select, Obtain.

  1. Discovery is finding the publication via search, reference or some other means.
  2. Identify roughly corresponds with the identifier and the addressability.
  3. Selection is a disambiguation process.
  4. Obtaining is the process of opening the publication.

We also talked about whether it would be possible for each component of a web publication to link to the “waybill”, or somehow indicate that it was part of a particular web publication. But this would prevent a component from being reused in other web publications, which is a major goal of some publishers. The discussion did help us clarify our understanding of the components of a publication.


Richard Ishida, Addison Phillips, and Fuqiao Xue of the Internationalization WG joined the group to discuss their work. The site includes information on how to participate, requirements, developer support, and education and outreach at The goal is to have all Working Groups and specs do self-review using the ongoing work and requirements. The I18n WG is looking for contributions to the Typography Matrix. Even photographs of books in the languages with gaps in the table are helpful.


The group has put together packaging requirements. EPUB is a packaging format for web content like HTML and CSS, but it doesn’t actually work directly in web browsers. What would a packaging format for web publications look like, when we want it to be a part of the Web? We discussed existing packaging formats on the Web, including MIME, webpack, tar, gzip, zip, and CBOR. Leonard Rosenthal gave a presentation about the future of PDF, which could potentially be used as a packaging method for web content in the future. We have not yet reached a conclusion about which packaging format we will specify, but the FPWD does not need to be that specific, and David Wood graciously agreed to edit the draft.

Synchronized Media

Marisa DeMeglio and Daniel Weck of the DAISY Consortium offered an overview of the work they have been doing to ensure that synchronized media publications continue beyond EPUB 3’s Media Overlays. Synchronized audio books usually offer sound with highlighted text as the user progresses through. Requirements and design options are available at The basic requirements are that audio playback is synchronized, navigate in the audio the same way one navigates in the text, escape complex structures (e.g. out of a table), some customization (e.g. don’t follow footnotes). There are several specifications today that enable some of the requirements. We are also hoping to close the gap between audiobooks and books that have an audio component. The group recognizes that this is a need for the Web as a whole, not just for publishing, and we are exploring work on existing standards, such as MPEG and TTML. We are planning to set up a Community Group devoted to this work. See also Romain Deltour’s slides about synchronized audio books.

Security, Privacy, and Integrity

The PWG plans to rely heavily on the basic security model of the Web. We rejected restrictive models such as AMP or even limiting JavaScript as was done in EPUB 3. This has proven to be an unsuccessful method. Some feel very strongly that privacy for publications must go beyond what is available today because users have different expectations from publications than of the Web. Others stressed that terms like “spying” are misleading because observing reading habits allows UAs to offer readers experiences such as keeping their place in a publication. The group discussed adding slots for signatures to ensure integrity of the content (that the publication has not changed since obtaining it). There is a need for user privacy as well. Readers have a much higher expectation of privacy within a reading environment than in a web app, and we plan to include a statement, perhaps more social than technical, in our document explaining that.


Tim Cole has been working on a Locators document that expands on the Web Annotations Selectors and States. He queried the group to determine whether we need to retain some of the unique attributes of EPUB CFI, the fragment identifier for EPUB. We discussed whether there should be a fragment id (no), whether we need side bias and text position selectors (including sortability), and selection of continuous and discontinuous embedded resources. We are seeking feedback from those systems that use CFI about whether their needs are met. We’re looking at you VitalSource.

Meeting with Accessible Platforms Architecture Group (written by Avneesh Singh)

The joint session of PWG Accessibility Task Force, Accessible Guidelines (Silver) Task Force and APA was addressed the incorporation of accessibility requirements specific to publishing to WCAG 3.0 (Silver) and way forward for Media Overlays specifications.

Topic 1: Incorporation of accessibility requirements specific to publishing in WCAG 3.0.

The Silver task force was happy to receive the publishing requirements compiled at

They were also briefed about the architectural issues in WCAG 2.0/2.1 due to which accessibility metadata was accepted as optional conformance in WCAG 2.1, while it is extremely important component of publications. The Silver task force stated that these issues will help them in creating a better design. APA conveyed their intent to propose the concept of pages to HTML working Group because it is a requirement for mobile devices also, and this would address the needs of publishing as well as of mobile users. Regarding timeline, it is a longer term work. Silver task force will be working on research and design in coming months, and they stated that actual work would pick up one year from now.

Topic 2: Exploring paths for moving ahead Media Overlays specifications.

The presentation was well accepted. APA group mentioned that they worked on somewhat similar requirements and developed a document some years ago at The groups also discussed the existing technologies that may be useful i.e. TTML and Web VTT. The issue with these technologies is that the media is the master and text is associated to it. But in our case we need the text to be the master because the audio or video has to be an overlay. The structure and formatting should be provided by the publication, and media should be synchronized with it. So, TTML and WebVT are doing the reverse of that we need. The advice was to go through second screen work, and explore other groups that may have the similar requirements. Some group members also suggested some ways in which TTML and Web VTT can be useful for our work. The broad view was to start a community group to explore the path ahead, and APA will help in communicating this work to other groups in W3C.

Breakout session on offlining

We had a packed room for a breakout session featuring Brady Duga, Benjamin Young, Jake Archibald, and Dave Cramer (via Skype) to discuss some basic questions what we need to offline publications and what the components of a publication are. We quickly concluded that ServiceWorkers should be able to do the job, but there is a great deal yet to be defined. Many of the questions that need to be answered have to do with the relationship of Web Publications to browsers. Jake made it clear to Publishers that browsers are really bad at guessing what to do with declarative markup and specifications that don’t explain behaviors. As a group, we are considering the need to create a JavaScipt Polyfill that provides a UI. This would not be provided by every publisher. Instead, it would be a universal, default UI.

Next steps There are many open issues on GitHub. Please add your thoughts, and we will publish FPWD of WP and PWP within the coming weeks. Thank you to all who traveled to Burlingame and all who participated remotely.

Minutes and Drafts

Last week’s may be our best TPAC ever; W3C Strategic Highlights

Source: W3C Blog Jeff Jaffe • 15 November 2017

TPAC 2017 logoTPAC 2017, which we held last week next to the San Francisco airport, was a very successful event, where more than 600 participants registered, over 250 were drawn by our Developer Meetup, 150 members from the global publishing community participated at the first W3C Publishing Summit, while our first W3C Executive Forum attracted over 50 senior executives from Silicon Valley technology companies as well as international leaders from automotive, entertainment, financial services, gaming, real estate and retail industries. That is over 1,000 experts and aficionados from the Web community who met in over five days. It was the highest attendance ever for a TPAC. We heard and read unsolicited positive comments from so many attendees that we are glad the feeling is mutual.

36 work group and 5 W3C Community Groups met face-to-face on the first and last two days of the week, the Plenary session filled the room in the morning around topics of core Web innovation, improving how we do Web standards, and improving interoperability with web-platform-tests; and the masses splintered to organize 40 breakout sessions and reassembled to report and hear ideas, progress, proposals, etc.

This TPAC was marked with a resurgence in innovation around the core architecture of the Web.

Core innovation [Lightbulb design credit: Freepik]

The Web is again being enhanced in many diverse areas (Extensible Web, WebRTC, Web Assembly, Web Performance, Web Payments, WebVR, Web Authentication, Service Workers, Web Components, MSE) which will improve everyone’s experience on the Web, and drive improved commercial applications in financial services, e-commerce, entertainment, telecommunications, publishing, and gaming.

Of particular excitement was the energetic presentations provided by developers at the W3C developer meetup. It truly brought out the excitement in the usage of the Web; in areas such as usability, accessibility, performance, Web apps, WebVR, styling with CSS Grid, Web Components.

As part of preparation for TPAC we published for the Membership “W3C Highlights – November 2017,” now public, which I invite you to read.

We are already looking forward to TPAC 2018, 22-26 October in Lyon, France.

Release Notes for Safari Technology Preview 44

Source: Surfin' Safari Jon Davis • 15 November 2017

Safari Technology Preview Release 44 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 223953-224579.

If you recently updated from macOS Sierra to macOS High Sierra, you may need to install the High Sierra version of Safari Technology Preview manually.

Conic Gradients

Payment Request

Image Bitmap




Web Inspector

Web Driver


CSS Grid



Updated Working Draft: CSS Properties and Values API Level 1…

Source: W3C's Cascading Style Sheets home page09 November 2017

9 Nov 2017 Updated Working Draft: CSS Properties and Values API Level 1.

What’s new in Chromium 62 and Opera 49

Source: Dev.OperaDaniel Bratell • 08 November 2017

Opera 49 (based on Chromium 62) 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.

Network Quality Estimator API

There are times when a web page want to adapt to the user’s network. To help a web page with that information there is now the Network Information API which can give a rough indication of the user’s network, including bandwidth and round-trip time.

This is still under development but the parts that exist today, rtt, effectiveType and downlink, should be enough for most use cases.

The plan is that these signals will also become available as HTTP request headers and enabled via Client Hints.

OpenType Variable Fonts

Previously a font file could only contain one weight/variant of a font. So you had one file for bold, one file for semi-bold, one for stretched, one for normal and so on. With OpenType Font Variations you can combine those variants efficiently in a single file. This should allow web pages to be smaller and load faster than before, while also giving them access to an infinite number of font variants (not that I recommend using more than a few in a page).

Animated font-variants

Animation based on Amstelvar and Decovar

Stretch, style, and weight can be adjusted by giving a numerical value to respective CSS property, or by setting the font-variation-settings CSS property.

Media Capture from DOM Elements

It is now possible to stream animations directly from a canvas or video element to anything that can handle a stream. Previously it was only possible to stream from capture hardware on the computer.

Through the W3C Media Capture from DOM Elements API you can call captureStream() on any HTMLMediaElement and send it to another video element or stream it remotely through WebRTC. Or process or manipulate it in other ways.

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.

Video of the Week: Mavo: HTML Re-imagined for the Era of Web Apps – Lea Verou

Source: Web Directions Blog John • 03 November 2017

Lea VerouBack in 2012, Lea Verou made quite an impact when she presented More CSS Secrets at Web Directions. Her live coding on stage was truly a wonder to behold (plenty of experts I know refuse to do it – because it’s hard!).

Lea returned to be part of Code 17 earlier this year. In fact, she and her partner Chris Lilley both presented, which was a bit of a coup for us.

We’ve made Lea’s presentation our Video of the Week, not least because it is one of the first and clearest insights into Mavo, a new, approachable way to create web applications, using just HTML and CSS.

Every now and then, someone comes up with a new tool or technique or approach that turns out to be a game changer: Responsive Web Design, Flexbox, Progressive Web Apps, CSS Grid Layout are recent examples. We believe Mavo is another, and one that builds on and extends the power of the web itself.

Take a look (57 minutes).



Got your ticket for Summit 17 yet?

Last year’s Direction has morphed into this year’s Summit – two days and two tracks of presentations crammed with ideas, challenges, techniques and breakthroughs in design, development and the overarching themes and concerns driving the breakneck evolution of our web and digital industry. It all takes place in Sydney on 9-10 November. Come and join us!


Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our weekly newsletter mailing list to keep up with everything happening at Web Directions, as well as regular bursts of links to relevant articles & resources curated by John Allsopp – and we can promise you some exclusive and substantial subscriber benefits.

The post Video of the Week: Mavo: HTML Re-imagined for the Era of Web Apps – Lea Verou appeared first on Web Directions.

Minutes Telecon 2017-11-01

Source: CSS WG BlogDael Jackson • 02 November 2017

Full Minutes

Designing Websites for iPhone X

Source: Surfin' SafariTimothy Horton • 01 November 2017

The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta.

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

The inset area is filled with the page’s background-color (as specified on the <body> or <html> elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.

Other pages — especially those designed with full-width horizontal navigation bars, like the page below — can optionally go a little further to take full advantage of the features of the new display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.

While reading this post you can tap on any of the images to visit a corresponding live demo page and take a peek at the source code.

Safari's default insetting behaviorSafari’s default insetting behavior.

Using the Whole Screen

The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.

The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, our viewport meta tag now looks like this:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>

After reloading, the navigation bar looks much better, running from edge to edge. However, it is immediately clear why it is important to respect the system’s safe area insets: some of the page’s content is obscured by the device’s sensor housing, and the bottom navigation bar is very hard to use.

viewport-fit=coverUse `viewport-fit=cover` to fill the whole screen.

Respecting the Safe Areas

The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. This will result in a page that takes full advantage of the increased screen real estate on iPhone X while adjusting dynamically to avoid the corners, sensor housing, and indicator for accessing the Home screen.

Safe and Unsafe AreasThe safe and unsafe areas on iPhone X in the landscape orientation, with insets indicated.

To achieve this, WebKit in iOS 11 includes a new CSS function, env(), and a set of four pre-defined environment variables, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

env() works anywhere var() does — for example, inside the padding properties:

.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);

For browsers that do not support env(), the style rule that includes it will be ignored; for this reason, it is important to continue to separately specify fallback rules for any declarations using env().

Safe area constantsRespect safe area insets so that important content is visible.

Bringing It All Together, With min() and max()

This section covers features that are available starting in Safari Technology Preview 41 and the iOS 11.2 beta.

If you adopt safe area insets in your website design, you might notice that it is somewhat difficult to specify that you want a minimum padding in addition to the safe area inset. In the page above, where we replaced our 12px left padding with env(safe-area-inset-left), when we rotate back to portrait, the left safe area inset becomes 0px, and the text sits immediately adjacent to the screen edge.

No marginsSafe area insets are not a replacement for margins.

To solve this, we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions min() and max() which will be available in a future Safari Technology Preview release. Both functions take an arbitrary number of arguments and return the minimum or maximum. They can be used inside of calc(), or nested inside each other, and both functions allow calc()-like math inside of them.

For this case, we want to use max():

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));

It is important to use @supports to feature-detect min and max, because they are not supported everywhere, and due to CSS’s treatment of invalid variables, to not specify a variable inside your @supports query.

In our example page, in portrait orientation, env(safe-area-inset-left) resolves to 0px, so the max() function resolves to 12px. In landscape, when env(safe-area-inset-left) is larger due to the sensor housing, the max() function will resolve to that size instead, ensuring that the important content within is always visible.

max() with safe area insetsUse max() to combine safe area insets with traditional margins.

Experienced web developers might have previously encountered the “CSS locks” mechanism, commonly used to clamp CSS properties to a particular range of values. Using min() and max() together makes this much easier, and will be very helpful in implementing effective responsive designs in the future.

Feedback and Questions

You can start adopting viewport-fit and safe area insets today, by using Safari in the iPhone X Simulator included with Xcode 9. We’d love to hear how your adoption of all of these features goes, so please feel free to send feedback and questions to or @webkit on Twitter, and to file any bugs that you run into on WebKit’s bug tracker.

Release Notes for Safari Technology Preview 43

Source: Surfin' Safari Jon Davis • 01 November 2017

Safari Technology Preview Release 43 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 223209-223953.

If you recently updated from macOS Sierra to macOS High Sierra, you may need to install the High Sierra version of Safari Technology Preview manually.

Cache Storage API

Web Animations


Geolocation API

Drag and Drop




Bug Fixes


Web Inspector

The redesigned styles sidebar can be enabled in the Web Inspector Settings tab under Experimental.


Web Driver

Payment Request

Subresource Integrity


Video Ristretto: Sharpen Up Your Text with The Power of Three – Mandy Michael

Source: Web Directions Blog John • 01 November 2017

Mandy MichaelOne of the more pleasurable tasks in organising web tech conferences – although often a difficult one – is talent spotting: identifying people who not only have developed some particular technical facility, or some approach to skills development, or a fresh perspective on our digital futures, but can also articulate their point of view and then stand up in front of several hundred of their peers and expound on that topic.

Being good at that doesn’t suit everyone, so it’s very pleasing to be able to spot people – some of whom may have never spoken in public before – and encourage and support them to be speakers at Web Directions events. Some go on to speak at overseas conferences and build themselves an international reputation.

I bring this up because our Video Ristretto is of a talk from Respond 17 by Mandy Michael, Lead Front End Developer at Seven West Media in Perth.

Mandy is by no means a beginner, and has even been a web tech conference organiser herself. But I think it’s fair to say that during the past year or two, she has emerged as one of our local leading speakers on front end development and CSS in particular.

I dare say many of our international visitors who’ve seen Mandy speak and chatted with her would expand that to “global”.

Mandy certainly demonstrates not only a mastery of CSS skills in this talk but an ability and desire to share her knowledge and inspire others. By the way, Mandy will be at Summit in Sydney next week (and if you’re not, I hope you have a good reason – otherwise, register now!), where the list of speakers runs the full gamut of experience, from seasoned to fresh – all of them compelling.

For now, give yourself 20 minutes or so to let Mandy show you some pretty cool and useful text effects with CSS.



Got your ticket for Summit 17 yet?

Last year’s Direction has morphed into this year’s Summit – two days and two tracks of presentations crammed with ideas, challenges, techniques and breakthroughs in design, development and the overarching themes and concerns driving the breakneck evolution of our web and digital industry. It all takes place in Sydney on 9-10 November. Come and join us!


Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our weekly newsletter mailing list to keep up with everything happening at Web Directions, as well as regular bursts of links to relevant articles & resources curated by John Allsopp – and we can promise you some exclusive and substantial subscriber benefits.

The post Video Ristretto: Sharpen Up Your Text with The Power of Three – Mandy Michael appeared first on Web Directions.

W3C Developer meetup in San Francisco, November 6

Source: W3C Blog Dominique Hazaël-Massieux • 30 October 2017

W3C Developers San Francisco We are just a week away from W3C annual Technical Plenary week in the outskirts of San Francisco, where this year again, we are organizing a developer meetup!

The event is free, open to anyone who registers for it.

We are biased, but we think we have a pretty exciting program lined up:

This event would not have been possible without the support from our sponsors, in particular Microsoft and Samsung: many thanks to them!

Don’t miss the chance to attend, and make sure to register!

Minutes Telecon 2017-10-25

Source: CSS WG BlogDael Jackson • 26 October 2017

Full Minutes

What is the point of going to a conference?

Source: Web Directions BlogJohn • 24 October 2017

conference attendeesFor many years, my primary focus was developing software. In the mid 90s, that morphed into developing software for web developers, in particular one of the very earliest CSS editors, Style Master.

For a long time, I knew as much about CSS as almost anyone on earth (Eric Meyer and Bert Bos probably knew more than I did back then).

I wrote parsers and editors for all of CSS2 (Pro tip, be very careful about supporting standards that aren’t final – CSS2 was never finalised and supported features that ended up in other CSS modules often many years later), and I knew all the minutiae of CSS rules and properties and values. I developed a database of hundreds – possibly thousands – of browser CSS bugs, with suggested workarounds (like, but available in 1996).

Fast forward 20 years and what I really know a lot about now is running great conferences. I say that with humility, and based on a lot of feedback that I believe has been honest and has often included ideas for improvement.

And yet that’s not something I’ve ever written about (which is unusual for me), despite having some very strong opinions about this (which is not at all unusual for me).

So, given we have a big conference coming up in three weeks, I thought I’d write down a thought or two about conferences, in particular addressing the issue, “what is the point of attending a conference?”

I actually remember when we ran our first conferences, around 2004, people asking in particular why anyone would come to a conference about the web, since they were all online and learning and connecting.

I used to talk abut the value of connecting in person, either with someone new, or with people you meet maybe once a year at our conference. Back then, there were few if any meetups, and indeed not many people actually did this web thing, well at least not compared with today.

It was a way to connect with, and share ideas with, and form friendships with people who did what you did. Face to face.

While that need is, up to a point, met in other ways now, there is something about hundreds of people in the one place, being inspired and educated, caffeinated and connected that is special.

But my focus is very much on the content, speakers and ideas. And this is what I think few people really think about in terms of the value of the content of a conference, or at least this is how I think about that value.

When we attend a workshop on a specific topic like “Introductory React” or “Advanced CSS Animation”, we think of ourselves at a certain level of knowledge (I know a fair bit about CSS and animation, I know nothing about React).

We also have a sense of where we want to go over the course of  that day or the days of the class.

It’s about, in Donald Rumsfeld’s famous, often ridiculed but I think valuable formulation, about known unknowns. It’s about realising what we know we don’t know, and filling that specific gap.

That’s not what conferences are for, even though workshops and conferences seemingly often take place hand in hand.

Conferences are (at least in how I program them) about discovering what we don’t know we don’t know – and turning these unknown unknowns into the known unknowns we can then focus on (if we think that is warranted).

Workshops are turn by turn instructions from point A to point B. A conference is perhaps a travel guide, pointing out the things we could do, the ideas we could explore, the places we could go.

Using a conference in this way means we seek out what we don’t know (time and again attendee feedback from our conferences is that it was the speaker who they hadn’t heard of talking about something they didn’t know about that was most valuable).

To me it this serendipity, of the people you meet and the ideas you encounter, that is the  irreplaceable aspect of a conference.

Yes, conferences require a real commitment of time and money. But I honestly feel they are unique and uniquely valuable.

It’s why I love running them, and talking at them, and attending them.

Every conference I’ve ever attended has been of real value. And while that remains true I hope to keep doing them, and speaking at them and attending them.

The post What is the point of going to a conference? appeared first on Web Directions.

A story by Aaron Gustafson in A List Apart describes the his…

Source: W3C's Cascading Style Sheets home page20 October 2017

20 Oct 2017 A story by Aaron Gustafson in A List Apart describes the history of the CSS Grid module and why Grid is different from older parts of CSS.

Minutes Telecon 2017-10-18

Source: CSS WG BlogDael Jackson • 19 October 2017

Full Minutes

Updated Candidate Recommendation: CSS Flexible Box Layout Le…

Source: W3C's Cascading Style Sheets home page19 October 2017

19 Oct 2017 Updated Candidate Recommendation: CSS Flexible Box Layout Level 1.

W3C to work with MDN on Web Platform documentation

Source: W3C Blog Dominique Hazaël-Massieux • 18 October 2017

screenshot of MDN search barI am pleased to announce that W3C has joined in collaboration with Mozilla, Microsoft, Google, and Samsung to support MDN Web Docs. MDN documents cross-browser Web standards to allow Web developers to learn and to share information about building the open Web.

MDN is a web development documentation portal created by Mozilla with the mission to provide unbiased,  browser-agnostic documentation of HTML, CSS, JavaScript, and Web APIs.

Building the Web platform through standards can only work if these standards can be effectively adopted by developers. As a developer myself, MDN has been an invaluable resource in learning about the Web, and I am enthused by the prospects of contributing to its future and how standardization and dev documentation can work better together.

Release Notes for Safari Technology Preview 42

Source: Surfin' Safari Jon Davis • 18 October 2017

Safari Technology Preview Release 42 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 222556-223209.

If you recently updated from macOS Sierra to macOS High Sierra, you may need to install the High Sierra version of Safari Technology Preview manually.

File and Directory Entries API

Payment Request

Clipboard API










Web Inspector

Bug Fixes

Updated Candidate Recommendation: CSS Backgrounds and Border…

Source: W3C's Cascading Style Sheets home page17 October 2017

17 Oct 2017 Updated Candidate Recommendation: CSS Backgrounds and Borders Level 3.

Minutes Telecon 2017-10-11

Source: CSS WG BlogDael Jackson • 11 October 2017

Full Minutes

CSS Multi-column Layout Level 1 republished as a Working Draft

Source: CSS WG Blog Rachel Andrew • 05 October 2017

The CSS Working Group has published an update to CSS Multi-column Layout Level 1 as a Working Draft. The Group resolved to republish as a Working Draft rather than a Candidate Recommendation due to the large number of changes made to the specification since the last publication of the Candidate Recommendation on 12th April 2011, and the backlog of outstanding issues still to resolve.

Changes since the 2011 Candidate Recommendation

A list of significant changes made to the specification can be found in the Changes section of the Working Draft. Summarized below are some notable changes.

Next steps

I became co-editor of the specification at the CSS Working Group meeting in Paris in August 2017, and am keen to maintain momentum with this work so we can get the outstanding issues in Level 1 resolved. My intention as an editor is to work through the outstanding issues, and also to ensure that the test suite is brought up to date.

I’m aware that the interoperability issues in Multi-column Layout have been a source of frustration to those trying to work with it, I hope that reviving work on the specification will be the first step in improving that situation.

Send your feedback!

I would love to hear from web developers, and those working with multicol for EPUB and print output, in addition to people implementing the specification in User Agents. In particular I am keen to clarify anything where differing interpretations of the specification have caused interoperability problems.

The existing issues are listed on GitHub, and this would be the preferred way to send feedback on the specification. If you have thoughts on an existing issue please add a comment. If you have a new Multi-column related thought or have spotted a problem in the specification, please raise a new issue. I’m very happy to help figure out if an issue is with the User Agent, with this spec or another spec, so please raise an issue even if you are unsure where the problem originates. If you cannot post to GitHub for some reason then posting to www-style with the spec code [css-multicol] is an option and I will copy the issue over to GitHub.

Updated Working Draft: CSS Multi-column Layout Level 1.

Source: W3C's Cascading Style Sheets home page05 October 2017

5 Oct 2017 Updated Working Draft: CSS Multi-column Layout Level 1.

Release Notes for Safari Technology Preview 41

Source: Surfin' Safari Jon Davis • 04 October 2017

Safari Technology Preview Release 41 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 221968-222556.

File and Directory Entries API


Bug Fixes


Drag and Drop









Web Driver

Web Inspector

RealObjects released PDFreactor version 9.1, an XML-to-PDF f…

Source: W3C's Cascading Style Sheets home page28 September 2017

28 Sep 2017 RealObjects released PDFreactor version 9.1, an XML-to-PDF formatter that runs either as a Web service or as a command line tool. It has support for, among other things, CSS Transforms, CSS Regions, Web Fonts, and running elements. Other features include support for HTML5, MathML, SVG, XSLT, JavaScript, and accessible PDF. Version 9 adds, among other things, CSS opacity, box-shadow, new REST APIs, improved JavaScript and support for Linux systemd. (Java. Free personal version)

New WebKit Features in Safari 11

Source: Surfin' SafariJon Davis • 26 September 2017

With the release of iOS 11 and macOS High Sierra, the new Safari brings impressive performance improvements and great new WebKit features to the web. This release takes bold steps to curb all too common annoyances that have become pervasive across the web. It’s important for developers to be aware of how they might impact their sites. WebKit includes a JavaScript engine that is faster than ever and adds transformative features like WebAssembly and WebRTC. We can’t wait to see what developers will build with them.

Here are the highlights of the features that make Safari 11 such a significant release.

WebRTC and Media Capture

WebKit support for WebRTC and the Media Capture and Streams API brings real-time communication between browsers to Safari. The combination of support for both technology standards enables developers to bring video conferencing experiences to the web without the use of plug-ins. WebKit uses libWebRTC under the hood for interoperability and a solid foundation of features for efficient video conferencing.

Read more in the WebKit blog post about WebRTC.


WebKit added support for WebAssembly as a complement to JavaScript programs. It is a low-level binary format designed to be a compilation target for existing languages like C++. It can’t do everything that JavaScript can, but it works together with JavaScript to accelerate computationally-intense operations. The implementation in WebKit supports both x86-64 and ARM64 platforms.

Learn more about WebAssembly in WebKit.

Variable Fonts

Developers can improve the loading performance on their site and provide designers with more control over typography using Variable Fonts. It is a specially formatted font file that contains values describing font variations across different axes of features like font weight, size, or oblique angles. The implementation in WebKit also adds CSS property support that can be animated, allowing web authors to incorporate fluid motion into typography changes.

Read more about Variable Fonts on the Web to learn more.

Timing APIs

Support for Resource Timing, Performance Timeline, and User Timing APIs in WebKit enables developers to measure performance characteristics of their web applications. The Resource Timing API can gather detailed network timing data, such as the time taken to fetch a specific resource. Performance Observers allow you to gather timing metrics asynchronously without blocking the application. While the User Timing API allows developers to set application-specific timestamps that are tied in to the browser’s performance timeline.

Read the Resource Timing, Performance Timeline, and User Timing specifications for more details.

WebCrypto API Updates

WebCrypto API support was updated in WebKit to include a standards-compliant SubtleCrypto implementation. This includes DER encoding support for importing and exporting asymmetric keys. Time-consuming cryptography methods now execute asynchronously and can even run in a Web Worker. Support for a number of new cryptographic algorithms adds new functionality, better efficiency, and improved security.

Learn more about the WebCrypto updates in WebKit.

Web Inspector Improvements

Web Inspector sports several useful new features for developers. When the system is set to a right-to-left language, Web Inspector will display a right-to-left user interface layout. It also added a new Settings tab for Web Inspector preferences. In the Network tab, Web Socket connections can now be inspected to show data being communicated across the connection. Finally, in the Elements tab developers can set debugging breakpoints on elements when the subtree or attribute is modified, or when the node is removed.

Intelligent Tracking Prevention

WebKit identifies cross-site tracking on websites you visit with machine learning, and shuts it down. This prevents ads that follow users around the web, but it also helps them have more control and awareness of the sites and services using their data. It’s a feature that protects users and enforces better user privacy practices across the web.

Find our more about Intelligent Tracking Prevention in WebKit.

Video Auto-Play Blocking on macOS

The auto-play blocking policy introduced on iOS last year inspired a new video auto-play blocking feature in Safari on macOS. Simply put, auto-play video with sound will be paused. Video elements without audio tracks, or muted audio can still auto-play. This release also includes support for the play method of the video element to return a promise to easily handle successful and unsuccessful video playback.

Read more about Auto-Play Blocking on macOS with a helpful example on using a Promise to handle auto-play success or prevention.

More Web Platform Features

Support for history.scrollRestoration was added to give developers control over when to maintain scroll position when a user navigates back through browser history.

New CSS Fill and Stroke Module support gives developers more tools to control how text and SVG artwork is painted with new fill- and stroke- properties.

An improved Flexbox implementation brings it up to match current specifications and better layout performance.

CSS Scroll Snapping was updated to add scroll snapping to the main document frame, overflow scrolling containers, and adds support for scroll-snap-proximity.

User Experience Enhancements

There are also several user focused changes to enhance the user-experience that can impact web development. Text rendered on transparent layers match regular text for consistently beautiful text. Decoding large images happens asynchronously to keep animations smooth dropped frames in animations. Scrolling speed is now consistent between the top level document, iframes, and across web views in apps. Lastly, when sharing a link to an article on iOS, the canonical link of the article will be used.


All of these improvements are available to users running iOS 11 and macOS High Sierra, as well as macOS Sierra and OS X El Capitan. 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: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36. 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.

Microsoft's short video about the creation of CSS Grid shows…

Source: W3C's Cascading Style Sheets home page22 September 2017

22 Sep 2017 Microsoft's short video about the creation of CSS Grid shows some of the people who worked on its development.

Minutes Telecon 2017-09-20

Source: CSS WG BlogDael Jackson • 20 September 2017

Full Minutes

Release Notes for Safari Technology Preview 40

Source: Surfin' Safari Jon Davis • 20 September 2017

Safari Technology Preview Release 40 is now available for download for macOS Sierra and betas of 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 221334-221968.


FileSystem Entry API

Fetch API




CSS Grid

Web Inspector




W3C's CSS Basics course is an online, MOOC-based course with…

Source: W3C's Cascading Style Sheets home page20 September 2017

20 Sep 2017 W3C's CSS Basics course is an online, MOOC-based course with professional instructors, developed jointly by W3C and Microsoft. It is part of W3C's ‘Front-End Web Developer’ Professional Certificate and Microsoft's Professional Program Certificate in Front-End Web Development.

Summit 17 – Lo, the Product & Design Track

Source: Web Directions Blog John • 15 September 2017

It’s time for Part Two of the Program Launch for Web Directions Summit 17: the Product & Design Track.

We are returning to our most popular conference format: two days, with two tracks – one focused on Engineering, the other on Product & Design, plus over-arching opening and closing keynotes on each day – a format to suit the whole team.

In this way, we are positioning Summit as a coming together of the different disciplines we practise, and as a peak event on your team’s professional development calendar.

We launched the Engineering Track program on Wednesday, and today we’re going to share with you the full program for the Product & Design Track of Summit 17.

Given this, we’re extending the Super Early Bird period by one week to Friday 22 September. And remember, if you register now to lock in the lowest possible pricing,  you  can pay later – even if that’s after the Early Bird closes.

Read on for an overview of the design track  or  Register now

 (don’t forget the special offer at the end of this email).

Product & Design Track, Day One

 Summit 17 - Chris Messina Lessons from the Death of the PC

Chris Messina

As the PC meets its slow demise, we stand on a precipice overlooking a broad shift in how technology is designed and serves people, with new hardware and embedded technologies that spell new paradigms for user experience, voice experience, and conversation experience.



 Summit 17 - Rob Manson The Landscape of (Extended) Reality

Rob Manson

For a technology that’s been over 55 years in the making, it’s taken a long time for VR to become an “overnight success”. What’s driving this buzz and how does VR relate to Augmented, Mixed, and Extended Reality?



 Summit 17 - Mark Dalgleish DesignOps: The Future of Design, as a Service

Mark Dalgleish

By focusing developers entirely on translating a company’s design language into production-ready code and monitoring its real-world effectiveness, teams can deliver high quality design across large organisations at a pace not previously possible.



 Summit 17 - Ben Birch & Tim Churchward Style Guides, So Hot Right Now

Ben Birch & Tim Churchward

A look at emerging tools and strategies that drive collaboration at the boundary of design and development, point out some pitfalls you might want to avoid, and help you evaluate the right approach for your team and organisation.



 Summit 17 - Nicola Rushton Retros, Research and Opinionated Design

Nicola Rushton

How do you create a culture of open communication, fast feedback and shared ownership? When it comes to normalising the sharing of feelings and helping a team own their process, structure is key.



 Summit 17 - Rona Shaanan Disruptive Design: The Designer as an Agent of Change

Rona Shaanan

You’re a designer, hired by an engineer-driven company that wants to get some of that umpteen per cent rise in productivity from being design driven. You are the agent of change. Now what?


 Summit 17 - Dan Rubin A Life on the Web

Dan Rubin

Dan has lived a life curiously suited to the web, one that has eschewed the traditional linear career structure and more closely resembles the inter-connected, graph-like nature of the web itself. Find out what he’s learned along the way.


So that’s Day One – although there’s actually one more speaker to lock in. Even then, we’re deep-diving into some major key topics already. Let’s see what’s on Day Two.

Product & Design Track, Day Two


 Summit 17 - Genevieve Bell Artificial Intelligence: Making a Human Connection

Genevieve Bell

It’s tempting to keep separate the art and science of the robot and the artificial intelligence that underpins it. However, there are reasons to thread them back together and understand how the story of AI is connected to the history of human culture.



 Summit 17 - Richard Rutter 13 Golden Rules of Typography on the Web

Richard Rutter

Typography is what comes between the author and the reader. If you design websites or use CSS then you are a typographer. The guidelines in this talk combine implement­ation details with typographic theory, to set you on the road to designing beautiful and effective responsive typography.



 Summit 17 - Lauren Lucchese Designing Conversations

Lauren Lucchese

How do we design for conversational UIs, when the content is the experience, and words are the interface? Can we design contextually relevant conversations for bots that evoke emotion and lead to relationships rooted in trust, empathy, and understanding?



 Summit 17 - Simon Wright Designing Better Coffee

Simon Wright

How the idea for, and design of, a new brand of ethical coffee came to be, and how the design was informed by the business and ethical goals, while these, too, were in turn shaped by the design decisions.



 Summit 17 - Sarah Pulis Designing for Extremes

Sarah Pulis

Designing for the “average user” doesn’t mean  you are designing for everyone. It means you’re designing for no-one. There is no average user. But what happens if instead you deliberately design for the extremes, for each individual?



 Summit 17 - Kazjon Grace Personalised Curiosity: Why and how machine learning can keep your users surprised and engaged

Kazjon Grace

How an AI model of curiosity inspired by cognitive science can be used to encourage us to broaden our tastes.



 Summit 17 - Oliver Weidlich On Mobile, Context is King

Oliver Weidlich

Most mobile service designs take no notice of what the device knows, or previous interactions, and assume each ‘channel’ is a new unconnected experience. But in a mobile-connected world, we can design richer and more contextual experiences.


 Summit 17 - Amélie Lamont Don’t Kill Them Softly: Fostering a Culture of Fearless Feedback

Amélie Lamont

Like opinions, harmful or useless feedback can kill your team by demoralisation. Design Anthropology can inform a framework that fosters a fearless feedback culture focusing on creating value, rather than pointing out flaws.


So, like the Engineering Track, we’ve curated a seriously substantial program of Product & Design presentations, each focused on a key topic or issue facing designers now and into the immediate future.

Now, you should be aware that tickets are already selling fast (just as they did in Melbourne for Code, when we sold out before Early Bird even closed). In fact, as you’ll see below, for Summit we’ve already sold out of Gold tickets.


Register during the Primary Early Bird period up to and including Friday 22 September and get $200 off the regular cost.

NB Don’t forget the option of a Three Day Pass to Summit plus our new Culture or Reality conferences – outstanding value!

You’ll find much more info about the speakers and their presentations on the Summit 17 website.

Curating a two-track conference is a bit like putting together two conferences at once, and there’s an inevitable concern to make each track as potent as the other. With this conference, I think we’ve really achieved something special with both tracks.

If your work focuses on Product & Design, I think you’ll find Summit 17 to be just what you need.

See you there.

The post Summit 17 – Lo, the Product & Design Track appeared first on Web Directions.


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