100% točan način za izradu CSS točaka prekida

Sljedećih minutu želim da zaboravite na CSS. Zaboravite na web razvoj. Zaboravite na digitalna korisnička sučelja.

I dok zaboravite na te stvari, želim da dopustite da vam um odluta. Da se odlutamo u prošlost. Povratak u mladost. Povratak na vaš prvi dan škole.

Bilo je to jednostavnije vrijeme, kada ste se trebali brinuti samo da crtate oblike i kontrolirate svoju inkontinenciju.

Pogledajte gornje točke. Primijetite kako su neki od njih zbijeni, a neki rašireni? Ono što želim da učinite je da me podijelite u pet skupina, kako god smatrate potrebnim.

Samo naprijed. Nakon provjere da nitko ne gleda, prstom poput djeteta nacrtajte krug oko svake od pet skupina.

Vjerojatno ste smislili nešto poput dolje, zar ne? (I što god radili, nemojte mi reći da ste se pomaknuli prema dolje bez izvođenja vježbe. Suočit ću se s dlanom.)

Svakako, te dvije točke s desne strane mogle su ići u bilo kojem smjeru. Ako ste ih grupirali, pretpostavljam. Kažu da nema pogrešnog odgovora, ali nikad nisam pogriješio, pa nikada nisam bio na primanju te određene floskule.

Prije nego što nastavim, jeste li nacrtali nešto poput dolje?

Vjerojatno ne. Pravo?

Ali to bi u osnovi bilo što biste radili kada svoje točke prekida postavljate na položaje koji se podudaraju sa točnom širinom popularnih uređaja (320px, 768px, 1024px).

Jesu li vam riječi donje prirode ikad ušle u uši ili izašle iz usta?

“Je li srednja točka prijeloma do 768px ili uključuje 768? Shvaćam ... i to je iPad krajolik, ili je to 'veliko'? Oh, velika je 768 piksela i više. Vidim. A mali je 320px? Koliki je to raspon od 0 do 319px? Točka prijeloma za mrave ? "

Mogao bih vam pokazati točne točke prekida i ostaviti na tome. No, vrlo mi je zanimljivo da je gornja metoda („glupo grupiranje“) toliko raširena.

Zašto bi to trebalo biti?

Mislim da se odgovor na ovaj problem, kao i na toliko problema, svodi na neusklađenu terminologiju. Napokon, daskanje na vodi u zaljevu Guantanamo zvuči sjajno ako ne znate što je od te stvari. (Ma volio bih da je to moja šala.)

Mislim da miješamo "granice" i "domete" u našim raspravama i provedbama prijelomnih točaka.

Recite mi, ako u Sassu radite točke prekida, imate li varijablu koja se zove $large, recimo, 768px?

Je li to donja granica raspona koju nazivate velikom ili gornja granica? Ako je donji, onda ne smijete imati $smalljer bi to trebalo biti 0, zar ne?

A ako je to gornja granica, kako biste onda definirali točku prekida $large-and-up? To mora biti upit medija sa min-widthod $medium, zar ne?

A ako govorite samo o granici kad kažete velika, tada ćemo se kasnije zabrkati jer je medijski upit uvijek raspon .

Ova je situacija u neredu i gubimo vrijeme razmišljajući o tome. Dakle, imam tri prijedloga:

  1. Dobro shvatite svoje prekidne bodove
  2. Razumno imenujte svoje domete
  3. Budite deklarativni

Savjet br. 1: Ispravite svoje točke prekida

Dakle, koje su prave točke prijeloma?

Već je vaš vrtić nacrtao krugove. Samo ću ih za vas pretvoriti u pravokutnike.

600 piksela, 900 piksela, 1200 piksela i 1800 piksela ako namjeravate ljudima koji prate divove pružiti nešto posebno. Uz napomenu, ako naručite gigant putem interneta, obavezno navedite da je za računalo. Ne želite poštom dobiti divovskog guštera.

Te točkice s kojima se igra vaše kanalizirano mlado ja zapravo predstavljaju 14 najčešćih veličina zaslona:

Tako možemo napraviti prilično malu sliku koja omogućuje lagan protok riječi između ljudi koji su odjeveni u poslovne ljude, dizajnere, programere i testere.

Savjet br. 2: Razumno imenujte raspone

