Komme i gang med CSS Math Funksjoner Nivå 4

Funksjonelle notater er en del av CSS-verdiene og enhetene, som også er hjemmet til nyttige matematiske funksjoner som calc (), og fra nivå 4 min () og max (). Disse kraftige funksjonene åpner utrolige døråpninger for CSS-forfattere som krever matematikklogikk evner innen CSS. I denne artikkelen diskuterer vi calc (), min () og max () og hvordan alle tre kan være nyttige i arbeidet ditt akkurat nå. La oss komme i gang!

Hva Heck er funksjonelle notasjoner?

Funksjonelle notasjoner er en av ni foreldreseksjoner (seksjon åtte som er nøyaktige) av W3C CSS-verdier og enheter. Som av Nivå 4-redaktørens utkast, inneholder funksjonelle notater nå flere delseksjoner som veksle() som tillater å bytte mellom verdier og tilordne referanser gjennom bruk av attr (). Det er også et annet interessant underavsnitt som heter "Matematiske uttrykk" som omfatter våre vennlige mattefunksjoner calc (), min () og max (). 

La oss gå til W3C-definisjonen for å hjelpe oss å forstå hvilke funksjonelle notater som er:

"En funksjonell notasjon er en type komponentverdi som kan representere mer komplekse typer eller påkalle spesiell behandling. Syntaxen starter med navnet på funksjonen umiddelbart etterfulgt av en venstre parentes, etterfulgt av argumentet / argumentene til notasjonen etterfulgt av en høyre parentes. "

I lekmannens vilkår sier de at det er et "funksjonsnavn", for eksempel calc, etterfulgt av åpning ( og lukking ) parentes. Men det som går mellom dem?

Innføring av matematiske uttrykk

Som nevnt er "Matematiske uttrykk" et underavsnitt av "Funksjonsnotasjoner", men hva er de og hva gjør de? Igjen, la oss gå til W3C, der de er definert som:

"Matematiske funksjoner, calc (), min () og max (), tillater matematiske uttrykk med tillegg (+), subtraksjon (-), multiplikasjon (*) og divisjon (/) som skal brukes som komponentverdier."

Det betyr calc (), min () og max () er "matematiske funksjoner" som tillater "uttrykk" innenfor parentes for å "beregne verdier". Ok, det er klart nå. Uttrykket "uttrykk" er bare en fancy måte å si "matematikklogikk er helt tillatt innenfor parentesene".

Introdusert på nivå 4 er en nylig oppdatert definisjon som utfyller det vi vet så langt:

"Komponenter av en mattefunksjon kan være bokstavelige verdier, andre matematiske funksjoner eller andre uttrykk, for eksempel attr (), som vurderer til en gyldig argumenttype (som ).” 

For ytterligere å klargjøre, er "andre matematiske funksjoner" referert her calc (), min () og max (), men de oppgir også at disse funksjonene kan nestes inn i hverandre. Du kan skrive Beregnet (min ()), min (beregnet ()), Beregnet (max (min ())), Beregnet (min (attr ())) og så videre. Imidlertid er mitt forslag å gjøre ditt beste og unngå nesting vortex, selv med evnen til å gjøre det som spec foreslår.

La oss nå si "hallo" igjen til et par fremragende mattefunksjoner som nesten mistet sjansen til å riste hendene med CSS Working Group.

Velkommen tilbake min () og max ()

Funksjonene min () og max () er to matematiske funksjoner som gjør sitt merke, men først etter at de nesten ble fjernet fra verdiene og enhetene Nivå 4 redaktørens utkast. Takket være Lea Verou tvang vindene av forandring seg inn, og jeg kunne ikke vært lykkeligere.

"Kanskje nå at verdier 3 har gått til CR, er det på tide å revurdere å legge til min () og max () tilbake i verdier 4?

Forfattere gjør ekstremt rare hacks med calc () å etterligne dem i skriftstørrelse og linjehøyde, som de kaller "CSS låser". Hvis du google CSS låser du vil se hvor utbredt disse hackene blir, noe som indikerer et klart forfatterbehov.

Videre, som CSS-variabler blir mer utbredt, er behovet for min () og max () vil bli enda større. Jeg husker noen av problemene som fikk oss til å slippe dem 6 år siden, kan nå løses med ugyldig ved beregning av verditid konseptet som Variabler introduserte. "- Lea Verou

