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.
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.
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.
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.
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.
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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 on the web now supports pre-orders and deferred payments.
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.
WebKit for Safari 16.5 provides multiple bug fixes and feature polish.
x
resolution unit in
calc()
.block-start
,
block-end
, inline-start
, and
inline-end
margins for grid or flex items in computed
styles.block-end
margin trim.margin-trim
value.column-count
above 2 not updating
the layout.use
element’s shadow tree.-webkit-image-set()
an alias of
image-set()
.accept="image/*"
.Intl.DurationFormat
to
match spec changes.CodecDelay
value that caused an audible pop at the
beginning of video playback.content: counter()
when
position: absolute
is set.transform
animation when !important
style
overrides the animated value.getFileHandle()
to return a
TypeMismatchError on unexpected entry type.color-mix
CSS
values.::backdrop
rules showing up without
a backdrop.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.
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.
Learn about the latest web technology updates in Safari Technology Preview: CSS, Layout, JavaScript, Media, Popover, and Accessibility.
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.
:dir
pseudo-class to invalidate after
removing dir
content attribute from the document
element (263357@main)block-end
(263439@main)block-end
margins for block
containers to be reflected in the computed style in a horizontal
writing mode (263398@main)block-start
edge to have their
trimmed margins reflected in the computed style (263412@main)hypot()
function sometimes returning
the result squared (263351@main)<meter>
and
<progress>
elements (263473@main)text-overflow: ellipsis
truncating the text
incorrectly in right-to-left (263418@main)Reflect.ownKeys()
and
Object.getOwnPropertySymbols()
(263441@main)Object.assign
with empty object
(263444@main)beforetoggle
event (263449@main)aria-flowto
for display:
contents
elements (263425@main)display: contents
elements never returning
any selected AX children despite having them (263339@main)display: contents
elements that rely on labels or
captions (263379@main)tabindex
attribute is set (263527@main)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.
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.
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.
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.
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.
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.
overflow-block
and
overflow-inline
media query features (263088@main)from-font
value for
font-size-adjust
(262800@main)background-size
to not accept unit-less
lengths (262873@main)flex-item
inside
inline-flex
with column flex-direction
(263001@main)text-emphasis
marks to not render if there
is no emphasized character (262997@main)block-start
, block-end
,
inline-end
, and inline-start
margins for
grid items in horizontal writing-mode (262967@main, 263002@main, 263008@main, 263006@main)enumerator_put_by_val
(263056@main)Array#join
‘s toString
operation for Objects (263117@main):open
to :popover-open
and
removed :closed
(262764@main)clip-path
sometimes being broken (263087@main)aria-activedescendant
to work for
display: contents
elements (263163@main)aria-grabbed
and
aria-dropeffects
to work for display:
contents
elements (263249@main)speak-as
, AXAccessKey,
aria-owns
, and URL AX APIs to work for display:
contents
elements (263205@main)isSelected
AX APIs for some types of
display: contents
elements (263014@main)display:
contents
list items (262889@main)aria-activedescendant
to set the active cell within a
grid (263189@main)display: contents
links and headings (263287@main)facingMode
is unknown
to be selected by getUserMedia if there is no
facingMode
constraint (263022@main)<audio>
element counter-scaling
causing overlapping media elements when page scale is less than 1
(262952@main)customElements.getName
method (263281@main)data:
URL base64 handling to always match
atob() (262976@main)postMessage
support to occur when creating
service worker clients (262818@main)contenteditable
(262914@main)window.open
from an iframe not exiting
fullscreen for parent document (263284@main)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 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.
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.
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:
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.
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.
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.
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.
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.
text-transform
with multiple
values (261419@main)shape-outside
Shapes (261331@main)&
selector for CSS
Nesting (261739@main)counter()
with
@counter-style
(261985@main)@imports
in HTML missing quote marks
getting mistakenly hidden from the Preload Scanner (261254@main)CSSFilter
geometry and
clipping (261827@main)border-image-repeat: round
to match other
browsers (261903@main)block-end
boxes in
block container and adjust the position of self-collapsing children
(261750@main)v
flag and fix issues found (261746@main)v
flag and fix issues
found (261714@main)Function.prototype.bind
(261825@main)Function#bind
(261993@main)anyref
behind flag (261711@main)cast
operations behind flag (261445@main)eqref
and ref.eq
behind
flag (261663@main)readyState
to change back to
HAVE_METADATA
when removing a sample at the current
playtime (261955@main)SourceBuffer.buffered
to return the same
object if it’s not modified (261848@main)readyState
incorrectly switching
between HAVE_CURRENT_DATA
and
HAVE_METADATA
(262112@main)element.togglePopover()
more interoperable
(261386@main,
261436@main)popovertarget
&
popovertargetaction
attributes (261346@main)dialog.show()
on
an open popover (261351@main)margin-top
getting ignored on elements with
zero-height (and clear set) if they appear after floating elements
(261926@main)allow=payment
attribute (262616@main)range.extractContents()
to abort early if
there’s a doctype
in the range (261342@main)<summary>
element not focusable
with tabindex
(261497@main)multiple
state
<select>
element to single
state
(261380@main)Cross-Origin-Embedder-Policy
incorrectly
blocking iframes on cache hit (261924@main)Response.json
static method
(261960@main)code
ARIA role (261640@main)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.
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.
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.
@supports font-format()
(262305@main)font-size-adjust
(262309@main,
262374@main)insertRule()
on StyleRule
(262394@main)color()
function parsing to reject missing
components (262098@main)cursor: pointer
on unclickable
<area>
(262559@main)::after
with
transform-style: preserve-3d
and a negative
z-index
(262728@main)content: counter()
not updating visually if
position: absolute
is set (262269@main)@supports
rule
(262308@main)@counter-style
to stop allowing redefining
certain predefined styles (262038@main)@counter-style
extends
system
to always extend first symbol for fixed system (262264@main)margin-trim
style
change (262423@main)block-start
, block-end
,
inline-start
, and inline-end
margins for
flex items in horizontal writing mode to reflect in computed style
(262700@main,
262081@main,
262663@main,
262708@main)block
to
inline-block
(262042@main)vertical-align
correctness (262506@main)display: flex
not getting
repainted on a content change (262674@main)display: flex
(262341@main)!important
style overrides the animated value
(262327@main)Wasm::Callee
(262191@main)Intl.DurationFormat
(262682@main)event.preventDefault()
to not cancel popover
light dismiss (262283@main)popover
attribute during
beforetoggle
when showing a popover to throw an
exception (262026@main)URL.canParse()
(262072@main)</body>
placed at
the bottom of the <body>
contents (262222@main)<
, >
,
&
, and nbsp
inside
noembed
, noframes
, iframe
and plaintext
(262285@main)javascript:
URLs (262267@main)Content-Type
in Fetch (262583@main)aria-labelledby
description (262433@main)aria-owns
attribute for the radio role
(262566@main)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.
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.
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.
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
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?
2023 Web Framework Performance Report
Does framework choice influence a site’s Core Web Vitals?
How related is framework choice to JavaScript payload size, and what is the impact?
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
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.
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.
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.
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.
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 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.
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.
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.
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;
}
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.
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.
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.
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.
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.
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)) {
...
}
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.
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
.
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
.
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.
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.
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:
Array.fromAsync
Array#group
and Array#groupToMap
Atomics.waitAsync
import.meta.resolve()
Intl.DurationFormat
String#isWellFormed
and
String#toWellFormed
Symbols
in WeakMap
and
WeakSet
Safari 16.4 adds support for quite a few new Web API. We prioritized the features you’ve told us you need most.
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.
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.
Along with the Fullscreen API we’ve added preliminary support for Screen Orientation API in Safari 16.4, including:
ScreenOrientation.prototype.type
returns the
screen’s current orientation.ScreenOrientation.prototype.angle
returns the
screen’s current orientation angle.ScreenOrientation.prototype.onchange
event
handler, which fires whenever the screen changes orientation.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).
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 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 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 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.
Safari 16.4 also includes many other new Web API features, including:
gamepad.vibrationActuator
autocomplete
attributeisComposing
attribute on InputEventServerTiming
and
PerformanceResourceTiming
KeyframeEffect.iterationComposite
WEBGL_clip_cull_distance
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:
trackIdentifier
stat
fieldWKPreferences
, 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.
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.
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.
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 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.
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.
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.
Changes to Web Inspector in Safari 16.4 also include:
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:
declarativeNetRequest.setExtensionActionOptions
API
can be used to configure whether to automatically display the
action count (number of blocked loads, etc.) as the extension’s
badge text.modifyHeaders
action type has been added to
rewrite request and response headers. This action requires granted
website permissions for the affected domains and the
declarativeNetRequestWithHostAccess
permission in the
manifest.redirect
action type now requires the
declarativeNetRequestWithHostAccess
permission in the
manifest.requestDomains
condition has been added to
only match requests when the domain matches one from the array. If
the condition is omitted, the rule is applied to requests from all
domains.MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES
property has been added to check the maximum number of combined
dynamic and session rules an extension can add. The current limit
is set at 5,000 rules.These enhancements give developers more options to customize their content blocking extensions and provide users with better privacy protection.
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.
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.
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.
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.
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 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.
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:
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.
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:
-webkit-mask-box-image: initial
to set the
correct initial value.-webkit-radial-gradient
parsing accidentally
treating several mandatory commas as optional.::placeholder
to not support
writing-mode
, direction
, or
text-orientation.
@supports
to not work if not
,
or
, or and
isn’t followed by a
space.background-repeat
not getting correctly
exposed through inline styles.baseline-shift
to allow length or
percentage, but not numbers.contain: inline-size
for replaced
elements.CSSPerspective.toMatrix()
to throw a
TypeError if its length is incompatible with the px
unit.cx
, cy
, x
, and
y
CSS properties to allow length or percentage, but
not numbers.filter: blur
on an absolutely positioned
image losing overflow: hidden
.font-face
to accept ranges in reverse order,
and reverse them for computed styles.font-style: oblique
must allow angles equal
to 90deg or -90deg.font-style: oblique
with calc()
to allow out-of-range angles and clamp them for computed
style.font-weight
to clamp to 1 as a minimum.font
shorthand to reject out-of-range angles
for font-style
.font
shorthand to reset more longhand
properties.overflow-x: clip
causing a sibling image to
not load.overflow: clip
not working on SVG
elements.stroke-dasharray
parsing to align with
standards.stroke-width
and
stroke-dashoffset
parsing to align with
standards.text-decoration-thickness
property not
repainting when changed.calc()
that combines percentages
and lengths for line-height
.box-sizing: border-box
causes the calculated aspect-ratio to create negative content
sizes.rem
or
rlh
units to grow to a larger size.cursor: auto
over links.writing-mode
.perspective
calc()
values to 0.<fieldset>
element with
aspect-ratio
applied.:nth-child()
selector lists.normal
value for
line-height
from the font
shorthand in
the specified style, not just the computed style.:nth-of-type
or :nth-last-of-type
.contain
.word-break: keep-all
is set.<string>
as an unprefixed
keyframe name.:has()
pseudo-selector parsing to be
unforgiving.font-face
src
descriptor
format to allow only specified formats, others are a parse
error.tz
component not accounting for zoom
when creating a matrix3d
() value.stroke-dasharray
to
be in px
.text-shadow
used with
text-combine-upright
.abbr
, acronym
, marquee
, and
fieldset
with HTML specifications.font-stretch
, never keywords.of
and the
selector list in :nth-child
or
:nth-last-child
.CSS.supports
returning false for custom
properties.CSS.supports
whitespace handling with
!important
.CSS.supports("selector(...)")
.getComputedStyle()
to return a function list
for the transform property.linear-gradient
keyword values not getting
converted to their rgb()
equivalents for
getComputedStyle()
.<input type="submit">
, <input
type="reset">,
and <input
type="button">
to honor font-size
,
padding
, height
, and work with multi-line
values.change
event for <input
type="file">
when a different file with the same name is
selected.<fieldset>
element from getting focus.:out-of-range
pseudo class matching for
empty input[type=number]
.Array.prototype.indexOf
constant-folding to
account for a non-numeric index.Intl.NumberFormat
useGrouping
handling to match updated specs.Intl.NumberFormat
ignoring
maximumFractionDigits
with compact notation.String.prototype.includes
incorrectly
returning false when the string is empty and the position is past
end of the string.toLocaleLowerCase
and
toLocaleUpperCase
to throw an exception on an empty
string.<body link vlink
alink>
to follow standards.<legend>
to accept more
display
property values than display:
block
.enumerateDevices
may return filtered devices
even if page is capturing.MediaRecorder.stop()
firing an additional
dataavailable
event with bytes after
MediaRecorder.pause()
.timeupdate
events.<source>
element for AirPlay when necessary.audioinput
is disconnected.<div>
with border-radius
not painted correctly while using jQuery’s
.slideToggle()
.border-radius
clipping on composited
layers.box-shadow
to paint correctly on inline
elements.Zero Width
Joiner
, Zero Width Non-Joner
, or Zero
Width No-Break Space
.nowrap
on <td
nowrap="nowrap">
when an absolute width is
specified.border-radius
values.unlimitedStorage
permission no longer need to also request
storage
.browser.declarativeNetRequest
namespace is
now available when an extension has the
declarativeNetRequestWithHostAccess
permission.isUrlFilterCaseSensitive
declarativeNetRequest
rule condition to be
false
by default.tabs.onUpdated
getting called on tabs that
were already closed.declarativeNetRequest
errors not appearing
correctly in the extension’s pane of Safari Settings.declarativeNetRequest
rules not loading when
an extension is turned off and then on.getMatchedRules()
to match other
browsers.browser.webNavigation
events firing for
hosts where the extension did not have access.browser.commands
when there are multiple commands
without keyboard shortcuts assigned.overscroll-behavior: none
to prevent
overscroll when the page is too small to scroll.<svg:text>
to not auto-wrap.preserveAspectRatio
to stop accepting
defer
.SVG.currentScale
to only set the page zoom
for a standalone SVG.svgElement.setCurrentTime
to restrict floats
to finite values.fill
with
currentColor
to other colors via CSS.filter
property getting
ignored.<svg:a>
.repeatDur
is
not a multiple of dur
.baseline-shift
CSS property use px
unit
for lengths.display: table-cell
,
display: inline-table
, display: table
,
and float: none
on table cell elements when in quirks
mode.font-optical-sizing: auto
having no effect
in Safari 16.<bdi>
and
<input>
elements to align with HTML
specifications.dir
attribute to not
affect directionality.20deg
to
14deg
.<bdo>
.@font-palette-values
override-colors
are applied.@keyframes
rules using an
inherit
value to update the resolved value when the
parent style changes.Animation.commitStyles()
triggering a
mutation even when the styles are unchanged.Animation.startTime
and
Animation.currentTime
setters support for CSSNumberish
values.baseline-shift
animation.baselineShift
inherited changes.commitStyles()
failing to commit a relative
line-height
value.getKeyframes()
serialization of CSS values
for an onkeyframe
sequence.rotate: x
and transform:
rotate(x)
to yield the same behavior with SVGs.word-spacing
to support animating between
percentage and fixed values."none"
.filter
property.filter
property.iterationComposite
.accumulate
.iterationComposite
.keyTimes
index correctly for
discrete values animations.url()
should
animate discretely.iterationComposite
into account.bolder
or
lighter
is used on a font-weight
property.inherit
.inherit
.currentcolor
value is used on a custom property.currentcolor
value is used.from
and
to
keyframes with
iterationComposite
.iterationComposite
should invalidate
the effect.transition-property
to
none
does not disassociate the CSS Transition from
owning the element."replace"
.-webkit-user-select: none
allowing text to
be copied to clipboard.contentEditable
caret getting left aligned
instead of centered when the :before
pseudo-element is
used.Cross-Origin-Embedder-Policy
incorrectly
blocking scripts on cache hit.CSSRule.type
to not return values greater
than 15.document.open()
to abort all loads when the
document is navigating.document.open()
to remove the initial
about:blank
-ness of the document.Element.querySelectorAll
not obeying element
scope with ID.FileSystemSyncAccessHandle
write operation
to be quota protected.getBoundingClientRect()
returning the wrong
value for <tr>
, <td>
, and its
descendants for a vertical table.HTMLOutputElement.htmlFor
to make it
settable.queryCommandValue("stylewithcss")
to always
return an empty string.StorageEvent.initStorageEvent()
to align
with HTML specifications.textContent
leaving dir=auto content in the
wrong direction.-webkit-user-select: initial
content within
-webkit-user-select: none
should be copiedWorkerGlobalScope.isSecureContext
to be
based on the owner’s top URL, not the owner’s URL.mousedown
without
mouseup
in a frame prevents a click event in another
frame.image/jpg
for compatibility.dir="auto"
.contenteditable
element.<fieldset>
elements
sometimes incorrectly matching :valid
or
:invalid
selectors.-webkit-user-select:
none
node can begin selection in another node.importScripts()
.innerHTML
and outerHTML
.onerror
content attribute on
body and frameset elements.<body>
and <frameset>
elements.shadowRootMode
attribute.document.styleSheets
.contenteditable
elements.srcset
candidate chosen for
<img>
cloned from
<template>
.X-Frame-Options
HTTP
headers with an empty value.load
or error
event.Content-Type
header
on a 303 HTTP redirect.movementX
and
movementY
.progress
event when
reading an empty file or blob using the FileReader API.setRequestHeader()
when there is an existing
session.style=""
to destroy the element’s
inline style.tabIndex
of a non-focusable
HTMLElement.color-scheme
values.event.keyIdentifier
value for F10 and
F11 keys.transform
property with SkewY
.click()
.precision="float"
attribute on
<input type="range">
.queueMicrotask
.<style>
is added to the page.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.
resolution
values are
invalid (Issue #8532:
Specify argument range for resolution)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.