Breakpoint

Katkaisukohta on olemassa, mutta suomalaiset kehittäjät ja suunnittelijat puhuvat breakpointeista. Työkalujen käyttöliittymät ovat englanniksi, joten sana on vakiintunut sellaisenaan.

CSS:ssä breakpoint on yleensä mediakysely, esimerkiksi @media (min-width: 48rem). Kun näkymä on vähintään 48 remiä leveä, kyselyn sisällä olevat tyylit tulevat voimaan.

Mobile first -tyylissä kirjoitetaan ensin kapean näkymän tyylit ja leveämmät lisätään min-width-kyselyillä. Webflow toimii toisin päin, joten Webflow-sivustoilla ajatellaan työpöydästä alaspäin ja max-width-logiikalla.

Mihin kohtiin breakpointit kannattaa laittaa?

Sisällön mukaan. Avaa sivu kapeana, levitä selainikkunaa hitaasti ja lisää breakpoint siihen kohtaan, jossa asettelu alkaa näyttää väärältä: rivit venyvät liian pitkiksi, kortit leviävät tai palstojen väliin jää tyhjää.

Valmiit oletukset ovat silti hyvä lähtökohta. Tailwindissa ne ovat 640, 768, 1024, 1280 ja 1536 pikseliä. Webflow rakentaa työpöytänäkymän pohjalta alaspäin: tabletti 991, vaakamobiili 767 ja pystymobiili 478 pikseliä.

Mitä vähemmän breakpointeja, sitä helpompi sivua on ylläpitää. Kun typografia skaalautuu clamp()-funktiolla ja ruudukko käyttää auto-fit- ja minmax()-arvoja, moni välikoon korjaus jää tarpeettomaksi.

Kyselyt kannattaa kirjoittaa em- tai rem-yksiköillä. Silloin ne reagoivat myös siihen, että käyttäjä on suurentanut selaimen oletustekstikokoa, ja asettelu vaihtuu ajoissa.

Mediakysely vai container query?

Mediakysely katsoo koko näkymän leveyttä. Container query (@container) katsoo komponentin oman säiliön leveyttä, joten sama kortti voi vaihtaa asettelua sivupalkissa ja täysleveässä osiossa. Kaikki yleiset selaimet ovat tukeneet sitä vuodesta 2023. Uudelleenkäytettäviin komponentteihin se sopii paremmin, sivun pääasettelu kuuluu edelleen mediakyselyille.

Breakpoint ohjelmoinnissa

Koodissa breakpoint tarkoittaa ihan muuta: kohtaa, johon debuggeri pysäyttää ohjelman suorituksen, jotta muuttujien arvot voi tarkistaa. Suomeksi siitä käytetään nimeä keskeytyskohta. Selaimen kehittäjätyökaluissa sellainen asetetaan klikkaamalla rivinumeroa, ja JavaScriptissä debugger-lause tekee saman koodin sisältä.