惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园_首页
博客园 - 司徒正美
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
C
Check Point Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Hugging Face - Blog
Hugging Face - Blog
B
Blog RSS Feed
阮一峰的网络日志
阮一峰的网络日志
D
DataBreaches.Net
The GitHub Blog
The GitHub Blog
G
Google Developers Blog
L
LangChain Blog
T
The Blog of Author Tim Ferriss
博客园 - 【当耐特】
Engineering at Meta
Engineering at Meta
Google DeepMind News
Google DeepMind News
雷峰网
雷峰网
量子位
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
I
InfoQ

Ben Frain

Well done AI, that’s the end of the honest boxes The Beginnings, by Rudyard Kipling So, you want a React modal that uses the <dialog> element and transitions in AND out? Scroll indicators on tables with background colours using animation-timeline Review: SoundPEATS Clip1 Open ear clip-on headphones VS Code – highlight just the active indent guide Review: MoErgo Go60, a split ergonomic and fully programmable keyboard Review: Kinesis mWave mechanical ergonomic and programmable keyboard iOS26 Safari theme-color/tab-tinting with fixed position elements is a mess New Book: Responsive Web Design with HTML5 and CSS, 5th Edition First adventures in View Transitions Review: Benq Screenbar Pro and Halo lightbars. The kit you never knew you needed! Center items in a container, and make then left aligned when they overflow A single element CSS donut timer/countdown timer, that can sit on any background Review: Open Ear Headphones – Bose Open Ultra v Huawei FreeClip In search of the perfect autocomplete for CSS Managing multiple versions of node, without NVM or additional tools Review: Keychron Q14 Max Alice 96 Key mechanical keyboard NEW VIDEO COURSE: Responsive Web Design with HTML5 and CSS Is CSS Grid really slower than Flexbox? Review: Advantage360 Pro Signature Edition 2024 mechanical ergonomic keyboard More Keys or Fewer Keys for mechanical keyboards Yes! You can use position: sticky and overflow together Neovim – how to do project-wide find and replace? Review: Keyboardio Model 100, split, wooden, mechanical keyboard Struggling to learn SwiftUI How to create rounded gradient borders with any background in CSS How to get equal size icons in the cmp completion menu of Neovim with Kitty terminal Review: Dygma Defy, split, mechanical, programmable ergonomic keyboard What’s the best way to reset WAAPI chained animations?
Use @supports with a proxy feature/value for features you...
Ben Frain · 2025-06-18 · via Ben Frain

You can’t use @supports to feature test for @starting-style. But what we can do, is use another, different property value pair, that is a good proxy for the level of support we need. In this case, I know that @starting-style came out in Safari 17.5, and at the same time, text-wrap-style was introduced in Safari 17.5, so although using a different declaration with @supports, we can ensure that our styles only get applied when relevant. In this instance you could nest a @supports block inside the selector like this:

@supports (text-wrap-style: auto) {
    opacity: 1;
    transform: none;
    transition: all 0.5s ease-in-out;
    @starting-style {
        opacity: 0;
        transform: translateX(-20px);
    }
}

Not a perfect solution but one I have found useful and robust enough to share.