Co to jest calc () w CSS (i jak go używać)

Niektóre funkcje CSS są potężne, ale rzadko używane, a nie dlatego, że są trudne, ale dlatego, że dostępne są łatwiejsze alternatywy. Calc () jest jednym z nich. Jest bardzo przydatny, ale często przyćmiony przez Clamp ().

Calc () rozwiązuje problemy z układem, których Clamp () nie może dotknąć. Doskonale nadaje się do dostrajania wysokości sekcji, regulacji lepkich nagłówków oraz mieszania elastycznych i stałych jednostek w jednej linii kodu. A oto dobra wiadomość: możesz użyć calc () bez pisania jednego wiersza kodu.

W Divi 5 jest wbudowany bezpośrednio w interfejs, więc po prostu wpisz swoją wartość, a Divi obsługuje resztę. Chcesz zobaczyć, jak? W tym poście dowiesz się, jak działa calc (), gdzie pomaga i jak używać go w Divi 5.

Divi 5 jest gotowy do użycia na nowych stronach internetowych , ale poczekaj trochę przed migracją istniejących.

Co to jest calc () w CSS?

Calc () to natywna funkcja CSS, która pozwala wykonywać prostą matematykę, takie jak dodawanie, odejmowanie, mnożenie i dzielenie (z pewnymi ograniczeniami w zależności od kontekstu) bezpośrednio w regułach stylu. Doskonale nadaje się do poprawy rozmiarów i odstępów, szczególnie podczas mieszania stałych i elastycznych wartości, aby uzyskać płynniejsze układy bez uporządkowania wszystkiego.

Zrozummy to przykładem. Załóżmy, że chcesz, aby element zajmował 80% ekranu, ale nadal pozostawia miejsce na wyściółkę. Możesz napisać:

width: calc(80% - 40px);

To mówi przeglądarce do dynamicznego obliczenia szerokości poprzez odejmowanie 40 pikseli od 80 procent jego pojemnika. W połączeniu z technikami centrującymi, takimi jak marginesy automatyczne, pozostałe miejsce z odejmowania jest równomiernie rozmieszczone. Wartość dostosowuje się automatycznie na podstawie rozmiaru ekranu.

Na pierwszy rzut oka może to nie wydawać się przełomowe. Ale calc () jest idealny do rozwiązywania codziennych problemów z układem, takich jak zepsute odstępy na małych ekranach, elementy nakładające się na stałe nagłówki i sekcje poza środkiem. Zamiast długich zapytań multimedialnych calc () w jednej linii jest często wystarczająca. Oto kilka typowych przypadków użycia jednologowego:

• Wyściółka: calc (5VW + 20px); Utrzymuje płyn wyściółki. Nawet na małych ekranach nigdy nie spada poniżej 20 pikseli.
• Wysokość: calc (100 VH - 80px); Utrzymuje treść widoczną, gdy masz stały nagłówek. Dostosowuje się automatycznie na podstawie wysokości ekranu.
• szerokość: calc (60% - 1rem); Daje elastyczną kontrolę nad szerokością sekcji przy jednoczesnym zachowaniu spójnych odstępów. Możesz dostosować otaczające marginesy za pomocą wartości takich jak margines-lew: calc (40% + 0,5rem); Aby wyśrodkować lub wyrównać element w jego pojemniku.

Krótko mówiąc, calc () usuwa potrzebę pisania dodatkowego CSS dla każdego punktu przerwania. Zamiast wielokrotnego przepisywania stylów, możesz zbudować logikę bezpośrednio na swoje wartości i pozwolić układowi zareagować automatycznie. Nie tylko definiujesz rozmiary, ale także decydujesz, jak powinny się zachowywać elementy.

Zrozumienie, jak działa calc ()

Podstawowa składnia calc () wygląda tak:

 calc(value operator value) 

Tutaj możesz użyć dowolnej prawidłowej długości lub jednostki o wartości, a operator może wynosić +, -, *lub /.

Na przykład, jeśli chcesz zmniejszyć szerokość elementu o 40 pikseli, napiszesz szerokość: calc (100% - 40px);. Zwróć uwagę na użycie %? To sprawia, że ​​szerokość jest elastyczna.

Jeśli użyliśmy calc (100px - 40px), wynikiem zawsze wynosi 60 pikseli, to znaczy statyczny. Ale używając procentu, pozwalamy przeglądarce obliczyć rozmiar na podstawie ekranu lub elementu nadrzędnego. Dostosowuje się automatycznie wraz ze zmianami układu.

