CSSに`random()`関数が追加され、ウェブデザインが一変します！JavaScriptを使わずに、CSS内で乱数を生成し、アニメーションの遅延、ランダムなレイアウト、ランダムな色などを実現できます。この関数は最小値、最大値、ステップの3つの引数を取り、カスタムプロパティや`element-shared`キーワードを使用して、要素内やグローバルでの乱数の共有を柔軟に制御できます。星雲の生成、ランダム配置された長方形、写真スタックなどの例を通して`random()`関数の威力を示し、開発者からのフィードバックを求めています。
続きを読む
この記事では、CSSの新しいアンカーポジショニング機能について解説します。この機能を使うと、他の要素の位置に基づいて要素を配置できます。JavaScriptを使わずに、最小限のCSSでレスポンシブなメニューやツールチップを作成できます。チュートリアルでは、`position-anchor`、`position-area`、`position-try`、`anchor()`関数の使用方法を詳細に説明し、論理プロパティと物理プロパティの使用方法を比較します。レスポンシブなメニューの例では、様々な画面サイズへの対応が示されています。
続きを読む
CSSの新しい`contrast-color()`関数は、指定された背景色に対して自動的に黒または白のテキストを選択することで、色の選択を簡素化します。この記事では、その使用方法、コントラスト計算のためのWCAG 2.1とAPCAアルゴリズムの比較、アクセシビリティ向上のための`prefers-contrast`メディアクエリの使い方を詳しく説明します。現在、黒と白に限定されていますが、将来のバージョンでは、よりカスタマイズ可能なオプションが提供される可能性があります。この関数は、開発を簡素化し、特に複数の色の状態を管理する場合にアクセシビリティを向上させます。
続きを読む
Safari Technology Preview 216は、`text-wrap: pretty`を導入し、ウェブのテキストレイアウトに革命を起こしました。段落ベースのアルゴリズムを利用することで、非常に短い最終行、不揃いのガタガタした端、気を散らすタイポグラフィのリバーなどの長年のタイポグラフィの問題に対処します。従来の1行ごとのアルゴリズムとは異なり、`pretty`は段落全体を評価し、可読性と美観を向上させるためにレイアウトを最適化します。Chromeなどのブラウザも`pretty`をサポートしていますが、Safariの実装はより包括的で、最後の数行ではなく、段落全体を調整します。`text-wrap: balance`は、すべての行をほぼ同じ長さにすることに重点を置いており、見出しや短いテキストに最適です。開発者は、ニーズに応じて適切な`text-wrap`値を選択し、パフォーマンスへの影響を考慮する必要があります。
続きを読む
WebKitは、従来のWebプッシュにおける消費電力とプライバシーの問題に対処するために、宣言型Webプッシュを導入しました。従来のWebプッシュはサービスワーカーに依存しているため、インテリジェントトラッキング防止（ITP）の影響を受けやすく、処理の失敗によりサブスクリプションが取り消される可能性があります。宣言型Webプッシュは、サービスワーカーなしで通知の送信と表示を可能にし、プッシュメッセージに通知内容を直接埋め込むことで、効率性とプライバシーを向上させます。既存のWebプッシュとの後方互換性も維持しています。
続きを読む
CSS GridとFlexboxは強力なレイアウトツールですが、Masonryレイアウトのような複雑なレイアウトには不十分です。「Item Flow」という新しい提案は、Flexboxの`flex-flow`プロパティとGridの`grid-auto-flow`プロパティを統合することでこの問題を解決することを目指しています。`item-direction`、`item-wrap`、`item-pack`、`item-slack`といった新しいプロパティを導入し、より柔軟で強力なレイアウト制御を実現します。これにより、Flexboxに密集配置、Gridに折り返しの無効化といった新しい機能が追加され、Masonryレイアウトに対するクリーンなソリューションが提供されます。結果として、より統合的でユーザーフレンドリーなCSSレイアウトシステムが実現します。
続きを読む