The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

The death the Web continues to be greatly exaggerated

Source: Web Directions Blog • John • 26 May 2023


In 2010, Wired Magazine published one of its periodically famous mis-takes (older folks will remember the 1997 “Pray” cover predicting Apple’s imminent demise, and even older folks their prediction that push technologies would kill off the web–”kiss your browser goodbye“).

In 2010 it was not Apple that was dying, rather the web was already dead! The culprit? Native smartphone apps according to the legendary Wired editor Chris Anderson.

To tell the truth, this idea was widespread, and persisted for years–the Web would slowly recede, becoming a place for documents, while Apps, the future, would live on iPhones and iPads and Android devices.

Indeed the general idea persists that compared with the capabilities of mobile platforms as app platforms, the Web is under powered, lacks the kinds of capabilities Apps rely on.

Meanwhile a funny thing or three happened.

A funny thing happened on the way to the funeral

Particularly in business applications, Software as a service, and a thousand different specialised apps transformed the traditional desktop software landscape. And rarely if ever are these apps you download to your laptop–they live entirely in the browser. For years now, the overwhelming majority of a user’s time on their laptop and desktop devices is spent in the browser. Not necessarily browsing the web, rather using apps that live in the browser.

Have you got a native Gmail client on your Mac or Windows machine? Is there a Google sheets app for your laptop? Even consumer apps are largely browser based–there’s no Instagram or Snap or Tik Tok or Netflix app for Mac OS or Windows–people use these in their browser on their laptop and desktop.

More recently we’ve seen really complex sophisticated applications that it was hard to imagine coming to the Web, like Photoshop do just that.

And Figma is perhaps the exemplar of a sophisticated web-native application. One that not just happens to run in the browser, but is a web-native experience.

The increasing sophistication of the standards underpinning the Web (advances in CSS, Web animation, WebUI, Web Assembly, the JavaScript language, browser capabilities like workers, offline technologies like appcache Service Worker, and more) enable these increasingly capable applications that don’t just replicate the features of desktop applications but enable new models of interaction (like Figma and Miro’s massive multi-player collaborative approach to collaboration) that are essentially impossible with the traditional desktop paradigm.

Sure sure but what about mobile?

But what about mobile? Here the capabilities of the Web have in fairness lagged over native platforms.

One reason has been the browser engine monoculture of iOS. You may use Chrome or Edge or Brave on your iPhone, but you’re really using the same browser engine under all that UI. Apple, for not entirely cynical reasons, mandates no app can implement its own rendering engine, and must rely on on the iOS system browsing component.

Why? Apple argues (not without reason) that browser engines are a very high-risk attack vector for hackers (a browser by necessity must be deeply embedded into the operating system it runs on, and have system privileges few apps really need).

And Apple is legendarily focussed on the battery life of their devices. The original iPhone throttled the performance of its already not particularly powerful CPU in order to extend battery life. And as anyone who uses a browser knows, browsers can be extraordinarily demanding on a device’s performance (and so battery life) and system memory (another thing that’s typically in shorter supply on mobile devices than laptops and desktops).

But regulators around the world, in particular in the EU, have started to take seriously the negative impacts on competition this browser monoculture has had on the capabilities of the web in comparison with native platforms.

And we saw with the recent release of Safari 16.4 a huge number of really welcome additions to Safari on iOS, particularly features that allow a deeper integration of Web apps into the user experience, with Web Push, notifications, badging (think of the little numbers in your mail client that’ll you how many emails you have unread), as well as a raft of new CSS and other features.

Apple traditionally too has kept a lot of major announcements for WWDC, just a week or so away, so I’m excited to see what additional new capabilities we might see announced there.

I expect the Australian and EU competition regulators will put pressure on Apple to allow browser engines from at least trusted browsers, and for this to bring the sort of competitive pressure on Apple to keep up with in particular Chrome. But the timescales there are likely years not months.

What does that mean for the web?

Just as we saw the traditional desktop app largely replaced by web based apps, I imagine this trend will play itself out on mobile devices. So, does that mean native apps will go away?

Just as with the desktop, native apps will remain, for years if not decades. But the places in which the Web is sufficiently capable as a mobile app platform (I’ve not user a native Twitter app for years even on iOS, relying on Twitter’s capable web app) will grow, and the case for targetting different platforms with multiple code bases will increasingly be difficult to make.

A slew of new browser capabilities are already, here, or emerging, from low level capabilities like Web Assembly, to UI improvements like view transitions.

And what’s not even remotely on most people’s radar are capabilities like WebGPU (giving a web app access to a devices’s GPUs, central not just to the graphics capabilities of modern devices, but vital to performant AI applications) and WebNN–a neural network (another technology central to modern AI applications) in your browser.

The challenge of native apps saw the emergence of the single page web app architecture and the rise of associated frameworks like Angular, and React.

A lot of the complexity and weight associated of these were there to enable the sort of interaction patterns that native app developers got “for free” from the native platforms.

My instinct is this is changing–that the Web platform will increasingly do that heavy lifting–and perhaps we’re seeing a new architecture for web apps already emerging.

The web has never stood still–its transformation over the last 3 decades, from a text-only medium of static pages, to a complex rich platform that enables a huge array of interactive experiences and apps isn’t slowing down. One thing for certain is news of its death are greatly exaggerated.

Web Directions Code, Melbourne June 8 and 9

Helping you keep up with all this stuff is why we put together our conferences–and next up is Code in Melbourne.

We’re covering the things we believe you as a front end developer need to be thinking about now and in the near term. So grab a ticket and we’ll see you there.

The post The death the Web continues to be greatly exaggerated appeared first on Web Directions.

Updated Working Draft: CSS View Transitions Level 1.

Source: W3C's Cascading Style Sheets home page • 25 May 2023

25 May 2023 Updated Working Draft: CSS View Transitions Level 1.

Minutes Telecon 2023-05-24

Source: CSS WG Blog • Dael Jackson • 24 May 2023

Full Meeting Minutes

Random web reading for this week

Source: Web Directions Blog • John • 21 May 2023

Some weeks my notebook of links to share fills up, other weeks seem slower–like this one, though I could have sworn I read as much or more than usual.

So just a handful of links this week, but all high value.

Conditional CSS with :has and :nth-last-child

Ahmad Shaheed is one of our favourite CSS communicators. We’ve had him speak in person and on our online conferences (find all these on Conffab), and his book on debugging CSS, articles and tutorials are absolutely first rate.

Ahmad gets us thinking conceptually about CSS and its applications, and in this recent article explores how we can use recent innovations in selectors to create conditional CSS.

All Ahmad’s work is highly recommended.

Speaking of fabulous CSS communicators…

Stephanie Eckles is another of our favourite CSS focussed authors. Oh look here she is speaking at Hover, our online CSS focussed conference! She’s recently published a new book “Unleashing the Power of CSS” for sitepoint and there are several free chapters available, including one on the :has selector (trust me it warrants at least a chapter) and a great introduction to container queries (which is what she spoke on at Hover.)

A Calmer Web?

Older folk like me remember a time before social media, when people, rather than algorithms recommended what we should read or watch (though this is a time largely if not entirely before online video), and the constant tracking and surveillance by most of the sites we visited.