Szybka wskazówka (i także wspólna reguła): Zawsze dodaj przestrzenie między wartościami i operatorami, aby poprawnie działało calc (). Bez przestrzeni CSS nie będzie działać. Poniżej zobaczysz, że szerokość kontenera jest przywrócona do domyślnego, ponieważ funkcja calc () bez spacji nie jest już ważna:

Za pomocą wielu jednostek

Właśnie zobaczyłeś, jak pojawia się prawdziwa korzyść z Calc (), gdy zaczniesz łączyć różne jednostki względne. Na przykład wartości procentowe z pikselami lub szerokościami rzutni z REMS, ponieważ wtedy układ zaczyna odpowiadać na podstawie zmian wielkości ekranu.

Aby to wyjaśnić, oto kilka przydatnych kombinacji, aby zobaczyć, jak działają w prawdziwych układach.

Możesz także łączyć wiele wartości i jednostek w jednym wierszu, co sprawia, że ​​układy responsywne rozmiaru są dokładniejsze. W tym przykładzie poniżej wykorzystuje %, PX i REM do mieszania skalowania układu, ustalonego odstępu i typografii:

 width: calc(50% - 40px + 1rem); 

• 50% skal z pojemnikiem
• 40px odejmuje przestrzeń jak pasek boczny
• 1rem dodaje odstępy w oparciu o rozmiar czcionki

Funkcje gniazdowania calc ()

Możesz także gniazdować jeden cal () w drugim, aby zbudować bardziej złożoną logikę układu. To świetny sposób na odzwierciedlenie tego, jak myślisz o designie (warstwie po warstwie) z wyraźnymi relacjami między wartościami. Na przykład szerokość: calc (200px - calc (100px + 2rem));

Tutaj przeglądarka najpierw oblicza 100px + 2rem , co może reprezentować wyściółki, marginesy lub rozmiar innego elementu. Następnie odejmuje tę sumę od 200 px, aby uzyskać końcową szerokość. Szerokość pozostaje względna z powodu REM.

Ten rodzaj gniazdowania przydaje się, gdy układ zależy od więcej niż jednego czynnika. Zamiast samodzielnie wykonywać matematykę lub ustalone wartości, możesz napisać związek bezpośrednio w CSS. Utrzymuje to elastyczne i łatwiejsze do aktualizacji później.

Nie będziesz często potrzebować zagnieżdżonych calc (), ale może to pomóc w radzeniu sobie z warstwowymi odstępami lub nakładającymi się elementami. To powiedziawszy, możesz najpierw zacząć od prostych obliczeń, ponieważ mogą one być przytłaczające. Dodanie złożoności będzie naturalne, gdy poczujesz się komfortowo z tym, jak to działa.

Dlaczego warto używać calc (), skoro masz clamp ()?

Jeśli częściej używasz Clamp (), możesz mieć to pytanie. Aby uzyskać jasną odpowiedź, dobrym pomysłem byłoby zrozumienie różnicy między nimi:

Clamp () jest nowoczesny, więc ekscytuj się używaniem go do budowania projektów płynów bez polegania na zapytaniach medialnych, jest łatwy. Ale chociaż Clamp () jest mądrzejszy, istnieje wiele sytuacji, w których calc () jest bardziej istotnych, takich jak następujące:

• Odejmowanie stałych wartości od elastycznych układów: Za pomocą wysokości: calc (100vh - 80px) upewnia się, że sekcja wypełnia ekran minus wysokość stałego nagłówka, więc elementy nie pokrywają się. Clamp () nie może tego zrobić, ponieważ nie obsługuje odejmowania.
• Elementy przesunięcia z precyzją: wartość taka jak margines-lew: calc (50%-200px); Przesuwa element względem jego pojemnika, jednocześnie utrzymując go wizualnie. Clamp () nie może wykonywać tego rodzaju pozycjonowania relacyjnego.
• Wyrównanie sekcji obok siebie: pomaga tworzyć responsywne układy dwukolumnowe, w których jedna kolumna o szerokości: calc (60%-2REM); Zajmuje 60% przestrzeni minus spójną lukę. Clamp () jest idealny do skalowania pojedynczej wartości, podczas gdy calc () wyróżnia się, gdy potrzebne są zależności między wieloma wartościami.

Podsumowując, Clamp () jest świetny przy określeniu, w jaki sposób pojedyncza wartość powinna skalować na rozmiarach ekranu. Ale calc () jest tym, czego potrzebujesz, gdy układ zależy od więcej niż jednej rzeczy jednocześnie, jak w powyższych przypadkach.

