100% правильний спосіб зробити точки зупинку CSS

Протягом наступної хвилини я хочу, щоб ви забули про CSS. Забудьте про веб-розробку. Забудьте про цифрові користувальницькі інтерфейси.

І коли ви забуваєте ці речі, я хочу, щоб ви дозволили вашому розуму блукати. Побродити назад у часі. Назад до юності. Повернемось до свого першого шкільного дня.

Це був простіший час, коли все, про що вам потрібно було турбуватися, - це малювати фігури та утримувати своє нетримання.

Погляньте на крапки вище. Зверніть увагу, як деякі з них згуртовані, а деякі розповсюджені? Я хочу, щоб ви поділили їх на п’ять груп для мене, як ви вважаєте за потрібне.

Вперед. Перевіривши, що ніхто не дивиться, намалюйте навколо кожної з п’яти груп своїм пальцем, схожим на дитину.

Ви, мабуть, придумали щось подібне нижче, правда? (І що б ви не робили, не кажіть мені, що ви прокрутили вниз, не роблячи вправи. Я зіткнусь з долонею.)

Звичайно, ці дві крапки праворуч могли піти в будь-який бік. Якщо ви згрупували їх разом, я гадаю. Вони кажуть, що немає неправильної відповіді, але я ніколи не помилявся, тому ніколи не був на прийомі у цієї конкретної балакучості.

Перш ніж продовжувати, ви намалювали щось на зразок нижче?

Можливо, ні. Правда?

Але це в основному те, що ви робили б, якщо встановлювали свої точки зупинки на позиціях, що відповідають точній ширині популярних пристроїв (320 пікселів, 768 пікселів, 1024 пікселів).

Чи коли-небудь слова нижчої природи потрапляли вам у вуха чи виходили з рота?

“Чи є середня точка зупинки до 768px, або включаючи 768? Бачу ... і це пейзаж iPad, чи це „велике“? О, великий - 768 пікселів і вище. Розумію. А маленький - 320 пікселів? Що це за діапазон від 0 до 319px? Точка зупинки для мурах ? "

Я міг би продовжити, щоб показати вам правильні точки зупинки і залишити так. Але мені дуже цікаво, що вищезазначений метод («безглузде групування») настільки поширений.

Чому це має бути?

Я думаю, що відповідь на цю проблему, як і на багато інших, зводиться до невідповідної термінології. Зрештою, водний спорт у затоці Гуантанамо звучить надзвичайно радісно, ​​якщо ви не знаєте, що це таке. (О, я би хотів, щоб це був мій жарт.)

Я думаю, що ми змішуємо "межі" та "діапазони" в наших обговореннях та реалізації точок зупинки.

Скажіть мені, якщо ви робите точки зупинку в Sass, чи маєте ви змінну, яка називається $large, скажімо, 768px?

Це нижня межа діапазону, яку ви називаєте великою, або верхня межа? Якщо це нижчий, то у вас не повинно бути нічого, $smallбо це повинно бути 0, так?

І якщо це верхня межа, то як би Ви визначили точку зупинки $large-and-up? Це повинно бути запит ЗМІ з min-widthпро $medium, НЕ так?

І якщо ви маєте на увазі лише межу, коли ви говорите велика, то пізніше нас чекає плутанина, оскільки медіа-запит - це завжди діапазон .

У цій ситуації безлад, і ми витрачаємо час, думаючи про це. Отже, у мене є три пропозиції:

  1. Правильно вкажіть свої точки розриву
  2. Назвіть свої діапазони розумно
  3. Будьте декларативними

Порада №1. Правильно визначте точки зупинку

Отже, які правильні точки зупинку?

Ваш дитячий садок вже намалював кола. Я просто перетвору їх для вас у прямокутники.

600px, 900px, 1200px та 1800px, якщо ти плануєш надати людям-гігантам щось особливе. На додаток, якщо ви замовляєте гігантський монітор в Інтернеті, обов’язково вкажіть його для комп’ютера. Ви не хочете отримувати гігантську ящірку поштою.

Ті точки, з якими грався ваш молодий канал, насправді представляють 14 найбільш поширених розмірів екрану:

Тож ми можемо скласти досить маленьку картинку, яка дозволяє легко переносити слова між людьми, одягненими у ділові люди, дизайнери, розробники та тестувальники.

Порада №2. Назвіть діапазони розумно

Звичайно, ви можете назвати свої точки зупинки папа-ведмідь та ведмедик, якщо хочете. Але якщо я збираюся сісти з дизайнером і обговорити, як повинен виглядати сайт на різних пристроях, я хочу, щоб це закінчилося якомога швидше. Якщо називання портретного планшета розміром це полегшує, то я проданий. Чорт візьми, я навіть пробачив би тебе за те, що ти назвав це "портретом iPad"

"Але пейзаж змінюється!" ти можеш кричати. "Телефонів стає більше, планшетів стає менше!"

Але CSS вашого веб-сайту має термін зберігання близько трьох років (якщо це не Gmail). IPad вже два рази був із нами, і його ще не скинули з трону. І ми знаємо, що Apple більше не робить нових продуктів, вони просто видаляють речі з існуючих (кнопки, отвори тощо).

Отже, 1024 x 768, щоб залишитися, люди. Не ховаймо голови в пісок. (Цікавий факт: страуси не живуть у містах, бо там немає піску, а отже, ніде не сховатися від хижаків.)

Висновок: важливим є спілкування. Не цілеспрямовано відривайтеся від корисної лексики.

Порада No3: Будьте декларативними

Я знаю, я знаю, це слово «декларативне» знову. Я скажу по-іншому: ваш CSS повинен визначати, що він хоче, а не як це має статися. "Як" належить приховане в якомусь міксіні.

Як вже обговорювалося раніше, частиною плутанини навколо точок зупинку є те, що змінні, що визначають межу діапазону, використовуються як назва діапазону. $large: 600pxпросто не має сенсу, якщо largeце діапазон. Це те саме, що сказати var coordinates = 4;.

Таким чином, ми можемо приховати ці деталі всередині мікшину, а не виставляти їх для використання в коді. Або ми можемо зробити це краще і взагалі не використовувати змінні.

Спочатку я зробив наведений нижче фрагмент як спрощений приклад. Але насправді я думаю, що це охоплює всі основи. Щоб побачити його в дії, перевірте цю ручку. Я використовую Sass, бо не уявляю, як будувати сайт без нього. Логіка застосовується до CSS або Less точно так само.

@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; } }

Ох, і оскільки я набрав безглуздого тону за останні кілька абзаців ... Я шкодую дурня, який робить щось магічне, як зберігання точок зупинки в списку Сасса, і циркулює над ними для виведення медіа-запитів, або щось подібне смішне, що майбутні розробники будуть боротися розшифровувати.

Складність - це місце, де ховаються помилки.

Нарешті, ви можете подумати: «Чи не слід базувати свої точки зупинки на вмісті, а не на пристроях?». Ну, я здивований, що ви пройшли так далеко, і відповідь - так ... для сайтів з єдиним макетом. Або якщо у вас є кілька макетів і ви раді мати різні набори точок зупинки для кожного макета. Ну, а також якщо дизайн вашого сайту не змінюється часто, або ви із задоволенням оновлюєте свої точки зупинки при оновленні дизайну, оскільки ви хочете зберегти їх на основі вмісту, так?

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.