CSSの@whenと@else。コピペはまだ。ブレイクポイント設定は変わる?|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

CSSの新しいブレイクポイント設定。

@whenと@elseは普及するだろうか?

CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。

W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。

引用元サイト:CSS Conditional Rules Module Level 5

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

これをざっくりと最低限のイメージにすると、

@when media(min-width: 400px) {
   /* A (横幅400px以上の場合のスタイル。) */
} @else {
   /* B (横幅400未満のスタイル。) */
} @else {
   /* C (AでもBでもないスタイル。) */
}

というような感じになる。

要するに(@supportsでの対象を除けば)、横幅400px以上と、それ以外での条件分岐だ。

ただし、このままでは問題が多々ある。

  • 記述方法がちょっとややこしい。
  • すでに@mediaが普及していている。
  • ブラウザがまだ対応していない。

参考:Can I Useでは以下のようになっており、ブラウザ側は全くの未対応だ。

@whenと@else。CSSの新しいブレイクポイント設定。


メディアクエリの歴史は結構古い。

メディアクエリはかなり前から存在し、2001年にドラフト版が出ている。

当時は携帯電話やPDAなどの端末は存在していたが、Webサイトが印刷されることも多々想定していた。結果的にはスマホの普及により、印刷よりも直接デバイスで見ることの方がはるかに多くなった。

ビューポートのアスペクト比は「4:3」とともに、現在主流の「16:9」をも想定しており、ターゲットの幅が広かったことがわかる。

引用元サイト:Media queries (英語)

CSSを発明したホーコン・ウィウム・リー氏は、CSSがプログラミング言語になるのを防ぐために懸命に努力していたという旨の発言を2022年9月にTwitter上でしている。

が、時代は変わり、今ではCSSとプログラミングの融合は欠かせなくなっている。

@whenは今後、どうなっていくのだろうか。

@whenと@else。CSSの新しいブレイクポイント設定。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。