Share
Notațiile funcționale fac parte din modulul CSS Values and Units, care este, de asemenea, domiciliul unor funcții matematice utile, cum ar fi calc (), și de la nivelul 4 min () și max (). Aceste funcții puternice deschid uși incredibile pentru autori CSS care au nevoie de abilități logice matematice în CSS. În acest articol vom discuta calc (), min () și max () și cum toate cele trei pot fi utile în munca ta chiar acum. Să începem!
Notă funcțională este una din cele nouă secțiuni părinte (secțiunea opt să fie exactă) a modulului W3C CSS Values and Units. Începând cu schița Editorului de nivel 4, notațiile funcționale conțin acum subsecțiuni, cum ar fi comutare() care permite comutarea între valori și referințe atribut prin utilizarea attr (). Există și o altă sub-secțiune interesantă numită "Expresii matematice" care cuprinde funcțiile noastre matematice prietenoase calc (), min () și max ().
Să ne întoarcem la definiția W3C pentru a ne ajuta să înțelegem ce sunt notațiile funcționale:
"O notație funcțională este un tip de valoare a componentei care poate reprezenta tipuri mai complexe sau poate invoca procesarea specială. Sintaxa începe cu numele funcției imediat urmate de o paranteză stângă, urmată de argumentul (ele) la notația urmată de o paranteză dreaptă. "
În termeni de layperson ei spun că este un "nume de funcție", cum ar fi Calc, urmată de deschidere ( și închiderea ) paranteze. Dar ce se întâmplă între ei?
Așa cum am menționat, "Expresiile matematice" este o subsecțiune a "notațiilor funcționale", dar ce sunt și ce fac ei? Din nou, să revenim la W3C, unde sunt definite ca:
"Funcțiile matematice, calc (), min () și max (), permit expresii matematice cu adaos (+), scădere (-), multiplicare (*) și divizare (/).
Asta inseamna calc (), min () și max () sunt "funcții matematice" care permit "expresii" în paranteze pentru a "calcula valori". Bine, acum este clar. Termenul "expresii" este doar un mod fantezist de a spune că "logica matematică este total permisă în paranteze".
Introducerea în nivelul 4 este o definiție recent actualizată pentru a completa ceea ce știm până acum:
"Componentele unei funcții matematice pot fi valori literale, alte funcții matematice sau alte expresii, cum ar fi attr (), care se evaluează la un tip de argument valid (cum ar fi).“
Pentru a clarifica mai mult, "alte funcții matematice" la care se face referire aici sunt calc (), min () și max (), dar ele, de asemenea, de stat aceste funcții pot fi imbricate unul în celălalt. Ai putea scrie calc (min ()), min (calc ()), calc (max (min ())), calc (min (attr ())) si asa mai departe. Cu toate acestea, sugestia mea este sa faci tot ce poti si sa eviti vartejul de cuibare, chiar si cu capacitatea de a face acest lucru asa cum sugereaza spec..
Acum, să spunem "salut" încă o dată la câteva funcții de matematică remarcabile, care aproape că și-au pierdut șansa de a se împrieteni cu grupul de lucru CSS.
Accentsconagua
min () și max () 
Funcțiile min () și max () sunt două funcții de matematică care își fac amprenta, dar numai după ce au fost aproape eliminate din Proiectul Editorilor de Valori și Unități de Nivel 4. Mulțumită lui Lea Verou, vântul schimbării și-a forțat drumul și nu am putut fi mai fericit.
"Poate că acum că Values 3 a plecat în CR, este timpul să reconsiderăm adăugarea
min ()șimax ()înapoi în Valorile 4?Autorii fac hack-uri extrem de ciudate
calc ()să le imitămmarimea fontuluișiinaltimea liniei, pe care o numesc "încuietori CSS". Dacă sunteți google Blocări CSS veți vedea cât de răspândite aceste hack-uri devin, indicând o nevoie clară de autor.În plus, deoarece variabilele CSS devin mai utilizate, necesitatea
min ()șimax ()va deveni și mai mare. Îmi amintesc că unele dintre problemele care ne-au determinat să le abandonăm cu 6 ani în urmă pot fi rezolvate acum invalid la timpul de valoare calculat conceptul pe care variabilele le-au introdus. "- Lea Verou
De la sugestia Lea despre GitHub, min () și max () au fost introduse oficial în redactarea redacției CSS de nivel 4 Valori și unități, inclusiv o adoptare rapidă de către WebKit. Dezvoltatorii pot experimenta și explora personal folosind WebKit Nightly (din data de 24.10.2010). Iată comitetul WebKit unic pentru ciudat curios în cazul în care sprijinul a fost acordat magic pentru min () și max ().
clemă () O altă bucată interesantă de bârfă din același thread GitHub, inițiată de Lea Verou, a fost comentariul în care Tab Atkins sugerează o realitate clemă () funcţie. clemă () ar literal "prinde" o valoare între valorile limită.
"... sunt de acord cu asta
clemă (), în timp ce din punct de vedere tehnic este de prisos, este util destul de des ca, probabil, merită să existe ".
Vai! Aceasta ar fi adaosul expresiilor matematice. O funcție cum ar fi clemă () este o victorie clară pentru nevoile receptive ale zilelor noastre și ar fi, cu siguranță, un prieten binevenit pentru limbă.
clemă (minN, midN, maxN)
Discuțiile actuale se referă la acest tip de sintaxă de mai sus și se întâmplă să fie una care este de acord cu sugestia; are sens și citește într-o manieră logică. Mă întreb ce se va întâmpla cu utilizarea lui min () și max () dacă clemă () de fapt, apare în viitor.
Cu răbdarea noastră răcită de apă ne permite să ne concentrăm asupra funcțiilor matematice actuale pe care am venit să le discutăm; calc (), min () și max ().
calc () 
Aceasta este una dintre funcțiile mele matematice preferate pentru a grați CSS și poate face tot felul de vrăjitorie. De asemenea, sintaxa nu este prea dură, odată ce ați atârna de ea, iar suportul este stelar.
.elementul meu width: calc (50% - 10rem);
În această probă de mai sus avem numele funcției (Calc) urmate de parantezele noastre care conțin "expresii", sau cu alte cuvinte ... logica matematică.
"Funcția calc () permite exprimarea matematică cu adăugarea (+), scăderea (-), înmulțirea (*) și diviziunea (/) pentru a fi utilizate ca valori componente." - W3C
Din nou, este vorba de expresie fantezistă spunând că "poți să faci matematică în paranteze".
În ceea ce privește expresiile, autorii pot trece valori generice cum ar fi 50%, 2em, 40, și pot folosi calc () oriunde
calc () În sălbăticieExemplul de mai sus este doar o modalitate de a trata tipografia receptivă. Folosind o combinație de interogări media, Sass, calc () și unități de vizualizare, Mike ne dovedește cât de tipografică receptivă poate să scadă perfect între valorile specifice ale pixelilor.
Iată o altă demonstrație de tipografie cu jaw dropping calc () și unități de vizualizare de către Tim Brown. Acest demo a fost folosit pentru articolul său care discută blocarea CSS pe care vă încurajez să citiți dacă tipografia este ceva ce vă interesează.
Unități de vizualizare și calc () poate ajuta, de asemenea, să creeze unele dintre cele mai preferate modele de aspect. În demonstrația de mai sus, calc () se utilizează pentru a scădea înălțimea subsolului de la înălțimea ferestrei de vizualizare (vh). O soluție inteligentă de către Chris Coyier pentru vechiul nostru prieten "The Sticky Footer" a fost atât de des solicitată. Acest demo funcționează și atunci când este combinat cu variabilele CSS.
Există cu siguranță alte cazuri când vine vorba de aplicații și de state dinamice în acest demo de David Khourshid. David folosește calc () pentru fundaluri, valori de compensare, transformări, filtre, opacitate și lățime uniformă. Acesta este, de asemenea, un demo mare pentru cei care doresc să se scufunde în React împreună cu variabilele CSS.
Acum, să aruncăm o privire asupra a două funcții suplimentare de matematică pe care le veți bucura cu siguranță, cunoscute în prezent ca min () și max ().
min () și max (): Definirea constrângerilor
Așa cum am menționat mai devreme, aceste funcții sunt încă în fază incipientă, astfel încât demonstrațiile care prezintă cazurile de utilizare sunt sumbre, dar nu lăsați asta să vă sperie de la experiment. Pentru a investiga min () și max () va trebui să descărcați WebKit pe timp de noapte. Odată descărcat, aveți libertatea să deschideți Nightly (pictograma neagră) și să începeți să lucrați.
min (expresie, expresie) max (expresie, expresie)
Adu-ți aminte când am aflat care sunt expresiile? A fost doar un mod fantezist de a spune "logica matematică". De exemplu:
min (1 x 10vw, 2 / 50vw) max (1 x 10vw, 2 / 50vw)
Fiecare expresie este virgulă separată cu o expresie suplimentară care urmează. De asemenea, ne putem referi la spec. Care afirmă în mod explicit aceeași regulă:
"Valoarea calculată a unei funcții min () sau max () este lista de expresii separate de virgule" - W3C
În cazul în care ați pierdut acea parte foarte importantă a explicației, spec lista de expresii separate prin virgulă la fel cum am făcut mai devreme în fragmentul de cod.
"O funcție min () sau max () reprezintă cel mai mic (cel mai negativ) sau cel mai mare (cel mai pozitiv), respectiv calculul separat prin virgule pe care îl conține" - W3C
Ai prins toate astea? Tocmai au spus cel mai mic (cel mai negativ) sau cel mai mare (cel mai pozitiv). W3C ne-a permis să scriem numere negative ca parte a expresiilor noastre.
Să luăm acum acest moment pentru a vedea cum min () și max () se dovedesc într-un demo de lucru; țineți-vă pălăriile.
min () și max () In viata realaIată un demo care prezintă câteva cazuri de utilizare min () și max () folosind componente lăţime și marimea fontului. lăţime are o constrângere minimă și o constrângere maximă în timp ce componenta noastră este marimea fontului este de asemenea fixată cu o valoare minimă și maximă. Rețineți că acest lucru va funcționa numai în WebKit Nightly din această scriere; dacă doriți să vedeți o animație a acesteia în acțiune, aruncați o privire la acest GIF (sincer prea greu pentru a fi încorporat în pagină).
În exemplul de mai sus, încep lucrurile prin restrângerea lăţime și a face acest lucru într-o singură linie.
lățime: min (max (100px * 2, 70vw), 500px);
Folosind abordarea de mai sus, pot să includ o constrângere de mijloc față de minim și maxim. Această linie de cod spune browser-ului "Încercați să setați lățimea la 70vw, dar nu lăsați-o să fie mai mică de 200px (100px * 2) sau mai mare de 500px. " Există, de asemenea, un alt drum care puteți merge în jos pentru a obține un rezultat similar.
min (max (minN, midN), maxN)
Pentru a explica în detaliu, aceasta echivalează cu o valoare minimă, o medie și, în final, o valoare maximă de constrângere. Nesting max () în min () ajută la strângerea între constrângerile dorite.
min-lățime: 200px max-width: 500px
Dacă am fi folosit min lățime și lățimea maximă ajungem la o destinație echivalentă pe care am realizat-o pe calea lui min () și max (). Sunt curios dacă proprietățile, cum ar fi min lățime vor deveni caduce în favoarea unor funcții matematice cum ar fi min () și max () în următorii ani.
Referitor la marimea fontului Folosesc aceeași abordare min / max pentru a crea tipografie receptivă și de blocare.
dimensiunea fontului: min (max (1rem, 4vw), 2rem);
Spun browserul "Încercați să setați dimensiunea fontului la 4vw, dar nu lăsați-o să fie mai mică decât 1rem sau mai mare decât 2rem. " Din păcate, nu există nici un echivalent, cum ar fi min-font-size și max-font-size așa cum am avut pentru lățime, dar din CSS Fonts Modul Level 4 spec care ar putea deveni o realitate.
Aceasta este cu siguranță o noutate interesantă, iar autorii sunt la fel de entuziasmați atunci când vine vorba de limitarea valorilor în CSS.
Având min () și max () înseamnă NO MORE "CSS Locks"! Puteți face o clemă de număr prin cuibărind min (max ()) ☛ dimensiunea fontului: min (max (30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K
- Tommy H🎃dgins (@innovati) 19 septembrie 2017
Dacă utilizați un motor de căutare pentru a vâna blocările CSS veți găsi grămezi de articole și demonstrații. CodePen afișează, de asemenea, o varietate de stilouri sub o altă căutare CSS Locks. Pentru cei care sunt noi în ideea de Locks CSS, permiteți-mi să explic mai detaliat.
Tehnica de blocare permite abilitatea de a trece ușor între două valori, în funcție de dimensiunea curentă a ferestrei de vizualizare. Tim Brown a numit-o "CSS Locks" în articolul său "Tipografie flexibilă cu încuietori CSS", însă această tehnică a fost introdusă pentru prima oară de Mike Riethmuller în articolul său "Control precis asupra tipografiei receptive".
Acest lucru poate fi util când se utilizează calc () și unități de vizualizare pentru titlurile și copiile corporale care se scal în sus sau în jos în funcție de dimensiunile ecranului. Acest tip de constrângere este ceea ce am ajuns să cunoaștem ca "CSS Locks".
Există multe articole despre CSS Locks, așa că aici sunt câteva dintre cele preferate pentru a citi în timpul dvs. personal.
În demo-ul de mai sus de Tommy Hodgins, EQCSS este folosit pentru a strânge marimea fontului cu JavaScript la cârma, în timp ce CSS se află pe bancheta din spate. Vă voi lăsa să vă decideți cum vă simțiți că JavaScript se amestecă cu CSS.
Am scris un helper JavaScript care utilizează variabilele CSS împreună cu ajutorul JavaScript pentru a "bloca" dimensiunea fontului titlurilor, copiei corporale și înălțimii liniei, deoarece dimensiunile ecranului variază în funcție de redimensionare și de încărcarea evenimentelor fără utilizarea interogărilor media.
Aceste proprietăți vizează "blocarea" valorilor definite, dar acest lucru nu este ceva care nu are nicio atenție. Când vine vorba de dezvoltare, există unele avantaje și dezavantaje pentru fiecare abordare. Datorită evenimentelor care au loc și a modificării proprietăților CSS, veți întâlni cel mai probabil vopsirea și aspectul pe redimensionare, astfel încât este mai bine să le folosiți cu ușurință sau cu alte cuvinte; nu o folosiți pentru tot ce se află pe pagina dvs..
Iată câteva citate de înțelepciune când vine vorba de stilul JS.
Acum că ați avut un gust de funcții matematice CSS sper că te inspiră sau te conving să începi să folosești proprietăți stabile și să experimentezi cu cei care sângerau. Dacă utilizați calc () sau au experimentat cu min () și max () vă rugăm să ne anunțați în comentarii. Codificare fericită!
