Aan de slag met CSS Math-functies Niveau 4

Functionele notaties maken deel uit van de CSS Values ​​and Units-module, die ook de thuisbasis is van handige wiskundige functies zoals calc (), en vanaf niveau 4 min () en max (). Deze krachtige functies openen ongelooflijke deuropeningen voor CSS-auteurs die wiskundige logica-vaardigheden binnen CSS vereisen. In dit artikel zullen we bespreken calc (), min () en max () en hoe alle drie nu nuttig kunnen zijn in je werk. Laten we beginnen!

Wat de Heck zijn functionele notaties?

Functional Notations is een van de negen bovenliggende secties (sectie acht om exact te zijn) van de W3C CSS Values ​​and Units Module. Vanaf Concept 4 Editor's Design, bevat Functionele Notaties nu verdere subsecties zoals knevel () die het mogelijk maakt om tussen waarden te schakelen en verwijzingen toe te kennen door het gebruik van attr (). Er is ook een andere interessante subsectie genaamd "Mathematical Expressions" die onze vriendelijke wiskundige functies omvat calc (), min () en max (). 

Laten we naar de W3C-definitie gaan om ons te helpen begrijpen welke functionele notaties zijn:

"Een functionele notatie is een type componentwaarde die complexere typen kan vertegenwoordigen of een speciale verwerking kan oproepen. De syntaxis begint met de naam van de functie onmiddellijk gevolgd door een linker haakje, gevolgd door het argument (en) voor de notatie gevolgd door een haakje naar rechts. "

In termen van de leek zeggen ze dat het een 'functienaam' is, zoals calc, gevolgd door opening ( en sluiten ) haakjes. Maar wat er tussen hen gaat?

Introductie van wiskundige uitdrukkingen

Zoals vermeld, is "Mathematische uitdrukkingen" een subsectie van "functionele notaties", maar wat zijn ze en wat doen ze? Nogmaals, laten we ons wenden tot de W3C, waar ze worden gedefinieerd als:

"De wiskundige functies, calc (), min () en max (), staan ​​wiskundige uitdrukkingen toe met toevoeging (+), aftrekken (-), vermenigvuldigen (*) en delen (/) om te worden gebruikt als componentwaarden."

Dat betekent calc (), min () en max () zijn "wiskundige functies" die "uitdrukkingen" tussen haakjes toestaan ​​om "waarden te berekenen". Oké, dat is nu duidelijk. De term "uitdrukkingen" is gewoon een mooie manier om te zeggen "math logica is volledig toegestaan ​​binnen de haakjes".

Geïntroduceerd in niveau 4 is een nieuw bijgewerkte definitie om aan te vullen wat we tot nu toe weten:

"Componenten van een wiskundige functie kunnen letterlijke waarden, andere wiskundige functies of andere uitdrukkingen zijn, zoals attr (), die evalueren naar een geldig argumenttype (zoals ).” 

Om verder te verduidelijken, zijn de "andere wiskundige functies" waarnaar hier wordt verwezen calc (), min () en max (), maar ze stellen ook dat deze functies in elkaar kunnen worden genest. Je zou kunnen schrijven ber (min ()), min (calc ()), ber (max (min ())), ber (min (attr ())) enzovoorts. Mijn suggestie is echter om je best te doen en de nestelende vortex te vermijden, zelfs met het vermogen om dit te doen, zoals de specificatie suggereert.

Laten we nu eens 'hallo' zeggen tegen een aantal uitstekende wiskundige functies die bijna hun kans verloren de hand te schudden met de CSS-werkgroep.

Welkom terug min () en max ()

De functies min () en max () zijn twee wiskundige functies die hun markering maken, maar pas nadat ze bijna verwijderd waren van de waarden en een eenheidsniveau 4 Redacteur Draft. Dank aan Lea Verou, de wind van verandering drong zich naar binnen en ik kon niet gelukkiger zijn.

"Misschien is het nu, nadat Values ​​3 naar CR is gegaan, tijd om het toevoegen opnieuw te overwegen min () en max () terug naar Waarden 4?

Auteurs doen uiterst rare hacks met calc () om ze te emuleren lettertypegrootte en lijnhoogte, wat zij "CSS-sloten" noemen. Als je googelt CSS-vergrendelingen je zult zien hoe wijdverspreid deze hacks worden, wat duidt op een duidelijke auteurbehoefte.

Bovendien, aangezien CSS-variabelen meer worden gebruikt, de behoefte aan min () en max () wordt nog groter. Ik herinner me dat enkele van de problemen die ons 6 jaar geleden hebben laten vallen nu opgelost kunnen worden met de ongeldig bij berekende waarde tijd concept dat Variables introduceerde. "- Lea Verou