Svakako, možete imenovati svoje točke prijeloma papa i medvjed ako želite. Ali ako ću sjesti s dizajnerom i razgovarati o tome kako web stranica treba izgledati na različitim uređajima, želim da to što prije završi. Ako to omogućava imenovanje portretnog tableta veličine , onda sam prodan. Dovraga, čak bih vam i oprostio što ste to nazvali "portret s iPada".

"Ali krajolik se mijenja!" možete vikati. "Telefoni postaju veći, tableti sve manji!"

Ali CSS vaše web stranice ima rok trajanja oko tri godine (osim ako nije Gmail). IPad je s nama već dva puta to vrijeme, a tek ga treba skinuti s prijestolja. I znamo da Apple više ne proizvodi nove proizvode, već samo uklanjaju stvari s postojećih (gumbi, rupe itd.).

Dakle, 1024 x 768 je tu da ostane, narode. Nemojmo zakopati glavu u pijesak. (Zabavna činjenica: nojevi ne žive u gradovima jer nema pijeska, a time se nemaju ni gdje sakriti od grabežljivaca.)

Zaključak: komunikacija je važna. Nemojte se namjerno odvajati od korisnog rječnika.

Savjet br. 3: Budite deklarativni

Znam, znam, opet tu riječ "deklarativno". Reći ću to drugačije: vaš CSS trebao bi definirati što želi da se dogodi, a ne kako bi se to trebalo dogoditi. "Kako" pripada skriveno u nekoj vrsti mješavine.

Kao što je ranije spomenuto, dio zabune oko prijelomnih točaka jest da se kao naziv raspona koriste varijable koje definiraju granicu raspona. jednostavno nema smisla ako je domet. To je isto što i reći .$large: 600pxlargevar coordinates = 4;

Dakle, te detalje možemo sakriti unutar kombinacije, umjesto da ih izložimo da se koriste u kodu. Ili možemo učiniti jedan bolji i uopće ne koristiti varijable.

Isprva sam donji isječak napravio kao pojednostavljeni primjer. Ali stvarno mislim da pokriva sve osnove. Da biste je vidjeli na djelu, pogledajte ovu olovku. Koristim Sass jer ne mogu zamisliti izgradnju web stranice bez njega. Logika se isto odnosi na CSS ili 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; } }

Imajte na umu da prisiljavam razvojnog programera da navede sufiks -upili -only.

Dvosmislenost rađa zbrku.

Očita kritika može biti da se ovo ne odnosi na prilagođene medijske upite. Pa dobre vijesti, svima. Ako želite prilagođeni upit za medije, napišite prilagođeni upit za medije. (U praksi, ako bih trebao veću složenost od gore spomenute, smanjio bih svoje gubitke i naletio na zagrljaj Susyinog alata.)

Još jedna kritika može biti što ovdje imam osam kombinacija. Svakako bi jedan miksin bio razuman, a zatim samo unesite potrebnu veličinu, otprilike ovako:

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

Naravno, to djeluje. Ali nećete dobiti pogreške tijekom kompajliranja ako unesete nepodržano ime. A prijeći u sass varijablu znači izložiti 8 varijabli samo da bi se prešlo na prekidač u mixinu.

Da ne spominjem da je sintaksa @include for-desktop-up {...}ljepša od @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; } }

Oh, i otkako sam tijekom posljednjih nekoliko odlomaka poprimio besmisleni ton ... žao mi je budale koja čini nešto čarobno poput spremanja točaka prekida na Sassovom popisu i petlje preko njih za izbacivanje medijskih upita ili nešto slično smiješno s čim će se mučiti budući programeri dešifrirati.

Kompliciranost je mjesto gdje se bugovi skrivaju.

Konačno, možda razmišljate „ne bih li svoje točke zaustavljanja trebao temeljiti na sadržaju, a ne na uređajima?“. Pa, začuđen sam što ste stigli tako daleko, a odgovor je da ... za web lokacije s jednim izgledom. Ili ako imate više rasporeda i sretni ste što imate različit skup točaka prekida za svaki raspored. Oh, a također ako se dizajn vašeg web mjesta ne mijenja često ili ćete rado ažurirati svoje točke prekida kad se vaši dizajni ažuriraju jer ćete ih htjeti zadržati na temelju sadržaja, zar ne?

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.