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 132

Source: Surfin' Safari 16 September 2021

Safari Technology Preview Release 132 is now available for download for macOS Big Sur and betas of macOS Monterey. 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 281002-281797.

Note: Tab Groups do not sync in this release.

Web Inspector

CSS

JavaScript

Web API

WebRTC

Rendering

Media

Web Extensions

Minutes Telecon 2021-09-15

Source: CSS WG BlogDael Jackson • 15 September 2021

Full Meeting Minutes

Make Microsoft Edge DevTools your own

Source: Microsoft Edge Blog Microsoft Edge Team • 14 September 2021

There isn’t much you can’t do with web technologies nowadays. The web platform has evolved so much that such diverse things as animating elements, playing or recording media, accessing files or storage, intercepting network requests and accessing the cache, making complex CSS layouts, or writing native code are all possible today. With that much to learn about and use, web developers need a complete suite of tools they can rely on. Fortunately, Microsoft Edge comes with development tools that make it possible for web developers to be productive with the web features and APIs. No matter what you are doing, there is most likely a dedicated tool that can help you. The flip side however, is that DevTools tend to be quite complicated. They contain over 30 different tools, and the user interface has grown over time to accommodate them. What’s more, new features are being added all the time in response to the feedback we receive from users. In this post, we’ll introduce you to new features in the Microsoft Edge DevTools which help make the tools more approachable and personalizable, so you can begin to tackle the challenge of having so many different tools at your disposal. You can also learn more about these features in the video below. https://www.youtube.com/watch?v=abmMSrTBmOM DevTools are rapidly evolving across browsers - to stay up to date with the latest in other browsers, check out my article in Smashing Magazine covering new DevTools features in Microsoft Edge, Google Chrome, Mozilla Firefox, and Safari.

Opening, closing and moving tools

While the DevTools have around 30 separate tools, it’s unlikely that you’ll need access to more than a handful of them at the same time—let alone 30. So having a way to easily open tools when you need them, and close them when you don’t is very important. At the same time, there might be tools you’ve never used before which could be very handy. If those are closed by default, you might never discover them at all. We added three small, but very powerful, DevTools features to address this.

Closing tools

Tabs in Microsoft Edge DevTools now have a close button that can be used to hide the ones you don’t need anymore. You can therefore keep a clean and simple user interface, and only have the tools you need right now readily available.The welcome tab in DevTools, with the Note that a few tools do not have a close button: Elements, Console and Sources. Those tools are used much more than all the other ones. Web developers need them at all times, and closing them doesn't make much sense.

Opening tools

There is now a + (plus) button at the end of the tab bar to open any tool not already open. The Previously, in order to discover all the available tool, you had to go in the main menu (...), and then select More tools, or know how to use the command menu to access tools quickly. The + button makes discovering and accessing other tools much easier. There can be two tab bars in DevTools: one at the top, which is always visible and is where the Elements and Sources panels usually are, and one at the bottom, the Drawer, which can be toggled by pressing Esc on your keyboard. The Console usually lives in the drawer. Both of these tab bars have the + button, so you can open new tools in any of these 2 locations. DevTools with the two available tab bars highlighted

Moving tools

Having the drawer open can be very useful when debugging something that requires more than one tool at the same time. For example, you may want to have both the Sources and Network panels opened at the same time to make sure the right HTTP requests are sent when step debugging some JavaScript code. Or you may want to have both the Elements and 3D View panels opened side by side to debug a z-index issue with an element. DevTools with Elements and 3D View panels open simultaneously With Microsoft Edge DevTools, you can now move tools between the main area and the drawer by opening the contextual menu (right-click) on the tab you want to move and selecting Move to bottom or Move to top. Context menu on the 3D View tab highlighting the Note that if you select the + button in the drawer and choose a tool from the list that is already opened in the main area, then this tool will be moved to the drawer. This is another good way of moving tools around.

Learning about the tools, from within the tools

The + button is great to easily discover new tools you might not have used before. But sometimes, the user interface of a tool can be overwhelming at first glance. It helps to have some documentation available. The Microsoft Edge DevTools documentation can help you there, but is often not at your fingertips when you’re mid-task. Recently, we added a feature to make contextual learning about a new tool even easier: DevTools Tooltips. The DevTools Tooltips is an overlay that covers the tools and provides contextual documentation about them, with links to learn more. DevTools with Tooltips overlay enabled, showing a tooltip on the Sources pane. You can enable the DevTools Tooltips in 3 different ways: Once enabled, just move your mouse over the highlighted areas to display an information tooltip about this specific area of the tools (you can also use the Tab key to navigate through the tooltips). Some of the tooltips even contain links to the documentation website to find out even more. Note that you can also go to other panels while the DevTools Tooltips are active. This way, you can navigate DevTools and keep learning about new things without having to turn the feature off and on again every time. DevTools with Tooltips overlay enabled, showing a tooltip on the Search pane.

Changing the language

We know that developers can be more productive when their tools match their language preference. Additionally, other Microsoft developer products, including VS Code, can be used in other languages. This is why we made DevTools available in 11 different languages. By default, DevTools matches the language you choose for the browser UI, but you can independently set it to any of these other languages.
English German – Deutsch
Chinese (Simplified) – 中文(简体)(简体) Chinese (Traditional) – 中文(繁體)(繁體)
French – Français Spanish – Español
Portuguese – Português Japanese – 日本語
Italian – Italiano Korean – 한국어
Russian – Pусский
To change the language, navigate to the DevTools settings (using the F1 shortcut or clicking the gear icon in the toolbar) and choose from the Language dropdown list. Language menu in DevTools Preferences After reloading DevTools, its user interface will appear in the language of your choice, making it easier to use the tools. Here is what it looks like in French: DevTools user interface with the French language setting. This works great with the DevTools Tooltips feature too, since the contextual documentation is translated as well, as shown in Russian below. DevTools in Russian language with Tooltips in Russian Since we announced the experimental release of the localized DevTools feature in 2020, we’ve continued collaborating with the Lighthouse and Chrome teams at Google through the Chromium project, and the feature is now not only available to all Microsoft Edge users, but also to anyone using DevTools in a Chromium-based browser.

Customizing your color theme

If you use Visual Studio Code (or other text editors and IDEs for that matter), you likely have customized its color theme to something visually pleasing and comfortable to work with for long periods of time. DevTools in a variety of color themes Until now, the DevTools color theme could only be customized by choosing between its dark or light themes. However now, there are 9 new color themes to choose from. These are the same as the Visual Studio Code pre-installed ones and should therefore be familiar. Here is the entire list of themes in Microsoft Edge DevTools now: To choose a new theme, you can go to the Settings (the gear icon in the toolbar) and use the Theme dropdown. You can also use the command menu and type “theme” to see the entire list of available color themes. Theme options in the DevTools Command Menu Note that if you use the Microsoft Edge Tools for VS Code extension, you might have seen that DevTools isn’t always displayed with the same color theme as the VS Code user interface itself. Now, thanks to the new color themes in DevTools, this will no longer happen. As of Microsoft Edge 95, the DevTools UI, embedded in VS Code will match the selected color theme. DevTools and VS Code matching themes If you don’t know about this extension, learn more about it here.

Feedback

User feedback is how we drive priorities for the work happening on Microsoft Edge DevTools. If you have any questions or feedback about these features or others, please send us a few words and screenshots using the the feedback button in DevTools. DevTools interface with the Feel free to also ask questions to our team on Twitter by mentioning the @EdgeDevTools account. – Patrick Brosset, Senior Program Manager, Microsoft Edge

Minutes Telecon 2021-09-08

Source: CSS WG BlogDael Jackson • 08 September 2021

Full Meeting Minutes

Time for a review of Firefox 92

Source: CSS – Mozilla Hacks – the Web developer blog Ruth John • 08 September 2021

Release time comes around so quickly! This month we have quite a few CSS updates, along with the new Object.hasOwn() static method for JavaScript.

This blog post provides merely a set of highlights; for all the details, check out the following:

CSS Updates

A couple of CSS features have moved from behind a preference and are now available by default: accent-color and size-adjust.

accent-color

The accent-color CSS property sets the color of an element’s accent. Accents appear in elements such as a checkbox or radio input. It’s default value is auto which represents a UA-chosen color, which should match the accent color of the platform. You can also specify a color value. Read more about the accent-color property here.

size-adjust