Heck I remember the very first spam newsgroup post, and very first display ad on the web (ironically its success at the time seemed to promise a viable way to grow the web–unintended consequences are very often difficult to foresee.

A few years back Anil Dash (I just looked it up, it’s 11 years ago now, honestly I would have said it was 5) published ‘the Web we lost‘ a lament for this web, lost even then.

Karolina Szczur recently wrote “The Calm Web: A Solution to Our Scary and Divisive Online World”

The Calm Web is a reimagining of the online world that envisions an Internet that is better for everyone. It’s a place that welcomes visitors, respects them, and does its utmost to delight them. It does away with bloated third parties designed to track and manipulate and instead focuses on delivering a lightning-fast experience with truly helpful content.

The Calm Web: A Solution to Our Scary and Divisive Online World

She outlines a web that

that welcomes visitors, respects them, and does its utmost to delight them. It does away with bloated third parties designed to track and manipulate and instead focuses on delivering a lightning-fast experience with truly helpful content.

And strategies for achieving that.

Well worth considering, for the things we build and the things we choose to engage with.

Oh, and a few years back Karolina presented Disruptive or defective? Towards ethical tech innovation at our Code leaders conference.

The Rise of Frameworks & the Fall of UX Architecture

Frameworks like React get a lot of focus from developers. We focus on their developer experience, and impact on performance, but rarely about their impact outside our domain.

Jason Cranford Teague is addressing this, with a new 5 part series on the role development frameworks are playing in user experience design. I’m not sure why this rarely if ever gets considered (it’s adjacent to the design systems and creativity conversation) but something interesting to think about.

More next week

As we head toward Code, now 3 weeks away in Melbourne, and AI our re-animated conference in Sydney in July, there’s plenty more where this came from next week and beyond.

Thanks for reading, make sure you check out Conffab, and see you next week.

John

The post Random web reading for this week appeared first on Web Directions.

WebKit Features in Safari 16.5

Source: Surfin' Safari • 18 May 2023

Today we are pleased to share what new’s in WebKit for Safari 16.5.

After the massive, web-developer-feature-packed release of Safari 16.4, this version focuses predominately on polishing existing features and fixing bugs. Safari 16.5 does contain a handful of new features including CSS Nesting, :user-valid and :user-invalid, support for pre-orders and deferred payments with Apple Pay, and an update to Lockdown Mode.

CSS Nesting

Safari 16.5 includes support for CSS Nesting. A long-time favorite feature of pre-processors, nesting allows web developers to write code like this:

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

Learn all about CSS Nesting — including the current limitation that prevents the use of an element selector (like article) without including a symbol (like &) before the element — in Try out CSS Nesting today.

The CSS Working Group is currently working on a very promising idea for removing the requirement that every nested selector begin with a symbol. Hopefully sometime in the future, that limitation will no longer exist.

CSS user valid and invalid pseudo-classes

The pseudo-classes :user-valid and :user-invalid are now supported in Safari 16.5.

For years, :valid and :invalid could be used to target an input field or other form field based on whether it is in a valid or invalid state. But there’s been one problem — as soon as a user starts typing, the content is evaluated and declared invalid if it doesn’t match. For example, an email address is marked :invalid as the first half is typed, before the @ is present. This has led to developers using JavaScript for this use case instead.

The new :user-invalid and :user-valid pseudo-classes are much smarter about when they are triggered, removing the need for JS. Compare :invalid to :user-invalid in a browser with support to see the difference.

Compare :invalid to :user-invalid in Safari 16.5 or Firefox 88 or later.

These new pseudo-classes are especially helpful when combined with :has() to provide powerful tools for styling anything on the page, like the label of a form field.

Apple Pay

Apple Pay on the web now supports pre-orders and deferred payments.

Lockdown mode

Lockdown mode now disables WebCodecs API.

Lockdown mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.

Bug Fixes

WebKit for Safari 16.5 provides multiple bug fixes and feature polish.

CSS

Editing & Forms

JavaScript

Layout

Media

Scrolling

Rendering

Web API

Web Apps

Web Assembly

Web Inspector

Feedback

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.5. Find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.5 release notes.

Updating to Safari 16.5

Safari 16.5 is available for macOS Ventura, macOS Monterey, macOS Big Sur, iPadOS 16, and iOS 16. Update to Safari 16.5 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.

Minutes Telecon 2023-05-17

Source: CSS WG Blog • Dael Jackson • 18 May 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 170

Source: Surfin' Safari • 17 May 2023

Learn about the latest web technology updates in Safari Technology Preview: CSS, Layout, JavaScript, Media, Popover, and Accessibility.

Overview

Safari Technology Preview Release 170 is now available for download for macOS Monterey 12.3 or later and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura.

This release includes WebKit changes between: 263290@main…263537@main.

CSS

Forms

Layout

JavaScript

Media

Popover

Accessibility

Keeping up with an ever changing web

Source: Web Directions Blog • John • 12 May 2023

Let’s set the effective starting date of the Web as 1993 and the release of Mosaic, the first graphical browser that gained any sort of widespread adoption. 30 years. A lifetime ago or more for many, though I remember it well.

What was the technology landscape at the time? Windows dominated the consumer computing landscape (Windows 3.1 that is, tough DOS was still widely used) while the then slowly fading Mac was at System 7, a decade away from the modern Mac OS. A 256 color 800×600 monitor was not just standard it was state of the Art. Widespread adoption of mobile phones was still years away, the smartphone a decade and then some.

The technology landscape of today is almost entirely unrecognisable. Hardware, software, form factors, UI patterns. Chips have increased in performance tens of thousands of times. The amount of memory and hard disk space available for the average device thousands of times.

Yet somehow in all this the Web has persisted. Grown and adapted to remain relevant, indeed become an ever more significant part of our lives.

How does this happen? Unlike proprietary software and operating systems, like Windows or Photoshop, the technologies of the Web, at least their specifications, all get developed in the open. By the W3C, IETF, ECMA International (home of TC-39 the working group that develops JavaScript) and various other standards organisations like the Motion Moving Picture Experts Group, Joint Photographic Experts Group.

Of course, all these standards and specifications need to be implemented in browser engines, but even significant parts of most of these are open source, and have contributors beyond the core we think of–Google, Microsoft, Apple, Mozilla.

But ultimately none of any of that matters if developers don’t continue to develop for the Web platform, adopt the new features, keep pushing the boundaries of what’s possible.

Keeping up with all these developments is a lot of work–I know, as it’s something I try to do as part of making sure the conferences we put together are as relevant as possible to our audience. I also still develop for the Web, and new features, particularly browser APIs and CSS developments often significantly improve existing code I’ve written, or make new things possible.

So today I first want to acknowledge the amazing work done by all the folks contributing to the development of those standards and thank them for what is rarely glamorous, or frankly particularly well recognised work.

And also to round up a few recent developments you might find useful, including a new initiative that will help you keep up to date with the state of the Web platform.

New array methods for JavaScript for reducing side effects

Arrays are one of the most used features of most programming languages, and any JavaScript developer likely uses them day in day out. But in JavaScript arrays can be difficult to work with. Some methods on the array object mutate the object, others copy and alter that copy.

JavaScript has recently implement a number of new methods to help address this as Phil Nash explains in this great, detailed article. Phil will also be looking at the top 5 JS issues in almost all our codebases art Web Directions Code in Melbourne in just 4 weeks!

And, Ashley Claymore, who is one of the ‘champions’ (that’s what they are called) developing these new aspects of JavaScript presented on them at our GlobalScope conference last year. You can find that on Conffab.

Updates to Core Web Vitals

If you’re not paying attention to Core Web Vitals–well now’s the time to start. Introduced in 2021 by Google as an objective measure of Web page performance, (at Lazy Load in 2021, Annie Sullivan, who leads the team developing them spoke on them, and the video is here on Conffab, plus there are a bunch more related videos there as well.)

At Google I/O in the last day or so, it was confirmed that there’ll be big changes to CWV coming soon, with Interaction to Next Paint becoming a key performance metric. Annie Sullivan and Rick Viscomi give details on what it is, and why this decision was made. There’s also a Google I/O presentation from Annie and Michael Mocny on how to optimise responsiveness with INP (that is after all the aim of the new metric).

And Nishu Goel will be talking on INP at Web Directions Code.

GPUs in the browser?

The GPU is at the heart of much of modern computing. We most likely think of it as powering the smooth graphics in modern laptops, desktop and phones, but vast numbers of GPUs drive the training and inference of generative AI, and will increasingly bring the inference aspect of generative AI to the device (drastically lowering the cost of AI).

WebGPU is a new standard now shipping in Chrome that gives code running in the browser access to GPUs via a standardised API layer.

Matt Rikard observed recently “WebGPU makes browsers start to resemble a more traditional operating system.” So what’s going on here? In introducing WebGPU, Corentin Wallez, Brandon Jones and François Beaufort write

WebGPU unlocks a lot of new GPU programming possibilities in the browser. It better reflects how modern GPU hardware works, while also laying a foundation for more advanced GPU capabilities in the future. The API has been baking in the W3C’s “GPU for the Web” group since 2017, and is a collaboration between many companies such as Apple, Google, Mozilla, Microsoft, and Intel. And now after 6 years of work, we’re excited to announce that one of the biggest additions to the Web platform is finally available!

As they observe, WebGPU is “Designed for JavaScript first”

The features that enable these use cases have been available to platform-specific desktop and mobile developers for a while, and it’s been our challenge to expose them in a way that feels like a natural part of the web platform.

If you’re keen to explore more, there’s a new Codelab that in an hour will get you up and running with your first WebGPU enabled app, using just your existing JavaScript knowledge.

Oh, and we’ll be covering WebGPU at Web Directions Code.

How do you keep up with all this?

Yes, it can feel like a full time job, keeping up, assessing the level of support of a particular technology in browsers, modern, and legacy, which many of us continue to need to support. Can I Use, powered by the open browser-compat-data project is a great place to get a sense check for a specific feature, but at Google I/O Google launched baseline, which

helps you to see, at a glance, whether a feature or API is safe to use in your site or web applications. In this post, learn about the ideas that led to this concept, and how we hope it will help you

And of course you can come along to our conferences, or subscribe to Conffab (there’s plenty of free content there), where our key goal is to highlight developments in the Web platform and key technologies and practices (in performance, security, platform engineering and more) to help you and your team keep up to date.

The post Keeping up with an ever changing web appeared first on Web Directions.

Minutes Telecon 2023-05-10

Source: CSS WG Blog • Dael Jackson • 10 May 2023

Full Meeting Minutes

Minutes Telecon 2023-05-03

Source: CSS WG Blog • Dael Jackson • 04 May 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 169

Source: Surfin' Safari • 03 May 2023

Safari Technology Preview Release 169 is now available for download for macOS Monterey 12.3 or later and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura.

This release includes WebKit changes between: 262762@main…263289@main.

Web Inspector

CSS

Scroll Snap

JavaScript

Popover

SVG

Accessibility

Media

Rendering

Web API

Engineering practice at Web Directions Code

Source: Web Directions Blog • John • 03 May 2023

Modern frontends are complex and large. They involve coordinating resources across front and back end, and across networks. They utilise numerous different technologies and resources, and typically involve teams of people performing different roles and potentially contributing to a code base with others they have never met scattered around the globe. Frankly it’s a marvel that it works at all.

But we can always look to learn from others and improve our engineering practices, which we’ll do at Web Directions Code, as we return in person to Melbourne in June.

Staying up to date as a front end engineer is just about a full time job. So make out ours, and get along to Code-over 2 dozen talks from deeply experienced experts on JavaScript, CSS, web platform APIs, performance, security, front end engineering and more.

The post Engineering practice at Web Directions Code appeared first on Web Directions.

The Web Platform at Web Directions Code

Source: Web Directions Blog • John • 01 May 2023

The Web platform is constantly evolving, and what we can build in the browser becomes more complex and sophisticated by the day. We’ve long covered these capabilities at our conferences and Code will be no different, with a range of talks to help you get up to speed with what browsers are capable of today (and in the near future). We guarantee you’ll be surprised (and hopefully excited).

All this plus 2 dozen other talks focused on CSS, JavaScript, front end architectures, security, performance and engineering practice–keep up to date with all things front end engineering at Code in Melbourne (or online).

The post The Web Platform at Web Directions Code appeared first on Web Directions.

30th anniversary of licensing the Web for general use and at no cost

Source: W3C Blog • Coralie Mercier • 30 April 2023

Today marks the 30th anniversary of the release of the World Wide Web into the public domain, for general use, and at no cost, on 30 April 1993 by CERN.

This quiet gesture, advocated by Web inventor Sir Tim Berners-Lee, has had implications beyond what he or anyone imagined at that time: the Web, free for everyone, has changed our lives.

Please, join me in taking a moment to appreciate the impact and the sheer magnitude of the revolution that started just two years prior. “Try it”, Sir Tim noted in his August 1991 email introducing the World Wide Web – and since then, billions of people have.

graphic showing a historical photo of Sir Tim Berners-Lee at his desk, next to the text 'try it'

Two thirds of the world are online today (66% of the global population, or 5.3 billion people), and although access may vary greatly between parts of the world, there was a noticeable surge in the steady increase as a result of the Coronavirus pandemic, when suddenly people become reliant on the Web for communication, work, education, democracy, online shopping and business, connecting with family and friends, and entertainment, among myriad reasons to use the world’s truest social network.

The Web has been life-changing for people. I ran a short poll on social media a few weeks ago, asking people in what way(s) the Web changed their life. One response, of the many I got, stayed with me:

“I think there are two type of persons, the ones that the web changed their lives, and the ones that they are not aware that it changed their lives.”

It warmed my heart and reinforced the sense of purpose I get from working at W3C how people overwhelmingly and enthusiastically lauded the Web. Its positive impact can be broken into three main categories:

  1. Vital family and social interactions. Also, it’s astounding the number of people who met the love of their life thanks to the Web!
  2. Earning a living. Many found jobs as web developers, many conduct business online, many work from home thanks to the Internet and the Web.
  3. Empowerment and personal growth. From enabling people with disabilities or ill people to lead better lives, to breaking world frontiers and expanding horizons to learn, play and discover.

Sir Tim Berners-Lee founded the World Wide Web Consortium in 1994 as an international multi-stakeholder consortium to advance a consistent architecture accommodating progress in web standards, where member organizations, a full-time staff, and the public develop open web standards.

CERN’s decision to provide unencumbered access to the basic Web protocols and software developed there was instrumental to the success of the technical work done at the World Wide Web Consortium. The decision to base the Web on royalty-free standards from the beginning has been vital to its success. The open platform of royalty-free standards enabled software companies to profit by selling new products with powerful features, enabled e-commerce companies to profit from services that grew on this foundation, and brought social benefits in the non-commercial realm beyond simple economic valuation.

In May 2003, coinciding almost exactly with the tenth anniversary of CERN’s decision, W3C adopted a Patent Policy to enable continued innovation and widespread adoption of Web standards developed by the World Wide Web Consortium. The W3C Patent Policy governs the handling of patents in the process of producing Web Standards. The goal of this policy is to assure that Recommendations produced under this policy can be implemented on a Royalty-Free (RF) basis. By adopting this Patent Policy with its commitment to royalty-free standards, W3C laid the foundation for future decades of technical innovation, economic growth, and social advancement.

To date, W3C has published more than 11,000 specifications, of which 470 are web standards.

timeline showing W3C technologies that have had particular impact on the Web, showing websites and product launches that put the web into perspective, showing the number of websites and internet users every 5 years

Among the many achievements originating from W3C that influenced the Web for the better, those that made it the premier information commons that it has become are:

Our vision for the future is a Web that is truly a force for good. A World Wide Web that is international and inclusive, respectful of its users. A Web that supports truth better than falsehood, people more than profits, humanity rather than hate. A Web that works for everyone, because of everyone.

Updated Working Draft: Scroll-driven Animations.

Source: W3C's Cascading Style Sheets home page • 28 April 2023

28 Apr 2023 Updated Working Draft: Scroll-driven Animations.

JavaScript at Web Directions Code

Source: Web Directions Blog • John • 26 April 2023

We use it day in day out, but how much time do we invest in keeping out knowledge of JavaScript up to date? We get it (we’re developers too)–it often feels like a full time job just keeping up with what’s happening in front end technologies.

That’s what drives the programming at all our conferences–at the end of the day we want to help our attendees keep their knowledge current.

So, at Code, we have several sessions dedicated to JavaScript, to help you ensure your knowledge stays fresh.

Alongside talks on CSS, Web Assembly, browser APIs, performance, security and front end architecture, Code will have you up to date with the latest in all things front end engineering. See you in Melbourne (or on the live stream) in June.

The post JavaScript at Web Directions Code appeared first on Web Directions.

Minutes Telecon 2023-04-26

Source: CSS WG Blog • Dael Jackson • 26 April 2023

Full Meeting Minutes

Front end architectures at Web Directions Code

Source: Web Directions Blog • John • 23 April 2023

How we architect our front ends is complex. So at Code we’re going to take a longer look at modern front end architectures.

We’ll also cover Web Assembly in detail as well as JavaScript, CSS, platform APIs, security and performance, to make sure you keep up to date with the latest in front end engineering. Don’t miss Code in Melbourne June 8 and 9.

The post Front end architectures at Web Directions Code appeared first on Web Directions.

Release Notes for Safari Technology Preview 167

Source: Surfin' Safari • 21 April 2023

Safari Technology Preview Release 167 is now available for download for macOS Monterey 12.3 or later and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura.

This release includes WebKit changes between: 261248@main…262124@main.

Web Inspector

CSS

JavaScript

WebAssembly

Media

Popover

Rendering

Web API

Accessibility

MathML

SVG

Security at Web Directions Code

Source: Web Directions Blog • John • 20 April 2023

Front end developers have probably long been a little guilty of thinking about security as essentially “back end” problem. And many of the most significant issues we’ve seen with recent security breaches are definitely issues on the back end.

But that doesn’t mean it’s not a front end responsibility as well. So at Code, we’ve got a strong focus on security for front end developers.

These, alongside over 2 dozen presentations on JavaScript CSS, web platform APIs, performance, and front end architecture make for an unmissable event, covering everything you need to stay current as a front end engineer.

The post Security at Web Directions Code appeared first on Web Directions.

Release Notes for Safari Technology Preview 168

Source: Surfin' Safari • 20 April 2023

Learn about the latest web technology updates in Safari Technology Preview: Web Inspector, CSS, Rendering, Web Animations, JavaScript, Lockdown Mode, Media, Popover, Web API, and Accessibility.

Overview

Safari Technology Preview Release 168 is now available for download for macOS Monterey 12.3 or later and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura.

This release includes WebKit changes between: 262125@main…262761@main.

Web Inspector

CSS

Rendering

Web Animations

JavaScript

Lockdown Mode

Media

Popover

Web API

Accessibility

Minutes Telecon 2023-04-19

Source: CSS WG Blog • Dael Jackson • 19 April 2023

Full Meeting Minutes

Performance at Web Directions Code

Source: Web Directions Blog • John • 17 April 2023

There’s little doubt that every aspect of front end development has become more complex–but perhaps none more so, more quickly, than performance.

Less than a decade ago, when developers first started to pay real attention to performance we’d minify, concatenate, then gzip all our assets, to minimise the number of files to download, perhaps play around with the quality of JPGs to reduce the size of images, maybe even use SVG and vector images. That was about it.

These days, as the weight of web pages increases (JavaScript, images, and now fonts), and the number of third party scripts on a page explodes, we also face the reality that performance matters as a quality signal for search engine algorithms. It’s no longer a nice to have, it’s a business imperative.

Well, it always has been, now it’s just easier to make the case, and harder to avoid the reality.

At our conferences we’ve focussed a lot on performance, going back many many years. There’s nearly 100 performance focussed presentations on Conffab (many you can watch with a free membership, so why not sign up!) and at Code in Melbourne in June we’re diving more deeply than ever into performance.

There’s much much more, over 2 dozen talks in total, covering CSS, JavaScript, Web Assembly, security, browser APIs, and debugging.

So to keep you and your team up to speed with the latest in front end engineering, don’t miss Code–returning to Melbourne June 8 and 9.

The post Performance at Web Directions Code appeared first on Web Directions.

Performance, security, JavaScript oh my!

Source: Web Directions Blog • John • 16 April 2023

I spend a lot of my time keeping up with what’s happening in front end development–so you have to spend less time doing so.
​
You’d think this might get easier, or the pace of innovation might have slowed now we’re well into the web’s 4th decade (sorry if that makes some of us feel old!) but whether it’s CSS, JavaScript, your favourite framework, not to mention practices like performance, security, and operations, there seems to be an ever increasing rate change.

So today a roundup of some recent articles you might find useful in keeping up. And of course we’ll be covering all this and more at Web Directions Code in Melbourne (and streaming!) in June.

 Pareto and performance–pluck that low hanging fruit

Unless you’re working on something absolutely brand new, we all know, whether we’ve been developing a codebase or we’ve inherited one, it will have accumulated all kinds of technical debt–including performance debt. Perhaps the metrics that now matter most weren’t even on the radar when this project started. So when you run a lighthouse test and score, gulp, 20, where do you start? What I’ve found, and as Artem Perchyk recently discusses is Pareto’s law really applies here–20% of your efforts will yield 80% of your results, and there are usually some easy wins to really improve performance without a lot of effort.

Now, what’s important is that performance optimizations are a real rabbit hole, and there’s almost always something else that can be optimized. The Pareto principle applies here perfectly: a set of things can be done relatively easily, but they can have a meaningful impact

Low-Hanging Web Performance Fruits: A Cheat Sheet

Lots of great suggestions there for relatively easy performance wins.

The Ultimate Guide to Image Optimisation

One of those suggestions is of course asset optimisation, and as we learned from Henri Helvetica at Web Directions Summit last year, that typically means JavaScript and images. So the excellent folks at Calibre, a great Australian company that helps you monitor your site performance have a guide to image optimisation covering concepts, practices and tools.

Image optimisation is often the first step in a person’s web performance and page speed journey. It’s a relatively easy fix with potentially high rewards. Optimising a single image isn’t complicated or time-consuming, and it could equate to site speed gains, better UX, and noticeably improved Core Web Vitals.

The Ultimate Guide to Image Optimisation

2023 Web Framework Performance Report

Love ’em, hate ’em, we increasingly rely on them. But Frameworks, as we covered a couple of weeks back, are coming under increasing scrutiny particularly in relation to performance. So, Fred Scott from Astro (which as it happens does well in the report) has a detailed report into how 6 popular JS frameworks fare when it comes to Core Web Vitals and Lighthouse.

The purpose of this report is to look at real-world data to better understand the relationship between framework choice, performance, and actual user experience on the web. We’ll attempt to shed light on a few key questions:

How do modern web frameworks compare in real-world usage & performance?
Does framework choice influence a site’s Core Web Vitals?
How related is framework choice to JavaScript payload size, and what is the impact?

2023 Web Framework Performance Report

Garbage in, Garbage out

Many, perhaps most developers these days, particularly those who have spent their lives developing for the web platform have not had to worry themselves with memory allocation and deallocation–all of which is done magically for us in ‘memory safe‘ programming languages. Their runtimes employ ‘garbage collectors’ that detect when memory (for example an object or variable value) can be safely deallocated. But, memory leaks are still possible, and difficult to track down.

And, in certain circumstances it can be useful to have an idea of what is really going on when an object is deallocated. In JavaScript developers have relatively recently become able to know when an object has been garbage collected. So, if you’re interested in learning a bit more, Alexey Lebedev explores this in Experiments with the JavaScript Garbage Collector

Recently I’ve learned that JavaScript provides a class called FinalizationRegistry that allows you to programmatically detect when an object is garbage-collected. It’s available in all major web browsers and Node.js.

Experiments with the JavaScript Garbage Collector

We actually covered this in some detail at GlobalScope, our online JavaScript focussed conference last year, so for more, check out Strength in weakness: JavaScript memory management and weak references

So, you want to safely authenticate with 2FA? App stores are still not the solution

In recent weeks, Twitter has turned off SMS based 2 factor authentication (2FA) for all but Twitter Blue subscribers (users can and absolutely should use another 2FA method like authenticator apps, though most will probably simply turn off 2FA and leave themselves exposed to a far, far higher chance of having their account hijacked–which some time back happened to me with an ancient twitter account we setup for one of our early events and which we hadn’t used in probably a decade.)

Meanwhile, high profile damaging breaches, that leak details that simply should not be being stored are a frequent occurrence (and for which, other than ensuring the use of unique passwords–people frequently reuse passwords–and using 2FA when it is available there’s little more we as users can do.

Meanwhile, we tend to, consciously, or otherwise, blame the user–for reusing passwords, for not using 2FA. But this is a deeply systemic problem. And chief among the issues is that passwords are just a truly terrible solution to authenticating people. This is something we’ve focussed a lot on at our conferences for some years now (we even had a dedicated front end security focussed conference in 2021). And something we’ll be addressing at Code.

But we simply don’t pay anywhere near enough attention to security online–our own, or our users.

Recently, Christian Heilmann wrote about his experience of looking for a 2FA App on the Google Play App Store,

This is exactly what App stores were advertised as to prevent. The web was a wild, untamed and terribly unsafe place full of software you can’t trust. App stores, instead, are curated and safe havens of only tested and tried, genuine software

So, you want to safely authenticate with 2FA? App stores are still not the solution

And we’ll cover this all much more at Code, Summit and elsewhere.

Need to keep up?

If you’re keen to keep yourself and your team up to date with the latest developments in performance and security, as well JavaScript, CSS, browser APIs and all things front end, Code is coming up in Melbourne in June, and we’ve got hundreds and hundreds of relevant high quality presentations at Conffab.

The post Performance, security, JavaScript oh my! appeared first on Web Directions.

Minutes Telecon 2023-04-12

Source: CSS WG Blog • Dael Jackson • 12 April 2023

Full Meeting Minutes

WebKit Features in Safari 16.4

Source: Surfin' Safari • 10 April 2023

Today, we’re thrilled to tell you about the many additions to WebKit that are included in Safari 16.4. This release is packed with 135 new web features and over 280 polish updates. Let’s take a look.

You can experience Safari 16.4 on macOS Ventura, macOS Monterey, macOS Big Sur, iPadOS 16, and iOS 16. Update to Safari 16.4 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.

Web Push on iOS and iPadOS

iOS and iPadOS 16.4 add support for Web Push to web apps added to the Home Screen. Web Push makes it possible for web developers to send push notifications to their users through the use of Push API, Notifications API, and Service Workers.

Deeply integrated with iOS and iPadOS, Web Push notifications from web apps work exactly like notifications from other apps. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch. Focus provides ways for users to precisely configure when or where to receive Web Push notifications — putting users firmly in control of the experience. For more details, read Web Push for Web Apps on iOS and iPadOS.

Improvements for Web Apps

WebKit on iOS and iPadOS 16.4 adds support for the Badging API. It allows web app developers to display an app badge count just like any other app on iOS or iPadOS. Permission for a Home Screen web app to use the Badging API is automatically granted when a user gives permission for notifications.

To support notifications and badging for multiple installs of the same web app, WebKit adds support for the id member of the Web Application Manifest standard. Doing so continues to provide users the convenience of saving multiple copies of a web app, perhaps logged in to different accounts separating work and personal usage — which is especially powerful when combined with the ability to customize Home Screen pages with different sets of apps for each Focus.

iOS and iPadOS 16.4 also add support so that third-party web browsers can offer “Add to Home Screen” in the Share menu. For the details on how browsers can implement support, as well more information about all the improvements to web apps, read Web Push for Web Apps on iOS and iPadOS.

We continue to care deeply about both the needs of a wide-range of web developers and the everyday experience of users. Please keep sending us your ideas and requests. There’s more work to do, and we couldn’t be more excited about where this space is headed.

Web Components

Web Components is a suite of technologies that together make it possible to create reusable custom HTML elements with encapsulated functionality. Safari 16.4 improves support for Web Components with several powerful new capabilities.

Safari 16.4 adds support Declarative Shadow DOM, allowing developers to define shadow DOM without the use of JavaScript. And it adds support for ElementInternals, providing the basis for improved accessibility for web components, while enabling custom elements to participate in forms alongside built-in form elements.

Also, there’s now support for the Imperative Slot API. Slots define where content goes in the template of a custom element. The Imperative Slot API allows developers to specify the assigned node for a slot element in JavaScript for additional flexibility.

CSS

Safari 16.4 adds support for quite a few new CSS properties, values, pseudo-classes and syntaxes. We are proud to be leading the way in several areas to the future of graphic design on the web.

Margin Trim

The margin-trim property can be used to eliminate margins from elements that are abutting their container. For example, imagine we have a section element, and inside it we have content consisting of an h2 headline and several paragraphs. The section is styled as a card, with an off-white background and some padding. Like usual, the headline and paragraphs all have top and bottom margins — which provide space between them. But we actually don’t want a margin above the first headline, or after the last paragraph. Those margins get added to the padding, and create more space than what’s desired.

Here’s an example of a simple card, with headline and paragraph text. On the left is the result. On the right, the same exact layout, but with the container’s padding marked in green, and the children’s margins marked in orange. Note there are margins above the first line of text, and the below the last line of text.

Often web developers handle this situation by removing the top margin on the headline with h2 { margin-block-start: 0 } and the bottom margin on the last paragraph with p:last-child { margin-block-end: 0 } — and hoping for the best. Problems occur, however, when unexpected content is placed in this box. Maybe another instance starts with an h3, and no one wrote code to remove the top margin from that h3. Or a second h2 is written into the text in the middle of the box, and now it’s missing the top margin that it needs.

The margin-trim property allows us to write more robust and flexible code. We can avoid removing margins from individual children, and instead put margin-trim: block on the container.

section {
  margin-trim: block;
}
The same simple content card example, but with margin-trim applied. Note that there is no longer a margin above the first line of text or below the last.

This communicates to the browser: please trim away any margins that butt up against the container. The rule margin-trim: block trims margins in the block direction, while margin-trim: inline trims margins in the inline direction.

Try this demo for yourself in Safari 16.4 or Safari Technology Preview to see the results.

Typography

Safari 16.4 also adds support for the new line height and root line height units, lh and rlh. Now you can set any measurement relative to the line-height. For example, perhaps you’d like to set the margin above and below your paragraphs to match your line-height.

p {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-block: 1lh;
}

The lh unit references the current line-height of an element, while the rlh unit references the root line height — much like em and rem.

Safari 16.4 adds support for font-size-adjust. This CSS property provides a way to preserve the apparent size and readability of text when different fonts are being used. While a web developer can tell the browser to typeset text using a specific font size, the reality is that different fonts will render as different visual sizes. You can especially see this difference when more than one font is used in a single paragraph. In the following demo, the body text is set with a serif font, while the code is typeset in a monospace font — and they do not look to be the same size. The resulting differences in x-height can be quite disruptive to reading. The demo also provides a range of font fallback options for different operating systems, which introduces even more complexity. Sometimes the monospace font is bigger than the body text, and other times it’s smaller, depending on which font family is actually used. The font-size-adjust property gives web developers a solution to this problem. In this case, we simply write code { font-size-adjust: 0.47; } to ask the browser to adjust the size of the code font to match the actual glyph size of the body font.

Open this demo in Safari 16.4, Safari Technology Preview or Firefox to see font-size-adjust in action.

To round out support for the font size keywords, font-size: xxx-large is now supported in Safari 16.4.

Pseudo-classes

Safari 16.4 also adds support for several new pseudo-classes. Targeting a particular text direction, the :dir() pseudo-class lets you define styles depending on whether the language’s script flows ltr (left-to-right) or rtl (right-to-left). For example, perhaps you want to rotate a logo image a bit to the left or right, depending on the text direction:

img:dir(ltr) { rotate: -30deg; }
img:dir(rtl) { rotate: 30deg; }

Along with unprefixing the Fullscreen API (see below), the CSS :fullscreen pseudo-class is also now unprefixed. And in Safari 16.4, the :modal pseudo-class also matches fullscreen elements.

Safari 16.4 adds :has() support for the :lang pseudo-class, making it possible to style any part of a page when a particular language is being used on that page. In addition, the following media pseudo-classes now work dynamically inside of :has(), opening up a world of possibilities for styling when audio and video are in different states of being played or manipulated — :playing, :paused, :seeking, :buffering, :stalled, :picture-in-picture, :volume-locked, and :muted. To learn more about :has(), read Using :has() as a CSS Parent Selector and much more.

Color

Safari 16.4 adds support for Relative Color Syntax. It provides a way to specify a color value in a much more dynamic fashion. Perhaps you want to use a hexadecimal value for blue, but make that color translucent — passing it into the hsl color space to do the calculation.

section { background: hsl(from #1357a6 h s l / 0.5); }

Or maybe you want to define a color as a variable, and then adjust that color using a mathematical formula in the lch color space, telling it to cut the lightness (l) in half with calc(l / 2), while keeping the chroma (c) and hue (h) the same.

:root { 
    --color: green; 
}
.component {
    --darker-accent: lch(from var(--color) calc(l / 2) c h);
}

Relative Color Syntax is powerful. Originally appearing in Safari Technology Preview 122 in Feb 2021, we’ve been waiting for the CSS Working Group to complete its work so we could ship. There isn’t documentation on MDN or Can I Use about Relative Color Syntax yet, but likely will be soon. Meanwhile the Color 5 specification is the place to learn all about it.

Last December, Safari 16.2 added support for color-mix(). Another new way to specify a color value, the functional notation of color-mix makes it possible to tell a browser to mix two different colors together, using a certain color space.

Safari 16.4 adds support for using currentColor with color-mix(). For example, let’s say we want to grab whatever the current text color might be, and mix 50% of it with white to use as a hover color. And we want the mathematical calculations of the mixing to happen in the oklab color space. We can do exactly that with:

:hover {
    color: color-mix(in oklab, currentColor 50%, white);
}

Safari 16.2 also added support for Gradient Interpolation Color Spaces last December. It allows the interpolation math of gradients — the method of determining intermediate color values — to happen across different color spaces. This illustration shows the differences between the default sRGB interpolation compared to interpolation in lab and lch color spaces:

Safari 16.4 adds support for the new system color keywords. Think of them as variables which represent the default colors established by the user, browser, or OS — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For instance, Canvas represents the current default background color of the HTML page. Use system color keywords just like other named colors in CSS. For example, h4 { color: FieldText; } will style h4 headlines to match the default color of text inside form fields. When a user switches from light to dark mode, the h4 color will automatically change as well. Find the full list of system colors in CSS Color level 4.

Media Queries Syntax Improvements

Safari 16.4 adds support for the syntax improvements from Media Queries level 4. Range syntax provides an alternative way to write out a range of values for width or height. For example, if you want to define styles that are applied when the browser viewport is between 400 and 900 pixels wide, in the original Media Query syntax, you would have written:

@media (min-width: 400px) and (max-width: 900px) {
  ...
}

Now with the new syntax from Media Queries level 4, you can instead write:

@media (400px <= width < 900px) {
  ...
}

This is the same range syntax that’s been part of Container Queries from its beginning, which shipped in Safari 16.0.

Media Queries level 4 also brings more understandable syntax for combining queries using boolean logic with and, not, and or. For example:

@media (min-width: 40em), (min-height: 20em) {
  @media not all and (pointer: none) { 
    ... 
  }
}

Can instead be greatly simplified as:

@media ((min-width: 40em) or (min-height: 20em)) and (not (pointer: none)) {
  ... 
}

Or, along with the range syntax changes, as:

@media ((40em < width) or (20em < height)) and (not (pointer: none)) {
  ...
}

Custom Properties

Safari 16.4 adds support for CSS Properties and Values API with support for the @property at-rule. It greatly extends the capabilities of CSS variables by allowing developers to specify the syntax of the variable, the inheritance behavior, and the variable initial value — similar to how browser engines define CSS properties.

@property --size {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

With @property support, developers can to do things in CSS that were impossible before, like animate gradients or specific parts of transforms.

Web Animations

Safari 16.4 includes some additional improvements for web animations. You can animate custom properties. Animating the blending of mismatched filter lists is now supported. And Safari now supports KeyframeEffect.iterationComposite.

Outline + Border Radius

Until now, if a web developer styled an element that had an outline with a custom outline-style, and that element had curved corners, the outline would not follow the curve in Safari. Now in Safari 16.4, outline always follows the curve of border-radius.

CSS Typed OM

Safari 16.4 adds support for CSS Typed OM, which can be used to expose CSS values as typed JavaScript objects. Input validation for CSSColorValues is also supported as part of CSS Typed OM. Support for Constructible and Adoptable CSSStyleSheet objects also comes to Safari 16.4.

HTML

Safari 16.4 now supports lazy loading iframes with loading="lazy". You might put it on a video embed iframe, for example, to let the browser know if this element is offscreen, it doesn’t need to load until the user is about to scroll it into view.

<iframe src="videoplayer.html" title="This Video" 
        loading="lazy" width="640" height="360" ></iframe>

By the way, you should always include the height and width attributes on iframes, so browsers can reserve space in the layout for it before the iframe has loaded. If you resize the iframe with CSS, be sure to define both width and height in your CSS. You can also use the aspect-ratio property to make sure an iframe keeps it’s shape as it’s resized by CSS.

iframe { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16 / 9; 
}

Now in Safari 16.4, a gray line no longer appears to mark the space where a lazy-loaded image will appear once it’s been loaded.

Safari 16.4 also includes two improvements for <input type="file">. Now a thumbnail of a selected file will appear on macOS. And the cancel event is supported.

JavaScript and WebAssembly

Safari 16.4 brings a number of useful new additions for developers in JavaScript and WebAssembly.

RegExp Lookbehind makes it possible to write Regular Expressions that check what’s before your regexp match. For example, match patterns like (?<=foo)bar matches bar only when there is a foo before it. It works for both positive and negative lookbehind.

JavaScript Import Maps give web developers the same sort of versioned file mapping used in other module systems, without the need for a build step.

Growable SharedArrayBuffer provided a more efficient mechanism for growing an existing buffer for generic raw binary data. And resizable ArrayBuffer allows for resizing of a byte array in JavaScript.

In WebAssembly, we’ve added support for 128-bit SIMD.

Safari 16.4 also includes:

Web API

Safari 16.4 adds support for quite a few new Web API. We prioritized the features you’ve told us you need most.

Offscreen Canvas

When using Canvas, the rendering, animation, and user interaction usually happens on the main execution thread of a web application. Offscreen Canvas provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering can now also be transferred to a worker context, allowing developers to run tasks in a separate thread and avoid heavy work on the main thread that can negatively impact the user experience. The combination of DOM-independent operations and rendering of the main thread can provide a significantly better experience for users, especially on low-power devices. In Safari 16.4 we’ve added Offscreen Canvas support for 2D operations. Support for 3D in Offscreen Canvas is in development.

Fullscreen API

Safari 16.4 now supports the updated and unprefixed Fullscreen API on macOS and iPadOS. Fullscreen API provides a way to present a DOM element’s content so that it fills the user’s entire screen, and to exit fullscreen mode once it’s unneeded. The user is given control over exiting fullscreen mode through various mechanisms, include pressing the ‘Esc’ key on the keyboard, or performing a downwards gesture on touch-enabled devices. This ensures that the user always has the ability to exit fullscreen whenever they desire, preserving their control over the browsing experience.

Screen Orientation API

Along with the Fullscreen API we’ve added preliminary support for Screen Orientation API in Safari 16.4, including:

Support for the lock() and unlock() methods remain experimental features for the time being. If you’d like to try them out, you can enable them in the Settings app on iOS and iPadOS 16.4 via Safari → Advanced → Experimental Features → Screen Orientation API (Locking / Unlocking).

Screen Wake Lock API

The Screen Wake Lock API provides a mechanism to prevent devices from dimming or locking the screen. The API is useful for any application that requires the screen to stay on for an extended period of time to provide uninterrupted user experience, such as a cooking site, or for displaying a QR code.

User Activation API

User Activation API provides web developers with a means to check whether a user meaningfully interacted with a web page. This is useful as some APIs require meaningful “user activation”, such as, a click or touch, before they can be used. Because user activation is based on a timer, the API can be used to check if document currently has user activation as otherwise a call to an API would fail. Read The User Activation API for more details and usage examples.

WebGL Canvas Wide Gamut Color

WebGL canvas now supports the display-p3 wide-gamut color space. To learn more about color space support, read Improving Color on the Web, Wide Gamut Color in CSS with Display-P3, and Wide Gamut 2D Graphics using HTML Canvas.

Compression Streams API

Compression Streams API allows for compressing and decompressing streams of data in directly in the browser, reducing the need for a third-party JavaScript compression library. This is handy if you need to “gzip” a stream of data to send to a server or to save on the user’s device.

And more

Safari 16.4 also includes many other new Web API features, including:

Images, Video, and Audio

Last fall, Safari 16 brought support for AVIF images to iOS 16, iPadOS 16 and macOS Ventura. Now with Safari 16.4, AVIF is also supported on macOS Monterey and macOS Big Sur. Updates to our AVIF implementation ensure animated images and images with film grain (noise synthesis) are now fully supported, and that AVIF works inside the <picture> element. We’ve also updated our AVIF implementation to be more lenient in accepting and displaying images that don’t properly conform to the AVIF standard.

Safari 16.4 adds support for the video portion of Web Codecs API. This gives web developers complete control over how media is processed by providing low-level access to the individual frames of a video stream. It’s especially useful for applications that do video editing, video conferencing, or other real-time processing of video.

Media features new to Safari 16.4 also include:

WKWebView

WKPreferences, used by WKWebView on iOS and iPadOS 16.4, adds a new shouldPrintBackgrounds API that allows clients to opt-in to including a pages’s background when printing.

Developer Tooling

Inspectable WebKit and JavaScriptCore API

Across all platforms supporting WKWebView or JSContext, a new property is available called isInspectable (inspectable in Objective-C) on macOS 13.4 and iOS, iPadOS, and tvOS 16.4. It defaults to false, and you can set it to true to opt-in to content being inspectable using Web Inspector, even in release builds of apps.

Develop Menu > Patrick's iPhone > Example App Patrick's iPhone > Example App" /> Patrick's iPhone > Example App" class="wp-image-13941" srcset="https://www.webkit.org/wp-content/uploads/Inspectable-Light.png 2010w, https://www.webkit.org/wp-content/uploads/Inspectable-Light-300x121.png 300w, https://www.webkit.org/wp-content/uploads/Inspectable-Light-1024x413.png 1024w, https://www.webkit.org/wp-content/uploads/Inspectable-Light-768x309.png 768w, https://www.webkit.org/wp-content/uploads/Inspectable-Light-1536x619.png 1536w" sizes="(max-width: 2010px) 100vw, 2010px" />

When an app has enabled inspection, it can be inspected from Safari’s Develop menu in the submenu for either the current computer or an attached device. For iOS and iPadOS, you must also have enabled Web Inspector in the Settings app under Safari > Advanced > Web Inspector.

To learn more, read Enabling the Inspection of Web Content in Apps.

WebDriver

When automating Safari 16.4 with safaridriver, we now supports commands for getting elements inside shadow roots, as well as accessibility commands for getting the computed role and label of elements. When adding a cookie with safaridriver, the SameSite attribute is now supported. Improvements have also been made to performing keyboard actions, including better support for modifier keys behind held and support for typing characters represented by multiple code points, including emoji. These improvements make writing cross-browser tests for your website even easier.

Web Inspector

Typography Tooling

Web Inspector in Safari 16.4 adds new typography inspection capabilities in the Fonts details sidebar of the Elements Tab.

Warnings are now shown for synthesized bold and oblique when the rendering engine has to generate these styles for a font that doesn’t provide a suitable style. This may be an indicator that the font file for a declared @font-face was not loaded. Or it may be that the specific value for font-weight or font-style isn’t supported by the used font.

A variable font is a font format that contains instructions on how to generate, from a single file, multiple style variations, such as weight, stretch, slant, optical sizing, and others. Some variable fonts allow for a lot of fine-tuning of their appearance, like the stroke thickness, the ascender height or descender depth, and even the curves or roundness of particular glyphs. These characteristics are expressed as variation axes and they each have a custom value range defined by the type designer.

The Fonts details sidebar now provides interactive controls to adjust values of variation axes exposed by a variable font and see the results live on the inspected page allowing you to get the font style that’s exactly right for you.

Tooling for Conditionals in CSS

The controls under the new User Preference Overrides popover in the Elements Tab allow you to emulate the states of media features like prefers-reduced-motion and prefers-contrast to ensure that the web content you create adapts to the user’s needs. The toggle to emulate the states of prefers-color-scheme, which was previously a standalone button, has moved to this new popover.

The Styles panel of the Elements Tab now allows editing the condition text for @media, @container and @supports CSS rules. This allows you to make adjustments in-context and immediately see the results on the inspected page. Here’s a quick tip: edit the condition of @supports to its inverse, like @supports not (display: grid), to quickly check your progressive enhancement approach to styling and layout.

Badging HTML Elements

New badges for elements in the DOM tree of the Elements Tab join the existing badges for Grid and Flex containers. The new Scroll badge calls out scrollable elements, and the new Events badge provides quick access to the event listeners associated with the element when clicked. And a new Badges toolbar item makes it easy to show just the badges you are interested in and hide others.

And more

Changes to Web Inspector in Safari 16.4 also include:

Safari Web Extensions

Enhancements to Declarative Net Request

Safari is always working on improving support for declarativeNetRequest, the declarative way for web extensions to block and modify network requests. In Safari 16.4, several enhancements have been added to the API:

These enhancements give developers more options to customize their content blocking extensions and provide users with better privacy protection.

SVG Icon Support in Web Extensions

Safari 16.4 now supports SVG images as extension and action icons, giving developers more options for creating high-quality extensions. This support brings Safari in line with Firefox, allowing for consistent experiences across platforms. The ability to scale vector icons appropriately for any device means developers no longer need multiple sizes, simplifying the process of creating polished and professional-looking extensions.

Dynamic Content Scripts

Safari 16.4 introduces support for the new scripting.registerContentScript API, which enables developers to create dynamic content scripts that can be registered, updated, or removed programmatically. This API augments the static content scripts declared in the extension manifest, providing developers with more flexibility in managing content scripts and enabling them to create more advanced features for their extensions.

Toggle Reader Mode

The tabs.toggleReaderMode API has been added to Safari 16.4, which enables extensions to toggle Reader Mode for any tab. This function is particularly useful for extensions that want to enhance the user’s browsing experience by allowing them to focus on the content they want to read. By using this API, developers can create extensions that automate the process of enabling Reader Mode for articles, making it easier and more convenient for users to read online content.

Session Storage

The storage.session API, now supported in Safari 16.4, enables extensions to store data in memory for the duration of the browser session, making it a useful tool for storing data that takes a long time to compute or is needed quickly between non-persistent background page loads. This API is particularly useful for storing sensitive or security-related data, such as decryption keys or authentication tokens, that would be inappropriate to store in local storage. The session storage area is not persisted to disk and is cleared when Safari quits, providing enhanced security and privacy for users.

Background Modules

Developers can now take advantage of modules in background service workers and pages by setting "type": "module" in the background section of the manifest. This allows for more organized and maintainable extension code, making it easier to manage complex codebases. By setting this option, background scripts will be loaded as ES modules, enabling the use of import statements to load dependencies and use the latest JavaScript language features.

Safari Content Blockers

Safari 16.4 has added support for :has() selectors in Safari Content Blocker rules. This is a powerful new addition to the declarative content blocking capabilities of Safari, as it allows developers to select and hide parent elements that contain certain child elements. Its inclusion in Safari Content Blocker rules opens up a whole new range of possibilities for content blocking. Now developers can create more nuanced and precise rules that can target specific parts of a web page, making it easier to block unwanted content while preserving the user’s browsing experience. This is yet another example of Safari’s commitment to providing a secure and private browsing experience for its users while also offering developers the tools they need to create innovative and effective extensions.

New Restrictions in Lockdown Mode

Lockdown Mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.

If a user chooses to enable Lockdown mode on iOS 16.4, iPadOS 16.4, or macOS Ventura 13.3, Safari will now:

More Improvements

Safari 16.4 now supports dark mode for plain text files. It has support for smooth key-driven scrolling on macOS. And it adds prevention of redirects to data: or about: URLs.

Bug Fixes

In addition to the 135 new features, WebKit for Safari 16.4 includes an incredible amount work polishing existing features. We’ve heard from you that you want to know more about the many fixes going into each release of Safari. We’ve done our best to list everything that might be of interest to developers, in this case, 280 of those improvements:

CSS

CSS API

Content Security Policy

Forms

JavaScript

HTML

Intelligent Tracking Prevention

Images

Lockdown Mode

Media

Rendering

Safari Web Extensions

Scrolling

SVG

Tables

Text

Web Animations

Web API

WebGL

Web Inspector

WebDriver

Feedback

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.4. Find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technology or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.4 release notes.

Minutes Telecon 2023-04-05

Source: CSS WG Blog • Dael Jackson • 06 April 2023

Full Meeting Minutes

Minutes Nesting Breakout 2023-04-05

Source: CSS WG Blog • Dael Jackson • 06 April 2023

Full Meeting Minutes

New Recommendation: CSS Box Model Level 3. Updated Working D…

Source: W3C's Cascading Style Sheets home page • 06 April 2023

6 Apr 2023 New Recommendation: CSS Box Model Level 3. Updated Working Draft: CSS Font Loading Level 3. Updated Working Draft: CSS Values and Units Level 4. Updated Working Draft: Scroll-driven Animations.

Updated Working Draft: CSS Positioned Layout Level 3.

Source: W3C's Cascading Style Sheets home page • 03 April 2023

3 Apr 2023 Updated Working Draft: CSS Positioned Layout Level 3.

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