CSSブレークポイントを実行する100%正しい方法

次の1分ほどは、CSSのことを忘れてほしいです。Web開発を忘れてください。デジタルユーザーインターフェイスを忘れてください。

そして、あなたがこれらのことを忘れているので、私はあなたにあなたの心がさまようことを許して欲しいです。時間をさかのぼる。あなたの若さに戻ります。学校の最初の日に戻ります。

形を描き、失禁を抑えることだけを心配しなければならなかったのは、もっと簡単な時期でした。

上の点を見てください。それらのいくつかがどのように凝集していて、それらのいくつかが広がっているかに注意してください。私があなたにしてほしいのは、私のためにそれらを5つのグループに分けることですが、あなたは適切だと思います。

どうぞ。誰も見ていないことを確認した後、子供のような指で5つのグループのそれぞれの周りに円を描きます。

あなたはおそらく以下のようなものを思いついたでしょう?(そして、あなたが何をするにしても、運動をせずに下にスクロールしたと私に言わないでください。私は手のひらに直面します。)

確かに、右側の2つの点はどちらの方向にも進んでいた可能性があります。それらをグループ化すれば大丈夫だと思います。彼らは間違った答えはないと言っていますが、私は決して間違ったことがないので、私はその特定の礼儀を受け取ったことがありません。

先に進む前に、下のような絵を描きましたか?

おそらくそうではありません。正しい?

ただし、一般的なデバイスの正確な幅(320px、768px、1024px)に一致する位置にブレークポイントを設定すると、基本的にはこれが実行されます。

以下の性質の言葉があなたの耳に入ったり、口から出たりしたことがありますか?

「中程度のブレークポイントは最大768pxですか、それとも768を含みますか?なるほど…そしてそれはiPadの風景なのか、それとも「大きい」のか?ああ、大きいのは768px以上です。そうですか。そして小さいのは320pxですか?この0から319pxの範囲は何ですか?アリのブレークポイント?」

正しいブレークポイントを表示して、そのままにしておくことができます。しかし、上記の方法(「愚かなグループ化」)が非常に普及しているのは非常に興味深いことです。

なぜそうすべきなのですか?

この問題への答えは、多くの問題と同様に、用語のずれに帰着すると思います。結局のところ、グアンタナモ湾でのウォーターボーディングは、それらのどちらかが何であるかを知らなければ、非常に過激に聞こえます。(ああ、それが私の冗談だったらいいのに。)

ブレークポイントの説明と実装では、「境界」と「範囲」を混同していると思います。

Sassでブレークポイントを実行する場合$large、たとえば768pxという変数がありますか?

それはあなたが言及する範囲の下限が大きいのですか、それとも上限ですか?それが低い場合は、それが必要な$smallので、あなたは持っていないはず0ですよね?

そして、それが上限である場合、ブレークポイントをどのように定義します$large-and-upか?これは、とメディアクエリでなければならないmin-width$mediumですよね?

また、大きいと言ったときに境界だけを参照している場合、メディアクエリは常に範囲であるため、後で混乱することになります。

この状況は混乱していて、私たちはそれについて考えるのに時間を無駄にしています。だから私は3つの提案があります:

  1. ブレークポイントを正しくする
  2. 範囲に適切な名前を付けます
  3. 宣言的であること

ヒント1:ブレークポイントを正しく取得する

では、正しいブレークポイントは何ですか?

あなたの幼稚園の自己はすでに円を描いています。それらを長方形に変えます。

ジャイアントモニターの人々に特別な何かを与えることを計画している場合は、600px、900px、1200px、および1800px。ちなみに、巨大なモニターをオンラインで注文する場合は、必ずコンピューター用に指定してください。巨大なトカゲを郵便で受け取りたくありません。

あなたのチャネリングされた若い自己が遊んでいるこれらのドットは、実際には14の最も一般的な画面サイズを表しています。

そのため、ビジネスマン、デザイナー、開発者、テスターに​​扮した人々の間で言葉が簡単に流れるようにする、かなり小さな絵を描くことができます。

ヒント2:範囲に適切な名前を付ける

Sure, you could name your breakpoints papa-bear and baby-bear if you like. But if I’m going to sit down with a designer and discuss how the site should look on different devices, I want it to be over as quickly as possible. If naming a size portrait tablet facilitates that, then I’m sold. Heck, I’d even forgive you for calling it “iPad portrait.”

“But the landscape is changing!” you may shout. “Phones are getting bigger, tablets are getting smaller!”

But your website’s CSS has a shelf life of about three years (unless it’s Gmail). The iPad has been with us for twice that time, and it has yet to be dethroned. And we know that Apple no longer makes new products, they just remove things from existing ones (buttons, holes, etc).

So 1024 x 768 is here to stay, folks. Let’s not bury our heads in the sand. (Fun fact: ostriches don’t live in cities because there is no sand, and thus nowhere to hide from predators.)

Conclusion: communication is important. Don’t purposefully detach yourself from helpful vocabulary.

Tip #3: Be declarative