The size-adjust descriptor for @font-face takes a percentage value which acts as a multiplier for glyph outlines and metrics. Another tool in the CSS box for controlling fonts, it can help to harmonize the designs of various fonts when rendered at the same font size. Check out some examples on the size-adjust descriptor page on MDN.

And more…

Along with both of those, the break-inside property now has support for values avoid-page and avoid-column, the font-size-adjust property accepts two values and if that wasn’t enough system-ui as a generic font family name for the font-family property is now supported.

break-inside property on MDN

font-size-adjust property on MDN

font-family property on MDN

Object.hasOwn arrives

A nice addition to JavaScript is the Object.hasOwn() static method. This returns true if the specified property is a direct property of the object (even if that property’s value is null or undefined). false is returned if the specified property is inherited or not declared. Unlike the in operator, this method does not check for the specified property in the object’s prototype chain.

Object.hasOwn() is recommended over Object.hasOwnProperty() as it works for objects created using Object.create(null) and with objects that have overridden the inherited hasOwnProperty() method.

Read more about Object.hasOwn() on MDN

The post Time for a review of Firefox 92 appeared first on Mozilla Hacks - the Web developer blog.

Updated Working Draft: CSS Scrollbars Styling Level 1.

Source: W3C's Cascading Style Sheets home page08 September 2021

8 Sep 2021 Updated Working Draft: CSS Scrollbars Styling Level 1.

CSS Display Level 3 updated to include ‘order’ and ‘visibility’

Source: CSS WG Blog fantasai • 03 September 2021

The CSS WG has published an updated Candidate Recommendation of the CSS
Display Module Level 3
. This module describes how the CSS formatting box tree is generated from the
document element tree and some properties to control the type, order, and visibility of those boxes. This update:

All significant changes since the last CR are listed at in the Changes section, and a disposition of comments since the last CR is available.

Please review the draft and 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-display-3]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

It is our intention to post an updated CR Snapshot of this module as soon as horizontal review is completed.

Updated Candidate Recommendation Draft: CSS Display Level 3.

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

3 Sep 2021 Updated Candidate Recommendation Draft: CSS Display Level 3.

Minutes Telecon 2021-09-01

Source: CSS WG BlogDael Jackson • 02 September 2021

Full Meeting Minutes

Release Notes for Safari Technology Preview 131

Source: Surfin' Safari 01 September 2021

Safari Technology Preview Release 131 is now available for download for macOS Big Sur and betas of macOS Monterey. 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 280418-281002.

Note: Tab Groups do not sync in this release.

Web Inspector

CSS

Web API

JavaScript

Platform Features

Media

Web Audio

WebRTC

Payment Request

WebCrypto

Accessibility

Rendering

New Working Draft: CSS Nesting.

Source: W3C's Cascading Style Sheets home page31 August 2021

31 Aug 2021 New Working Draft: CSS Nesting.

Updated Working Draft: CSS Scrollbars Styling Level 1. Updat…

Source: W3C's Cascading Style Sheets home page29 August 2021

29 Aug 2021 Updated Working Draft: CSS Scrollbars Styling Level 1. Updated Working Draft: CSS Cascading and Inheritance Level 5.

CSS Cascading and Inheritance Level 5 Draft Updated

Source: CSS WG Blog Miriam Suzanne • 27 August 2021

The CSS Working Group has published an updated Working Draft of CSS Cascading and Inheritance Level 5. This CSS module describes how to collate style rules and assign values by way of cascading and inheritance. Level 5 adds “layers” to the cascade, along with a syntax for defining and sorting those layers. In the same way that cascade origins provide a balance of power between user and author styles, cascade layers provide a structured way to organize and balance concerns within a single origin – such as element defaults, third-party libraries, themes, components, and overrides. The changes have been made since the previous Working Draft:
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-cascade-5]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

CSS Scrollbar Styling Last Call Working Draft

Source: CSS WG BlogFlorian Rivoal • 27 August 2021

The CSS Working Group has published an updated Working Draft of CSS Scrollbar. This CSS module defines properties to influence the visual styling of scrollbars, introducing controls for their color and width.

Having addressed all outstanding comments, we expect to take transition to Candidate Recommendation after completing horizontal review. So please consider this the last call for comments prior to CR! Changes since the last Working Draft are listed in the Changes section.

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-scrollbars-1]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2021-08-25

Source: CSS WG BlogDael Jackson • 26 August 2021

Full Meeting Minutes

Updated Working Draft: CSS Object Model (CSSOM).

Source: W3C's Cascading Style Sheets home page26 August 2021

26 Aug 2021 Updated Working Draft: CSS Object Model (CSSOM).

Web Directions Code ’21 session spotlight–PWAs & Project Fugu: Closing The Relevance Gap

Source: Web Directions Blog John • 24 August 2021

PWAs & Project Fugu: Closing The Relevance Gap

Alex Russell, Partner Program Manager Microsoft Edge

Chromium’s Project Fugu is an open collaboration to push the capabilities of the web platform forward through standards. When combined with Progressive Web Apps, we’re approaching a point where whole classes of applications that were previously exclusive to native apps are coming to market on the web. This talk digs into the what, but also the why, of this huge expansion of power for web developers.

About Alex Russell

Alex Russell (@slightlylate) is a Partner Program Manager on Microsoft Edge. Prior to joining Edge, he spent a dozen years on the Chrome team where he designed new features for the Web Platform. Alex served as Tech Lead for Project Fugu, Chrome’s Standards Tech Lead, was a delegate to ECMA TC39, and served three terms as an elected representative to the W3C’s Technical Architecture Group.

His recent projects include Progressive Web Apps, Service Workers, and Web Components, along with ES6 features like Classes and Promises. Previously he helped build Chrome Frame and led the Dojo Toolkit project. Alex plays for Team Web.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–PWAs & Project Fugu: Closing The Relevance Gap appeared first on Web Directions.

Web Directions Code ’21 session spotlight–Publishing a PWA to App Stores

Source: Web Directions Blog John • 22 August 2021

Publishing a PWA to App Stores

Maximiliano Firtman, mobile+web developer

Today, Google Play Store, Apple App Store, and Microsoft Store accept Progressive Web Apps. It’s common to create PWAs these days with different toolchains, but how to publish it to the App Stores after they are on the web? Join me in the journey of taking a PWA for browsers and making everything available for stores.

Today Progressive Web Apps can be installed on every desktop and mobile operating system from the browser, but app store availability is also possible thanks to a couple of different official (and non-official) solutions such as Trusted Web Activities for Android, or PWAs for Microsoft Store. In this talk, we will go through the process of creating PWA Launchers for iOS, iPadOS, Android, and Windows. We’ll discuss the responsibility of Service Workers when working with PWA launchers, and how JavaScript can extend the Web Platform calling native APIs when a PWA launcher is involved with real-world examples of what’s possible.

For enterprise developers, we’ll analyze how we can distribute PWAs for iOS through Mobile Configuration files, and PWAs for Android through the Android Enterprise Console and a new feature known as a Managed Google Play iframe. Finally, we’ll discuss the idea of PWAs on the Apple App Store, what’s possible and what’s not with current guidelines and technologies available such as WKWebView and App-Bounded Domains available since iOS 14.

About Maximiliano Firtman

Max Firtman (@firt, firt.dev) is an independent mobile + web developer, trainer, speaker, and writer. He has authored many books, including Programming the Mobile Web and High-Performance Mobile Web published by O’Reilly Media, and many online courses at LinkedIn Learning, PluralSight, O’Reilly Learning, Udemy, and more publishers.

He is a frequent speaker at conferences worldwide, and he has been widely recognized for his work in the mobile web community. He teaches mobile (Android & iOS), HTML5, web performance, and PWA workshops for top companies worldwide.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–Publishing a PWA to App Stores appeared first on Web Directions.

Web Directions Code ’21 session spotlight–Desktop PWAs. About time.

Source: Web Directions Blog John • 19 August 2021

Desktop PWAs. About time.

Diego González, Program Manager Microsoft Edge

It’s 2021. Long gone are the times where a PWA was only a shortcut in a user’s home screen. PWAs play nicely with desktop environments. It’s about time. The presentation goes through cutting edge features and APIs that allow a PWA to integrate seamlessly with a desktop OS. To demo this, we go through a purpose built PWA that utilizes existing and experimental features that can provide a delightful UX, all powered by the web platform.

About Diego González