Łączenie calc () + clamp ()

Podczas gdy calc () i clamp () są potężne same, po co używać jednego, gdy można połączyć oba? Możesz gniazdować calc () wewnątrz clamp (), aby budować projekty płynów o wbudowanej logice, takie jak łączenie elastycznego skalowania z precyzyjną kontrolą.

Na przykład wyściółka: zacisk (1rem, calc (2vw + 10px), 3); Tworzy odstępy, które skalują między 1M a 3, ale wartość „preferowana” opiera się na formule calc (), która miesza szerokość rzutni i stałą wartość.

Daje to responsywne, logiczne i precyzyjne kontrolę nad twoim projektem. Gdy dowiesz się, kiedy używać calc () i clamp () indywidualnie i kiedy je połączyć, możesz w pełni kontrolować swój układ bez polegania na niestandardowych punktach przerwania

Korzystanie z zmiennych CSS z calc ()

Możesz także rozszerzyć elastyczność Calc () ze zmiennymi CSS. Połącz zmienne z innymi jednostkami, wykonuj na nich matematykę i buduj logikę układu wokół wartości wielokrotnego użytku. Na przykład, jeśli zdefiniujesz: root {–gap: 40px;}, to za pomocą wyściółki: calc (var (–GAP) + 1rem); Pomaga ustawić responsywne wyściółki na podstawie wartości root.

UWAGA: Podczas używania zmiennych CSS wewnątrz calc () owinąć zmienną wokół var (). Zobacz, jak zrobiłem powyżej.

Umożliwia to zbudowanie kompletnej witryny za pomocą spójnego systemu projektowego (zmiennych CSS), jednocześnie mając precyzyjną kontrolę za pomocą calc (). A jeśli chcesz wprowadzić (globalne) zmiany, takie jak dostosowanie odstępów w całym układzie, możesz to zrobić, zmieniając wartości root.

To nie jest takie łatwe z Clamp (). Podczas gdy Clamp () obsługuje zmienne CSS, każda wartość musi rozwiązać kompletną, prawidłową jednostkę. Co mam na myśli?

Funkcja taka jak zacisk (1REM, var (–Fluid-rozmiar), 3M) działa tylko wtedy, gdy –Fluid wielkości rozstrzygnie do 4 ww. A jeśli chcesz zrobić matematykę ze zmienną, taką jak dodawanie lub odejmowanie z niej, musisz owinąć tę część calc (). Te drobne rzeczy czynią calc () niezbędne przy budowaniu wartości dynamicznych ze zmiennymi.

Calc () w Divi 5

Zarówno calc (), jak i clamp () są zaawansowanymi funkcjami CSS, które zapewniają potężną kontrolę nad układami, odstępami i reakcją, ale tylko jeśli czujesz się komfortowo pisanie kodu. To ogranicza ich wykorzystanie do programistów lub specjalistów w sieci. Ale co z tymi, którzy wolą wizualne przepływy pracy i nadal chcą używać calc () i clamp () w swoich projektach? Czy możesz to zrobić?

Tak, możesz. Wewnątrz Divi 5 zarówno calc (), jak i clamp () są dostępne jako jednostki zaawansowane i nie musisz pisać jednej linii kodu do pracy z nimi.

Subskrybuj nasz kanał YouTube

Wszystko, co robisz, to wprowadź calc () bezpośrednio w dowolnym polu liczbowym i to wszystko.

Builder Divi działa natychmiast. Po wprowadzeniu wartości calc () otrzymasz informacje zwrotne na żywo podczas projektowania. Nie ma potrzeby przełączania między konstruktorem, devTools lub podglądami i nie zgadywać, jak to będzie wyglądać.

Divi 5 sprawia, że ​​budowanie mądrzejszych i bardziej elastycznych projektów jest łatwe bez dotykania kodu. Możesz nawet połączyć calc () ze zmiennymi projektowymi Divi lub własnymi zmiennymi CSS, aby stworzyć wielokrotne, dynamiczne układy. Pokażę ci, jak to zrobić w następnej sekcji.

Nawiasem mówiąc, czy wiesz, że Divi 5 obsługuje również wszystkie funkcje CSS w zaawansowanych jednostkach? Możesz też się o nich dowiedzieć

Dowiedz się wszystkiego o zaawansowanych jednostkach Divi 5

Jak Divi 5 tworzy użycie calc () bez wysiłku

