Mulți oameni cred că numai preprocesorul și compus, că logica și calculele, dar calculat () funcție este capabil să facă ceea ce el nu poate, nici preprocessor în lume: să se amestece toate unitățile. Preprocessors poate amesteca numai unitățile cu racorduri de tip fixe de unități de măsură unghiulare, timp, frecvența, rezoluția unitară, și unele unități de lungime.
1turn este întotdeauna 360deg, 100grad este 90deg, și 3.14rad este 180deg. 1s este egal cu 1000ms, 1kHz este egal cu 1000Hz. 1in este de 2,54cm sau 25,4mm sau 96px, iar 1dppx este întotdeauna egal cu 96dpi. Exact datorită unor astfel de conexiuni precise, preprocesoarele pot converti unele unități în altele și le pot amesteca între ele. Cu toate acestea, preprocesorul nu poate calcula cât de mult 1EM sau 1% sau 1vmin sau 1ch va fi în pixeli, deoarece nu există context. Luați în considerare câteva exemple de bază:
În unele cazuri, calc () poate avea nevoie de variabile. Acest lucru poate fi implementat în aproape orice preprocesor. Primul exemplu este variabila Sass, funcționează cu orice altă funcție CSS nativă:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
De asemenea, puteți utiliza variabile CSS native, dar acestea funcționează numai în Firefox 31+. Alte browsere nu acceptă încă variabile CSS.
Pentru ca funcția calc () să funcționeze corect, trebuie să vă amintiți câteva lucruri. Primul - nu poți să divizi până la zero, e evident. Nu trebuie să existe spații între cuvântul calc și paranteză. Operatorii, precum + sau - sunt separați de spații pe ambele părți. Codul de mai jos este incorect:
Calc () funcționează ca valoare în locurile în care puteți înlocui o valoare simplă, indiferent dacă este vorba de unități sau nu. Sprijinul pentru această funcție este minunat, dar totuși vă puteți confrunta cu o serie de probleme. Totul depinde de locul în care folosim această funcție. Să luăm în considerare câteva exemple, printre care și problemele, precum și cele mai bune soluții la aceste probleme.
O modalitate ușoară de a înțelege valorile calculate
Să presupunem că vrem să facem un gradient în culorile curcubeului. În CSS, acest lucru nu este dificil:
Dar valorile HEX sunt incomprehensibile. Cu ajutorul hsl () și calc () codul de mai sus poate fi rescris în:
Din păcate, metoda calc () din interiorul uneia dintre funcțiile hsl (), rgb (), hsla () sau rgba () nu funcționează în Firefox și Internet Explorer. Această metodă funcționează numai în browserele WebKit. În practică, cel mai bine este să dați toate acestea preprocesorului. Și cel mai tare lucru este că în preprocesor puteți crea o listă chiar în buclă:
Gradienți de fundal efectivi pentru elementele flexibile
De exemplu, dorim să realizăm un fundal, de sus și de jos, pe care va exista o linie dreaptă de dimensiune fixă 1em. Problema este că nu știm exact înălțimea elementului. În acest caz, puteți utiliza două pante:
Cu funcția calc (), puteți scrie cele de mai sus cu un singur gradient:
O astfel de înregistrare va funcționa în toate browserele care suportă calc () și gradienții. Și deoarece se utilizează unități de măsură mixte, preprocesorul nu poate să-și dea seama. Puteți îmbunătăți codul ceva mai mult, adăugați variabile:
Notă: În Chrome și Opera, una dintre trupe, din anumite motive, poate fi ușor diferită și ușor neclară.
Dungi diagonale folosind un gradient
De exemplu, trebuie să creați o linie diagonală largă. Acest lucru se poate face cu interes.
În acest caz, lățimea de bandă va depinde de dimensiunea elementului. Uneori este exact ceea ce aveți nevoie. De exemplu, exemplul de mai sus este minunat dacă trebuie să desenați un steag. Adăugați un pic verde, galben și albastru, și aici este steagul nostru. Iubitorii de ciocolată recunosc steagul Tanzaniei în acest steag.
Și dacă trebuie să setați o lățime de bandă fixă astfel încât să nu se modifice în funcție de mărimea obiectului? În funcția calc (), trebuie să setați valorile la 50% minus jumătate din lățimea de bandă fixă și 50% plus jumătate din lățimea de bandă. Dacă avem nevoie de o lățime a benzii de 4 mm:
Exemplul de mai sus poate fi testat în browser. Redarea cu dimensiunea ferestrei browserului. Dimensiunea dreptunghiului este setată la vmin, astfel încât dimensiunea obiectului se modifică atunci când fereastra browserului este redimensionată. Dar banda diagonală rămâne întotdeauna fixă.
Poziționarea copiilor cu dimensiuni cunoscute în centrul elementului părinte
Probabil, știți despre truc cu poziționarea absolută a elementului copil în centrul părintelui:
Cu funcția calc (), puteți să scăpați de marjă:
Să facem codul mai flexibil, să adăugăm variabilele de lățime și înălțime:
Rețineți că partea superioară și stângă pot fi folosite pentru a poziționa un element. Cu toate acestea, dacă aveți nevoie să animați un obiect, utilizați transformări. Întrucât în timpul transformării, obiectul este recompus, atunci când obiectul este mutat, este redat recent pe pagină - reducând astfel performanța.
Sistemul de coordonate și grilele cu originea în centru
Când am aflat despre valoarea de patru cifre din poziția de fond, am pierdut deja poziția de interes, un element în raport cu dreapta sau partea inferioară a părintelui prin intermediul funcției de calculat (). Dar, cu ajutorul acestei funcții, sa dovedit că este posibil să se poziționeze perfect un punct de fundal specific în centrul obiectului.
Cu câțiva ani în urmă, aveam nevoie să creez o imagine de fundal, un sistem de coordonate. Sarcina a fost ca originea imaginii de fond să fie mereu centrat.
Desenarea unui sistem de coordonate cu o rețea a fost ușoară:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Dar cum să facem ca imaginea de fundal să rămână strâns în centrul elementului și nu în colțul din stânga sus? fundal-poziția: 50% 50 nu va funcționa, deoarece punctul de 50% al gradientului de 50% va coincide cu punctul 50% de 50% al elementului, dar liniile sunt situate în partea superioară și respectiv în stânga a gradientului. Puteți rezolva această problemă cu calc (). Este necesar să se aranjeze gradientul astfel încât colțul din stânga sus să fie exact în centrul figurii. Apoi deplasați gradientul în sus și spre stânga la jumătate din lățimea și înălțimea axelor, respectiv:
Din nou, variabilele vor face codul mai flexibil. Citiți exemplul sistemului de coordonate + grilă # 2 de la Ana Tudor (@ thebabydino) de la CodePen.
Salvarea raportului de aspect și a zonei vizibile a ecranului
Când creați cursoare HTML mi-am dorit întotdeauna să fiecare diapozitiv este un container cu un raport de aspect fix, astfel încât glisiera este întotdeauna plasat într-o zonă vizibilă a ferestrei browser-ului, și a fost întotdeauna în mijloc.
Spuneți, avem nevoie de un raport de aspect de 4: 3 și îl scanăm pe un ecran lat. Aceasta înseamnă că înălțimea va fi în regulă, dar pe lățime vom avea lacune mici la dreapta și la dreapta.
Cu un raport de aspect mai mic de 4: 3, avem goluri pe partea superioară și inferioară, iar pe orizontală blocul este plasat în întregime.
Blocul ocupă întreaga lățime a zonei vizibile a browserului, adică lățime: 100vw. Lățimea și raportul de aspect pot fi calculate înălțime înălțime, acesta va fi 3/4 * 100vw. În cele din urmă, marginea superioară va fi jumătate din înălțimea ferestrei browserului minus jumătate din înălțimea blocului 100vh / 2 - 3/4 * 100vw / 2.
De asemenea, puteți simplifica codul utilizând înălțime și lățime variabile. Mai jos este un exemplu pe Sass pe care îl puteți testa. modificarea dimensiunii ferestrei browserului:
Chiar mai bine, codul de mai sus poate fi transformat într-un amestec, mult mai bun decât variabilele globale:
Rețineți că pentru funcționarea corectă a interogărilor media, variabilele $ a și $ b trebuie să fie întregi. Metoda este acceptată în toate browserele moderne. Cu toate acestea, până în prezent browsele WebKit nu au sprijinit utilizarea unităților vw în funcția calc (). Sprijinul a apărut în Safari 8, Chrome 34 și cea mai recentă operă.
Scurt titlu de diapozitive în centru
Nu am vrut să folosesc poziționarea absolută și am decis să lucrez cu proprietatea înălțimii liniei. Diapozitivul cu cadrul ocupă întreaga înălțime a ferestrei browserului, așadar a trebuit să setez proprietatea de înălțime a liniei la 100vh minus dubla lățime de margine:
În cazul în care cadrul de diapozitive ocupă 100% din lățimea ferestrei browser-ului (și este vertical în mijloc), înălțimea este egală cu $ b / $ a * 100vw. Valoarea înălțimii liniei va fi egală cu $ b / $ a * 100vw minus valoarea dublă a diapozitivului pentru lățimea marginii:
Aceasta a fost ideea mea, teoretic funcționează perfect. Mai mult, funcționează în browserele WebKit și IE. Dar în Firefox, funcția calc () nu calculează valoarea proprietății înălțimii liniei (și a altora); în acest caz calc () nu este cea mai bună opțiune. Există multe alte modalități de a rezolva această problemă (flexbox, poziționare absolută, etc.).
Proprietatea de perspectivă specificată pentru scenă face ca, dacă obiectul este mai aproape de vizualizator, acesta este mai mare și invers. Proprietatea ia valori lungime, iar cu cât sunt mai mici valorile, cu atât contrastul dintre obiectele apropiate și cele mai îndepărtate este mai mare.
Avem o figură simplă - un cub, de exemplu. Cubul este situat în centrul scenei. Figura nu este asemănătoare 3D: este simetrică și dacă laturile sunt complet opace, atunci putem vedea doar partea din față a figurii.
Hai defila cub de 30 ° cu axa Y (axa verticală trece prin centrul obiectului) sau despre o axa X. E mai bine, dar acum suntem vizibile doar două suprafețe.
perspectivă origine 100% 0 stabilește punctul de plecare pentru colțul din dreapta sus al scenei, iar cifra este întotdeauna în centrul scenei. Din acest motiv, când modificați dimensiunea scenei, distanța de la punctul 50% 50% (poziția cubului) la punctul 100% 0 (punctul de vedere al perspectivelor) se modifică.
Ca ieșire, puteți utiliza calc (). Pentru aceasta, adăugați sau scădeți o valoare fixă de la 50%:
Încercați-l singur. redimensionați fereastra browserului. Cum rămâne cu tine? Ați folosit deja calc ()? Dacă da, de ce?
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: