de David Gilbertson

Modul 100% corect de a face puncte de întrerupere CSS

Modul 100 corect de a face puncte de intrerupere CSS

Pentru următorul minut, cam așa, vreau să uitați de CSS. Uitați de dezvoltarea web. Uitați de interfețele digitale ale utilizatorului.

Și în timp ce uiți aceste lucruri, vreau să-ți lași mintea să hoinărească. Să rătăcească înapoi în timp. Înapoi la tinerețe. Înapoi la prima zi de școală.

A fost o perioadă mai simplă, când tot ce trebuia să vă faceți griji a fost să desenați forme și să vă țineți incontinența sub control.

Modul 100 corect de a face puncte de intrerupere CSS

Uitați-vă la punctele de mai sus. Observați cum unele dintre ele sunt aglomerate și unele dintre ele răspândite? Ceea ce vreau să faceți este să le împărțiți în cinci grupuri pentru mine, oricum considerați potrivit.

Dați-i drumul. După ce ai verificat dacă nimeni nu se uită, trasează un cerc în jurul fiecăruia dintre cele cinci grupuri cu degetul tău copil.

Probabil că ai venit cu ceva de genul de mai jos, nu? (Și orice ai face, nu-mi spune că ai derulat în jos fără să faci exercițiul. Mă voi confrunta cu palma.)

1611874147 907 Modul 100 corect de a face puncte de intrerupere CSS

Sigur, acele două puncte din dreapta ar fi putut merge în ambele sensuri. Dacă le-ați grupat, este în regulă, cred. Ei spun că nu există un răspuns greșit, dar nu am greșit niciodată, așa că nu am fost niciodată la capătul acelei platitudini.

Înainte de a continua, ai desenat ceva de genul de mai jos?

1611874147 175 Modul 100 corect de a face puncte de intrerupere CSS

Probabil ca nu. Dreapta?

Dar asta este practic ceea ce ați face dacă setați punctele de întrerupere la poziții care se potrivesc cu lățimea exactă a dispozitivelor populare (320px, 768px, 1024px).

1611874147 494 Modul 100 corect de a face puncte de intrerupere CSS

V-au pătruns vreodată cuvinte de natura de mai jos în urechi sau v-au ieșit din gură?

„Este punctul de rupere mediu pâna la 768px, sau inclusiv 768? Văd … și acesta este peisajul iPad-ului, sau este „mare”? Oh, mare are 768 px si sus. Văd. Și mic este 320px? Care este acest interval de la 0 la 319 px? Un punct de întrerupere pentru furnici? ”

Aș putea continua să vă arăt punctele de întrerupere corecte și să le las la asta. Dar mi se pare foarte curios că metoda de mai sus („grupare stupidă”) este atât de răspândită.

De ce ar trebui să fie asta?

Cred că răspunsul la această problemă, la fel ca atâtea probleme, se reduce la terminologia nealiniată. Dupa toate acestea, waterboarding la Guantanamo Bay sună super rad dacă nu știi care sunt aceste lucruri. (Oh Eu doresc asta a fost gluma mea.)

Cred că amestecăm „limite” și „intervale” în discuțiile noastre și implementarea punctelor de întrerupere.

Spune-mi, dacă faci puncte de întrerupere în Sass, ai o variabilă numită $large adică, să zicem, 768px?

Este limita inferioară a intervalului la care faceți referire ca fiind mare sau limita superioară? Dacă este cel mai mic, atunci trebuie să nu aveți $small pentru că asta ar trebui să fie 0, dreapta?

Și dacă este limita superioară, atunci cum ați defini un punct de întrerupere $large-and-up? Aceasta trebuie să fie o interogare media cu un min-width de $medium, dreapta?

Și dacă vă referiți doar la o limită atunci când spuneți că este mare, atunci ne confundăm mai târziu, deoarece o interogare media este întotdeauna o gamă.

Această situație este o mizerie și pierdem timpul gândindu-ne la asta. Așadar, am trei sugestii:

  1. Ia-ți pauzapuncte dreapta
  2. Denumiți-vă intervale cu sens
  3. Fii declarativ

Sfatul nr. 1: Obțineți punctele de întrerupere corecte

