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.
Safari Technology Preview Release 184 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 270234@main…271110@main.
::backdrop
(270246@main)
(117949961)max-content
and
min-content
in a table. (271054@main)
(116264670)content-visibility
to not apply to tables.
(270888@main)
(117914336)nonce
for
<style>
and <link>
. (271046@main)
(118676659)ArrayBuffer.prototype.detached
,
ArrayBuffer.prototype.transfer
, and
ArrayBuffer.prototype.transferToFixedLength
. (270349@main)
(118037759)Temporal.Now.timeZone()
to be updated to
timeZoneId()
. (271003@main)
(118674314)video.buffered
attribute.
(270931@main)
(118550061)id
settings. (270868@main)
(118551267)AbortSignal.any()
. (270268@main)
(117985827)element.checkVisibility()
.
(270425@main)
(118157977)linear()
timing
function. (270855@main)
(115095425)tan()
function to not trigger the color
picker. (271075@main)
(118724061)EXT_clip_control
EXT_depth_clamp
EXT_polygon_offset_clamp
WEBGL_polygon_mode
(270382@main)
(118110035)Safari Technology Preview Release 183 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 269634@main…270233@main.
<summary>
element
role. (270231@main)
(13661104)<textarea>
or contenteditable
fields. (270066@main)
(117114220)<details>
and
<summary>
elements not included in VoiceOver
form controls menu or list. (269643@main)
(117308226)aria-activedescendant
changes. (270182@main)
(117747058)text-wrap: balance
and
text-wrap-style
property. (269680@main)
(117336969)text-decoration-thickness
to support
percentages. (269886@main)
(116985587)aspect-ratio
and definite logical width.
(270098@main)
(117138268)dir=auto
to work for hidden
,
password
, submit
, reset
, and
button
input types, made dirname
work for
password
and submit
input types, and
removed dirname
support from number
input
types. (269711@main)
(113127508)allow-downloads
directive
for frames. (109414664)<link rel="stylesheet" disabled>
to
fully clear the stylesheet. (269753@main)
(114736719)system-ui
font family within
<canvas>
. (117231545)ArrayBuffer.prototype.transfer
.
(269674@main)
(117337535)Number.prototype.toLocaleString
, and
Intl.NumberFormat
) with its current specification.
(269825@main)
(117535507)for
loops.
(269653@main)
(44730906)canplay
event to fire for video elements
where the first sample’s presentation time is slightly greater than
0. (269689@main)
(105169372)getComputedStyle
was incorrect. (269920@main)
(117523629)pointer-events: auto
inside pointer-events: none
. (270094@main)
(110954175)transform-box
is not the view-box
.
(269642@main)
(108285569)strokeContains
optimization.
(269745@main)
(117439322)showPicker()
method to trigger suggestions
from a datalist
. (269981@main)
(116017782)scrollIntoView({ block: 'center' })
. (270160@main)
(117755250)Safari Technology Preview Release 182 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 269058@main…269633@main
white-space-collapse
and
text-wrap-mode
CSS properties. (269613@main)
(117248327)rotate
property when the
scale
property is also used. (269453@main)
(113999490)getComputedStyle()
to return a resolved
value for font-size-adjust: from-font
. (269084@main)
(116151111)content-visibility
. (268840@main)
(116453903)@property
at parse-time.
(269466@main)
(116803886)background-blend-mode
property to return a
comma-separated list. (26932@main)
(116838342)content-visibility
to take forced layout
into account for absolute positioned grid items. (269531@main)
(117214848)@supports selector(:popover-open)
to reflect
disabled state. (269565@main)
(117226626)showPicker()
method for
<input type="date">
. (269257@main)
(110099910)<details>
element name
attribute.
(269127@main)
(116463466)TimeZoneOffset
format support to
Intl.DateTimeFormat
. (269497@main)
(117124296)Map.groupBy
and Object.groupBy
callback arguments. (269456@main)
(117120234)Intl.Collator
‘s
ignorePunctuation
to reflect the queried result.
(269459@main)
(117122647)Intl.NumberFormat
and
Intl.PluralRules
with updated property access ordering
and resolvedOptions key ordering. (269501@main)
(117181500)document.visibilityState
to hidden
when
entering fullscreen. (269150@main)
(104984915)ondataavailable
at every timeslice event. (268433@main)
(115979604)srcObject
is a
video stream. (269403@main)
(116465668)getDisplayMedia
video. (269406@main)
(116810370)object-fit: fill
to work for a video element
using a canvas stream srcObject
. (269568@main)
(116832514)calc()
values on
<colgroup>
elements. (269200@main)
(106692191)overflow: scroll
. (269255@main)
(89598421)stroke-bounding-box
lazily.
(269351@main)
(116852041)Range.getClientRects()
and
Range.getBoundingRect()
for certain ranges. (269271@main)
(112543805)mousedown
event, all
subsequent mouse events are sent to the originating frame until the
drag operation ends with a corresponding mouseup
event. (269370@main)
(116668701)FetchResponse.formData()
to parse headers
names as case insensitive. (269144@main)
(116742000)v128.any_true
. (269080@main)
(111050621)Safari Technology Preview Release 181 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 268060@main…269057@main.
role="treeitem"
elements becoming stale after dynamic
changes. (268385@main)
(115936550)content-visibility
. (268313@main)
(114734606)<position>
to never serialize to a
single value. (268291@main)
(111750372)from-font
value for
font-size-adjust
. (269041@main)
(113328110)<family-name>
to forbid generic
families. (268203@main)
(113746537)border-radius
. (268192@main)
(115316728)at <position>
in
circle()
or ellipse()
if unspecified.
(268344@main)
(115866108)shape-outside
. (268365@main)
(115938310)clip-path
and
offset-path
. (268379@main)
(115953688)circle()
and ellipse()
to use
non-offset starting position for CSS Motion Path. (268400@main)
(115962433)autocomplete
with a
webauthn
token. (268520@main)
(116107937)one-time-code
as an allowed
autocomplete
field name. (268097@main)
(115684196)<meta
name="color-scheme">
value. (268064@main)
(64705222)[dir=auto]
invalidation with password
fields. (268322@main)
(115887776)Promise.withResolvers
. (268892@main)
(116473362)var
bindings. (268634@main)
(116202546)whiteBalanceMode
.
(268102@main)
(115552800)backdrop-filter: blur()
with
mix-blend-mode
to render properly. (268426@main)
(34470317)writing-mode:
vertical-rl
or direction: rtl
. (268157@main)
(102620110)display: none
.
(112494003)margin-trim
behavior for floats to match
specification changes. (268227@main)
(115794102)mask-image
. (268272@main)
(114465545)formAssociated=true
causing a custom element
to become focusable. (268756@main)
(115909679)buttons
property set to zero. (268529@main)
(116049187){"width":1920,"height":1080,"frameRate":24}
. (268386@main)
(61747755)Today we are pleased to share what new in WebKit for Safari 17.1. It’s now available for iOS 17, iPadOS 17, macOS Sonoma, macOS Ventura and macOS Monterey.
Safari 17.1 now brings the new Managed Media Source API to iPhone. Originally shipped in Safari 17.0 for iPad and Mac, Managed Media Source is a power-efficient, low-level toolkit for streaming video.
Watching streaming video is an amazing thing we all do with our devices. But to get the highest-quality video without downloading any unnecessary data and without killing the battery, it takes a complicated stack of technology working under the hood every time you hit the play button. Adaptive bitrate streaming is a technique for switching between media data formats on the fly, depending on the speed of the internet connection and capabilities of the device, even as the conditions change.
For years, many websites have used Media Source Extensions (MSE) to handle adaptive bitrate streaming. It’s a low-level toolkit that gives the web page more control and more responsibility for managing buffering and resolution. But MSE isn’t particularly good at managing buffer levels, network access, and media variant selection. Plus, it uses a lot of power, which can be especially painful on mobile devices with smaller batteries.
Managed Media Source adds the capabilities of MSE, without any
of the drawbacks. We were excited to propose
ManagedMediaSource
to the W3C’s Media Working Group
for formal standardization.
Note that support for Managed Media Source is only available when an AirPlay source alternative is present, or remote playback is explicitly disabled.
const videoSource1 = document.createElement('source');
videoSource1. type = 'video/mp4' ;
videoSource1.src = URL.createObjectURL(mediasource);
video.appendChild(videoSource1) ;
const videoSource2 = document.createElement('source');
videoSource2. type = 'application/x-mpegURL' ;
videoSource2.src = "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
video.appendChild(videoSource2);
Learn all about Managed Media Source API by watching Explore media formats for the web at WWDC23.
Safari 17.1 also adds support for
storage.session.setAccessLevel
and updated
storage.session
to be accessed only
byTRUSTED_CONTEXTS
by default.
WebKit for Safari 17.1 provides multiple bug fixes and feature polish.
<details>
elements on iOS. (109684906)role="row"
elements with display:
contents
to assistive technologies. (115190637)role="treeitem"
elements with display:
contents
who have child text starting with a newline.
(115226509)font-size-adjust
toggling font sizes for
system-ui
font. (111709567)auto none
support for
contain-intrinsic-size
. (112479718)application/x-mpegURL;
codecs="avc1.42E01E"
does not play in Safari.
(113608345)seeked
event. (114594559)display: none
.
(112494003)adoptedStyleSheet
CSSStyleSheet instances when assigning an
adoptedStyleSheet
array. (107768559)ElementInternals.setFormValue(<nullish
value>)
to clear the submission value. (111802198)keyup
is default prevented. (112396756)
(FB12647732)window.postMessage
with OffscreenCanvas with
an isolated world message listener. (112618195)Number.prototype.toLocaleString()
for numeric console
format specifiers. (112170843)If you are running macOS Ventura or macOS Monterey, you can update Safari by going to Software Update, and clicking “More info”. On macOS Ventura, that’s > System Settings > General > Software Update > More info. To get Safari 17.1 on your iPhone or iPad, go to Settings > General > Software Update, and tap to update.
Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features.
We love hearing from you. To share your thoughts on Safari 17.1, find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. Or send a reply on X to @webkit. 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.
You can also find this information in the Safari 17.1 release notes.
The CSS Working Group has published an updated Working Draft of the CSS Text Module Level 4.
This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.
The most notable changes since last publication are:
text-wrap
property has been recast as a
shorthand of two new properties, text-wrap-mode
and
text-wrap-style
, and made text-wrap-mode
rather than text-wrap
a longhand of the
white-space
property. We call on
implementations, particularly those that shipped text-wrap:
balance
, to be updated to match this new shorthand and
longhand relationship.word-boundary-detection
property has been
retired; phrase based line breaking is now controlled by
word-break: auto-phrase
, and phrase-based space
insertion by the auto-phrase
value of the
word-space-transform
property.Changes since the last Working Draft are listed in the Changes section.
Please send feedback by either filing an issue in
GitHub (preferable) or sending mail to the (archived)
public mailing list
www-style@w3.org with the spec code ([css-text-4]
)
and your comment topic in the subject line. (Alternatively, you can
email one of the editors and ask them to forward your comment.)
Responsive design is a well-established practice of creating designs that adapt to different screen sizes. Gone are the days when you could create a new website designed for one screen size. Today’s devices are a menagerie of resolutions, from screens that fit on your wrist to the one you hold in your hand or rest on your lap, and even virtual screens that wrap around your entire field of vision.
There are so many screen sizes today that it’s made designing to a specific set of resolutions almost meaningless. Instead, we’re using powerful modern layout tools like Container Queries, Grid, and Flexbox to create fluid layouts so that designs can adapt to any screen size.
Creating resilient, adaptive designs requires tools that help you quickly explore your layouts in every resolution. Responsive Design Mode in Safari does just that. It gives you a fast preview of how your web page layout adapts to different viewport dimensions and aspect ratios in real time.
As part of the suite of developer tools, Responsive Design Mode is available when you enable Show features for web developers in Safari’s Advanced settings. Once enabled, you can jump into Responsive Design Mode for the currently focused tab or window by choosing Enter Response Design Mode from the Develop menu or pressing Command-Control-R (⌃⌘R).
With its streamlined design in Safari 17, Responsive Design Mode makes it faster and easier to test your designs.
Notably, the row of device and window icons is gone, helping you focus on creating adaptive designs that fluidly respond to any screen size as the web moves away from rigid, resolution-specific designs.
Resizing is as easy as clicking the “handles” at any side of the viewport preview and dragging them to any size. You can watch the dimensions of the viewport change in the size display shown in screen point units at the upper-left.
You can even test viewport sizes beyond the size of the display you’re actively using. Keep dragging the handles, and the preview fluidly scales, showing the zoom level as a percentage of the actual size of the viewport. At 100%, each pixel of web content is visible in the preview. When the viewport grows to a size larger than the window size of Safari, the zoom level decreases, indicating the preview is scaled down to fit the available space in the window.
Another dimension of screen size designers need to consider today is the pixel density of screens. Pixels have gotten much smaller on modern devices, affecting the pixel-based assets in your designs, like interface icons, photos, or videos. A menu next to the effective viewport dimension allows you to change the pixel ratio used in the preview. The 1x, 2x, and 3x settings help you test all the assets you went the extra mile to prepare to give your users the best experience regardless of their device capabilities.
Instead of generating each asset by hand, many folks opt to
configure their build tools to automatically resize assets for the
srcset
attribute on image elements or the
image-set()
function in CSS to set the pixel ratio for
a background-image
.
<img src="image_1x.jpg" srcset="image_2x.jpg 2x, image_3x.jpg 3x">
<style>
body {
background-image: image-set("background_1x.jpg" 1x, "background_2x.jpg" 2x);
}
</style>
Here, the pixel ratio control helps you ensure your tooling is configured correctly to generate all the needed assets.
In CSS you can use media queries to apply styles based on the pixel ratio of the display. For instance, you can set thinner lines on a 2x display:
@media (min-resolution: 2dppx) {
.dividerLine {
border: 0.5px solid grey;
}
}
The pixel ratio control also allows you to test those styles.
Responsive Design Mode shows you a good approximation of how your web page layout will be affected by viewport sizes. But iOS, iPadOS, watchOS, and visionOS have different rendering behaviors optimized to their form factors that are necessarily different than macOS.
Fast, real-time feedback is what makes Responsive Design Mode so helpful, but it comes with a tradeoff in accuracy. It’s a familiar problem in technology. For example, Xcode offers SwiftUI developers a preview mode that allows them to see the interfaces their code generates and even lets them interact with the interface in a limited capacity. But the complete experience requires building the project to see the result run in a simulator or on an actual device.
So now, it’s easy to jump into device simulators to try your site designs with the same full-fidelity experience as an actual device.
Responsive Design Mode offers a new Open with Simulator menu for quickly jumping into an Xcode device simulator for the current web page. It shows a list of suggested simulators, but many more are available than what’s listed. You’ll need to download and install Xcode from the App Store for free to run simulators. Selecting the Add simulators… option from the Open with Simulator menu will open a new tab in Safari with instructions on adding more simulators.
To get a more accurate idea of how your web pages will behave in those environments, you can use simulators without needing access to the devices themselves.
Responsive Design Mode becomes an even more powerful tool when combined with Web Inspector. It allows you to find the source of layout issues while resizing the page or adjusting the pixel ratio. With developer features enabled, select Show Web Inspector from the Develop menu or press Command-Option-I (⌥⌘I).
When debugging narrow viewport sizes, you might find it helpful to click the Dock to left or Dock to right button in Web Inspector to put it side-by-side with the preview viewport.
The updated Responsive Design Mode distills the tools to the essentials for quickly assessing the layout of your web pages at any screen size. It gives you at a glance access to layout issues and accelerates testing your pages in a variety of device-accurate simulators.
We love to hearing from you. Send a tweet to @webkit to share your thoughts Responsive Design Mode. 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 like Responsive Design Mode, or your WebKit bug report about web technologies or Web Inspector. Reporting issues makes an enormouse difference.
Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features.
The primary strength of the web is that it works everywhere. It doesn’t matter which type of device, which operating system, or which browser a user has… the web is the web. And it just works — or at least it should.
To make this vision a reality, web developers strive to make sure the sites they are building work in every browser, on every device. There are an unknowable number of permutations of screen sizes, device capabilities, accessibility accommodations, software versions, browser support for features, and more. Everyone using the web has wildly-different configurations. And that’s ok. That’s the beauty of the web. It’s designed to handle such variety. By using feature detection and progressive enhancement techniques, you support everyone. You structure your code so that it gracefully falls back when a browser/device doesn’t support something, or when the user personally can’t or doesn’t want to use that support.
The other responsible party? The browsers. It’s often ok when browsers haven’t had a chance yet to implement all of the brand-new technologies — but to make a web that works everywhere, when a browser does implement something new, they need to do so in a fashion that’s the same as other implementations.
How in the world is it possible for all the browser engines to have identical interoperable implementations?
Web standards.
A web standard is an official technical document detailing everything a browser engineer needs to know to be able to implement a particular web technology. Web standards are written in industry organizations where dozens of companies come together to discuss, debate, and improve ideas, until they agree through a formal consensus-driven process. Such organizations include the W3C, WHATWG, TC39, IETF, and the Khronos Group.
The success of interoperability is dependent on browser-makers maintaining a commitment to implement according to mature, official web standards. It can be hard to progressively-enhance around rogue, buggy or incorrect implementations.
The Interop project from Web Platform Tests is an effort by Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla to collectively focus on improving the interoperability of specific technologies which are of the highest priority to web developers. Interop 2023 evaluated 26 focus areas. Automated tests were chosen to assess the correctness of implementations.
The Interop 2023 dashboard displays the current results for each browser — both the “experimental” browsers (Safari Technology Preview, Firefox Nightly, and Chrome Dev), and the “stable” browsers (the versions in the hands of everyday users).
At the beginning of 2023, just 48% of these tests passed in all three engines (stable versions). Nine months later, 75% of the tests pass in all stable browsers, and 87% of the tests pass in all experimental browsers (hinting at the near future). It’s an amazing improvement.
So which technologies will be chosen for Interop 2024? Well, this is where you come in.
From now through October 5 [update: extended to October
7], anyone can submit a proposal asking that a particular
technology that’s already been defined in a web standard be
included in next year’s Interop project.
Which new web technologies are most desired by developers? How can browsers support those needs by implementing them sooner rather than later? What incomplete implementations are getting in the way, keeping developers from making websites that work everywhere? Which bugs are causing the most problems? What tests can we use to find those bugs and squash them?
To submit, first read the requirements and guidance for Focus Area proposals so you will have the highest likelihood of success. Once you’ve gathered all the needed information, file an issue on GitHub. The proposal submission period ends Saturday, October 7, 2023.
Do be sure to take the time to fill out all the fields. Tracking down the current state of implementations, assessing the test coverage, and finding evidence of developer demand makes for a much stronger proposal. Make your case!
So far, over 80 proposals have been filed. CSS Nesting, the
popover
attribute in HTML, and the JPEG XL image
format are just some of what’s been proposed. Feel free to read
through the
list of proposals and add your comments. If you agree something
should be included, leave a comment to strengthen its case by
adding more evidence of why it’s a high priority. Proposals can be
refined through Thursday, October 12, 2023.
There will certainly be too many good proposals, and the group planning Interop 2024 will have to make some tough calls — favoring the items that are of highest priority to developers, and are possible to both test and accomplish. By participating, you can help us know what’s most important to you.
Do you have an idea for new technology that would be great to add to the web, but that has not already gone through the web standards process? Such ideas cannot be included in Interop 2024. The Interop project is not the right venue to create new web standards. Those ideas should be proposed to the CSS Working Group, the WHAT Working Group for HTML, TC39 for JavaScript, or any of the many other working groups inventing the web.
Also, in order for automated tests to be used to evaluate success in implementing current web standards, there has to be a mechanism to test the technologies being proposed. The currently-available testing infrastructure only tests desktop versions of browsers, on one-or-two year old versions of operating systems. That sometimes means a particular technology cannot be properly tested. There is work ongoing to improve the testing infrastructure, so hopefully in the future more can be included.
Tests are incredibly important, too. It’s rare that the tests are perfect. Often they don’t cover important areas of the web standard, or the tests themselves were written without a correct understanding of what the web standard intends. Help writing or updating tests is welcome.
Once all the proposals are in, the group organizing Interop 2024 will make its decisions about what to include. And we’ll be announcing what’s in the project next year. Stay tuned!
Safari Technology Preview Release 180 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 267603@main…268059@main.
role
attribute to ignore
leading and trailing whitespace, including line breaks. (267930@main)role="row"
elements with display:
contents
to assistive technologies. (267838@main)role="treeitem"
elements with display:
contents
who have child text starting with a newline.
(267839@main)rect()
shape for
shape-outside
, clip-path
, and
offset-path
. (267863@main):has(:scope)
matching. (267856@main):has(:is(...))
selectors. (268038@main)backface-visibility
to create a stacking
context and containing block. (267980@main):has(~ :is(.x ~ .y))
to consider all
siblings of the :has
scope when invalidating.
(267932@main):default
pseudo-class changes
on input elements. (267848@main)calc(clamp(1px, 1em, 1vh))
to collapse to
clamp(1px, 1em, 1vh)
. (267840@main)grid-area
. (268026@main)auto
value from
alignment-baseline
. (268008@main)CanDeclareGlobalFunction
abstract operation and related implementations. (267655@main)HasVarDeclaration
abstract
operation. (267891@main)color-scheme
to support discrete animation.
(267750@main)Request
‘s
referrer
feature and Response.redirect()
.
They now always use UTF-8. (267841@main)Safari Technology Preview Release 179 is now available for download for macOS Sonoma beta and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 266624@main…267815@main.
mask-border
properties.
(267460@main)cap
unit. (267315@main)<position>
parameter
in ray()
. (267459@main)xywh()
shape. (267789@main)offset-position: normal
for CSS
Motion Path. (267657@main)rcap
, rex
,
ric
, and rch
units. (267321@main)coord-box
parameter in
ray()
. (267566@main)offset-position
support for
circle()
and ellipse()
. (267810@main)font-family
descriptor for
@font-palette-values
to accept multiple values.
(267411@main)@imports
in HTML getting mistakenly
hidden from the CSS preload scanner when missing a semi-colon and
space. (267322@main):nth-child()
invalidation when not in
subject position. (267600@main):has(:host)
invalidation. (267773@main):has(:nth-child())
invalidation and related.
(267771@main)@property
initial value. (267590@main)<basic-shape>
implementation for
offset-path
. (267556@main)<coord-box>
implementation for
offset-path
. (267524@main)&
and an implicit nested rule. (267531@main)color-mix()
. (267596@main)ray()
used with
motion-path
. (267479@main):slotted()
. (267326@main)<integer>
type to round
half towards positive infinity. (267339@main):host
pseudo-class in non-subject position. (267355@main)::part
pseudo-element
to be selected from the originating element tree. (267421@main)infinity
and
-infinity
in colors. (267544@main)lab
, lch
, oklab
,
oklch
components to be clamped to appropriate ranges.
(267555@main)coord-box
to use border-radius
for CSS Motion Path. (267613@main)color-mix()
to not serialize to legacy color
syntax. (267626@main)name
attribute in the
<details>
element. (267756@main)<input type="number">
not returning
the correct value when a decimal is entered. (267581@main)<base>
elements.
(267498@main)<base>
elements.
(267585@main)<image>
elements.
(267593@main)NaN
in audio delay curves.
(267589@main)<image crossorigin>
.
(267349@main)color-scheme
to support discrete animation.
(267750@main)window.clientInformation
in
terms of window.navigator
. (267625@main)NaN
when creating a DelayNode
for WebAudio. (267650@main)element.querySelector(":has(:scope *)")
to
never match. (267809@main)HTMLMediaElement.webkitHasClosedCaptions
and HTMLMediaElement.webkitClosedCaptionsVisible
.
(267780@main)steps()
timing function. (267484@main)EXT_blend_func_extended
.
(267775@main)WEBGL_clip_cull_distance
by
default. (267795@main)You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”.
What does this mean? It means you no longer have to worry about whether or not each nested selector starts with a symbol. It means that now nested CSS like this will work just fine:
article {
h1 {
font-size: 1.8rem;
}
p {
font-size: 1.2rem;
}
}
(If you didn’t realize there was a previous limitation and are curious about what it was, you can read about it in Try out CSS Nesting today, from Feb 2023. But also, you can ignore this limitation since it’s going away soon.)
This is fantastic news. After many months of debates over how CSS Nesting could work, we ended up with the best possible solution. In the end, browser engineers figured out how to make the parsing engine handle nested type selectors (element selectors).
How is browser support? In late August 2023, Firefox 117 shipped support for Nesting using the relaxed parsing behavior from the beginning. Safari 16.5 shipped the original version of Nesting in May 2023, and Safari Technology Preview 179 brought the update to the relaxed parsing behavior in September 2023. Chrome is tracking their coming update in this issue.
By the way, any code written with an &
will
continue to work. In fact, &
is an important tool
for CSS like this:
ul {
padding-left: 1em;
article & {
padding-left: 0;
}
}
Which is the equivalent of:
ul {
padding-left: 1em;
}
article ul {
padding-left: 0;
}
The &
gives you a way to say “this is where I
want the nested selector to go”. It still does the same job, it’s
simply no longer required before an element selector.
There is one more thing about CSS Nesting that’s still up for debate. We still have time to make the change if we do so very soon.
Let us ask you a question. If you wrote this nested CSS, which color would you want the article text to be?
article {
color: blue;
@supports (text-shadow: 0 0) {
color: red;
}
color: yellow;
}
Do you want it to result in this unnested equivalent, Option 1,
where color: red
wins?
article {
color: blue;
color: yellow;
}
@supports (text-shadow: 0 0) {
article {
color: red;
}
}
Or do you want it be computed to be this equivalent, Option 2,
where color: yellow
wins?
article {
color: blue;
}
@supports (text-shadow: 0 0) {
article {
color: red;
}
}
article {
color: yellow;
}
Currently, the Nesting specification says Option 1 is correct, and so that’s how it’s implemented in browsers. This is how all of the preprocessors work: Less (demo), Sass (demo), Stylus (demo), PostCSS (demo), and more. Perhaps matching over fifteen years of third-party tooling is the best way to go.
But many people find this to be an unexpected gotcha, since it seemingly reorders styles. It makes something that’s earlier in the cascade override something that’s later in the cascade. These folks expect Option 2 to be how it works, where the fundamentals of the cascade stay fully intact — when two declarations have the same specificity, the later one always wins.
We ran a survey to find out what you want. The results were remarkable consistent across the first 48 hours.
Option 1: 38%
Option 2: 62%
Your input helps the CSS Working Group make a final decision on how code like this should work. It’s still not fully clear if Option 2 is possible, but before embarking on a deeper effort to find out, it helps to know what web developers want.
Thanks for participating!
Safari Technology Preview Release 178 is now available for download for macOS Sonoma beta and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.
This release includes WebKit changes between: 266624@main…267312@main.
counter-set
property (267137@main)<resolution>
to not accept negative
resolutions for @property
(267134@main)currentcolor
to correctly inherit computed
:visited
style (267139@main)color-mix()
to respect :visited
style to resolve “currentcolor” (267271@main)border-image
to fall back to the
border
property if the image is invalid (266749@main)scripting
media query to never match
initial-only
(267198@main)font-size-adjust
toggling font sizes for
system-ui
font (266771@main):user-invalid
and :user-valid
interactions with form reset and submission (266702@main)container-name
to use scoped names (267163@main)import
attributes (266957@main)Intl.NumberFormat
‘s
FormatApproximately operation (266645@main)Intl.DurationFormat
digital’s default from
narrow to short (266891@main)minimumFractionDigits
and
maximumFractionDigits
limit from 20 to 100 (266879@main)Intl.DateTimeFormat
‘s to obtain options
only once, matching spec changes (266868@main)Intl.NumberFormat
and
Intl.PluralRules
roundingIncrement
handling (267123@main)translate
for
animateTransform
(266758@main)paint-order
property to inherit (267002@main)innerHTML
and
innerText
changes to labels did not update their
corresponding input element’s accessibility title (266919@main)<link
rel=preload>
(266787@main)change
event for the Cookie Store API
(266850@main)from-image
to ImageBitmapOptions
(266893@main)_blank
if they
have dangling markup (267154@main)ServiceWorkerRegistration
data deletion
(266882@main)ToggleEvent
for
toggle events (267076@main)SpeechSynthesisUtterance
to not get GC’ed if
there is a pending event (267161@main)SVGImageElement
in
createImageBitmap
(267218@main)<a>
and <area>
origin getters to return an empty string for non-parsable URLs
(267222@main)<a>
and <area>
protocol setters for non-parsable URLs (267265@main)webglcontextchanged
event (266861@main)Level 2 (currently written as a delta specification, since Level 1 is not complete) introduces two new features:
It also improves integration with Web Animations and defines a
new
interface and other rules for that integration.
Changes since the last Working Draft are listed in the Changes section.
Please send feedback by either filing an issue in
GitHub (preferable) or sending mail to the (archived)
public mailing list
www-style@w3.org with the spec code
([css-transitions-2]
) and your comment topic in the
subject line. (Alternatively, you can email one of the editors and
ask them to forward your comment.)
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.