100% правилният начин да направите CSS точки на прекъсване

За следващата минута или така искам да забравите за CSS. Забравете за уеб разработката. Забравете за цифровите потребителски интерфейси.

И докато забравяте тези неща, искам да позволите на ума ви да се скита. Да се ​​скитам назад във времето. Обратно към младостта си. Обратно към първия ви учебен ден.

Това беше по-просто време, когато всичко, от което трябваше да се притеснявате, беше да рисувате фигури и да държите инконтиненцията си под контрол.

Погледнете точките по-горе. Забележете как някои от тях са струпани заедно, а някои от тях се разпространяват? Това, което искам да направите, е да ги разделите на пет групи за мен, както прецените.

Продължавай. След като проверите дали никой не гледа, нарисувайте кръг около всяка от петте групи с пръст, подобен на вашето дете.

Вероятно сте измислили нещо като долу, нали? (И каквото и да правите, не ми казвайте, че сте превъртали надолу, без да правите упражнението. Ще се изправя срещу дланта.)

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

Преди да продължа, нарисувахте ли нещо като по-долу?

Вероятно не. Нали?

Но това е основно това, което бихте направили, ако зададете точките на прекъсване на позиции, съвпадащи с точната ширина на популярните устройства (320px, 768px, 1024px).

Имали ли са думи от долната природа някога в ушите ви или излизали от устата ви?

„ Средната точка на прекъсване до 768px ли е или включва 768? Разбирам ... и това е пейзажът на iPad, или това е "голямо"? О, големият е 768px и нагоре. Виждам. А малкият е 320px? Какъв е този диапазон от 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 е тук, за да остане, хора. Да не си заравяме главите в пясъка. (Забавен факт: щраусите не живеят в градовете, защото няма пясък и по този начин няма къде да се скрият от хищниците.)

Заключение: комуникацията е важна. Не се откъсвайте целенасочено от полезния речник.

Съвет # 3: Бъдете декларативни

Знам, знам, тази дума „декларативна“ отново. Ще го кажа по друг начин: вашият CSS трябва да дефинира какво иска да се случи, а не как трябва да се случи. „Как“ принадлежи скрито в някакъв вид смесване.

Както беше обсъдено по-рано, част от объркването около точките на прекъсване е, че променливите, които определят граница на диапазон, се използват като името на диапазона. $large: 600pxпросто няма смисъл, ако largeе диапазон. Това е същото като да кажеш var coordinates = 4;.

Така че можем да скрием тези подробности в миксин, вместо да ги изложим за използване в кода. Или можем да направим по-добре и изобщо да не използваме променливи.

Първоначално направих долния фрагмент като опростен пример. Но наистина мисля, че обхваща всички основи. За да го видите в действие, разгледайте тази писалка. Използвам 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.