CSSのみでsassのmixnのようにメディアクエリを管理する

2023-08-10 (Thu)

CSSのみでメディアクエリの簡単な管理方法ができますので、ご紹介（ただし注意点あり）

media queriesの問題点

media queriesとは現在のウィンドウ幅等でcssの適用を使い分ける記述になります。

.box {
  color: black;
}

@media (600px <= width) {
  .box {
    color: red;
  }
}

この場合、「〜599px」までは文字色は黒ですが、「600px〜」は文字色が赤になります。

ここでレスポンシブ対応においてmedia queriesを使用する場合以下が問題となってきます。

メディアクエリの指定が必ず一つだけとは限らない
メディアクエリをそのまま書いても意図が把握しづらい（タブレット向けの対応なのかなど）
対応者が必ず同一人物とは限らないため、記載に差異や誤差が発生する可能性がある（600px <= widthと600px <widthなど）
ブレークポイントが必ずしもずっと同じとは限らず、時代に合わせて変更される可能性があるが、各CSSに直書きしている場合は変更に弱い

問題点の解決策

sass

sass（scss）を導入している場合は@mixinを使用できるため、下記のようにすることができます。

$breakpoints: (
    'tablet': '960px',
    'mobile-l': '600px',
    'mobile-p': '480px'
);

@mixin device($breakpoint) {
    @media screen and (min-width: #{map-get($breakpoints, $breakpoint)}) {
        @content;
    }
}

使用方法は@includeで読み込むだけです。

@include device('tablet') {
  // プロパティ等適用する内容を記載
}

こうすると名称が付けられているので、用途がわかりやすく、記載者による記述の差異や誤差も発生しない作りにすることができます。また、変更が入った際にもブレークポイントの数が減るわけではなければ$breakpointsの値を調整するだけで済みます。

とは言ってもここ数年でcssの進化は目覚ましく、sassでできることの多くがcssで可能な状況になっています。なので、sassを使用しないという選択肢も出てきます。

css

とは言ったものの、現状cssにsassの@mixinと同等の機能はありません。

ではcssではどうやってmedia queriesを管理すればいいでしょうか？

@media (var(--tablet)) {}とかでしょうか？実はmedia queryにcss変数を当てることはできません…… そのため、sassを使用せずにmedia queriesの管理を可能にすることはできませんでした。

しかし最近ではそれの一つの解決策が出てきました。答えはcontainer style queriesにありました。

container queriesの細かい説明は省きますが、container style queriesではcss変数の使用が可能となっています。

:root {
  @media (480px <= width) {
    --is-mq-mobile-p: true;
  }
  @media (600px <= width) {
    --is-mq-mobile-l: true;
  }
  @media (960px <= width) {
    --is-mq-tablet: true;
  }
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  background-color: transparent; /* default color */
  
  @container style(--is-mq-mobile-p) {
    background-color: red;
  }
  
  @container style(--is-mq-tablet) {
    background-color: green;
  }
}

こうすることでsassと同じように管理しやすく定義でき、@includeと同じような感覚で使用することができます。

本来container queriesはcontainer-nameを用いて使用するものですが、今回はmedia queriesのウィンドウ幅に対してグローバルに処理したい内容になりますので、名前空間はなしで使用します。

また、media queriesでの変数の定義を --is-mq: 'mobile-p'のようにしてしまうと、@media (600px <= width)にあたる幅の場合に値がmobile-lになってしまうため、背景色が赤にならなってしまうので、変数自体はmedia queriesごとに定義する必要があります。

やったぜ、これでsassを完全に排除できる！

container style queriesの問題点

と期待させてしまって申し訳ないですが、現時点（2023/08/10）ではこのcontainer style queriesはモダンブラウザではChromeのみの対応となっており、Safariとfire foxが未対応の状態です……（参考：Can I use "container style queries"）

自分も本ブログからsassを排除しようとして気づきました。

ただ、大本のcontainer queriesはすべてのモダンブラウザが対応完了していますので、styleのほうも時間の問題だとは思います。

これで、container style queriesが実装完了されればmixinのためにsassに拘る必要がなくなり、変数やネストはすでにcssで実装済みですので、本格的にsassが不要の時代になりそうですね。