Deci, care sunt dreapta puncte de întrerupere?

Sinele tău de grădiniță a atras deja cercurile. Le voi transforma în dreptunghiuri doar pentru tine.

1611874147 657 Modul 100 corect de a face puncte de intrerupere CSS

600px, 900px, 1200px și 1800px dacă intenționați să oferiți oamenilor cu monitor gigant ceva special. Pe o notă laterală, dacă comandați un monitor gigant online, asigurați-vă că specificați că este pentru un computer. Nu vrei ia o șopârlă uriașă prin poștă.

Acele puncte cu care te-ai jucat sinele tău canalizat reprezintă de fapt cele mai comune 14 dimensiuni de ecran:

1611874147 293 Modul 100 corect de a face puncte de intrerupere CSS
credit de imagine

Deci, putem face o imagine destul de mică, care să permită fluxul ușor de cuvinte între oamenii îmbrăcați în oameni de afaceri, designeri, dezvoltatori și testeri.

1611874147 215 Modul 100 corect de a face puncte de intrerupere CSS
Regret alegerea mea de portocaliu și verde, dar nu refac toate aceste imagini acum.

Sfatul # 2: Denumiți-vă cu atenție gamele

Sigur, ai putea numi punctele tale de întrerupere tată-urs și prunc-urs dacă vrei. Dar dacă mă voi așeza cu un designer și voi discuta despre cum ar trebui să arate site-ul pe diferite dispozitive, vreau să se termine cât mai repede posibil. Dacă denumiți o dimensiune tableta portret facilitează asta, apoi sunt vândut. Heck, chiar te-aș ierta pentru că l-ai numit „portret iPad”.

„Dar peisajul se schimbă!” s-ar putea să strigi. „Telefoanele sunt din ce în ce mai mari, tabletele sunt din ce în ce mai mici!”

Dar CSS-ul site-ului dvs. are o durată de valabilitate de aproximativ trei ani (cu excepția cazului în care este vorba de Gmail). IPad-ul a fost alături de noi de două ori și încă nu a fost detronat. Și știm că Apple nu mai produce produse noi, ci doar elimină lucrurile din cele existente (butoane, găuri etc.).

Deci, 1024 x 768 este aici pentru a rămâne, oameni buni. Să nu ne îngropăm capul în nisip. (Fapt amuzant: struții nu locuiesc în orașe, deoarece nu există nisip și, prin urmare, nu se ascunde de prădători.)

Concluzie: comunicarea este importantă. Nu vă detașați în mod intenționat de vocabularul util.

Sfatul # 3: Fii declarativ

Știu, știu, cuvântul „declarativ” din nou. Voi spune altfel: CSS-ul tău ar trebui să definească ce vrea să se întâmple, nu Cum ar trebui să se întâmple. „Cum” aparține ascuns într-un fel de mixin.

După cum sa discutat mai devreme, o parte a confuziei în jurul punctelor de întrerupere este că variabilele care definesc un limite dintr-o gamă sunt utilizate ca Nume din gama. $large: 600px pur și simplu nu are sens dacă large este o gamă. Este la fel ca a spune var coordinates = 4;.

Deci, putem ascunde aceste detalii în interiorul unui mixin, mai degrabă decât să le expunem pentru a fi utilizate în cod. Sau putem face unul mai bine și să nu folosim deloc variabile.

La început am făcut fragmentul de mai jos ca exemplu simplificat. Dar într-adevăr cred că acoperă toate bazele. Pentru a o vedea în acțiune, verificați acest stilou. Folosesc Sass pentru că nu-mi pot imagina construirea unui site fără el. Logica se aplică în același timp CSS sau 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;
  }
}

Rețineți că forțez dezvoltatorul să specifice -up sau -only sufix.

Ambiguitatea generează confuzie.

O critică evidentă ar putea fi că aceasta nu gestionează interogările media personalizate. Vești bune, toată lumea. Dacă doriți o interogare media personalizată, scrieți o interogare media personalizată. (În practică, dacă aș avea nevoie de mai multă complexitate decât cele de mai sus, mi-aș reduce pierderile și aș avea o îmbrățișare iubitoare a Susytrusa de instrumente.)

