CSS @property と新しいスタイル

 (ryanmulligan.dev)
2 ポイント 投稿者 GN⁺ 2024-09-05 | 1件のコメント | WhatsAppで共有
  • @property ルールはすべての最新ブラウザでサポートされており、CSS カスタムプロパティの構文、初期値、継承を明示的に定義できる機能を提供する
  • CSS Houdini と CSS Properties and Values API が最初に導入されてから、かなりの時間が経った
  • @property の可能性を探るデモを通じて、次世代の CSS が何をもたらすのかを見ていく

Calls to action（行動喚起要素）

  • Web ページで注目を集める CTA は、多くのサイトで使われている
  • このスタイルを実際に試しており、結果は CodePen で確認できる
  • デモの CSS パネルを開くと、アニメーションが必要なカスタムプロパティに関連する @property ルールを確認できる
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}
  • @property ルールはブラウザに構文を許可し、初期値を 0deg に設定する
  • これにより、ブラウザは 0deg から 360deg へ滑らかに遷移し、回転するグラデーションを描画できる
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}
  • シンプルなグラデーション回転デモを通じて、この概念を実装するのに必要な数行のコードを確認できる

滑らかなホバー遷移

  • 要素がホバーされたときに滑らかなグラデーション遷移を実現するには、いくつか特別な要素が必要になる
  • アニメーションが必要な各カスタムプロパティは、@property 定義で構文を宣言することで、ブラウザが値の変化を滑らかに遷移できるようにする
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}
  • --gradient-percent の値は光る領域の大きさを決め、ホバー時にはより高いパーセンテージにして光を長く見せる
  • --gradient-angle-offset の値はグラデーション角度を再調整し、ホバー時に光が逆戻りしないようにする

回転速度の調整

  • ホバー時に回転を遅くする CSS のテクニックは非常に有用だ
  • 同じ回転アニメーションを 2 回宣言し、2 つ目は逆方向に設定して一時停止し、継続時間を半分にする
  • 要素がホバーされると animation-play-state: running が一時停止の値を上書きし、回転を半分の速度まで遅くする

小さく光る点

  • ボタンの内部に小さな点が光る効果を追加する
  • そのために radial-gradient の背景を生成する
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}
  • --gradient-angle カスタムプロパティは conic-gradient マスクで使われ、点パターンの一部を回転させながら見せる

ホバー時の色の強化

  • ホバースタイルを改善し、より奥行きがあり目立つものにする
  • ボタンのテキストを span 要素で包み、ぼかしたボックスシャドウを適用して、ホバー時に拡大・縮小するよう設定する

新しいスタイルの導入

  • 上記の多くの技術は、少し前まではほとんど不可能だった
  • カスタムプロパティを明示的に定義することで、多くの可能性が開かれる
  • @property が大規模アプリケーションやデザインシステムでどのように活用されるのか期待される

GN⁺ のまとめ

  • @property ルールは、CSS カスタムプロパティの構文、初期値、継承を明示的に定義できる機能を提供する
  • この機能により、Web 開発者はより複雑で洗練されたアニメーションやスタイルを実装できる
  • 特に大規模アプリケーションやデザインシステムで有用に使われる可能性が高い
  • 類似の機能を提供する他のプロジェクトとして、CSS Houdini と CSS Properties and Values API がある

関連記事

1件のコメント

 
GN⁺ 2024-09-05
Hacker News の意見

  • 新しい概念に触れると、脳が抵抗するような感覚がある

    • MDN の記事を読むことを勧める
    • @property を実際に使ってみながら理解する必要がある
    • 複雑な UI を実装する際は、JS への依存を最小限にすることが重要だ

  • Web 開発者ではないが、基本的な Web フレームワークは使える

    • CSS が最初に登場したときのことを覚えている
    • 最初の CodePen の例にある CSS が理解できない
    • スタイリングシステムにミニアニメーション用プログラミング言語が必要なのか疑問だ
    • JavaScript でもできるのではないかと思う

  • 最近の CSS 作業、特に Houdini に興味を感じる

    • IE 5.5 の機能本を受け取ったときと似た感覚だ
    • CSS に新しい機能が追加されてきたが、これまでは基本的なものだった
    • IE の開発者は JS コードをモジュール化して、CSS で要素に貼り付けることができた
    • 今またそうした機能を手に入れつつある

  • できるからといって、必ずやるべきとは限らない

    • 明るい青色の LED が最初に登場したとき、あらゆるハードウェアで使われたが、ユーザーには価値がなかった

  • CSS アニメーションでできることには魔法のような感覚がある

    • CSS 専用なので、学ぶのも概念化するのも難しい
    • JS でプログラミングするほうが簡単だ
    • CSS flex の使用オプションが多くて苦労する

  • 技術的には興味深いデモだが、ボタンをこんなふうにアニメーションさせるべきではない

    • 何もかもに紫のグラデーション境界線を追加してアニメーションさせようとしている
    • できるからといって、必ずやるべきとは限らない
    • こうしたスタイルを消すためにカスタム CSS を書くのが指針になっている

  • 以前の投稿は注目されなかったが、興味深く教育的だ

  • この Web サイトは喜びを与えてくれる

    • CSS をいじるのが昔から好きだった
    • Web 開発のキャリアを積む中で、多くの人が CSS を嫌っていることを知った
    • HTML+CSS を探究して実験することに多くの時間を費やしてきた
    • ほとんどの人は時間の無駄だと思うだろう
    • このサイトのおかげで一日が楽しくなった

  • CSS の作業は好きだが、同僚が苦労しているのを見ている

    • Kevin Powell の YouTube チャンネルを強く勧める
    • 登録済みプロパティの便利な機能を説明する動画がある
    • 動画リンク
    • 登録済みプロパティをわかりやすく説明する記事もある
    • 記事リンク

  • しばらく Web 開発をしておらず、この機能が何をするものなのか理解するのに時間がかかった

    • 記事の説明はあまりうまくなかったと思う
    • この新機能により、@property --gradient-angle {...} ブロックで定義された値を使えるようになる
    • inherits: false; の部分が何をするのかは明確だが、なぜ必要なのかは理解できない
    • CSS セレクタですでに継承を制御できるのに、なぜ二か所目でも制御しなければならないのか疑問だ
    • @property ブロックで型を定義しなければならない理由がわからない
    • ブラウザは @property が使われている場所を見て型推論できないのだろうかと思う