Stylelint使用の観点

stylelint-config-standard（標準設定）に含まれている2024年最新の技術トレンドに対するサポート状況を整理。

自分用にtailwindcssを使用する際に役に立つトレンドには★マークを記述。

含まれているトレンド

• CSS GridとFlexboxの併用 ★
• カスタムプロパティ（CSS変数） ★
• メディアクエリのレベル4機能 ★
• スクロールスナップ（Scroll Snap） ★
• CSS Subgrid ★
• Aspect Ratioユニット ★
• CSS Variablesの動的変更 ★
• CSS Scroll-Linked Animations
• prefers-reduced-motionメディアクエリ
• is()とwhere()擬似クラス
• :focus-visible擬似クラス ★
• CSSネスト（CSS Nesting） ★
• @layerディレクティブによるスタイルの優先順位管理
• CSSカスタムプロパティによるテーマの動的変更 ★

含まれていないトレンド

• CSS Grid Masonry Layout ★
• CSSカスタムメディアクエリ ★
• CSSカスタムプロパティのスコープ設定 ★
• コンテナユニット（Container Units） ★
• @scroll-timelineアットルールによるスクロール連動アニメーション ★
• WebPやAVIFといった次世代画像フォーマットの採用
• CSS Houdini

カスタムプロパティ（CSS関数）

背景：CSSの再利用性を高めるため、特にテーマの切り替えやスタイルの一貫性を保つために導入。
歴史：SassやLESSなどのプリプロセッサが変数機能を提供していたため、その便利さをネイティブCSSに取り入れようという流れから生まれた。

再利用性：一箇所で定義した変数を複数のスタイルに適用できるため、変更が容易。
動的変更：JavaScriptから操作可能で、リアルタイムにスタイルを変更できる。

最新の書き方

:root {
  --main-color: #3498db;
}

body {
  color: var(--main-color);
}

古い書き方

body {
  color: #3498db;
}

CSS Variablesの動的変更

背景：インタラクティブなサイトの需要が高まり、ユーザーの操作に応じてスタイルを変える必要が出てきた。
歴史：JavaScriptとCSSの連携が進む中で、スタイルを動的に変更する技術が求められた。

動的なUX：ユーザーの操作やイベントに応じてリアルタイムでスタイルを変更することで、よりリッチなユーザー体験を提供。

最新の書き方

document.documentElement.style.setProperty('--main-color', '#e74c3c');

古い書き方

document.body.style.color = '#e74c3c';

CSSカスタムプロパティによるテーマの動的変更

背景：多くのサイトでダークモードやテーマのカスタマイズが求められるようになった。
歴史：CSS変数の導入と共に、JavaScriptを用いたテーマの切り替えが一般的になった。

ユーザーエクスペリエンス：ユーザーごとに異なるテーマを適用することで、個別にカスタマイズされた体験を提供。

最新の書き方

:root {
  --bg-color: white;
  --text-color: black;
}

body.dark-mode {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

古い書き方

body {
  background-color: white;
  color: black;
}

body.dark-mode {
  background-color: black;
  color: white;
}

メディアクエリのレベル4機能

背景：デバイスの多様化とそれに伴うレスポンシブデザインの重要性の高まり。
歴史：初期のメディアクエリでは対応できない複雑な条件が必要とされ、進化してきた。

詳細なレスポンシブデザイン：複雑な条件に基づいてスタイルを適用することで、あらゆるデバイスに最適化されたデザインを実現。

最新の書き方（比較関数）

@media (width >= 600px) and (width <= 1200px) {
  body {
    background-color: lightblue;
  }
}

やや古い書き方

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightblue;
  }
}

古い書き方

@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

疑似クラス

背景：アクセシビリティの向上とユーザーエクスペリエンスの改善が求められる中で、キーボードナビゲーションの視覚的表示が重要視された。
歴史：W3Cのアクセシビリティガイドラインに従って導入された。

アクセシビリティ：キーボードユーザーに対して視覚的フィードバックを提供し、使いやすさを向上。

最新の書き方

button:focus-visible {
  outline: 2px solid blue;
}

古い書き方

button:focus {
  outline: 2px solid blue;
}
button:focus {
  outline: 2px solid blue;
}

CSSカスタムメディアクエリ

背景：レスポンシブデザインの進化と、それに伴う複雑な条件設定の必要性。
歴史：CSSカスタムプロパティと同様に、再利用性と柔軟性を高めるために導入された。

再利用性と柔軟性：複雑な条件を簡潔に表現し、同じ条件を複数の場所で再利用可能。

最新の書き方

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  .sidebar {
    display: none;
  }
}

古い書き方

@media (max-width: 30em) {
  .sidebar {
    display: none;
  }
}

Scroll Snap（スクロールスナップ）

背景：モバイルデバイスの普及と、それに伴うスムーズなスクロール体験の需要。
歴史：スマートフォンやタブレットの普及により、ユーザーインターフェースの改善が求められた。

ユーザー体験の向上：スクロールの位置を固定することで、ユーザーがコンテンツを見やすくする。

最新の書き方

.container {
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

古い書き方

<!-- No direct CSS equivalent -->

コンテナユニット

背景：レスポンシブデザインのさらなる進化と、親コンテナのサイズに基づく柔軟なレイアウトが求められるようになった。
歴史：CSSグリッドやFlexboxの普及と共に、コンテナベースのデザインの需要が高まった。

柔軟なレイアウト：親コンテナのサイズに応じたスタイル適用が可能になり、よりダイナミックなレスポンシブデザインを実現。

最新の書き方

.container {
  --padding: 10cqi;
  padding: var(--padding);
}

古い書き方

.container {
  padding: 10px;
}

@scroll-timelineアットルールによるスクロール連動アニメーション

背景：スクロールをトリガーにしたインタラクティブなアニメーションの需要が増加。
歴史：パララックス効果やスクロールトリガーアニメーションの普及と共に導入された。

インタラクティブな体験：スクロールイベントに連動してアニメーションを実現することで、より魅力的なユーザー体験を提供。

最新の書き方

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@scroll-timeline scroll-fade {
  scroll-source: auto;
  time-range: 1s;
}

.element {
  animation: fade-in 1s linear;
  animation-timeline: scroll-fade;
}

古い書き方

window.addEventListener('scroll', function() {
  const element = document.querySelector('.element');
  const opacity = window.scrollY / 500;
  element.style.opacity = opacity;
});