Właśnie zobaczyłeś, że Divi 5 sprawia, że ​​używa się calc () w swoich projektach bez wysiłku, jednocześnie zapewniając natychmiastowe podgląd podczas pracy. Ale jest więcej. Divi daje nie tylko obejście, ale w pełni zintegrowany, bez kodu sposobu budowania responsywnych, opartych na logicznych układach za pomocą tych samych narzędzi, na których opierają się programiści, bez pisania wiersza kodu.

Oto, w jaki sposób pomaga użyć heroicznie calc (), cicho pracując w cieniu:

1. Zastosuj calc () do dowolnego pola numerycznego

To, że nie kodujesz, nie oznacza, że ​​jesteś ograniczony. W Divi 5 pracuje w dowolnym miejscu, w dowolnym miejscu akceptowana jest wartość liczbowa (myśl: szerokość, wysokość, wyściółka, margines, szczelina, rozmiar czcionki, gdziekolwiek). Jeśli pole akceptuje liczbę, obsługuje calc ().

I stosowanie calc () jest stosunkowo proste. Wszystko, co musisz zrobić, to wybrać calc () z innych zaawansowanych jednostek i wprowadź formułę.

Oznacza to, że możesz wizualnie poradzić sobie z matematyką układu bez opuszczania konstruktora. Niezależnie od tego, czy odejmuje wysokość stałego nagłówka, dodając elastyczne odstępy do rozmiarów czcionek, czy miksowanie jednostek w celu lepszej reakcji, Divi pozwala zrobić to wszystko bezpośrednio wewnątrz pól projektowych.

Po prostu wpisz swoją formułę, a wyniki natychmiast aktualizuje-bez paneli kodu, bez przełączania zakładki i bez zgadania. Jest to pełna kontrola, wbudowana bezpośrednio w twój przepływ pracy.

2. Uzyskaj natychmiastowe podgląd na żywo

Jedną z najlepszych części korzystania z calc () w Divi 5 jest to, że możesz zobaczyć, co robisz w czasie rzeczywistym. Nie musisz zgadywać, jak wyglądają odstępy lub wyrównanie. Po wprowadzeniu formuły calc () natychmiastowy aktualizuje się.

Jak widać, wyściółka zmieniła się natychmiast, gdy wprowadziłem wartości calc (). Przełączyłem również między różnymi punktami przerwania, aby pokazać, jak wyściółka dostosowuje się na podstawie rozmiaru ekranu.

Niezależnie od zmian, które wprowadzisz, zobaczysz wynik podczas pisania. Ta natychmiastowa informacja zwrotna pomaga zrozumieć, w jaki sposób obliczenia wpływają na układ i pozwala szybko dostosować wartości bez przełączania kart.

3. Zbuduj zaawansowane przepływy pracy z calc ()

Korzystanie z calc () w Divi 5 nie jest potężne, ponieważ możesz teraz dodawać lub odjąć wartości. Prawdziwa siła polega na odblokowaniu mądrzejszych przepływów pracy. Divi pozwala połączyć calc () z zaawansowanymi narzędziami, takimi jak clamp (), zmienne CSS, zmienne projektowe i ustawienia o grupie opcji, wszystkie wewnątrz budowniczego wizualnego.

Nie ograniczasz się do prostych jednorazowych korekt. Korzystając z DIVI, możesz tworzyć systemy układu, które płynnie reagują na rozmiar ekranu, przestrzegać spójnych reguł odstępów i aktualizować automatycznie po zmianie tokenów projektowych. Zobaczmy, jak:

1. Rozszerzyć calc () ze zmiennymi CSS

Divi 5 obsługuje zmienne CSS bezpośrednio wewnątrz pól projektowych, co oznacza, że ​​możesz zdefiniować wartości wielokrotnego użytku i obliczyć od nich wizualnie. Powiedzmy, że chcę użyć stałej wyściółki we wszystkich moich sekcjach stron, więc zapiszę ją jako zmienną CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Aby to zrobić, przejdę do ustawień strony> Zaawansowane> niestandardowe CSS i dodam tutaj moje wartości główne:

Teraz, zamiast wchodzić w pełną formułę wszędzie, możesz po prostu użyć var ​​(–Sekcji) w dowolnym polu wyściółki wewnątrz Divi. Aktualizacje wyników na żywo, a jeśli później zmienię wartość główną, cały układ natychmiast odzwierciedla tę zmianę.

Zwróć uwagę, że zaktualizowana zaawansowana jednostka pokazuje calc var, co oznacza, że ​​zmienna CSS została wstawiona za pomocą funkcji var () wewnątrz formuły calc ().