Sinds Lea's suggestie op GitHub, min () en max () officieel opnieuw ingevoegd in de redactie van CSS niveau 4-waarden en -eenheden, inclusief een vroege acceptatie door WebKit. Ontwikkelaars kunnen persoonlijk experimenteren en verkennen met WebKit Nightly (vanaf 10/24/17). Hier is de enige WebKit-commit voor de merkwaardig nieuwsgierigen waar op magische wijze steun werd verleend min () en max ().

Een Cursory Glance op klem()

Een ander intrigerend stuk roddels in diezelfde GitHub-thread, gestart door Lea Verou, was de opmerking waar Tab Atkins een echte suggestie voorstelt klem() functie. klem() zou letterlijk een waarde tussen grenswaarden "klemmen".

"... ik ben het daar mee eens klem(), hoewel technisch overbodig, is vaak genoeg nuttig dat het waarschijnlijk verdient te bestaan. "

Oh mijn! Dit zou vrij een toevoeging zijn op wiskundige uitdrukkingen. Een functie zoals klem() is een definitieve overwinning voor de responsieve behoeften van vandaag en zou zeker een verwelkomende vriend van de taal zijn.

klem (minN, midN, maxN)

De huidige discussies draaien rond dit soort syntaxis hierboven en ik ben er toevallig een die het eens is met de suggestie; het is logisch en leest op een logische manier. Ik vraag me gewoon af wat er met het gebruik van zal gebeuren min () en max () als klem() komt in de toekomst daadwerkelijk tevoorschijn.

Met ons waterkoeler-chatter uit de weg laat focus op de eigenlijke wiskundige functies die we hier kwamen bespreken; calc (), min () en max ().

Nu ontmoeten calc ()

Dit is een van mijn favoriete wiskundige functies om CSS te waarderen en kan allerlei soorten tovenarij doen. De syntaxis is ook niet te grof, als je het eenmaal onder de knie hebt, en de ondersteuning is geweldig.

.my-element width: calc (50% - 10rem); 

In dit voorbeeld hierboven hebben we de functienaam (calc) gevolgd door onze haakjes die "uitdrukkingen" bevatten, of met andere woorden ... wiskundelogica.

"Met de functie calc () kunnen wiskundige uitdrukkingen met optellen (+), aftrekken (-), vermenigvuldigen (*) en delen (/) als componentwaarden worden gebruikt." - W3C

Nogmaals, dit is een mooie uitdrukking om te zeggen "je kunt wiskunde tussen haakjes doen".

Met betrekking tot uitdrukkingen kunnen auteurs generieke waarden doorgeven zoals 50%, 2em, 40, en kan gebruiken calc () waar dan ook , , , , , , of  waarden zijn toegestaan. Mijn favoriete eenheden om in het wild te gebruiken en te onderzoeken zijn viewport-eenheden (vh,vw, Vmin, vmax). Dit zijn de schermdimensiewaarden die vooral handig zijn bij typografie en lay-out zoals we binnenkort zullen zien.

calc () In het wild

Het bovenstaande voorbeeld is slechts één manier om responsieve typografie te verwerken. Gebruik van een combinatie van mediaquery's, Sass, calc () en viewport-eenheden, Mike bewijst ons hoe responsieve typografie perfect kan schalen tussen specifieke pixelwaarden.

Hier is nog een andere typografie-demo voor jaw dropping calc () en viewport-eenheden door Tim Brown. Deze demo werd gebruikt voor zijn artikel waarin CSS Locks worden besproken en ik moedig je aan om te lezen of typografie iets is waar je om geeft.

Viewport-eenheden en calc () kan ook helpen om enkele van onze meest favoriete lay-outpatronen te maken. In de demo hierboven, calc () wordt gebruikt om de hoogte van het voettekstblok af te trekken van de hoogte van het kijkvenster (vh). Een slimme oplossing van Chris Coyier voor onze oude vriend 'The Sticky Footer' die zo vaak werd gevraagd. Deze demo werkt ook prima in combinatie met CSS-variabelen.

Er zijn zeker andere gevallen als het gaat om applicaties en dynamische toestanden in deze demo van David Khourshid. David gebruikt calc () voor achtergronden, offsetwaarden, transformaties, filters, dekking en even breedte. Dit is ook een geweldige demo voor diegenen die samen met CSS-variabelen in React willen duiken.

Laten we nu eens kijken naar twee extra wiskundige functies waar je zeker van zult genieten, momenteel bekend als min () en max ().

min () en max (): Beperkingen definiëren

