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 monumental developer track at our 2019 Summit

Source: Web Directions Blog John • 10 September 2019

Banners at our 2018 Summit

From the beginning Web Directions has been about developing for the Web. When we began that was HTML and CSS. It was accessibility. And little else.

In the intervening 15 years, the complexity of what we build, and the stack of technologies, practices and concerns developers have to focus on has grown profoundly.`

All along, it’s been our mission to help our audience keep track of the technologies, patterns and practices we use to build for the Web.

At our 2019 Summit, we’ve got over a dozen in-depth sessions to help you and your colleagues keep up to date. It increasingly feels like a full time job doing so, so why not make it ours, while you get on with your job of delivering amazing products and experiences?

Let’s take a look at some of the key areas of focus for front end developers at this year’s Summit.


Fast loading pages are a fundamental requirement for developers–but as the amount of JavaScript, CSS and other assets we deliver ever increases, it’s a challenge that only itself increases.

So performance is always one of the key areas of focus at our developer events

At Summit 19 we have two significant performance focussed presentations.

For any front end developer, these sessions alone, with the potential impact on the performance of your sites and apps, will be worth the price of admission. But there’s much much more in store for you.

Modern Front End Technologies

The fundamental technologies we use to build our sites and apps are always evolving.

We have several sessions focussed on technologies and practices you may not yet be using, or using to their full potential, but which we think you should be.

Software Engineering for the Web

The term engineering is bandied about more and more when it comes to building for the Web. While some take exception to the use of the term, finding it grandiose, or unearned, let’s think about what we are building in 2019. In short, everything. Mission critical, highly performant systems used by billions of people. So, I’ve long advocated we should be taking lessons from the practice of software engineering, going back over half a century and more, and we’ve long incorporated sessions in our conferences that focus on precisely this. Summit ’19 is no exception.

In addition to our already visited performance sessions, here’s a number that fit into the Software Engineering category.

Emerging Web Platform Capabilities

At the heart of the Web platform is the browser, and its capabilities, exposed to developers through the browser’s APIs. As browsers have moved toward an ‘evergreen’, auto-update model, new capabilities of the platform emerge and become widely available more quickly. One of our main areas of focus at Web Directions is to track and bring to you these capabilities. We’ve been very early to expose our audience to Service Workers, AppCache, CSS animation and transform capabilities, and much more besides, and this year is no exception. Here’s what we’ve got lined up for you.

And much more

I think you’ll agree that is an incredibly in-depth, deeply valuable set of presentations. But that’s not all. As the field of design is operationalised, and design systems are increasingly adopted within organisations, this is an area in which many with a developer background are working. In our design track you’ll find sessions on design systems, design ops, and more. Our conferences are setup so you can easily move between tracks, and there’s no need to fear missing out on a session, as they are all video recorded, and available for conference Silver ticket holders. Read all about our design sessions here.

The post The monumental developer track at our 2019 Summit appeared first on Web Directions.

Minutes Telecon 2019-09-04

Source: CSS WG BlogDael Jackson • 05 September 2019

Release Notes for Safari Technology Preview 91

Source: Surfin' Safari 04 September 2019

Safari Technology Preview Release 91 is now available for download for macOS Mojave and the macOS Catalina beta. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 248705-249190.


JavaScript API

JavaScript Performance




Pointer Events


Web Inspector


W3C holds a developer meetup in Fukuoka (Japan) on the eveni…

Source: W3C's Cascading Style Sheets home page04 September 2019

16 Sep 2019 W3C holds a developer meetup in Fukuoka (Japan) on the evening of Monday 16 September 2019. Among the speakers are Ada Rose Cannon, Lin Clark and Alice Boxhall. The program also includes demos of several new W3C technologies. (Free, registration required)

Summit ’19 Session spotlight: Intl we meet again

Source: Web Directions Blog John • 03 September 2019

As we countdown to our annual Summit ’19, our two day conference on all things product leadership, digital and product design, and front-end development, we’re highlighting great sessions you can expect there.

If you like what you see, then why not get along? It’s in Sydney on October 31 and November 1. With a carefully curated program that covers every aspect of delivering modern digital products, Web Directions Summit is the only conference for your entire product team.

Gilmore DavidsonGilmore Davidson
Senior Developer

Intl we meet again

A truly global application will need to support many different languages and cultures. Translating static text is the primary concern, but what about more dynamic content? There are numerous formatting differences around the world for dates, numbers, currencies, and more — even between cultures using the same base language.

Translating this dynamic content on the web has traditionally involved specialised libraries with reams of formatting data, all of which needs to be loaded over the network. But today’s browsers are providing ever more in-built formatting options via the Intl.* APIs. This talk will give you an overview of what they do, and how you can support a wide array of locales without adding Yet Another Library to your stack.

Gilmore Davidson

By day, Gilmore is a web developer, often complaining that most of our tools tend to merely rearrange complexity instead of reducing it. By night, he folds origami and tries to do things that don’t involve computers. When that inevitably fails, he makes ridiculous web projects such as Emoji Censor and yakstack.

He is equally comfortable with HTML and CSS as he is with JS, but is definitively uncomfortable with writing in the third person.

The post Summit ’19 Session spotlight: Intl we meet again appeared first on Web Directions.

Updated Candidate Recommendation: CSS Writing Modes Level 3.

Source: W3C's Cascading Style Sheets home page03 September 2019

3 Sep 2019 Updated Candidate Recommendation: CSS Writing Modes Level 3.

Summit ’19 Session spotlight: Things you can do with CSS that used to need JS

Source: Web Directions Blog John • 01 September 2019

As we countdown to our annual Summit ’19, our two day conference on all things product leadership, digital and product design, and front-end development, we’re highlighting great sessions you can expect there.

If you like what you see, then why not get along? It’s in Sydney on October 31 and November 1. With a carefully curated program that covers every aspect of delivering modern digital products, Web Directions Summit is the only conference for your entire product team.

Rhiana HeathRhiana Heath
Front end Ruby on Rails Developer

Things you can do with CSS that used to need JS

CSS has come a long way in recent years, bringing style and interaction to the web. For example just look at all the cool things you can do now with CSS animations!

However there are some common components that people are still reaching to JS to solve when they can achieve the same thing with CSS. Things like: Modals, tooltips, mobile menus, accordions and carousels.

What if I told you that each of these can now be done with CSS alone? That way the functionality renders at the same time as the design and makes it usable by more people.

Rhiana Heath

Rhiana is a front end ruby on rails developer at reinteractive. Where she works to brings beautiful designs to life for clients with an accessible and intuitive UX.

When Rhiana isn’t working you can often see her at a meetup, often on the stage sharing her knowledge. Otherwise down at the local beach, park or zoo with her husband and kids.

The post Summit ’19 Session spotlight: Things you can do with CSS that used to need JS appeared first on Web Directions.

Minutes Telecon 2019-08-28

Source: CSS WG BlogDael Jackson • 28 August 2019

Design at Web Directions Summit ’19

Source: Web Directions Blog John • 28 August 2019

Originally, the design track at Web Directions focussed on web design, with a fairly large code component, particularly CSS. But it’s changed profoundly since then.

Over the last 15 years it’s evolved, just as has design in our industry–initially with an increased focus on UX and Interaction Design. And more recently still, as the industry has seen design operationalised, with the emergence of design systems and designOps, alongside the ever-increasing place of research in design, and the rise of product design, our design track has continued to evolve to reflect these developments.

This year at Web Directions Summit it’s no different, with a design track encompassing over a dozen presentations across the two days, as well as 3 of our 4 keynotes having a strong design flavour.

No other design focussed event in Australia has the breadth and depth of our Design track–so, let’s dive a little more deeply into design at Summit ’19.


Summit opens with Gretchen Anderson, Designing smart things: Balancing ethics and choice. ‘Intelligence’ is increasingly embedded in so much of what we design, and so much of our lives. But this comes with significant new responsibilities and challenges that we’re increasingly waking up to. Gretchen opens the conference, addressing perhaps the most significant design challenge of our time.

We’ve always looked for design inspiration from far beyond the web at Web Directions, and this year it is an honour to have Nina Walia, Experience Design Lead at Google Hardware, who has extensive experience at the intersection of fashion and interaction design. At Summit she’ll be presenting Responsive (clothing) Design, and what she’s learned from designing interactive garments.

And to close the conference, Aaron Z. Lewis, a digital product designer who worked on the Hilary ’16 Campaign, at Uber and elsewhere, and now researches and writes about memetic warfare, preventing online radicalization, and cultivating compassionate communities (IRL and URL) will share his thoughts on the state of the Web in 2019, and what we as designers can do to improve it in Metaphors we believe by: the pantheon of 2019.

The Design Track

A central aspect of all the programs across all our events is curation–we work extremely hard to bring together an array of speakers and topics of relevance and value to our audience. Some speakers are invited experts, others are selected from our call for presentations, but all bring, and share deep experience and thinking about their area of expertise. Rather than a random assortment of topics, we strive to bring together related presentations to explore more deeply key points of focus for our audiences right now. Let’s take a deeper look.

The Operationalisation of Design–Design Systems, Design Culture, and more

As design teams grow, and the value of design is appreciated by more and more organisations, and the practice of design matures, we’re seeing a recognition that the replicability of design is a central concern of design teams. Our design track has for a number of years paid attention to this aspect of design, and 2019 is no exception.

We have an entire session dedicated to Design Systems, with Alexandra Skougarevskaya, Design Manager for Atlassian’s design system, and Sarah Federman, now at Atlassian, who’s worked extensively on massive design systems at the likes of Adobe, who’ll focus on what comes next once you’ve established a design system. How to keep it alive, relevant, widely adopted and funded.

To close this session, Alex and Sarah will be joined by Inayaili de León, a senior designer at Microsoft, on the Azure Design Systems team, for an extended QA session on design systems.

But scaling design is not simply about design systems. Inayaili de León will consider Humans vs Design at Scale, and how you can make sure you are looking after your humans in the process of organizing, automating, and systematizing our teams.

Alongside Yaili, Aaron Tan will look at how investing in design culture will help an organisation achieve greatness.

We’ll also look at how design research is being operationalised, with Benson Low and Brigette Metzler taking a look at the emerging field of ResearchOps, and the value it can bring to your work and organisation.

Design–Much more than just systems and scale

Of course design is much more than just operations and scale. As always bring you ideas, patterns and practices to improve your design practice.

Security and Trust

From the financial sector, to the largest social media platforms, across so many industries and sectors, trust has taken a hammering. Katja Forbes will explores how we can design for trust in the things that we can’t see.

Closely related to trust is security. Something we see breached every day. We typically think of security as a technical problem with technical solutions, but as with so much else, it is in any ways a design problem. Serena Chan will consider how good user experience design is necessary for good security. We can craft paths of least resistance that match paths of most security. We can educate our users on what is good practice and what is security theater. We can build secure flows that are usable, not obstructive or annoying.

And much more more

There’s still much more where this came from as well.

Kevin Wilkins brings us ‘Rock Star Research’. Usually at Web Directions we avoid terms like “Rock Star” and “Ninja”, but Kevin has earned her moniker, as the winner of several ARIA awards including for the cover design of Powder Finger’s iconic Odyssey Number 5 album. Kevin will look at how you can challenge predictable research processes to unearth invaluable insights in unusual situations.

Industry legend Shane Morris helps us bring personas to life, with Story-based design. Design stories, or scenarios, are ‘day in the life’ descriptions of how your new product will fit into the lives of your users and customers. They help crystallise and communicate your product vision and capture key design constraints in ways that personas can’t.

And there’s a whole session of presentations focussing on emerging practices and opportunities. Larissa Azevedo brings Design, Product and Data Scientist together to design intelligent products. Amy Cleary explores the Principles of Conversation-led UI. Sheree Hannah delves into the often rushed or neglected step of utilising user insights alongside creative thinking, while Oliver Maruda will look at how Qantas redesigned their call centre, having real conversations with their customers utilizing AI while handing over to humans when appropriate.

If you work in the design of digital products and services, I hope you’ll agree that our design track will be of unparalleled value to you. And also make sure you take a look at the sessions in our product track, as many of these will be of significant value for product designers. Worried you’ll miss out on a session as there’s just so much great content? No need, videos every session are available to Silver ticket holders–you’ll get access to nearly 4 dozen sessions in total, as well as hundreds of videos from past design, product and engineering conferences.

The post Design at Web Directions Summit ’19 appeared first on Web Directions.

W3C Developer meetup in Fukuoka, 16 September

Source: W3C Blog Marie-Claire Forgue • 27 August 2019

W3C Developer meetup in Fukuoka, 16 September 2019 Taking advantage of the presence of world renowned experts in Fukuoka, Japan, W3C invites Japanese Web developers and designers to attend a  W3C developer meetup, on Monday 16 September (from 6:00pm to 8:30pm). This event is free of charge but registration is mandatory! (登録してください!). [Important: TPAC participants are invited to register to the devmeetup via the TPAC registration form.]

Why in Fukuoka? The W3C international community is gathering in Kyushu island for a week to attend the annual W3C TPAC (Technical Plenary /  Advisory Committee) event. Over 550 people are meeting to coordinate the development and adoption of Web standards in W3C’s working groups, community groups,  the Advisory Board, the Technical Architecture Group (TAG), etc.

The developer meetup is thus a great opportunity for developers and standardistas alike to mingle and converse on the current status and the future the Web platform, aka to keep their “Eyes wide open on the Web“!

A great line-up of speakers

In between demonstrations shown by the devmeetup sponsors, we are going to find out what is making the Web an exciting development platform by listening to these five great speakers experts in Web accessibility, WebXR, Web Assembly, CSS and 3D Graphics on the Web, respectively:

Recognizing the W3C Japanese translators community

Because Web standards and guidelines should be available in any language to help developers and designers to make a better Web the world over, W3C has been accompanying the community interested in translated its resources for more than 15 years.

On the 300+ current W3C Recommendations, nearly half have been translated in at least one language. The Japanese translators community –the most active to date–, has translated more than a quarter of these 300 Recommendations!

We are proud to recognize the W3C Japanese translators community by inviting some of its representatives at the devmeetup (see the completed translations – W3C 文書の日本語翻訳集).

Thanks to our sponsors!

This event would not have been possible without the support from this 2019 edition sponsors: NTT Communications, Microsoft, GMO Pebabo, Mozilla, Sauce Labs, Sticker Mule, Igalia, Yubico, Webcastor and WithYou. Many thanks to them! どうもありがとう!

Thank you card for the W3C devmeetup 2019 sponsors: Mozilla, Sauce Labs, Microsoft, GMO Pepabo, NTT Communications, Igalia, Yubico, WithYou, Webcastor and StickerMule Follow us on our @w3cdevs twitter account where to find teasers about speakers and demos between now and the #w3cdevs2019 meetup.

みなさん ようこそ ! W3Cは福岡をはじめ全国各地から地元のWebデザイナーやアプリケーション開発者を招き、W3Cコミュニティとのデモンストレーション、プレゼンテーション、そしてディスカッションの会「W3C Developer Meetup」を開催します。

ミートアップは無料でどなたでもご参加いただけます。 こちらから登録してください。開場は午後6時、開演は午後6時00分に開始し午後8時30分に終了します。みなさんのお越しをお待ちしています !


How Web Content Can Affect Power Usage

Source: Surfin' Safari 26 August 2019

@media (prefers-color-scheme:dark) { figure picture img { filter: none; } }

Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.

What Draws Power?

Most of the energy on mobile devices is consumed by a few major components:

Screen power consumption is relatively constant and mostly under the user’s control (via screen on-time and brightness), but the other components, the CPU, GPU and networking hardware have high dynamic range when it comes to power consumption.

The system adapts the CPU and GPU performance based on the current tasks being processed, including, of course, rendering web pages that the user is interacting with in their web browser and other apps using web content. This is done through turning some components on or off, and by changing their clock frequency. In broad terms, the more performance that is required from the chips, the lower their power-efficiency. The hardware can ramp up to high performance very quickly (but at a large power cost), then rapidly go back to a more efficient low-power state.

General Principles for Good Power Usage

To maximize battery life, you therefore want to reduce the amount of time spent in high-power states, and let the hardware go back to idle as much as possible.

For web developers, there are three states of interaction to think about:

Efficient user interaction

Obviously it’s good to expend power at times when the user is interacting with the page. You want the page to load fast and respond quickly to touch. In many cases, the same optimizations that reduce time to first paint and time to user interactive will also reduce power usage. However, be cautious about continuing to load resources and to run script after the initial page load. The goal should be to get back to idle as fast as possible. In general, the less JavaScript that runs, the more power-efficient the page will be, because script is work on top of what the browser has already done to layout and paint the page.

Once the page has loaded, user interactions like scrolling and tapping will also ramp up the hardware power (mainly the CPU and GPU), which again makes sense, but make sure to go back to idle as soon as the user stops interacting. Also, try to stay on the browser “fast paths” — for example, normal page scrolling will be much more power-efficient than custom scrolling implemented in JavaScript.

Drive idle power usage towards zero

When the user is not interacting with the page, try to make the page use as little power as possible. For example:

A page that is doing work when it should be idle will also be less responsive to user interaction, so minimizing background activity also improves responsiveness as well as battery life.

Zero CPU usage while in the background

There are various scenarios where a page becomes inactive (not the user’s primary focus), for instance:

When a page becomes inactive, WebKit automatically takes steps to save power:

In addition, WebKit takes advantage of features provided by the operating system to maximize efficiency:

However, pages can trigger CPU wake-ups via timers (setTimeout and setInterval), messages, network events, etc. You should avoid these when in the background as much as possible. There are two APIs that are useful for this:

The easiest way to find problems is Web Inspector’s Timelines. The recording should not show any event happening while the page is in the background.

Hunting Power Inefficiencies

Now that we know the main causes of power use by web pages and have given some general rules about creating power-efficient content, let’s talk about how to identify and fix issues that cause excessive power drain.


As mentioned above, modern CPUs can ramp power use from very low, when the device is idle, to very high to meet the demands of user interaction and other tasks. Because of this, the CPU is a leading cause of battery life variance. CPU usage during page loading is a combination of work the browser engine does to load, parse and render resources, and in executing JavaScript. On many modern web pages, time spent executing JavaScript far exceeds the time spent by the browser in the rest of the loading process, so minimizing JavaScript execution time will have the biggest benefits for power.

The best way to measure CPU usage is with Web Inspector. As we showed in a previous post, the timeline now shows the CPU activity for any selected time range:

To use the CPU efficiently, WebKit distributes work over multiple cores when possible (and pages using Workers will also be able to make use of multiple cores). Web Inspector provides a breakdown of the threads running concurrently with the page’s main thread. For example, the following screenshot shows the threads while scrolling a page with complex rendering and video playback:

When looking for things to optimize, focus on the main thread, since that’s where your JavaScript is running (unless you’re using Workers), and use the “JavaScript and Events” timeline to understand what’s triggering your script. Perhaps you’re doing too much work in response to user or scroll events, or triggering updates of hidden elements from requestAnimationFrame. Be cognizant of work done by JavaScript libraries and third party scripts that you use on your page. To dig deeper, you can use Web Inspector’s JavaScript profiler to see where time is being spent.

Activity in “WebKit Threads” is mostly triggered by work related to JavaScript: JIT compilation and garbage collection, so reducing the amount of script that runs, and reducing the churn of JavaScript objects should lower this.

Various other system frameworks invoked by WebKit make use of threads, so “Other threads” include work done by those; the largest contributor to “Other thread” activity is painting, which we’ll talk about next.


Main thread CPU usage can also be triggered by lots of layout and painting; these are usually triggered by script, but a CSS animation of a property other than transform, opacity and filter can also cause them. Looking at the “Layout and Rendering” timeline will help you understand what’s causing activity.

If the “Layout and Rendering” timeline shows painting but you can’t figure out what’s changing, turn on Paint Flashing:

This will cause those paints to be briefly highlighted with a red overlay; you might have to scroll the page to see them. Be aware that WebKit keeps some “overdraw” tiles to allow for smooth scrolling, so paints that are not visible in the viewport can still be doing work to keep offscreen tiles up-to-date. If a paint shows in the timeline, it’s doing actual work.

In addition to causing power usage by the CPU, painting usually also triggers GPU work. WebKit on macOS and iOS uses the GPU for painting, and so triggering painting can cause significant increases in power. The additional CPU usage will often show under “Other threads” in the CPU Usage timeline.

The GPU is also used for <canvas> rendering, both 2D canvas and WebGL/WebGPU. To minimize drawing, don’t call into the <canvas> APIs if the canvas content isn’t changing, and try to optimize your canvas drawing commands.

Many Mac laptops have two GPUs, an “integrated” GPU which is on the same die as the CPU, and is less powerful but more power-efficient, and a more powerful, but more power-hungry “discrete” GPU. WebKit will default to using the integrated GPU by default; you can request the discrete GPU using the powerPreference context creation parameter, but only do this if you can justify the power cost.


Wireless networking can affect battery life in unexpected ways. Phones are the most affected due to their combination of powerful radios (the WiFi and cellular network chips) with a smaller battery. Unfortunately, measuring the power impact of networking is not easy outside of a lab, but can be reduced by following some simple rules.

The most direct way to reduce networking power usage is to maximize the use of the browser’s cache. All of the best practices for minimizing page load time also benefit the battery by reducing how long the radios need to be powered on.

Another important aspect is to group network requests together temporally. Any time a new request comes, the operating system needs to power on the radio, connect to the base station or cell tower, and transmit the bytes. After transmitting the packets, the radio remains powered for a small amount of time in case more packets are transmitted.

If a page transmits small amounts of data infrequently, the overhead can become larger than the energy required to transmit the data:

Networking Power Overhead of transmitting 2 packets with a delay between them

Such issues can be discovered from Web Inspector in the Network Requests Timeline. For example, the following screenshot shows four separate requests (probably analytics) being sent over several seconds:

Sending all the requests at the same time would improve network power efficiency.


Webpages can be good citizens of battery life.

It’s important to measure the battery impact in Web Inspector and drive those costs down. Doing so improves the user experience and battery life.

The most direct way to improve battery life is to minimize CPU usage. The new Web Inspector provides a tool to monitor that over time.

To achieve great battery life the goals are:

If you have any questions, feel free to reach me, Joseph Pecoraro, Devin Rousso, and of course Jon Davis.

Minutes Telecon 2019-08-21

Source: CSS WG Blog Dael Jackson • 21 August 2019

Release Notes for Safari Technology Preview 90

Source: Surfin' Safari 21 August 2019

Safari Technology Preview Release 90 is now available for download for macOS Mojave and the macOS Catalina beta. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 248024-248705.





Web Inspector

Bug Fixes

Updated WD of CSS Lists Level 3

Source: CSS WG Blog fantasai • 17 August 2019

The CSS Working Group has published an updated Working Draft of CSS Lists Level 3. This module contains CSS features related to list markers and counters: styling them, positioning them, and manipulating their value.

This update contains a major clean-up of the “Automatic Numbering with Counters” section, including fixing various sync errors against CSS2.1. It should now be usable as a reference for implementation. Remaining work includes more precise definitions for marker layout and better integration with HTML list numbering, particularly reversed lists. See notes and open issues.

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-lists-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 Lists Level 3.

Source: W3C's Cascading Style Sheets home page17 August 2019

17 Aug 2019 Updated Working Draft: CSS Lists Level 3.

Changing Page Settings on iOS Using Web Inspector

Source: Surfin' Safari 15 August 2019

figure picture img { width: 100%; } @media (prefers-color-scheme:dark) { figure picture img { filter: none; } }

If you’ve ever used Web Inspector before, chances are you’ve used (or are at least familiar with) the Develop menu. It holds action items and toggles for various settings of the browser, like whether local files (e.g. URLs beginning with file://) can be loaded or whether CSS is applied to each page.

All of these items apply to the entire browser, meaning that if you Disable Styles on one page, every other page will be affected.

Additionally, these items have no effect when using Web Inspector to inspect a remote target, like an iOS device or simulator. Checking Disable Styles in the Develop menu will not have any affect on the remote target.

In order to support this development workflow, Web Inspector has added a device settings menu that allows these settings to be toggled per-page when being remotely inspected.

Clicking on the device settings menu icon will show a popover with many of the same settings as the Develop menu.

Since these settings apply per-page and only on the remote target, the corresponding actions in the Develop menu are disabled, as they have no effect on a remote target:

Along these lines, the device settings menu is only shown when using Web Inspector to inspect a remote target.

Device settings are not preserved between Web Inspector sessions. Closing Web Inspector (or disconnecting the inspected device) will cause all previously set device settings for the inspected page to reset.

Device settings are preserved across navigations, however, so long as Web Inspector stays open/connected.

User Agent

The first item in the device settings menu is the User Agent editor. It contains a list of common user agents, as well as an option to input a custom user agent (Other…).

Each time the User Agent is modified, the inspected page will automatically reload so that the new User Agent is applied.

Disable Toggles

Each of these toggles, when checked, disables a specific piece of functionality in the inspected page.

WebRTC Toggles

These toggles focus specifically on functionality related to WebRTC.


You can try out changing device settings with iOS 12.2 or later. Let us know how it works for you. Send feedback on Twitter (@webkit, @dcrousso) or by filing a bug.

Minutes Telecon 2019-08-14

Source: CSS WG BlogDael Jackson • 14 August 2019

Updated Candidate Recommendation: CSS Text Decoration Level …

Source: W3C's Cascading Style Sheets home page13 August 2019

13 Aug 2019 Updated Candidate Recommendation: CSS Text Decoration Level 3.

Minutes Telecon 2019-08-07

Source: CSS WG BlogDael Jackson • 08 August 2019

Updated Working Draft: CSS Generated Content Level 3.

Source: W3C's Cascading Style Sheets home page02 August 2019

2 Aug 2019 Updated Working Draft: CSS Generated Content Level 3.

Minutes Telecon 2019-07-31

Source: CSS WG BlogDael Jackson • 31 July 2019

W3C at View Source conference

Source: W3C BlogMarie-Claire Forgue • 30 July 2019

View Source Amsterdam 2019If you are into the open Web and want to catch up on current and future exciting Web developments, then register to the View Source conference which W3C is helping organize in Amsterdam, on September 30 and October 1st!

This year, the conference highlights how browser vendors and others, create and support Web standards. In addition of two full days of talks, this 5th edition gives more space to collaboration and sharing via breakout sessions and engagement programs, called “Conversation Corners”.

W3C is staffing one of these corners, “Meet the W3C“, on Tuesday 1st October, at 3pm.  The W3C developers team, Dominique Hazaël-Massieux and Marie-Claire Forgue, along with Yoav Weiss (co-chair of the Web Platform Incubator Community Group) and W3C Staff Hidde de Vries, are ready to answer any questions you may have on how Web standards are built and how you too can get involved.

View Source Amsterdam is produced by Mozilla and was formed in collaboration with Microsoft, Google, Samsung, and W3C through the MDN Product Advisory Board. W3C supports and takes part to ensure exposure of ongoing standardization efforts to which developers can contribute. Get your ticket now!

A whole week of Web!

Looking to celebrate the whole week of Web? On Tuesday October 1st, there’s a post-View Source & pre-Fronteers social event. Hosted by the folks at Poki, who are on a mission to make Web games awesome again. Space is limited though, so RSVP here.

On Wednesday 2 October, the Web activities continue with a Hack on MDN event, a day with a lot of hacking, chatting, food, and fun around MDN, the collaborative documentation platform for Web standards. The MDN team is looking for help and contributions in many areas, such as fleshing out MDN’s data about browser compatibility, and documenting Web standards, including HTML, CSS, JavaScript, and Web APIs.

Finally, extend your week’s experience with the Fronteers Conference, 3-4 October, in Amsterdam too! Organized by Fronteers, the Dutch professional association for front-end developers and W3C member, this event is one of Europe’s premiere conferences on front-end Web development. Check out their awesome program and the spectacular line-up of 19 speakers!

Updated Candidate Recommendation: CSS Writing Modes Level 3.…

Source: W3C's Cascading Style Sheets home page30 July 2019

30 Jul 2019 Updated Candidate Recommendation: CSS Writing Modes Level 3. Updated Candidate Recommendation: CSS Writing Modes Level 4.

Updated Working Draft: CSS Table Level 3.

Source: W3C's Cascading Style Sheets home page27 July 2019

27 Jul 2019 Updated Working Draft: CSS Table Level 3.

Minutes Telecon 2019-07-17

Source: CSS WG BlogDael Jackson • 17 July 2019

The MDN developer and designer survey wants your input!

Source: W3C's Cascading Style Sheets home page17 July 2019

17 Jul 2019 The MDN developer and designer survey wants your input!

Updated Candidate Recommendation: CSS Syntax Level 3.

Source: W3C's Cascading Style Sheets home page16 July 2019

16 Jul 2019 Updated Candidate Recommendation: CSS Syntax Level 3.

Updated Candidate Recommendation: CSS Display Level 3.

Source: W3C's Cascading Style Sheets home page11 July 2019

11 Jul 2019 Updated Candidate Recommendation: CSS Display Level 3.

Minutes Telecon 2019-07-10

Source: CSS WG BlogDael Jackson • 10 July 2019

Full Meeting Minutes

Updated Working Draft: CSS Generated Content Level 3.

Source: W3C's Cascading Style Sheets home page10 July 2019

10 Jul 2019 Updated Working Draft: CSS Generated Content Level 3.


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