レイヤー順を明示的に指定できる。 詳細度が高いものを書かなくても、調整しやすくなる。（低い詳細度でも高い詳細度を倒せるので、!importantとかを書かなくてもよい。） …

• 未分類
• コメントを書く

oklch カラーパレットを作るときに便利 color-mix 色を混ぜる関数 …

• 未分類
• コメントを書く

display:noneからの復帰時にアニメーションを適用できるようになった。 …

• 未分類
• コメントを書く

ページ遷移のアニメーションをブラウザ標準で。 SPAでも普通のページ遷移でもどちらでも対応している。 …

• 未分類
• コメントを書く

スクロールに連動するアニメーションを書ける。 従来だと JSが必須 IntersectionObserver必須 scrollイベントリスナー メインスレッドに負荷 がかかってた。 対応ブラウ…

• 未分類
• コメントを書く

ツールチップの位置をCSSだけで制御できるようになった。2024年から使える機能。 今までは、popper.js、floating UIを使ってやるものだった。 見切れてしまう対策として、フォールバック位置も宣言的に指定できる…

• 未分類
• コメントを書く

scssでかけていた、2023年ごろからcssのネストが可能になった。 …

• 未分類
• コメントを書く

今後media queryの代わりになる。 親の先祖要素の変化に応じて子要素を変化させる機能。 mediaQueryだけだと、画面幅だけ見る形になるので、２カラムや３カラムなど画面の作りによって画面幅は大きいが表示幅が狭い領域…

• 未分類
• コメントを書く

使い分けるとコードがすっきりする。 flex 縦一列、横一列などの一方向の並びに強い。 例：ナビゲーションを並べる。 flex:1 display:flexを親に使ってる子要素に対して使う。 残り…

• 未分類
• コメントを書く

ケバブケースを使う。 Modifierはハイフン2つで接続（button--infoなど） 略語禁止（btnはダメで、button） 連番を使う場合、最初に番号を振るのは禁止 マルチクラス採用 よく使うクラ…

• 未分類
• コメントを書く