Siden Leas forslag til GitHub, min () og max () har offisielt blitt satt inn i redaktørens utkast til CSS nivå 4 verdier og enheter, inkludert en tidlig adopsjon av WebKit. Utviklere kan personlig eksperimentere og utforske med WebKit Nightly (per 10/24/17). Her er den eneste WebKit forpliktet til det merkelig nysgjerrige hvor støtten ble gitt magisk til min () og max ().

Et oversikt over klemme()

Et annet spennende stykke sladder i den samme GitHub-tråden, startet av Lea Verou, var kommentaren der Tab Atkins antyder en faktisk klemme() funksjon. klemme() ville bokstavelig talt "klemme" en verdi mellom grenseværdier.

"... Jeg er enig i det klemme(), mens det er teknisk overflødig, er nyttig ofte nok til at det sannsynligvis fortjener å eksistere. "

Oi da! Dette ville være ganske tillegg til matematiske uttrykk. En funksjon som klemme() er en klar seier for dagens behovsfulle behov og vil sikkert være en velkommen venn til språket.

klemme (minN, midN, maxN)

Nåværende diskusjoner dreier seg om denne typen syntaks over og jeg er en som er enig med forslaget; Det gir mening og leser på en logisk måte. Jeg lurer bare på hva som vil skje med bruken av min () og max () hvis klemme() faktisk ser ut i fremtiden.

Med vår vannkjøler snakkes ut av veien, kan vi fokusere på de faktiske mattefunksjonene vi kom hit for å diskutere; calc (), min () og max ().

Nå møtes calc ()

Dette er en av mine favoritt matte funksjoner til grace CSS og kan gjøre alle slags trollkarl. Syntaxen er heller ikke for grov, når du kommer på hengen, og støtten er fantastisk.

.min-elementet bredde: calc (50% - 10rem); 

I denne prøven ovenfor har vi funksjonsnavnet (calc) etterfulgt av våre parenteser som inneholder "uttrykk", eller med andre ord ... matematikklogikk.

"Kalk () -funksjonen tillater matematiske uttrykk med tillegg (+), subtraksjon (-), multiplikasjon (*) og divisjon (/) som skal brukes som komponentverdier." - W3C

Igjen, dette er fancy å snakke for å si "du kan gjøre matte i parentesene".

Med hensyn til uttrykk kan forfattere overføre generiske verdier som 50%, 2em, 40, og kan bruke calc () hvor enn , , , , , , eller  verdier er tillatt. Mine favoritt enheter å bruke og undersøke i naturen er viewport enheter (vh,vw, Vmin, vmax). Dette er skjermdimensjonsverdiene som er spesielt nyttige med typografi og layout som vi skal se.

calc () I villmarken

Eksempelet ovenfor er bare en måte å håndtere responsiv typografi på. Ved hjelp av en kombinasjon av medieforespørsler, Sass, calc () og viewport-enheter, viser Mike oss hvordan responsiv typografi kan skalere perfekt mellom bestemte pixelverdier.

Her er en annen kjeve som slipper typografi demo bruker calc () og viewport-enheter av Tim Brown. Denne demoen ble brukt til sin artikkel om å diskutere CSS-låser som jeg oppfordrer deg til å lese om typografi er noe du bryr deg om.

Viewport enheter og calc () kan også bidra til å lage noen av våre mest favoritt layout mønstre. I demonstrasjonen ovenfor, calc () brukes til å trekke høyden på bunnteksten fra høyden av visningsporten (vh). En smart løsning av Chris Coyier for vår gamle venn "The Sticky Footer" så ofte forespurt. Denne demoen fungerer også bra når det kombineres med CSS-variabler også.

Det er sikkert andre tilfeller når det gjelder applikasjoner og dynamiske stater i denne demonstrasjonen av David Khourshid. David bruker calc () for bakgrunner, offsetverdier, transformasjoner, filtre, opasitet og jevn bredde. Dette er også en flott demonstrasjon for de som ønsker å dykke inn i React sammen med CSS-variabler.

La oss nå se på to ekstra matematiske funksjoner som du sikkert vil glede deg over, nå kjent som min () og max ().

min () og max (): Definere begrensninger