Zoals eerder vermeld staan ​​deze functies nog in de kinderschoenen, dus demo's die gebruikscasussen weergeven zijn somber, maar laat dat je niet afschrikken van het experimenteren. Om te onderzoeken min () en max () je moet WebKit elke avond downloaden. Nadat je het hebt gedownload, kun je Nightly (zwart pictogram) openen en aan de slag gaan.

min (expression, [expression]) max (expressie, [expressie])

Weet je nog toen we leerden wat uitdrukkingen waren? Het was gewoon een mooie manier om 'wiskundige logica' te zeggen. Bijvoorbeeld:

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

Elke uitdrukking is door komma's gescheiden met een extra uitdrukking die volgt. We kunnen ons ook wenden tot de specificatie die expliciet dezelfde regel vermeldt:

"De berekende waarde van een min () of max () functie is de door komma's gescheiden lijst van uitdrukkingen" - W3C

In het geval dat u dat zeer belangrijke deel van de uitleg hebt gemist, heeft de specificatie net een a aangegeven door komma's gescheiden lijst van uitdrukkingen net zoals we eerder deden in het codefragment.

"Een min () of max () functie staat voor de kleinste (meest negatieve) of grootste (meest positieve), respectievelijk, door komma's gescheiden berekening die het bevat." - W3C

Heb je dat allemaal opgevangen? Ze zeiden zojuist kleinste (meest negatieve) of grootste (meest positieve). De W3C heeft ons zojuist toestemming gegeven om negatieve getallen te schrijven als onderdeel van onze uitdrukkingen.

Laten we deze keer nu nemen om te zien hoe min () en max () zich bewijzen in een werkende demo; hou je hoed vast.

min () en max () In het echte leven

Hier is een demo die een aantal gebruiksgevallen voorstelt min () en max () een component gebruiken breedte en lettertypegrootte. De breedte heeft een minimale beperking en een maximale beperking, terwijl onze componenten lettertypegrootte is ook vastgeklemd met een minimale en maximale waarde. Onthoud dat dit alleen in WebKit Nightly zal werken vanaf dit moment; als je een animatie ervan in actie wilt zien, bekijk dan deze GIF (eerlijk gezegd te zwaar om in de pagina te worden ingesloten).

In het bovenstaande voorbeeld begin ik dingen door het breedte en dat doen op één regel.

breedte: min (max (100px * 2, 70vw), 500px);

Met behulp van de bovenstaande benadering kan ik een gemiddelde beperking opnemen in plaats van alleen een minimum en een maximum. Deze regel code vertelt de browser "Probeer de breedte in te stellen op 70vw, maar laat het niet lager gaan dan 200px (100px * 2) of hoger dan 500px. " Er is ook een andere weg waar je naartoe kunt gaan om een ​​vergelijkbaar resultaat te bereiken.

min (max (minN, midN), maxN)

Om meer in detail uit te leggen komt dit overeen met een minimum, een middelste en ten slotte een maximale beperkingswaarde. nesting max () binnen min () helpt klem tussen de gewenste beperkingen.

min-breedte: 200 px max. breedte: 500 px

Als we het hebben gebruikt min-width en Maximale wijdte we zouden komen op een gelijkwaardige bestemming die we bereikten via min () en max (). Ik ben benieuwd of eigenschappen zoals min-width zal verouderd worden ten gunste van wiskundige functies zoals min () en max () in de komende jaren.

Met betrekking tot lettertypegrootte Ik gebruik dezelfde min / max-benadering om responsieve en vergrendelende typografie te maken.

font-size: min (max (1rem, 4vw), 2rem);

Ik vertel de browser "Probeer de lettergrootte in te stellen op 4vw, maar laat het niet lager gaan dan 1rem, of hoger dan 2rem. " Helaas is er geen equivalent zoals min-font-size en max-font-size zoals we hadden voor de breedte, maar vanaf de CSS Fonts Module Level 4 spec die een realiteit zou kunnen worden.

Dit is zeker spannend nieuws en auteurs zijn net zo enthousiast als het gaat om het beperken van waarden in CSS.

