今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のApache License 2.0に基づいて翻訳しています。 はじめに コンポーネント: field-sizingプロパティ コンポーネント: interpolate-sizeプロパティ コンポーネント: details要素 コンポーネント: details要素のスタイル コンポーネント: Anchor positioning インタラクション: スクロールバーのスタイル インタラクション: @v
こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール 2025.01.18 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。単一ページアプリケーション（SPA）においては document.startV
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.5」が正式にリリースされました。 Astro 4.5 is here! Introducing the new Dev Audit UI — Catch real-world a11y & perf issues during development, right in your browser. Available today in the Astro Dev Toolbar! Plus: View Transition improvements, Multi-CDN, Shiki 1.0, and more.https://t.co/
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。 ビュー遷移（View Transitions）はSafariでもサポートされ、今年は使用する機会が増えそうですね。 お弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する まずは、デモをご覧ください。 ブルーのボックスの疑似要素（::view-transition-group(box)）のアニメーションのキーフレームを数行のコードで取得します。 See the Pen Debugging View Transitions: Getting the group’s anim
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
Misconceptions about view transitions | Blog | Chrome for Developers
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition
12月7日、Chrome DevRelチームが「CSS Wrapped 2024」と題した記事を公開した。この記事では、2024年に追加されたCSSの新機能について詳しく紹介されている。 12月7日、Chrome DevRelチームが「CSS Wrapped 2024」と題した記事を公開した。この記事では、2024年に追加されたCSSの新機能について詳しく紹介されている。 以下に、その内容をかいつまんで紹介する。 原文では、実際に動作するデモや動画とともにCSSの新機能が紹介されているので、ぜひ原文を参照していただきたい。 1. 新機能の概要 2024年は、CSSにとってさらなる飛躍の年となった。これまでにない新機能が数多く追加され、ウェブ開発者にとって大きな変化をもたらしている。以下は主な新機能の概要だ。 コンポーネント機能の強化 Field Sizing height: auto への
JSer.info #719 - Safri 18.2がリリースされました。 WebKit Features in Safari 18.2 | WebKit 次のような変更が含まれています。 CSSでは、text-box(Leading Trim)/@view-transition/background-clip/scrollbar-widthのサポート、ルビ表示の改善など HTMLでは、input type=weekのサポート、blocking=render属性と<link rel=expect>のサポートなど JavaScriptでは、Float16Array/Promise.try/RegExp.escapeのサポートなど State of Node.js Performance 2024という記事では、Node.js 20と22のコアモジュールごとのパフォーマンスの比較が行われてい
「Web開発における近年最も重要な進歩の1つ」 ー JavaScriptを使わないビュー遷移を実現するView Transition APIをAstroがサポート
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。 Zero-JavaScript View Transitions View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。 AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっ
This post assumes some knowledge of view transitions. If you're looking for a from-scratch intro to the feature, see this article. When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it: Unintentional aspect ratio changes It's pretty common for these aspect ratio changes to be unintent
WebKit Features in Safari 18.2
Today marks the arrival of Safari 18.2. With it, WebKit adds 61 new features and 111 resolved issues. Highlights include cross-document View Transitions, the ability to fill a border with a background, spatial videos in visionOS, ruby improvements, input type=week on iOS, iPadOS & visionOS, WASM garbage collection, HTTPS by default, Genmoji, and more. Safari 18.2 is available on iOS 18.2, iPadOS 1
Cloudflareの大幅アップデートなど: Cybozu Frontend Weekly (2024-10-01号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/01のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 18.0 Safari 18.0がリリースされました。一部機能を抜粋します。 新機能 Distraction Control ウェブブラウジング中の邪魔な要素を非表示にできる iPhone Mirroring and remote inspection MacからiPhoneをミラーリングし、リモートiOS上のWebサイトのテストやデバッグができる CSS View Tra
Vue Advent Calendar 2024の9日目の記事です。 この記事では2024年のVue.js、そしてそれらにまつわる周辺エコシステムについてを振り返っていきます。関連する大きな出来事や変更があったものについてを中心にまとめています（この内容も取り上げてほしい！というものがあった際は、GitHubから編集提案をください）。 Vue.js 公開10周年 2024年はVue.jsがHacker Newsで公開されてから10周年目を迎える年でした。Vue.jsの進化の歴史については以下の通りになります。 2015年10月: Vue 1リリース 2016年10月: Vue 2リリース 2018年9月: Vue 3の開発が開始 2020年9月: Vue 3リリース 2022年1月: Vue 3がデフォルトになる、ドキュメントもVue 3がメインに 2023年12月: Vue 2がEoLを
This is Part 1 of our series on “The Future of Astro” covering three major new features we have planned for Astro in 2024. This post introduces an update to the View Transitions API that Astro can now leverage for native, app-like page navigation without a single line of JavaScript required. The View Transitions API is a set of new platform APIs that unlock native browser transitions between pages
Announcing Interop 2025
Exciting news for web developers, designers, and browser enthusiasts alike — Interop 2025 is here, continuing the mission of improving cross-browser interoperability. For the fourth year in a row, we are pleased to collaborate with Bocoup, Igalia, Google, Microsoft, and Mozilla to smooth out inconsistencies between browsers. The result? A more reliable, user-friendly web experience for everyone. T
25 min read6 CSS Snippets Every Front-End Developer Should Know In 2025 2025; I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <details>, animate light n' dark gradient text, type safe their CSS system, and add springy easing to animation. AI is not going to give you this CSS. This post is a theme continuation; checkout previous year
Note <ViewTransition> コンポーネントは 2025 年 1 月現在実験的な機能です。将来にわたって API が変更される可能性があります。 React の実験的なバージョンとして <ViewTransition> コンポーネントが導入されました。これは View Transition API を宣言的な方法で使用できるようにするものです。 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。単一ページアプリケーション（SPA）においては document.startViewTransition() メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。<ViewTransition> コンポーネントを使用はこの API を React で使用するための方法です。 <ViewTr
JSer.info #700 - Vitest 2.0.0がリリースされました。 Release v2.0.0 · vitest-dev/vitest 非推奨のオプションを削除、一部オプションのデフォルト値の変更などの破壊的な変更が含まれています。 マイグレーションガイドも合わせて公開されています。 Migration Guide | Guide | Vitest Browser Mode改善、expect.pollの追加、test.forの追加などが行われています。 Browser Modeについては、次のページに詳しい説明が公開されています。 Vitest Browser Mode · vitest-dev/vitest · Discussion #5828 Node.js v22.5.0がリリースされました Node.js — Node v22.5.0 (Current) コアモジュ
View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers
View Transition API を使用すると、ウェブサイト上のさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、サイトがマルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されているかにかかわらず、ユーザーがサイトを操作する際に、より視覚的に魅力的なユーザー エクスペリエンスを提供できます。 ビュー遷移を使用する一般的な状況は次のとおりです。 商品リストページのサムネイル画像は、商品の詳細ページで商品のフルサイズ画像に切り替わります。 ページ間を移動しても移動しない固定ナビゲーション バー。 フィルタするたびにアイテムの位置が移動するグリッド。 View Transition API で作成された遷移。デモサイトをお試しください。Chrome 111 以降が必要です。 ビューの遷移を実装する ビュ
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
I won't be the first to say it, but I will say it nonetheless, 2023 was quite the year for JavaScript frameworks. Between new technologies we've been watching finally showing they can deliver, and older frameworks making a resurgence if you weren't paying attention you may have missed a pretty significant shift. I anticipate that 2024 will continue to see even larger changes across the board. This
Since its inception over 12(!) years ago, there's been a glaring animation-sized hole in React's API. Over the year its closest competitors like Vue and Svelte have introduced APIs that, while not extensive, still make animations a little easier. Whereas React developers have had to rely on third-party libraries like Motion for React, React Spring or others. Until now. Yes, React is getting its fi
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsCSS はどう働くかCSS 入門経歴ページのスタイル設定CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデルカスケード、詳細度、継承CSS の値と単位CSS によるサイズ設定背景と境界線要素のオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ基本的な CSS の理解美しいレターヘッド付きの便箋の作成かっこいいボックスCSS text styling基本的なテキストとフォントのスタイル設定リストの装飾リンクのスタイル設定ウェブフォントコミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスグリッドレスポンシブデザインメディアクエ
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン126がリリースされました。同一サイト内のページへ移動する際にアニメーションを行う仕組みや、ブラウザ上で動作するゲームからコントローラーを振動させる機能が追加されています。 New in Chrome 126 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-126 New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more - YouTube ◆ページ移動の際にビュートランジションAPIを利用したアニメーションが可能に 同一オリジン内の別ページへ移動する際に、ビュートランジションAPIを
Theme 第 168 回のテーマは 2024 年の Yearly Platform です。 Show Note 今年の mozaic.fm 10 周年記念イベント mozaic.fm renewal WIP 通常回なし 2024 年チェックポイント Module Harmony Shared Dictionary Transport without Yoav Baseline OHTTP/DoH/ECH/over QUIC/MLS などですべの暗号化が終わったあとの管理や保安の話 CookieBis Apple のブラウザエンジン規制 DOMParts + Module Harmoney = WebComponents 元年 v6 ? Navigation API Manifest v3 移行と AdBlocker どうなるのか light-dark() / CSS Color v4 R
Safari Technology Preview Release 202 is now available for download for macOS Sequoia beta and macOS Sonoma. 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: 281465@main…282389@main. Accessibility Resolved Issues Fixed text-transform: full-size-kana to not affect AT/speech ou
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsCSS はどう働くかCSS 入門経歴ページのスタイル設定CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデルカスケード、詳細度、継承CSS の値と単位CSS によるサイズ設定背景と境界線要素のオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ基本的な CSS の理解美しいレターヘッド付きの便箋の作成かっこいいボックスCSS text styling基本的なテキストとフォントのスタイル設定リストの装飾リンクのスタイル設定ウェブフォントコミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスグリッドレスポンシブデザインメディアクエ
View Transitions Snippets: Keeping the page interactive while a View Transition is running
~ 🌟 This post is about View Transitions. If you are not familiar with the basics of it, check out this 30-min talk of mine to get up to speed. ~ When using View Transitions you’ll notice the page becomes unresponsive to clicks while a View Transition is running. Take the following example that allows you to manipulate a list of cards. The addition and removal of cards is animated using View Trans
フロントエンド開発者/技術者ハンドブック2024など: Cybozu Frontend Weekly (2024-05-14号)
フロントエンド開発者/技術者ハンドブック2024など: Cybozu Frontend Weekly (2024-05-14号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年5月14日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 The Front End Developer/Engineer Handbook 2024 2024年のフロントエンド周辺の領域に関する解説を網羅的に扱ったドキュメントです。 Libraries with issues #25 Reactを取り巻く一部の周辺ライブラリで起票したReact19対応
View Transitions
A collection of demos to show off View Transitions. Built by Bramus, Chrome DevRel at Google. Browser Support The demos listed on this site rely on several features related to View Transitions that can ship individually in browsers. Because of that, some demos won’t work entirely or not at all depending on which browser you are using. Same-Document View Transitions Chrome 111+Safari 18+ Cross-Docu
Chrome 130 の DevTools の新機能 | Blog | Chrome for Developers
ネットワーク パネルの改善 このバージョンでは、[ネットワーク] パネルにいくつかの改善が行われています。 ネットワーク フィルタの見直し [ネットワーク] パネルには、フィードバックに基づいて刷新された新しいフィルタが用意されています。タイプ固有のフィルタは変わりません。すっきりとした複数選択バーにバッジのセットが表示されます。 UI の整理を図るため、非表示、ブロック、サードパーティ関連のチェックボックスはプルダウン リストの下に移動されます。リストのプルダウンの下に、チェックされているフィルタの数が表示されます。 古いフィルタのデザインに戻すには、設定 [設定] > [試験運用版] > check_box_outline_blank [[ネットワーク] パネルのフィルタバーのデザイン変更] をオフにします。 デザインの変更について、ご意見をお聞かせください。 Chromium の問題
Fanout with Grid and View Transitions – Frontend Masters Boost
Fanout with Grid and View Transitions October 14, 2024 I got a little nerdsniped by Preethi’s post CSS Fan Out with Grid and @property the other day. I like the idea of a opening a menu of items where the layout is powered by CSS grid. Then it collapses back into just one cell of the grid. You can even animate the grid columns/rows themselves to pull this off, as Preethi demonstrated. If you know
「動き」を極めるWebアニメーション表現アイデア50選
最近のウェブサイトでよく見かける、スクロールやユーザーの動作に合わせて動く「インタラクティブなアニメーション」が注目を浴びています。 実際、2024年のデザイントレンド予想でも、多くのサイトが「アニメーション」を注目トレンドに挙げており、CSSのスクロール駆動アニメーションやView Transition APIなど新しい技術の登場で、より手軽にウェブサイトに動きを加えることができるようになってきています。 しかし、なんでもかんでも動きを加えてしまうとユーザーの使いやすさ、アクセシビリティを結果的に損なってしまう恐れも。 この記事では、参考にしたいUIアニメーションとインタラクティブなデザインを取り入れた最新コンセプトをまとめてご紹介します。 心地よいアニメーションの基本ルールを知っておけば、より実践的な動きを取り入れることができるでしょう。
CSS Stuff I'm Excited After The Last CSSWG Meeting | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. From June 11–13, the CSS Working Group (CSSWG) held its second face-to-face meeting of the year in Coruña, Spain, with a long agenda of new features and improvements coming to language. If 2023 brought us incredible advances like out-of-the-box nesting, container and style queries, or the has: sele
DevTools の新機能（Chrome 128） | Blog | Chrome for Developers
これらの国にお住まいの場合は、コンソール内で Gemini に分析情報を提供するようリクエストできるようになりました。これにより、エラーや警告をより深く理解できるようになります。 [パフォーマンス] パネルの更新 この更新により、[パフォーマンス] パネルが改善されました。 拡張ネットワーク トラック [パフォーマンス] パネルの [ネットワーク] トラックが強化され、より詳細な所要時間やネットワーク開始元のツリーなど、重要な情報が事前に表示されるようになりました。また、視覚的な手がかりと色がより明確になりました。そのため、[ネットワーク] パネルと [パフォーマンス] > [概要] タブを切り替える必要がなくなりました。また、[ネットワーク] パネルに切り替える必要がある場合でも、より簡単に、より迅速に切り替えられるようになりました。 ネットワーク トラックは次のように動作します。 リク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
Google I/O 2024 注目のフロントエンド技術
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
News from WWDC24: WebKit in Safari 18 beta
【海外記事紹介】CSSは2024年にこんなに進化した！Chromeチームが紹介する、CSS新機能紹介記事は必見
2024-12-19のJS: Safari 18.2、State of Node.js Performance 2024、Astro Server Islands
View transitions: Handling aspect ratio changes
Vue.jsと周辺エコシステムで振り返る2024年
Zero-JavaScript View Transitions | Astro
6 CSS Snippets Every Front-End Developer Should Know In 2025 · January 19, 2025
React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する
2024-07-18のJS: #700 - Vitest 2.0.0、Node.js 22.5.0(sqlite)、Private Browsing Mode
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
Old Dogs, new CSS Tricks
JavaScript Frameworks - Heading into 2024
Revealed: React's experimental animations API - Motion Blog
@starting-style - CSS: カスケーディングスタイルシート | MDN
「Google Chrome 126」安定版リリース、ブラウザゲームでコントローラーの振動機能を利用可能に
ep168 Yearly Platform 2024 | mozaic.fm
Release Notes for Safari Technology Preview 202
@property - CSS: カスケーディングスタイルシート | MDN