Som nevnt tidligere, er disse funksjonene fremdeles i sin barndom, så demoer som viser fremvisningssaker er dyster, men ikke la det skremme deg fra å eksperimentere. For å undersøke min () og max () du må laste ned WebKit nattlig. Når du er lastet ned, er du fri til å åpne Nightly (svart ikon) og komme på jobb.

min (uttrykk, [uttrykk]) maks (uttrykk, [uttrykk])

Husk da vi lærte hva uttrykk var? Det var bare en fancy måte å si "matematikklogikk". For eksempel:

min (1 * 10vw, 2 / 50vw) max (1 * 10vw, 2 / 50vw)

Hvert uttrykk er kommaseparert med et ekstra uttrykk som følger. Vi kan også vende seg til spesifikasjonen som uttrykkelig angir samme regel:

"Beregnet verdi for min () eller max () er den kommaseparerte listen over uttrykk" - W3C

I tilfelle du savnet den svært viktige delen av forklaringen, oppgav specen bare a Kommaseparert liste over uttrykk akkurat som vi gjorde i kodestykket tidligere.

"En min () eller max () -funksjon representerer den minste (mest negative) eller største (mest positive) henholdsvis kommaseparerte beregning den inneholder." - W3C

Fikk du alt det? De sa nettopp minste (mest negative) eller største (mest positive). W3C ga oss bare tillatelse til å skrive negative tall som en del av uttrykkene våre.

La oss ta denne gangen nå for å se hvordan min () og max () bevise seg i en fungerende demo; hold på hatter.

min () og max () I det virkelige liv

Her er en demonstrasjon som viser et par brukssaker til min () og max () bruker en komponent bredde og skriftstørrelse. De bredde har en minimumsbegrensning og en maksimal begrensning mens komponenten vår er skriftstørrelse er også fastspent med en minimums- og maksimumsverdi. Husk dette vil bare fungere i WebKit Nightly som av denne skrivingen; hvis du vil se en animasjon av den i aksjon, ta en titt på denne GIF (ærlig for tung for å bli integrert i siden).

I eksemplet ovenfor begynner jeg ting ved å begrense bredde og gjør det i en linje.

bredde: min (maks (100px * 2, 70vw), 500px);

Ved å bruke fremgangsmåten ovenfor er jeg i stand til å inkludere en mellombegrensning vs. bare minimum og maksimum. Denne linjen med kode forteller nettleseren "Prøv å sette bredden til 70vw, men la den ikke gå under 200px (100px * 2) eller høyere enn 500px. " Det er også en annen vei du kan gå ned for å oppnå et lignende resultat.

min (maks (minN, midN), maxN)

For å forklare mer detaljert tilsvarer dette til et minimum, en mellom- og til slutt en maksimal begrensningsverdi. nesting max () innenfor min () hjelper klemme mellom de ønskede begrensningene.

min bredde: 200px maksimal bredde: 500px

Hvis vi brukte en minstebredde og max bredde vi ville komme til en tilsvarende destinasjon vi oppnådde ved hjelp av min () og max (). Jeg er nysgjerrig om egenskaper som en minstebredde vil bli foreldet til fordel for matematiske funksjoner som min () og max () i de kommende årene.

Med hensyn til skriftstørrelse Jeg bruker samme min / max tilnærming for å lage responsiv og låsende typografi.

skriftstørrelse: min (maks (1rem, 4vw), 2rem);

Jeg forteller nettleseren "Prøv å sette skriftstørrelsen til 4vw, men ikke la den gå noe under 1rem eller høyere enn 2rem. " Dessverre er det ikke noe tilsvarende som min-font-size og max-font-size som vi hadde for bredde, men som av CSS Fonts Module Level 4 spec som kunne bli en realitet.

Dette er absolutt spennende nyheter, og forfatterne er like glade når det gjelder å begrense verdiene i CSS.