O altă critică ar putea fi că am opt mixine aici. Cu siguranță un singur mixin ar fi cel mai sănătos lucru de făcut, apoi treceți doar în dimensiunea necesară, așa:

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

Sigur, asta funcționează. Dar nu veți primi erori în timpul compilării dacă treceți cu un nume neacceptat. Și a trece într-o variabilă sass înseamnă a expune 8 variabile doar pentru a trece la un comutator într-un mixin.

Ca să nu mai vorbim de sintaxă @include for-desktop-up {...} este toate mai frumoase decât @include for-size(desktop-up) {...}.

O critică a ambelor fragmente de cod ar putea fi că scriu 900 px de două ori și, de asemenea, 899 px. Cu siguranță ar trebui să folosesc doar variabile și să scăd 1 pe când este necesar.

Dacă doriți să faceți acest lucru, mergeți la banane, dar nu există două motive:

  1. Acestea nu sunt lucruri care se schimbă frecvent. Acestea nu sunt, de asemenea, numere care sunt utilizate oriunde altundeva în baza codului. Nici o problemă nu este cauzată de faptul că ele nu sunt variabile – cu excepția cazului în care doriți să expuneți punctele de întrerupere Sass unui script care injectează un obiect JS cu acele variabile în pagina dvs.
  2. Sintaxa este neplăcut când vrei să transformi numerele în șiruri cu Sass. Mai jos este prețul pe care îl plătești pentru a crede că repetarea unui număr de două ori este cel mai rău dintre toate relele:
@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, de vreme ce am luat un ton dezgustător în ultimele paragrafe … Mi-e milă de prostul care face ceva magic, cum ar fi să stocheze puncte de întrerupere într-o listă Sass și să-l ascult pentru a genera interogări media sau ceva ridicol în mod similar, pe care viitorii dezvoltatori se vor lupta a descifra.

Complexitatea este locul unde ascund bug-urile.

În cele din urmă, s-ar putea să vă gândiți „nu ar trebui să-mi bazez punctele de întrerupere pe conținut, nu pe dispozitive?”. Ei bine, sunt uimit că ai ajuns până aici și răspunsul este da … pentru site-urile cu un singur aspect. Sau dacă aveți mai multe planuri și sunteți fericiți că aveți un set diferit de puncte de întrerupere pentru fiecare aspect. A și, de asemenea, dacă designul site-ului dvs. nu se schimbă des sau vă faceți plăcere să vă actualizați punctele de întrerupere atunci când proiectele dvs. se actualizează, deoarece doriți a pastra pe baza conținutului, nu?

Pentru site-urile complexe, viața este mult mai ușoară dacă alegeți o mână de puncte de întrerupere pe care să le utilizați pe site.

Au fost efectuate! Dar această postare nu a fost atât de blană pe cât aș vrea, permiteți-mi să văd dacă îmi vine în minte o scuză pentru a include câteva …

Oh, stiu!

Sfaturi bonus pentru dezvoltarea punctului de întrerupere

1611874147 102 Modul 100 corect de a face puncte de intrerupere CSS
Da, chiar și flickr are puncte de întrerupere la 768 și 1400
  1. Dacă trebuie să experimentați puncte de întrerupere CSS pentru dimensiuni de ecran mai mari decât monitorul la care stați, utilizați modul „responsive” în Chrome DevTools și introduceți orice dimensiune gigant doriți.
  2. Bara albastră afișează interogări media „lățime maximă”, bara portocalie este interogări media „lățime minimă”, iar bara verde afișează interogări media atât cu un minim cât și cu un maxim.
  3. Dând clic pe o interogare media setează ecranul la lățimea respectivă. Dacă faceți clic pe o interogare media verde de mai multe ori, aceasta comută între lățimile maxime și minime.
  4. Faceți clic dreapta pe o interogare media din bara de interogări media pentru a accesa definiția acelei reguli din CSS.

Hei, mulțumesc pentru lectură! Comentează cu ideile tale de top, mi-ar plăcea să le aud. Și faceți clic pe inima mică dacă credeți că o merit sau o lăsați goală și goală, așa cum va fi sentimentul meu de auto-valoare dacă nu.