100% oikea tapa tehdä CSS-katkaisupisteitä

Noin seuraavan minuutin ajan haluan sinun unohtavan CSS: n. Unohda verkkokehitys. Unohda digitaaliset käyttöliittymät.

Ja kun unohdat nämä asiat, haluan sinun antavan mielesi vaeltaa. Vaeltaa ajassa taaksepäin. Takaisin nuoruuteesi. Takaisin ensimmäiseen koulupäivään.

Se oli yksinkertaisempi aika, jolloin sinun tarvitsi vain huolehtia muotojen piirtämisestä ja inkontinenssin pitämisestä kurissa.

Katso yllä olevia pisteitä. Huomaa, kuinka jotkut heistä kootaan yhteen ja jotkut heistä levinneet? Haluan sinun tekevän jakamaan heidät viiteen ryhmään minulle, niin kuin pidätkin sopivana.

Mene eteenpäin. Kun olet tarkistanut, ettei kukaan katsele, piirrä ympyrä jokaisen viiden ryhmän ympärille lapsenmuotoisella sormellasi.

Luulet luultavasti jotain alla olevaa, eikö? (Ja mitä ikinä teetkin, älä sano minulle, että vieritit alas tekemättä harjoitusta. Minä kohtaan kämmenen.)

Toki nämä kaksi pistettä oikealla olisivat voineet mennä kumpaakin suuntaan. Jos ryhmität heidät yhteen, luulisin. He sanovat, että väärää vastausta ei ole, mutta en ole koskaan erehtynyt, joten en ole koskaan ollut kyseisen tietyn asteen vastaanottavassa päässä.

Ennen kuin jatkan, piirtitkö jotain alla olevaa?

Luultavasti ei. Eikö?

Mutta periaatteessa sitä tekisit, jos asetat katkaisupisteet paikkoihin, jotka vastaavat tarkan suosittujen laitteiden leveyttä (320 kuvapistettä, 768 kuvapistettä, 1024 kuvapistettä).

Onko alla olevan luonteen sanat koskaan tulleet korviinne tai poistuneet suustasi?

"Onko keskimääräinen katkaisupiste enintään 768 kuvapistettä vai sisältääkö se 768 kuvapistettä? Näen ... ja se on iPad-maisema, vai onko se "suuri"? Voi, suuri on 768 kuvapistettä ja enemmän. Näen. Ja pieni on 320 kuvapistettä? Mikä on tämä alue välillä 0-319 kuvapistettä? Murtokohta muurahaisille ? "

Voisin edetä näyttämään sinulle oikeat rajapisteet ja jättää sen siihen. Mutta minusta on erittäin utelias, että yllä mainittu menetelmä ("typerä ryhmittely") on niin laajalle levinnyt.

Miksi sen pitäisi olla?

Mielestäni vastaus tähän ongelmaan, kuten niin monet ongelmat, johtuu väärästä terminologiasta. Loppujen lopuksi vesilautailu Guantanamonlahdella kuulostaa erittäin radalta, jos et tiedä, kumpi näistä asioista on. (Voi toivon, että se oli vitsi.)

Luulen, että sekoitamme "rajat" ja "alueet" keskusteluissamme ja murroskohtien toteuttamisessa.

Kerro minulle, jos teet katkaisukohtia Sassissa, onko sinulla muuttujaa nimeltä $large768 kuvapistettä?

Onko se sen alueen alaraja, jota viittat suureksi, vai ylempi raja? Jos se on alempi, sinulla ei saa olla mitään, $smallkoska sen pitäisi olla 0, eikö?

Ja jos se on yläraja, kuinka määrität taitekohdan $large-and-up? Sen täytyy olla median kysely, jossa on min-widthon $medium, eikö?

Ja jos viittaat vain rajaan, kun sanot iso, niin olemme hämmentyneitä myöhemmin, koska media kysely on aina alue .

Tämä tilanne on sotku ja tuhlaamme aikaa ajatella sitä. Joten minulla on kolme ehdotusta:

  1. Saat tauko pistettä oikeassa
  2. Nimeä alueet järkevästi
  3. Ole vakuuttava

Vinkki 1: Ota taittopisteet oikein

Joten mitkä ovat oikeat raja-arvot?

Lastentarhasi itse piirsi jo piirit. Muutan ne vain suorakulmioiksi sinulle.

600px, 900px, 1200px ja 1800px, jos aiot antaa jättiläisen näytön ihmisille jotain erityistä. Sivuhuomautuksena, jos tilaat jättimäisen näytön verkossa, varmista, että olet määrittänyt sen tietokoneelle. Et halua saada jättiliskää postiin.

Ne pisteet, joilla kanavoitunut nuori itsesi on pelannut, edustavat tosiasiallisesti 14 yleisintä näyttökokoa:

Joten voimme tehdä melko pienen kuvan, joka mahdollistaa helpon sanavirran liikemiehiksi, suunnittelijoiksi, kehittäjiksi ja testaajiksi pukeutuneiden ihmisten välillä.

Vinkki 2: Nimeä alueesi järkevästi

Toki, voit nimetä taukopisteet papa-karhu ja vauva-karhu, jos haluat. Mutta jos aion istua alas suunnittelijan kanssa ja keskustella siitä, kuinka sivuston pitäisi näyttää eri laitteilla, haluan sen olevan ohi mahdollisimman nopeasti. Jos koko muotokuva-tabletin nimeäminen helpottaa sitä, olen myynyt. Helvetti, anteeksi jopa, että kutsuit sitä iPad-muotokuvaksi.

"Mutta maisema muuttuu!" voit huutaa. "Puhelimet kasvavat, tabletit pienenevät!"

Mutta verkkosivustosi CSS: n säilyvyys on noin kolme vuotta (ellei se ole Gmail). IPad on ollut kanssamme kahdesti tuon ajan, ja sitä ei ole vielä valtaistuimelta. Ja tiedämme, että Apple ei enää tee uusia tuotteita, vaan vain poistaa asiat olemassa olevista tuotteista (napit, reiät jne.).

Joten 1024 x 768 on täällä pysyä, ihmiset. Älkäämme haud Päänsä hiekkaan. (Hauska tosiasia: strutsit eivät asu kaupungeissa, koska siellä ei ole hiekkaa ja siten mihinkään piiloutua saalistajien edestä.)

Johtopäätös: viestintä on tärkeää. Älä irrota itseäsi tarkoituksellisesti hyödyllisestä sanastosta.

Vinkki 3: Ole vakuuttava

Tiedän, tiedän, sanan "vakuuttava" uudelleen. Sanon sen toisella tavalla: CSS: n tulisi määritellä, mitä se haluaa tapahtua, ei miten sen pitäisi tapahtua. "Kuinka" on piilossa jonkinlaisessa sekoituksessa.

Kuten aiemmin keskusteltiin, osa hajaantumispisteiden ympärillä on, että alueen nimeksi käytetään muuttujia, jotka määrittävät alueen rajan . yksinkertaisesti ei ole mitään järkeä, jos se on alue. Se on sama kuin sanoa .$large: 600pxlargevar coordinates = 4;

Joten voimme piilottaa nämä yksityiskohdat miksauksen sisällä sen sijaan, että paljastaisimme ne käytettäviksi koodissa. Tai voimme tehdä yhden paremmin ja olla käyttämättä muuttujia lainkaan.

Aluksi tein alla olevan katkelman yksinkertaistettuna esimerkkinä. Mutta mielestäni se kattaa kaikki perusteet. Katso tämä kynä nähdäksesi sen toiminnassa. Käytän Sassia, koska en voi kuvitella sivuston rakentamista ilman sitä. Logiikka koskee CSS: ää tai vähemmän yhtä.

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

Huomaa, että pakotan kehittäjän määrittelemään -uptai -onlyjälkiliitteen.

Epäselvyys synnyttää sekaannusta.

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

Voi ja koska olen ottanut räikeän sävyn muutaman viimeisen kappaleen aikana ... sääli tyhmää, joka tekee jotain maagista, kuten tallentaa katkaisupisteitä Sass-luetteloon ja silmukkaa niitä mediatiedostojen tuottamiseen, tai jotain vastaavaa naurettavaa, jota tulevat kehittäjät kamppailevat tulkita.

Virheet piiloutuvat monimutkaisuuteen.

Lopuksi saatat ajatella "eikö minun pitäisi perustaa katkaisupisteitä sisältöön, ei laitteisiin?". Olen hämmästynyt siitä, että pääsit tähän mennessä, ja vastaus on kyllä ​​... sivustoille, joilla on yksi ulkoasu. Tai jos sinulla on useita asetteluja ja olet onnellinen siitä, että kullekin asettelulle on eri joukko katkaisupisteitä. Voi ja myös, jos sivustosi ulkoasu ei muutu usein, tai päivität mielelläsi katkaisupisteitä, kun suunnittelusi päivittyvät, koska haluat säilyttää ne sisällön perusteella, eikö?

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.

Hei, kiitos lukemisesta! Kommentoi huippuideoitasi, haluaisin kuulla ne. Ja napsauta pientä sydäntä, jos luulet ansaitsevani sen, tai jätän sen ontoksi ja tyhjäksi, kuten itsetuntoni tunne on, jos et.