I know, I know, that word “declarative” again. I’ll put it another way: your CSS should define what it wants to happen, not how it should happen. The “how” belongs hidden away in some sort of mixin.

前に説明したように、ブレークポイントに関する混乱の一部は、範囲の境界を定義する変数が範囲の名前として使用されることです。が範囲$large: 600pxである場合、単に意味がありませんlarge。と言うのと同じvar coordinates = 4;です。

したがって、コードで使用するためにそれらを公開するのではなく、ミックスイン内にそれらの詳細を非表示にすることができます。または、1つを改善して、変数をまったく使用しないこともできます。

最初は、簡単な例として以下のスニペットを作成しました。しかし、本当に私はそれがすべての基盤をカバーしていると思います。実際の動作を確認するには、このペンをチェックしてください。Sassなしでサイトを構築することは想像できないので、私はSassを使用しています。ロジックはCSS以下にも同じように適用されます。

@mixin for-phone-only { @media (max-width: 599px) { @content; } } @mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } @mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } @mixin for-desktop-up { @media (min-width: 1200px) { @content; } } @mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop-up { padding: 20px; } }

開発者に-upまたは-onlyサフィックスを指定するように強制していることに注意してください。

あいまいさは混乱を生みます。

An obvious criticism might be that this doesn’t handle custom media queries. Well good news, everybody. If you want a custom media query, write a custom media query. (In practice, if I needed more complexity than the above I’d cut my losses and run into the loving embrace of Susy’s toolkit.)

Another criticism might be that I’ve got eight mixins here. Surely a single mixin would be the sane thing to do, then just pass in the required size, like so:

@mixin for-size($size) { @if $size == phone-only { @media (max-width: 599px) { @content; } } @else if $size == tablet-portrait-up { @media (min-width: 600px) { @content; } } @else if $size == tablet-landscape-up { @media (min-width: 900px) { @content; } } @else if $size == desktop-up { @media (min-width: 1200px) { @content; } } @else if $size == big-desktop-up { @media (min-width: 1800px) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

Sure, that works. But you won’t get compile-time errors if you pass in an unsupported name. And to pass in a sass variable means exposing 8 variables just to pass to a switch in a mixin.

Not to mention the syntax @include for-desktop-up {...} is totes more pretty than @include for-size(desktop-up) {...}.

A criticism of both these code snippets might be that I’m typing out 900px twice, and also 899px. Surely I should just use variables and subtract 1 when needed.

If you want to do that, go bananas, but there are two reasons I wouldn’t:

  1. These are not things that change frequently. These are also not numbers that are used anywhere else in the code base. No problems are caused by the fact that they aren’t variables — unless you want to expose your Sass breakpoints to a script that injects a JS object with those variables into your page.
  2. The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils:
@mixin for-size($range) { $phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @if $range == phone-only { @media (max-width: #{$phone-upper-boundary - 1}) { @content; } } @else if $range == tablet-portrait-up { @media (min-width: $phone-upper-boundary) { @content; } } @else if $range == tablet-landscape-up { @media (min-width: $tablet-portrait-upper-boundary) { @content; } } @else if $range == desktop-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == big-desktop-up { @media (min-width: $desktop-upper-boundary) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

ああ、最後の数段落で怒りっぽい口調をとったので…Sassリストにブレークポイントを格納してそれらをループしてメディアクエリを出力するなどの魔法のようなことをする愚か者、または将来の開発者が苦労する同様にばかげたことを残念に思います解読する。

複雑さはバグが隠れているところです。

最後に、「ブレークポイントはデバイスではなくコンテンツに基づいているべきではないか」と考えているかもしれません。さて、私はあなたがこれまでにそれを成し遂げたことに驚いています、そして答えはイエスです…単一のレイアウトを持つサイトのために。または、複数のレイアウトがあり、レイアウトごとに異なるブレークポイントのセットを用意できる場合。また、サイトのデザインが頻繁に変更されない場合や、コンテンツに基づいてブレークポイントを維持したいので、デザインが更新されたときにブレークポイントを更新してもかまいませんか?

For complex sites, life is much easier if you pick a handful of breakpoints to use across the site.

We’re done! But this post has not been as furry as I would like, let me see if I can think of an excuse to include some…

Oh, I know!

Bonus tips for breakpoint development

  1. If you need to experience CSS breakpoints for screen sizes bigger than the monitor you’re sitting at, use the ‘responsive’ mode in Chrome DevTools and type in whatever giant size you like.
  2. The blue bar shows ‘max-width’ media queries, the orange bar is ‘min-width’ media queries, and the green bar shows media queries with both a min and a max.
  3. Clicking a media query sets the screen to that width. If you click on a green media query more than once, it toggles between the max and min widths.
  4. Right click a media query in the media queries bar to go to the definition of that rule in the CSS.

Hey, thanks for reading! Comment with your tops ideas, I’d love the hear them. And click the little heart if you think I deserve it, or leave it hollow and empty, like my sense of self-worth will be if you don’t.