Min () en max () hebben betekent NIET MEER "CSS-vergrendelingen"! U kunt een clamp maken door nesten (min (max)) ☛ lettergrootte: min (max (30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

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

Gewoon zoeken "CSS Locks"

Als je een zoekmachine gebruikt om CSS-locks op te sporen, vind je enorm veel artikelen en demo's. CodePen geeft ook een verscheidenheid aan pennen weer onder een andere CSS Locks-zoekopdracht. Voor degenen die nieuw zijn bij het idee van CSS Locks, laat ik het in meer detail uitleggen.

De vergrendelingstechniek biedt de mogelijkheid soepel tussen twee waarden over te schakelen, afhankelijk van de huidige viewport-grootte. Tim Brown noemde het als "CSS Locks" in zijn artikel "Flexible typography with CSS locks" maar deze techniek werd voor het eerst geïntroduceerd door Mike Riethmuller in zijn artikel "Precise control over responsive typography." 

Dit kan handig zijn bij gebruik calc () en kijkvenstereenheden voor koppen en bodyproject die naar boven of naar onder schalen, afhankelijk van de afmetingen van het scherm. Dit soort beperkingen is wat we hebben leren kennen als 'CSS-vergrendelingen'.

Er zijn veel artikelen met betrekking tot CSS-locks, dus hier zijn enkele van mijn favorieten die je kunt lezen in je persoonlijke tijd.

• Viewport Unit Based Typography van Zell Liew
  
• De wiskunde van CSS-sluizen door Florens Verschelde
  
• CSS "sloten" door Chris Coyier
  
• Vloeistoftypografie door Geoff Graham
  
• Responsieve en vloeiende typografie met vh en vw-eenheden van Michael Riethmuller
• Fluid Responsive Typography met CSS Poly Fluid Sizing van Jake Wilson

Vergrendelen met EQCSS

In de demo hierboven door Tommy Hodgins, wordt EQCSS gebruikt om te klemmen lettertypegrootte met JavaScript aan het roer, terwijl CSS op de achterbank zit. Ik laat je zelf bepalen hoe je het vindt om JavaScript te mengen met CSS.

Vergrendelen met CSS-variabelen en JavaScript

Ik heb een JavaScript-helper geschreven die CSS-variabelen gebruikt, samen met JavaScript, om de lettertypegrootte van koppen, body-copy en regelhoogte te "vergrendelen", omdat de schermafmetingen kunnen variëren bij het wijzigen van de grootte en het laden van pagina's zonder gebruik te maken van mediaquery's.

Deze eigenschappen zijn gericht op "lock" op de gedefinieerde waarden, maar dit is niet iets dat zonder voorbehoud komt. Als het gaat om ontwikkeling zijn er voor elke aanpak wat voor- en nadelen. Vanwege de gebeurtenissen die plaatsvinden en de CSS-eigenschappen zijn gewijzigd, zult u hoogstwaarschijnlijk te maken krijgen met schilderen en lay-out op formaat wijzigen, dus het is het beste om spaarzaam te gebruiken, of met andere woorden; gebruik het niet voor alles op uw pagina.

Hier zijn een paar stukjes wijsheid als het gaat om JS-styling.

1. Elke keer dat u JavaScript gebruikt om stijlen toe te passen, zal het langzamer zijn dan alleen CSS. Doe alles in CSS dat kan worden gedaan in CSS.
2. Bij gebruik van JavaScript om stijlen toe te passen, wordt de prestatie bepaald door hoe complex de tests moeten zijn en hoeveel elementen op de pagina moeten worden getest. Probeer uw stijlen te schrijven op een manier die het aantal door JS gevoede tests dat wordt uitgevoerd, beperkt om te bepalen welke stijlen moeten worden toegepast en probeer het aantal elementen in uw HTML te beperken dat wordt getast of getest door een door JS aangedreven stylesheet.
3. Begrijp wat voor gebeurtenissen herberekeningen van de stijlen teweegbrengen. U wilt dat stijlen actueel blijven met dingen die in de browser gebeuren, maar u wilt ook het aantal gebeurtenislisteners beperken dat op een bepaald moment wordt uitgevoerd. Hier is het echt belangrijk dat u het aantal elementen beperkt waarop deze tests van toepassing zijn. Als u een UI-bibliotheek gebruikt, kunnen er gebeurtenissen en callbacks zijn ingebouwd in uw framework, zodat u herberekeningen in uw door JS ontwikkelde stijlen wilt activeren. Houd er rekening mee welke luisteraars van de gebeurtenis aanwezig zullen zijn in uw browser op de pagina waar de door JS gevoede stijlen die u schrijft, zullen worden uitgevoerd en probeer manieren te vinden om het aantal benodigde gebeurtenislisteners te beperken; beperk het aantal elementen waar je naar luistert, haak vergelijkbare luisteraars vast in algemene gebeurtenissen, gebruik raamwerk-specifieke gebeurtenissen voor strakkere integratie, en overweeg het gebruik van nieuwe browser-API's zoals Resize Observer en Mutation Observer als ze kunnen helpen voor jouw behoeften.
   

Conclusie

Nu je CSS-wiskundige functies hebt geproefd hoop ik dat ze je inspireren, of overtuig je om stabiele eigenschappen te gaan gebruiken en te experimenteren met de meest bloedige. Als je gebruikt calc () of hebben geëxperimenteerd met min () en max () laat het ons weten in de comments. Happy codering!