8月10日、AppleはSafari Technology Preview 176をリリースしました。 このバージョンは、macOS SonomaベータおよびmacOS Ventura向けにダウンロードが可能です。このリリースでは、CSSのサポートに大きな改善が行われました。
contain-intrinsic-size: inheritのサポート追加
contain-intrinsic-size
は、要素の内在的なサイズを制御するためのプロパティであり、ウェブデザインにおいて非常に便利なものです。このプロパティの最新のアップデートとして、Safari Technology Preview 176ではcontain-intrinsic-size: inherit
のサポートが追加されました。これにより、要素のサイズ計算が親要素からの継承を基に行われ、コンテンツの配置やレイアウトを効果的に制御することができるようになります。
.container {
contain-intrinsic-size: inherit;
}
上記の例では、.container
クラス内の要素が親要素のサイズを継承して自身のサイズを計算するよう指定されています。これにより、要素のサイズが変更された際にも適切にレスポンシブに対応できるデザインを実現できます。
linear(...)タイミング関数の実装
CSSアニメーションとトランジションにおけるタイミング関数は、要素の動きを制御する上で重要な役割を果たします。Safari Technology Preview 176では、新たにlinear(...)
タイミング関数が実装されました。この関数は、アニメーションやトランジションの進行を等速で行うためのもので、ユーザーにとって滑らかな体験を提供します。
.element {
transition: transform 1s linear(0.5);
}
上記のコードでは、.element
クラスの要素に対して、transform
プロパティの変化を1秒かけて等速で適用するアニメーションが設定されています。linear(0.5)
は、アニメーションの進行が中間点で等速になることを示しています。
その他の変更点
Safari Technology Preview 176には、上記の変更以外にも多くの改善が含まれています。例えば、レンダリング、アクセシビリティ、メディア、Web APIにおけるさまざまなバグ修正やパフォーマンス向上が行われています。これにより、ウェブ開発者はより高品質で洗練されたウェブアプリケーションを提供できるようになります。
詳しい内容は「Release Notes for Safari Technology Preview 176」を参照してください。