Born in Costa Rica, did part of his school in Canada. Graduated as a computer engineer. Finished a master degree in information systems. Did multimedia studies in Spain. Eventually finished a PhD in informatics researching 3D UIs. 3D UIs led to VR. VR led to Samsung. Samsung led to web. Web led to Dev Rel. Dev Rel led to PM.

Currently a PM for PWA platform features on the Microsoft Edge team. Also learning about standards. Fan of kittens, puppies and gadgets throughout.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–Desktop PWAs. About time. appeared first on Web Directions.

Minutes Telecon 2021-08-18

Source: CSS WG BlogDael Jackson • 18 August 2021

Full Meeting Minutes

Release Notes for Safari Technology Preview 130

Source: Surfin' Safari 18 August 2021

Safari Technology Preview Release 130 is now available for download for macOS Big Sur and betas of macOS Monterey. 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 279831-280418.

Note: Tab Groups do not sync in this release. On macOS Big Sur, this release requires enabling GPU Process: Media option from Experimental Features under the Develop menu to address issues with streaming services.

Web Inspector

CSS

JavaScript

Media

Web API

IndexedDB

Web Directions Code ’21 session spotlight–The Evolution of the Web and OffscreenCanvas

Source: Web Directions Blog John • 18 August 2021

The Evolution of the Web and OffscreenCanvas

Brian Kardell, Developer Advocate Igalia

A walk through how the web and web standards advance and evolve, driven through a look at canvas and new APIs like OffscreenCavas and Custom Paint

About Brian Kardell

Brian is a Developer Advocate at Igalia, was an Original Co-author/Co-signer of The Extensible Web Manifesto and was the Co-Founder/Chair, W3C Extensible Web Community Group.

He represents Igalia and the OpenJS Foundation (formerly jQuery) in several standards groups. He is a blogger and lover is Art, Science & History.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–The Evolution of the Web and OffscreenCanvas appeared first on Web Directions.

CSS module scripts: `import` stylesheets like JavaScript modules

Source: Microsoft Edge Blog Microsoft Edge Team • 17 August 2021

Microsoft and Google have collaborated to bring support for CSS module scripts to Chromium, and they will be available starting in Microsoft Edge and Chrome version 93. The new CSS module scripts feature can be used to load CSS style sheets with import statements just like JavaScript modules. The imported sheets are constructable stylesheets that can be directly applied to documents or shadow roots like this:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
Loading a stylesheet without needing to create a style or link element can be more convenient and even more performant than other ways of importing and applying CSS from JavaScript. CSS module scripts will be available starting in Microsoft Edge and Chrome version 93. Read more about the feature over at web.dev: Using CSS Module Scripts to import stylesheets.

Web Directions Code ’21 session spotlight–The 2021 edition of dealing with files on the Web

Source: Web Directions Blog John • 13 August 2021

The 2021 edition of dealing with files on the Web

Thomas Steiner, Developer Relations Engineer Google

The file input element and the download attribute on anchor elements used to be the primary way for working with files on the Web. Not anymore! In this presentation, I will show modern ways of dealing with files in the browser and how they integrate with the clipboard, drag and drop, and your operating system’s file explorer. You will also learn that not all files are created equal! This will be a pre-recorded “live”-coding session, so expect no slides, no coding glitches; just pure edutainment!

About Thomas Steiner

Developer Relations Engineer at Google, focused on the Web and Project Fugu. Dad-of-3. Alum of University of Lyon (Postdoc), Polytechnic University of Barcelona (PhD), and University of Karlsruhe (MA). Blogs at blog.tomayac.com and tweets as @tomayac.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–The 2021 edition of dealing with files on the Web appeared first on Web Directions.

Minutes Telecon 2021-08-11

Source: CSS WG BlogDael Jackson • 11 August 2021

Full Meeting Minutes

Web Directions Code ’21 session spotlight–The State of Augmented Reality in the Web Platform

Source: Web Directions Blog John • 11 August 2021

The State of Augmented Reality in the Web Platform

Ada Rose Cannon, Developer Advocate, co-chair Samsung Internet, W3C Immersive Web Groups

The WebXR API can be used to make VR and AR capable websites this talk will introduce some of the newer augmented reality features and how to use them.