Å ha min () og max () betyr ingen flere "CSS Locks"! Du kan lage en nummerklemme ved å nesting min (maks ()) ☛ skriftstørrelse: min (maks (30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

- Tommy H🎃dgins (@innovati) 19. september 2017

Bare søk "CSS Locks"

Hvis du bruker en søkemotor til å jakte på CSS Locks, finner du masser av artikler og demoer. CodePen viser også en rekke penner under en annen CSS Locks-søk. For de som er nye for ideen om CSS Locks, la meg forklare mer detaljert.

Låseteknikken gjør det mulig å overføre jevnt mellom to verdier, avhengig av den nåværende visningsportstørrelsen. Tim Brown kalte det som "CSS Locks" i sin artikkel "Fleksibel typografi med CSS låser", men denne teknikken ble først introdusert av Mike Riethmuller i sin artikkel "Nøyaktig kontroll over responsiv typografi." 

Dette kan være nyttig når du bruker calc () og visningsenheter for overskrifter og kroppskopi som skaleres opp eller ned avhengig av dimensjonene på skjermen. Denne typen begrensning er det vi har kjent som "CSS Locks".

Det er mange artikler om CSS Locks, så her er noen av mine favoritt som å lese over i din personlige tid.

• Viewport Unit Based Typography av Zell Liew
  
• Matematikken til CSS låser av Florens Verschelde
  
• CSS "låser" av Chris Coyier
  
• Fluid Typografi av Geoff Graham
  
• Responsive Og Fluid Typografi Med VH Og VW Enheter av Michael Riethmuller
• Fluid Responsive Typography Med CSS Poly Fluid Dimensjonering av Jake Wilson

Låsing med EQCSS

I demonstrasjonen ovenfor av Tommy Hodgins brukes EQCSS for å klemme seg skriftstørrelse med JavaScript ved roret, mens CSS er i baksetet. Jeg lar deg bestemme for deg selv hvordan du føler deg om JavaScript, blander seg med CSS.

Låsing med CSS-variabler og JavaScript

Jeg har skrevet en JavaScript-hjelper som bruker CSS-variabler sammen med hjelp av JavaScript for å "låse" skriftstørrelsen på overskrifter, kropps kopi og linjehøyde som skjermdimensjonene varierer fra størrelse til størrelse og siden laster hendelser uten bruk av medieforespørsler.

Disse egenskapene målrettet "lås" på verdiene som er definert, men dette er ikke noe som kommer uten forbehold. Når det gjelder utvikling er det noen fordeler og ulemper for enhver tilnærming. På grunn av hendelsene som skjer, og CSS-egenskapene endres, vil du sannsynligvis møte maleri og layout på resize, så det er best å bruke sparsomt, eller med andre ord; ikke bruk den til alt på siden din.

Her er noen biter av visdom når det gjelder JS-styling.

1. Hver gang du bruker JavaScript for å hjelpe med å bruke stiler, vil det bli tregere enn CSS alene. Gjør alt i CSS som kan gjøres i CSS.
2. Når du bruker JavaScript til å bruke stiler, blir ytelsen bestemt av hvor komplisert testene skal utføres og hvor mange elementer på siden som skal testes. Prøv å skrive stilene dine på en måte som begrenser antall JS-drevne tester som utføres for å avgjøre hvilke stiler som skal brukes, og prøv å begrense antallet elementer i HTML-en din som probed eller testet av et JS-drevet stilark.
3. Forstå hvilke hendelser som utløser omberegninger av stilene. Du vil ha stiler for å holde deg oppdatert med ting som skjer i nettleseren, men du vil også begrense antall hendelseslyttere som kjører til enhver tid. Det er her det er veldig viktig at du begrenser antall elementer som disse testene gjelder for. Hvis du bruker et UI-bibliotek, kan det hende at hendelser og tilbakeringinger er bygget rett inn i rammen din, som du vil utløse omberegninger i dine JS-drevne stiler. Vær oppmerksom på hvilke hendelseslyttere som vil være til stede i nettleseren din på siden der JS-drevne stilene du skriver, vil kjøre, og prøv å finne måter å begrense antall hendelseslyttere som trengs; begrense antall elementer du lytter til, hekte lignende lyttere i globale hendelser, bruk rammespesifikke hendelser for strammere integrasjon, og vurder å bruke nye nettleser-APIer som Resize Observer og Mutation Observer hvis de kan hjelpe til dine behov.
   

Konklusjon

Nå som du har hatt en smak av CSS matematiske funksjoner, håper jeg de inspirerer deg, eller overbevise deg om å begynne å bruke stabile egenskaper og eksperimentere med blødende kantene. Hvis du bruker calc () eller har eksperimentert med min () og max () vennligst gi oss beskjed i kommentarene. Glad koding!