Używanie zmiennych CSS w Divi jest zaskakująco proste. Możesz po prostu zdefiniować je na samej stronie bez dotykania arkusza stylów. Pomaga to utrzymać spójną strukturę projektową, przetestować nowe wartości i budować responsywne reguły układu.

2. Użyj calc () w ramach projektowania

Divi 5 pozwala zapisać wartości calc () jako zmienne projektowe, co ułatwia ponowne użycie logiki układu na całej witrynie. Załóżmy, że chcesz, aby sekcje serwisowe zawsze wypełniały ekran minus wysokość stałego nagłówka. Następnie możesz utworzyć zmienną liczbową i nazwać ją wysokość sekcji z wartością (120 VH - 30px).

Tutaj 30px to wysokość stałego nagłówka.

Teraz, aby zastosować zapisaną zmienną, przejdź do ustawień projektu sekcji i unosić się na wysokości, aby zlokalizować ikonę pola dynamicznego. Kliknij na to, a zapisana zmienna pojawi się. Kliknij wysokość sekcji , aby ją zastosować.

To podejście zapewnia pełną kontrolę układu, jednocześnie utrzymując spójność projektu. Nie jesteś zamknięty w ustawieniach wstępnych ani wartości statycznych. Zamiast tego budujesz logikę, która dostosowuje się do stron, szablonów i rozmiarów ekranu wizualnie.

Zmienne projektowe odblokowują wielkie możliwości. Na przykład możesz wizualnie zbudować framework projektowy i używać go na wszystkich stronach witryny, aby zachować spójność zasad projektowania. Zalecamy również zbudowanie systemów typograficznych, odstępów i rozmiarów przed zaprojektowaniem dowolnej strony.

3. Utwórz i zapisz wstępne ustawienia grup opcji

Gdy układ konsekwentnie używa wartości calc (), Divi 5 ułatwia zapisywanie tej logiki dla ponownego użycia. Możesz przechowywać całą konfigurację stylizacji (lub indywidualne ustawienia, takie jak wyściółka, luki, marginesy i szerokości) jako wstępne ustawienia grup opcji. Oznacza to, że zamiast wielokrotnego stosowania formuł calc (), po prostu wybierasz ustawienie wstępne, a matematyka układu jest stosowana natychmiast.

Na przykład, jeśli użyłeś wyściółki: calc (4REM + 2vW) w wielu sekcjach, nie musisz go przepisać wszędzie. Po prostu zapisz go jako ustawienie:

Teraz zastosuj zapisany ustawienie, gdzie potrzebne jest. Wszystko aktualizuje się wizualnie, więc możesz zobaczyć efekt na żywo natychmiast.

Co więcej, jeśli używałeś zmiennych projektowych w tych ustawieniach, możesz zaktualizować wartości na całym świecie później. Zmień zmienną raz, a każde użyteczne jej ustawienie odzwierciedla aktualizację. To sprawia, że ​​edycje na dużą skalę są szybkie i spójne.

Zauważ, jak zmieniając zapisane wartości w zmiennych projektowych, są również aktualne w sekcji wyściółki, jednocześnie dając nam podgląd na żywo? To dlatego, że użyłem zmiennej wysokości sekcji wewnątrz ustawienia sekcji odstępów .

To jest moc Divi 5. Pomaga skalować system projektowania, zachowując zgodność zaawansowanej logiki układu. Gdy przyzwyczaisz się do łączenia zaawansowanych jednostek, takich jak calc () (patrz tutaj więcej przypadków użycia z wskazówkami dotyczącymi skutecznego opanowania) z modułowym systemem projektowania Divi, odblokujesz wydajny i zabawny sposób budowania stron internetowych.

Divi sprawia, że ​​matematyka jest łatwa

Nie musisz być programistą, aby korzystać z funkcji CSS, takich jak calc () i clamp (). Divi 5 wprowadza te zaawansowane narzędzia do interfejsu wizualnego, który jest łatwy do zbadania, testowania i zastosowania. Możesz zrobić wszystko, od prostych poprawek układu po złożone systemy projektowe bez pisania linii kodu.

Niezależnie od tego, czy dostosowujesz odstępy, używając zmiennych, czy budujesz wstępne ustawienia o wielokrotnym użyciu, Divi sprawia, że ​​responsywna matematyka projektowa jest dostępna dla wszystkich. Chcesz przetestować, jak płynnie działa calc () w Divi? Pobierz Divi Public Alpha już dziś i doświadcz jej dla siebie.

Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale poczekaj trochę przed migracją istniejących.