About Ada Rose Cannon

As a developer advocate for Samsung Internet Ada tries to help developers with all the latest features of the Web platform. You can find her on Twitter at @AdaRoseCannon or the Samsung Internet team at @SamsungInternet. Or Email at webadvocacy@samsung.com

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–The State of Augmented Reality in the Web Platform appeared first on Web Directions.

Compat2021: Improving CSS Grid compatibility with GridNG

Source: Microsoft Edge Blog Microsoft Edge Team • 10 August 2021

With next month’s release of Microsoft Edge 93, we’ll be releasing a rewrite of CSS Grid 1 module (“GridNG”), which substantially improves compatibility with other implementations of CSS Grid and addresses one of the top compatibility pain points for web developers. In this post, we’ll share more about the rewrite and what you can expect to see in Edge and other Chromium browsers. You can try the updated implementation today – just install the latest Microsoft Edge Beta build, and please report any issues you find in Chromium’s bug tracker! LayoutNG has been a multi-year rewrite of the layout engine in Blink, Chromium’s underlying rendering engine. Since its inception, it has improved performance and fixed longstanding issues from the legacy layout engine. Since LayoutNG’s initial launch with support for inline and block layout in Chrome and Microsoft Edge 76, other layout primitives (CSS Table Layout, CSS Flexbox) have been incrementally rewritten, stabilized, and launched. When we announced our switch to the Chromium project, we emphasized our commitment to improving the web for everyone. The rewrite of Blink’s implementation of the CSS Grid 1 module (GridNG) which will be launching in the M93 release of Microsoft Edge and Chrome is a great example of this. To provide some background, CSS Grid is a layout primitive that allows web developers to align elements in rows and columns, providing a more intuitive model than CSS tables for creating two dimensional layouts. CSS Grid also incorporates popular concepts from CSS Flexbox as well as terminology from well-established graphic design principles. The usage of CSS Grid on the Web has been slowly but steadily growing over the past few years: Line chart showing the increase in CSS Grid usage from less than 2% of page loads in January 2019 to almost 10% in July 2021. However, Web developers have given consistent feedback that differences in grid layout between browser engines have been a source of pain. These difficulties have been exacerbated as CSS Grid adoption increases and a larger breadth of scenarios are exercised. As this has been a theme in multiple Web developer surveys, CSS Grid was identified as a key area of the Web Platform to invest in during 2021. Microsoft happily took this on as a focus area as part of a broader commitment with Google to work together to improve browser compatibility as part of the Compat2021 effort. GridNG fixes many long standing issues reported by web developers using Grid on their sites, along with Web Platform Tests that measure an implementation’s conformance to the spec. Those same WPT tests are the basis for the Compat2021 score, which increased from 94.3% to 96.5% when GridNG was enabled. Overall, launching GridNG addresses 38 issues from Chromium’s bug tracker. Using images and other replaced content within Grid was an example of interoperability issues that developers encountered with Grid. Previously, there was limited compatibility between implementations, but that is now solved by GridNG. For the following examples, Gecko (the rendering engine for Firefox) and Blink now both produce the correct results, as specified.
Before After
A Grid layout rendering incorrectly prior to GridNG fixes. A Grid layout rendering correctly following GridNG fixes.
Here, the previous layout on the left shows misaligned icons due to grid items with images producing incorrect track sizing. SVG content embedded in grids showed similar issues, where the aspect ratio was not correctly preserved.
Before After
An SVG illustration that appears stretched horizontally An SVG illustration that appears displayed correctly
On the left is the legacy layout – the SVG content is stretched instead of preserved as expected and specified, as seen on the right. GridNG took advantage of other advances in LayoutNG, (specifically the improved layout of replaced elements) along with adhering to the spec when rewriting the component, to fix this class of issues. Besides compatibility, performance was another consistent issue reported by developers. Because of the primitives that LayoutNG operates on, along with improved caching mechanisms, GridNG has better performance in key scenarios, while avoiding the invalidation issues that were reported against the legacy architecture. The most prominent example is the layout of nested grids, which had exponential complexity, which you can see in this demo site. This performance cliff was easily hit by developers and affects live sites (you can see instances of this in this Firefox bug and its duplicates). Thanks to our improvements in GridNG, web developers will no longer face these performance issues - which have long affected multiple browser engines - in Chromium. There is still some remaining work to be done to get back to parity or better with the legacy implementation for all Blink’s perf regression microbenchmarks, but we are happy to address one of the major issues preventing developers from employing complex nested grid layouts. One final benefit of finishing off GridNG is that it opens the door to implement subgrid (CSS Grid level 2). This has been a feature request of Blink for a long time, with almost 600 stars in Chromium’s bug tracker at the time of writing. Since the constraints of the legacy layout engine, and the NG conversion effort are no longer factors, we’re excited to start work to help developers achieve the layouts that subgrid unlocks. If you are a Web Developer using grid layouts, please install the latest Microsoft Edge Beta build and report any issues you find in Chromium’s bug tracker. The development of GridNG was only possible due to close collaboration with our counterparts at Google. A huge thanks to Ian Kilpatrick and Christian Biesinger for explaining concepts, providing design feedback, detailed code reviews, and contributing key patches! – Daniel Libby, Principal Software Engineering Manager, Microsoft Edge

Web Directions Code ’21 session spotlight–How to outsmart time: Building futuristic JavaScript applications using Temporal

Source: Web Directions Blog John • 09 August 2021

How to outsmart time: Building futuristic JavaScript applications using Temporal

Ujjwal Sharma, Compilers Hacker Igalia

For close to 25 years now, JavaScript developers have suffered at the hands of
time: the Date object. We have tried all sorts of solutions from using popular
libraries like Moment.js all the way to handling dates and times on the backend.

Last year, I told you all about Temporal, a work-in-progress JavaScript
proposal/initiative that I have been working on that aims to fix the situation
by adding a date-time API to JavaScript that is truly futuristic.

Now it’s time to show “time” who is boss. With the Temporal API stable at Stage
3 and the polyfill ready for production use, let me show you how to harness the
power of this delightful API in order to build powerful JavaScript applications
that handle dates and times like we always wished we could. We shall also
discuss the orthogonal features being worked on in the JavaScript Intl API and
find out how these play along with each other and come together to form a
comprehensive set of APIs that allow us to build state of the art date and time
components in our applications.

About Ujjwal Sharma

Ujjwal is a Compilers Hacker at Igalia working on TC39 and V8, Editor of ECMA-402, a Node.js Core Collaborator, a TC39 Delegate and an International Speaker. He loves to talk about open source software, decentralization, cryptography, JavaScript and web standards.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–How to outsmart time: Building futuristic JavaScript applications using Temporal appeared first on Web Directions.

Web Directions Code ’21 session spotlight–What could you do with a neural network in your browser?

Source: Web Directions Blog John • 06 August 2021

What could you do with a neural network in your browser?

Ningxin Hu, Principal Engineer Intel

Neural Networks are an approach to machine learning (specifically Deep Learning) that are now widely used from supercomputers to your smartphone (via APIs like CireML in iOS and Neural Networks API on Android).
The Web Neural Network API (WebNN) in development at the W3C aims to bring Neural Networks natively to the browser, and with them solutions to a range of common use cases including Face Recognition, Facial Feature Detection, image captioning, and much more.
And best of all you can start exploring it today with the WebNN polyfill.

In this presentation Ningxin Hu, one of the editors of the WebNN specification, takes us through its features and aims, and how we can get started using WebNN right now.

About Ningxin Hu

Ningxin Hu is a principal engineer, working at Intel in Shanghai, specializing in Web technology. His interest is in closing the gap between web and native app performance by exposing hardware capabilities to the Web platform.

Ningxin has worked on multiple open source web browser and runtime projects, such as Firefox, WebKit, V8, Blink, and Chromium, for various OS including Moblin, MeeGo, Tizen, Windows, macOS, Android, and Linux. He also is also participates in Web standardization and has contributed to several specifications within W3C and ECMA.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 3 remaining conferences (Hover our CSS conference took place in April, Lazy Load focussed on performance in June and Global Scope our JavaScript conference in August), focussing on Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Code ’21 session spotlight–What could you do with a neural network in your browser? appeared first on Web Directions.

Minutes Telecon 2021-08-04

Source: CSS WG Blog Dael Jackson • 05 August 2021

Full Meeting Minutes

Feeds

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.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed