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

• Release Notes for Safari Technology Preview 92 • 18 September 2019
• The monumental developer track at our 2019 Summit • 10 September 2019
• Minutes Telecon 2019-09-04 • 05 September 2019
• Release Notes for Safari Technology Preview 91 • 04 September 2019
• W3C holds a developer meetup in Fukuoka (Japan) on the eveni… • 04 September 2019
• Summit ’19 Session spotlight: Intl we meet again • 03 September 2019
• Updated Candidate Recommendation: CSS Writing Modes Level 3. • 03 September 2019
• Summit ’19 Session spotlight: Things you can do with CSS that used to need JS • 01 September 2019
• Minutes Telecon 2019-08-28 • 28 August 2019
• Design at Web Directions Summit ’19 • 28 August 2019
• W3C Developer meetup in Fukuoka, 16 September • 27 August 2019
• How Web Content Can Affect Power Usage • 26 August 2019
• Minutes Telecon 2019-08-21 • 21 August 2019
• Release Notes for Safari Technology Preview 90 • 21 August 2019
• Updated WD of CSS Lists Level 3 • 17 August 2019
• Updated Working Draft: CSS Lists Level 3. • 17 August 2019
• Changing Page Settings on iOS Using Web Inspector • 15 August 2019
• Minutes Telecon 2019-08-14 • 14 August 2019
• Updated Candidate Recommendation: CSS Text Decoration Level … • 13 August 2019
• Minutes Telecon 2019-08-07 • 08 August 2019
• Updated Working Draft: CSS Generated Content Level 3. • 02 August 2019
• Minutes Telecon 2019-07-31 • 31 July 2019
• W3C at View Source conference • 30 July 2019
• Updated Candidate Recommendation: CSS Writing Modes Level 3.… • 30 July 2019
• Updated Working Draft: CSS Table Level 3. • 27 July 2019
• Minutes Telecon 2019-07-17 • 17 July 2019
• The MDN developer and designer survey wants your input! • 17 July 2019
• Updated Candidate Recommendation: CSS Syntax Level 3. • 16 July 2019
• Updated Candidate Recommendation: CSS Display Level 3. • 11 July 2019
• Minutes Telecon 2019-07-10 • 10 July 2019
• [List of feeds]

Release Notes for Safari Technology Preview 92

Safari Technology Preview Release 92 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 249190-249750.

JavaScript

• Fixed Math.round() which produced a wrong result for value prior to 0.5 (r249597)
• Made Promise implementation faster (r249509)

WebGPU

• Fixed matrices to have correct alignment (r249214)
• Implemented GPUUncapturedErrorEvent (r249539)
• Implemented SampleLevel(), SampleBias(), and SampleGrad() in WSL (r249453)
• Updated several interface and enum names to match specifications (r249601)

SVG

• Fixed fragment-only URL url(#fragment) to be resolved against the current document regardless of the HTML <base> element (r249416)
• Fixed SMIL animations of SVG <view> element (r249730)
• Made a change to get the value of the href attribute or the xlink:href attribute of SVG animation elements to get the animation target element (r249216)

Images

• Changed to respect EXIF orientations by default when images are rendered (r249364)

Web API

• Fixed copying and pasting two paragraphs with a newline between them resulting in a stray paragraph with newline inside (r249307)
• Fixed cancelled transitions on Google image search leaving content with opacity: 0 sometimes (r249511)
• Fixed document.fonts.ready resolving too quickly (r249295)
• Fixed responseXML for XMLHttpRequest in some cases returning null if a valid Content-Type ends with +xml (r249361)
• Made tabIndex IDL attribute reflect its content attribute (r249237)
• Updated HTMLImageElement::decode() to return a resolved promise for decoding non-bitmap images (r249367)
• Updated geolocation.watchPosition() and geolocation.getCurrentPosition() to return PERMISSION_DENIED when the context is not secure (r249207)

Service Workers

• Added missing origin check for Service-Worker-Allowed header (r249733)
• Added support for postMessage buffering between the Service Worker and window (r249629)
• Dropped support for registration resurrection (r249627)

WebRTC

• Added support to RTCDataChannel.send(Blob) (r249710)
• Fixed audio sometimes failing to be captured in WebRTC (r249715)

IndexedDB

• Changed to cache prepared SQLiteStatement in SQLiteIDBCursor to improve performance (r249729)
• Changed to use the SQL COUNT statement for count operations to improve performance (r249583)
• Updated the size of the database when the database operation is completed (r249333)

Web Inspector

• Network
  • Provided a way to view XML, HTML, and SVG resource responses as a DOM tree (r249451)
• Debugger
  • Added support for async event listener stack traces in Workers (r249315)
  • Added support for event breakpoints in Worker contexts (r249305)
  • Allow script resources to be blackboxed, which will prevent the debugger from pausing in that script (r249450)
• Resources
  • Provide a way to override the content of resources loaded over the network with local content in Web Inspector (r249504)
  • Fixed issue where links to CSS resources didn’t map to the right line after pretty printing if the line is after a multiline comment (r249596)
  • Fixed issue where the closing } of nested @media weren’t indented (r249607)
• Dark Mode
  • Fixed jarring white box-shadows in the Overview Timeline View in dark mode (r249655)
• Miscellaneous
  • Fixed import file pickers sometimes not importing (r249248)

Accessibility

• Fixed children cache to be re-computed if the tab index is removed (r249534)

Security

• Disabled TLS 1.0 and TLS 1.1 in WebSockets (r249684)

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

Performance

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.

• Patrick Meenan, developer of the widely used WebPageTest, will get us up to speed with the state of Web performance in 2019. Patrick will explore different ways to measure the “user experience”, what the newer metrics like Time To Interactive mean and how best to detect and analyze performance issues.
• Peter Wilson will revisit his 2016 presentation on HTTP/2, delivered when this new standard was still emerging into widespread use.
• 3 years later, and “H2” is now widely adopted. But did the reality live up to the promise? Peter will dig in to the data to find out if it’s the technology or developers filling the space provided. Now that HTTP2 is an established technology, learn how to take advantage of the features it provides within the confines of reality.

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.

• Sara Soueidan is one of our industry’s most influential minds and voices, and it’s her breadth of understanding, of both technologies and their application that sets her apart, and makes her such a wonderful speaker.Sara will deliver a highly practical session, aimed at ensuring that the front-end foundations we build are as inclusive of and accessible to as many users as possible. It’ll be chock-full of tips for creating more accessible front-end foundations. If writing HTML, CSS, SVG and JavaScript is part of your job, then this talk is for you.
• Just as accessibility helps ensure the widest possible audience for our content, so too does internationalising our sites and apps. Long a complex, and frustrating engineering task, today’s browsers are providing ever more in-built internationalisation options via the Intl.* APIs. Gilmore Davidson will give us an overview of what they do, and how you can support a wide array of locales without adding Yet Another Library to your stack.
• While it feels at times like JavaScript is replacing HTML, and CSS, any performance expert will tell you that one key performance technique is to avoid JavaScript where you can. And one place we can really improve our performance is utilising the ever more sophisticated capabilities of CSS. In this session, Rhiana Heath will consider many 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. Make your sites accessible to more people, and faster to boot, after Rhiana’s session.

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.

• We largely think of APIs as something front end developers consume from the back end. In a component based world, we all consume and increasingly publish APIs. But what makes for an intuitive API? In this session, Slack’s head of developer relations, Bear Douglas, through case studies (incl. Facebook’s Open Graph, Slack’s workspace apps project) will examine the tradeoffs, consequences, and some thoughts about how to get your developer community to come along with you.
• Keeping with the API theme, we’ve had several GraphQL focussed sessions at recent conferences. For Summit ’19 Ben Teese will step back and look at how GraphQL fits into the bigger picture. He’ll start by examining how the evolution of web development has led to a growing schism between ‘back-end’ and ‘front-end’ development, and how REST can sometimes exacerbate this problem.Next, he’ll argue why, for the sake of our users, web-developers shouldn’t just consider themselves to be ‘front-end’ developers, and instead need to take ownership of at least part of their backend too. Then Ben will show how, by accepting this, web developers can see GraphQL as not so much just a technology, but as a tool that empowers them to take back control of their destinies.
• To round out our Software Engineering focussed sessions, Steve Morris will focus on SOLID, an approach to object oriented programming that emphasises 5 principles for building more understandable, flexible and maintainable apps, and how we can apply these principles to developing for the web.

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.

• Mandy Kerr will show us how there are many great Sensor & Browser APIs that you can take advantage of including Light Sensors, Gyroscopes and Audio and because these APIs are all available in more devices than you would think they are more accessible than ever. We’ll explore the the possibilities, tools and resources so you can get started creating engaging and creative effects, visualisations and experiences in your projects tomorrow.
• Over the years, we’ve made it easier for users to do the right thing by security, from email-based verification to one-time passwords via email and security tokens. But nearly all these solutions require you to have your mobile phone, or security device with you. And if you’re overseas, you might have additional problems. In this session, Ben Dechrai will look at mechanisms for biometric authentication with web applications. All utilising the device capabilities of the browser. 
• Machine learning has really come of age thanks to ever increasing compute power and access to troves of data, what if we could respect the privacy of the users and run it on their device without sending data to a central server. Introducing tensorflow.js a JavaScript implementation of the very popular ML library from Google, you can run it in inference mode or even train a model if you’d like. Yep, front end developers don’t have to miss out on the AI party afterall! Hear how with Ryan Seddon.
• And to wrap it all up, Charlie Gerard will bring all these threads together and build a simple gesture recognition system using JavaScript, Arduino and Machine learning.

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

• fantasai introduced the proposed process changes that will be presented formally at TPAC. There is a presentation, mailing list, and GitHub repo for this. The goal of this new process is to make it easier to keep CR and REC level specs up to date by reducing the steps needed for Director approval and changing patent review triggers.
• Resolved: Add navigation controls media query to MQ 5 (Issue #4187)
• The group was leaning against issue #4162 (Expose User Preference Media Queries as HTTP Client Hint or HTTP Header) because the general feeling is that is would not have a significant benefit and may be another vector for fingerprinting. These concerns will be added to GitHub and discussion will continue there.
• The main part of issue #4123 (It should be detectable whether an element ellipsized the text) can be closed, though there is a sub-issue on some APIs not reporting subpixels which will need to be addressed still.
• Resolved: No change re computed value of list-style-type (Issue #4210: Compute non-existent `list-style-type` counter-style to `decimal`?)
• Resolved: Do not add table-cell/table-caption as display-outside values at this time (Issue #3940: Make `table-caption` and `table-cell` display-outside values)
• Anyone unable to attend a call next week due to travel to Japan should say so early on so a determination can be made if there are enough people to get quorum next week or if the call should be canceled.

• Full Meeting Minutes

Release Notes for Safari Technology Preview 91

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.

Security

• Disabled legacy TLS 1.0 and TLS 1.1 (r249019)

JavaScript API

• Added a public API for unhandled promise rejections (r249058)
• Added support for hashbang in ESNext (r248826)
• Implemented optional chaining in ESNext (r248829)
• Implemented StaticRange constructor (r249079)
• Fixed Date.prototype.toJSON to not throw an exception if toISOString returns an object (r248876)
• Fixed more missing exception checks in String.prototype (r248716)
• Fixed a bad error message when for-await-of is used in a non-async function (r248711)
• Fixed ProxyObject to not allow access to its target’s private properties (r248796)
• Updated the Promise constructor to check argument before `Construct?“ (r248787)
• Updated Promise.prototype.finally to accept non-promise objects (r248793)

JavaScript Performance

• Changed to avoid looking up the join function each time Array.prototype.toString is called (r248906)
• Ensured x?.y ?? z is fast (r249117)

Media

• Fixed firing webkitpresentationmodechanged twice when exiting picture-in-picture (r249141)
• Updated to stop MediaDevices timer when stopping MediaDevices (r248853)
• Fixed removing fullscreen element in a requestAnimationFrame() callback after requestFullscreen() leaving fullscreen in an inconsistent state (r249147)
• Disabled devices should not be taken into account when searching for a capture device (r249154)

Web API

• Started to expose Geolocation interfaces (GeolocationPosition, GeolocationPositionError, and GeolocationCoordinates) on the global Window object (r249066)
• Fixed Emoji with variation selectors to be rendered in emoji style, not text style (r248815)
• Changed SVG elements to become focusable when focus and key event listeners are added (r248983)
• Changed the default tab index of output and fieldset to be -1 (r248914)

Rendering

• Fixed drawing an animated image to a canvas via drawImage to draw the first frame (r249162)

Pointer Events

• Fixed removing the capture element preventing future pointer events from being dispatched on macOS (r248855)

WebDriver

• Fixed mouse buttons to be correctly printed in SimulatedInputDispatcher logging (r248715)

Web Inspector

• Elements
  • Fixed issue where “Copy Rule” menu item copied commented out properties incorrectly (r249089)
  • Changed to automatically enable the event listener when setting a breakpoint on it in the Node details sidebar (r248765)
  • Changed the DOM tree to always be LTR, even in RTL mode (r248991)
• Network
  • Changed the Headers pane to always be LTR, even in RTL mode (r248889)
• Resources
  • Added syntax highlighting for more CSS media queries (r248810)
  • Added syntax highlighting for JavaScript BigInt (r248898, r248908)
  • Added pretty printing support for more modern JavaScript language features (r248760, r248785, r248922, r248923)
  • Fixed a CodeMirror issue where tabs were still used even when the “Prefer indent using” setting is set to “Spaces” (r248739)
• Debugger
  • Added a global breakpoint for pausing in the next microtask (r248894)
  • Fixed an issue where the Assertion Failures breakpoint didn’t work when inspecting a JSContext (r248891)
• Console
  • Implemented queryHolders Command Line API function (r248925)
  • Updated console.dir to start out expanded when given an object (r249034)
  • Created additional Command Line API functions for other console methods (r249078)
  • Changed the Console to always be LTR, even in RTL mode (r248766)
• Sources (Experimental)
  • Fixed an issue where the gear icon would move to the second line when the navigation sidebar is narrow (r248818)
  • Fixed an issue where the “No Filter Results” message was displayed on top of all of the other content, preventing any interaction (r248737)
  • Gave Origins their own icon in the navigation sidebar (r248912)
  • Moved the resource type scope bar to be next to the filter in the navigation sidebar (r248916, r248940)
  • Provided a way to create an arbitrary Inspector Style Sheet (r248753)
• Layers (Experimental)
  • Fixed the background of the 3D area not updating when transitioning to/from Dark Mode (r248735)

WebGPU

• Added unary plus (r248756)
• Changed enums to not be shadowed by local variables (r248812)
• Fixed WebGPU layers not showing up sometimes (r248879)
• Implemented GPUErrors for and relax GPUBuffer validation rules (r249183)
• Made operator== native and added bool matrices (r248795)
• Updated matrices to have constructors that take a flattened list of scalars (r248754)
• Updated vertex shader and fragment shader to be able to come from two different programs (r248993)

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

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

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 Davidson
Senior Developer
InnoWell

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.

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

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 Heath
Front end Ruby on Rails Developer
reinteractive

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

• The group continued discussing the proposal to add system-ui-serif, system-ui-monospaced, and system-ui-rounded (Issue #4107).
  • The main focus was if there is a valid use case to support these new values instead of having Apple expose these as named fonts.
    • The primary use case is for web apps where they want it to look as native as possible including using the same fonts as the system uses.
    • There was disagreement in the group as to if this is really useful since not all systems have fonts that map to these three values.
  • If this proposal is accepted, the group also discussed how to handle fallbacks. The two options are to fallback to a regular system font or to allow these values to be a part of a font family so authors can control the fallback.
  • Discussion will continue on github to try and reach a consensus.
• Issue #3440 (When to/not to include preserved trailing spaces) has clearly defined proposals and PRs and anyone with an interest was requested to review them and weigh in on github.
• Having sizing available for aspect-ratio only boxes (Issue #4228: aspect-ratio-only boxes should be able to size to grid container) was a desired behavior. However there were concerns about this adding significant complexity to the layout algorithm for implementors, especially when there are nested grids or when subgrid is introduced. Comments on github are welcomed, especially from implementors of layout to see how large of a concern the algorithm changes present.
• The group’s direction was to not simplify values when aspect-ratio is number/number (Issue #3757: Support number (and therefore calc) as a ratio). There wasn’t time to discuss other problematic cases (such as negative numbers and 0 in the denominator) so discussion will continue on github.

• Full Meeting Minutes

Design at Web Directions Summit ’19

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.

Keynotes

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

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:

• Alice Boxhall, Software Engineer at Google, has a keen interest in the interactions between Web technology and accessibility. She was elected to the W3C TAG at the beginning of 2019, with hopes of integrating an accessibility perspective into a broader swathe of Web standards work.
• Ada Rose Cannon, Developer advocate at Samsung for the Web browser Samsung Internet, is passionate about virtual reality and other new front-end Web technologies. She is co-chair of the W3C Immersive Web Working Group.
• Lin Clark, Code Cartoonist and Principal Research Engineer at Mozilla, focuses her work on enabling WebAssembly‘s use outside of the browser. She collaborates with Mozilla’s Developer Technologies team on projects such as the WebAssembly system interface (WASI) and the wasmtime WebAssembly runtime.
• Melanie Richards, Program manager on Microsoft Edge, is a member of the ARIA, CSS, and Web Platform Working Groups at the W3C, with a focus throughout on Web accessibility.
• Yutaka Obuchi is an engineer working at Pixiv Inc. specializing in computer graphics technology. He is one of the developers of VRoid Hub, a platform of 3D avatars.

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! どうもありがとう！

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

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:

• CPU (Main processor)
• GPU (Graphics processing)
• Networking (Wi-Fi and cellular radio chips)
• Screen

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:

• When the user is actively interacting with the content.
• When the page is the frontmost, but the user is not interacting with it.
• When the page is not the frontmost content.

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:

• Minimize the use of timers to avoid waking up the CPU. Try to coalesce timer-based work into a few, infrequent timers. Lots of uncoordinated timers which trigger frequent CPU wake-ups are much worse than gathering that work into fewer chunks.
• Minimize continually animating content, like animated images and auto-playing video. Be particularly vigilant to avoid “loading” spinner GIFs or CSS animations that continually trigger painting, even if you can’t see them. IntersectionObserver can be used to runs animations only when they are visible.
• Use declarative animations (CSS Animations and Transitions) where possible. The browser can optimize these away when the animating content is not visible, and they are more efficient than script-driven animation.
• Avoid network polling to obtain periodic updates from a server. Use WebSockets or Fetch with a persistent connection, instead of polling.

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:

• The user switches to a different tab.
• The user switches to a different app.
• The browser window is minimized.
• The browser window is visible but is not the focused window.
• The browser window is behind another window.
• The space the window is on is not the current space.

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

• requestAnimationFrame is stopped.
• CSS and SVG Animations are suspended.
• Timers are throttled.

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

• on iOS, tabs are completely suspended when possible.
• on macOS, tabs participate in App Nap, which means that the web process for a tab that is not visually updating gets lower priority and has its timers throttled.

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:

• Page Visibility API provides a way to respond to a page transitioning to be in the background or foreground. This is a good way to avoid updating the UI while the page is in the background, then using the visibilitychange event to update the content when the page becomes visible.
• blur events are sent whenever the page is no longer focused. In that case, a page may still be visible but it is not the currently focused window. Depending on the page, it can be a good idea to stop animations.

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.

Scripting

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.

Painting

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.

Networking

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:

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.

Conclusion

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:

• Drive CPU usage to zero in idle
• Maximize performance during user interaction to quickly get back to idle

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

Minutes Telecon 2019-08-21

• Charter issue #219 needs to be resolved before the charter goes for approval since no one is happy with the current horizontal review text
• The implementation report has been updated. Implementors are requested to review to see if any of the changes are small bug fixes that can be addressed quickly and easily
• The unintentionally dropped text about sizing orthogonal flows (Issue #4220) was edited back into the spec for review.
• Resolved: Republish Writing Modes L3 with added/missing section for orthogonal writing modes provided no issues raised before Friday
• Resolved: Loading images are not invalid but treated similarly as explained in Image Values (Issue #1984: Specify fallback behavior when replaced or background image content not available)
• Resolved: Republish CR of CSS Images 3
• Resolved: background-color computes to the system background-color for all values but the alpha channel (Issue #4175: background-color in forced color modes needs more than a simple unset)
• TabAtkins briefly introduced the proposal for content-size so that people could review in advance of a longer discussion. Comments can also be added to github issue #4229
• myles introduced the proposal to add system-ui-serif, system-ui-monospaced, and system-ui-rounded in order to reference the new fonts introduced in iOS and macOS (Issue #4107)
  • The fallbacks need to be clearly defined for these values
  • Environmental variables should also be investigated as a possible solution to this use case
  • There wasn’t time for a full conversation so this will be discussed on next week’s call

• Full Meeting Minutes

Release Notes for Safari Technology Preview 90

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 API

• Fixed ping loads to not prevent page caching (r248265)
• Prevented autofocus for cross-origin iframes (r248491)
• Prevented navigations of frames about to get replaced by the result of evaluating javascript: URLs (r248410)
• Updated Element.outerHTML to link missing attribute prefixes in some cases in HTML documents (r248042)
• Updated the wrapper for navigator.geolocation to not become GC-collectable once its frame is detached (r248276)

Media

• Fixed an issue where muted <video> elements could block the display from sleeping (r248387)

WebRTC

• Fixed incorrect this in negotiationneeded event (r248267)

WebGPU

• Changed WebGPU to not force discrete GPU (r248704)
• Improved WHLSL compile-time performance (r248025,r248141, r248280, r248310, r248083)
• Removed char, short, and half types (r248078)

Web Inspector

• Elements
  • Added a way to disable or set a breakpoint on all event listeners for a given DOM node or event type in the Node details sidebar panel (r248052)
  • Added showing @supports CSS groupings in the Styles details sidebar panel (r248602)
  • Added experimental quick-action icon buttons to each CSS rule in the Styles details sidebar panel (r248202)
  • Added display of radius values in Box Model section of the Computed details sidebar panel (r248328)
  • Fixed an issue where CSS variable swatches were not shown for var() with a fallback in the Styles details sidebar panel (r248279)
  • Fixed some RTL issues in the Computed details sidebar panel (r248390, r248311)
  • Moved psuedo-selector rules before inherited rules in the Styles details sidebar panel (r248204)
  • Moved the Box Model section to the top of the Computed details sidebar panel (r248683)
• Resources
  • Fixed brotli-compressed resources to correctly show as being compressed in the Resources details sidebar (r248284)
  • Fixed to properly handle CSS comments with an escape character when pretty printing (r248197)
• Debugger
  • Added a global breakpoint for “All Events” which will pause whenever any event listener is about to be fired (r248201)
• Timelines
  • Made Heap Snapshots searchable (r248198)
  • Fixed an issue where Develop > Start Timeline Recording didn’t work when focused on a detached Web Inspector window (r248177)
• Console
  • Changed to always show all navigation items in the header area of the split console (r248180)
  • Fixed issue where the execution context picker didn’t update when switching to the inferred context from auto (r248196)
  • Provided a way to set an alias for previous console evaluation values (e.g. $0, $1, …, $99) in case the inspected page has variables with the same name (r248287)
  • Renamed queryObjects console command line API to queryInstances for clarity (r248434)
  • Supported console.screenshot with dataURL strings (r248688)
• Overlay
  • Changed to show page width and height information (r248053)
• Settings
  • Added an Engineering pane to expose useful settings for WebKit engineers (r248391)

Bug Fixes

• Fixed dragging an image from Safari to Notes to correctly appear (r248166)

Updated WD of CSS Lists Level 3

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 www-style@w3.org 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.

Changing Page Settings on iOS Using Web Inspector

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:

• Disable Images
• Disable Styles
• Disable JavaScript
• Disable Site-specific Hacks
• Disable Cross-Origin Restrictions
• WebRTC
  • Allow Media Capture on Insecure Sites
  • Disable ICE Candidate Restrictions
  • Use Mock Capture Devices

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.

• Images will prevent any not-yet loaded images from loading, but will have no effect on any already loaded images.
• Styles will immediately disable all CSS on the page, including inline <style>s and any style DOM attributes.
• JavaScript will cause the page to ignore any future JavaScript from being run, including new <script> elements (the underlying resource isn’t even requested) and callbacks for previously added event listeners.
• Site-specific Hacks controls whether workarounds are made by WebKit to support compatibility on certain sites.
  • A list of these sites can be found in Source/WebCore/page/Quirks.cpp.
  • If you develop a site that is found in that list, we strongly encourage developing and testing with Site-specific Hacks disabled.
• Cross-Origin Restrictions controls whether CORS rules/restrictions are active for any future network requests.

WebRTC Toggles

These toggles focus specifically on functionality related to WebRTC.

• Allow Media Capture on Insecure Sites will allow WebRTC media capture to be used/tested on insecure (e.g. non-https) pages for any future calls of getUserMedia.
• Disable ICE Candidate Restrictions will prevent host ICE candidates from being filtered for new connection attempts.
• Use Mock Capture Devices will replace all capture devices with a mock “Bip-Bop” device for any future calls of getUserMedia.
  
• Disable Encryption will cause future connections to be established and future streams (from those connections) to be transmitted without any form of encryption.

Feedback

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

• Apple will look into dates and locations for the second F2F in 2020. If anyone has conflicts please add them to the wiki so they can be factored into date selection.
• Resolved: No limit. If past what the UA can render it’s clipped (Issue #4059: Limits on text-underline-offset to preserve semantic meaning)
• Resolved: No change to the current spec, use thickness (Issue #4138: Rename `text-decoration-thickness` to `text-decoration-weight`?)
• Myles will review issue #1984 (Specify fallback behavior when replaced or background image content not available) for next week’s call.
• Resolved: Update note saying this is not for implementation and will be dropped (Issue #4164: Should the values of image-orientation include the angle variants?)
• After issue #1984 is resolved there will be a call for republication of CSS Images.
• It seems like browsers function interoperably in issue #4181 (Should automatic list-item increment adjust for ol[reversed]?) after the initial value is determined so the group was leaning toward UA magic to handle this.
• Resolved: Update to match 2.1 and make counter(name, none) invalid (Issue #4163: counter(name, none) should be invalid)
• Resolved: Republish Lists 3 with open issue on ol[reversed] and reversed counter.

• Full Meeting Minutes

Updated Candidate Recommendation: CSS Text Decoration Level …

Minutes Telecon 2019-08-07

• The new charter will go before W3C management next week. Anyone who would like to review should do so soon and open any issues on github.
• Resolved: Default behavior for all images to respect EXIF orientation (Issue #4165: Should CSS decorative images respect EXIF-orientation by default)
• The last few edits will go into the CSS Images spec next week with the plan of requesting publication next call
• Resolved: If multiple layers exist with text-shadows we draw them all (Issue #3932: Need for clarification on how ::selection text-shadows work)
• Resolved: Background on a highlight layer paints over shadows on layers below (Issue #3932)
  • There was concern with the background overpainting leading to ugly results when the background is smaller then the text-shadows below it. If there is more information that this will be a real problem the group will revisit the resolution.
• The group agreed not to use ‘weight’ for issue #4138 (Rename `text-decoration-thickness` to `text-decoration-weight`?) however there wasn’t agreement between ‘thickness’ and ‘width’. There is one shipped implementation using ‘thickness’ however ‘width’ is more consistent with other CSS properties. An on call straw poll had a slight majority leaning no change/’thickness’ however before resolving the question will be asked again with more people on the call.
• fantasai will draft proposed text for issue #4134 (What happens to the wavy & double lines when `text-decoration-thickness` is applied?) that will give general guidelines that wavy and double lines must scale, but not giving specific sizes.

• Full Meeting Minutes

Updated Working Draft: CSS Generated Content Level 3.

Minutes Telecon 2019-07-31

• Work is being done on the new charter. The document is available here and issues are being created in the charter github
• Resolved: Accept proposal [to change the initial value of ‘image-orientation’ to from-image] with an added note current solution is experimental and may change (Issue #3799: Consider changing initial value of ‘image-orientation’ to from-image)
• The proposed text for issue #1984 (Specify fallback behavior when replaced or background image content not available) will be edited to specifically call out the interstitial state between image swaps. Myles will have his team review the text and then the group will try and resolve on the next call.
• Resolved: Treat fragment only URLs as only elements, never images (Issue #383: Ambiguities in handling url)
• Resolved: Change requirements from ‘should’ to ‘must’ (Issue #383)
• Resolved: Add the edits in the Ambiguous URLs section (Issue #383)
• After the group resolves on issue #1984 there will be a call to republish CSS Images
• Resolved: Don’t invent new .type values for future rules; recommend usage of .constructor.name (Issue #4142: Can we start ignoring CSSRule.type?)
• Resolved: Align scrolling behavior of visibility:hidden with visible descendants for overflow:scroll to behave the same as overflow:hidden (Issue #4113: Should a visibility:hidden overflow:scroll be scrollable?)

• Full Meeting Minutes

W3C at View Source conference

If 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.…

Updated Working Draft: CSS Table Level 3.

Minutes Telecon 2019-07-17

• Issue #3993 (text-decoration-width claims to be a sub-property of text-decoration, but text-decoration disagrees) should be addressed once the text-decor-3 text is edited into L4

• Resolved: Always draw the underline even if it’s specified to be outside a limit we choose [meaning that even if we clamp the underline we won’t clip it] (Issue #4059)
• The discussion on if there should be a clamp on text-underline-offset (and by extension strikethrough and overline offset) continued without resolution. There were three options to pick from:
  1. No clamping
  2. Wide clamping
  3. Narrow clamping
• The argument for no clamping is that there shouldn’t be restrictions on the designs people produced.
• The argument for wide clamping is to avoid design restrictions but also limit performance and implementation difficulties.
• The argument for narrow clamping to avoid the underline being used to replace a strikethrough or overline. There’s a desire to hear from the a11y working group on their views about this concern.
• A straw poll was taken of the three options, but there was no clear winner between the three options.
• As the meeting drew to a close there was discussion to understanding more specifics about the limits intended when the group spoke of wide vs narrow clamping. The offered more specific details were:
  17. Limit is super-far, based on how big can you draw a box and things like that
  18. Medium-range, like 6-10 lines – enough for author to notice that there’s clamping, but not particularly restrictive
  19. Short-range, 1-2 line boxes, tries to keep the line with the next, not overlapping the adjacent lines

• Resolved: Tabs do not hang and you can break between for white-space:break-spaces (Issue #3869: pre-wrap and tabs at the end of the line)
• Resolved: For white-space:pre-wrap tabs hang like spaces do (Issue #3869)

• Full Meeting Minutes

The MDN developer and designer survey wants your input!

Updated Candidate Recommendation: CSS Syntax Level 3.

Updated Candidate Recommendation: CSS Display Level 3.

Minutes Telecon 2019-07-10

• Resolved: For interpolation math functions are treated as atomic algebraic terms. You interpolate a calc expression that is the weighted sum of all the terms. (Issue #4082: How to interpolate min/max/clamp?)
• Resolved: Add section to CSS images defining computed value of an image type. This value has colors links and lengths all made absolute per usual computed value rules for those sub types and fix specs referring to images to make sure use correct language. (Issue #4042: Computed gradient colors)
• Resolved: SVG elements generating CSS layout boxes are included as part of resize observer and resize observer rectangles with a definition [for layout box] of `svg:root, *:not(svg|*) > SVG, SVG|foreignObject > SVG { /* SVG elements with CSS layout box */} (Issue #4032: SVG Interaction)
• Discussion on issue #4059 (Limits on text-underline-offset to preserve semantic meaning):
  • There continued to be concern about text-underline-offset being used in place of a strikethrough. This could lead to problems in styling with browsers that have not fully implemented the property as well as discrepancies between what is visually presented and what’s in the a11y tree.
    • One possible way to prevent the strikethrough case is to ensure that authors have just as much style control on overlines and strikethroughs so that there is no incentive to misuse an underline.
    • The other option presented was to clamp at a mid-point in the text so that it can’t get to the point where it looks like a strikethrough.
  • The other argument for clamping was to ensure that the underline was visually presented in near proximity to the text it is underlining.
    • This lead to an argument that clamping shouldn’t be done at all since box-shadows can end up anywhere in the document, not just in close proximity to the box, and therefore limiting the text-underline-offset will limit flexibility in design. Changing a value and not having it change on screen is often a bad authoring experience.
  • Since there were several different opinions on where to clamp as well as some arguments that we shouldn’t be clamping at all, discussion will continue on github.

Full Meeting Minutes

Feeds

The Future of Style features:

• CSS WG Blog
• CSS Zen Garden
• CSS3 . Info
• Dev.Opera
• Surfin' Safari
• W3C Blog
• W3C's Cascading Style Sheets home page
• Web Directions Blog

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.

Site navigation