CSS'de Calc () Nedir (ve Nasıl Kullanılır)

Bazı CSS fonksiyonları güçlüdür, ancak nadiren kullanılır, çünkü zor oldukları için değil, daha kolay alternatifler mevcuttur. Calc () bunlardan biridir. Süper kullanışlıdır, ancak genellikle Clamp () tarafından gölgede bırakılır.

Calc (), CLAMP () 'nin dokunamadığı bazı düzen sorunlarını çözer. Bölüm yüksekliklerini ince ayar yapmak, yapışkan başlıklar için ayarlamak ve esnek ve sabit birimleri bir kod çizgisinde karıştırmak için harika. Ve işte iyi haber: tek bir kod satırı yazmadan calc () kullanabilirsiniz.

Divi 5'te arayüze inşa edilmiştir, bu yüzden sadece değerinizi yazın ve Divi gerisini halleder. Nasıl olduğunu görmek ister misin? Bu yazıda, Calc () 'nin nasıl çalıştığını, nerede yardımcı olduğunu ve Divi 5'in içinde nasıl kullanılacağını öğreneceksiniz.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır , ancak mevcut web sitelerini taşımadan biraz önce bekleyin.

CSS'de Calc () nedir?

Calc (), doğrudan stil kurallarınızda ekleme, çıkarma, çarpma, çarpma ve bölme (içeriğe bağlı olarak bazı sınırlamalarla) gibi basit bir matematiği gerçekleştirmenizi sağlayan yerel bir CSS işlevidir. Boyutları ve boşlukları ayarlamak için harika, özellikle her şeyi sabit kodlamadan daha pürüzsüz düzenler elde etmek için sabit ve esnek değerleri karıştırırken harika.

Bunu bir örnekle anlayalım. Bir öğenin ekranın% 80'ini almasını ancak yine de dolgu için yer bırakmasını istediğinizi varsayalım. Yazabilirsiniz:

width: calc(80% - 40px);

Bu, tarayıcıya kabının yüzde 80'inden 40 piksel çıkararak genişliği dinamik olarak hesaplamasını söyler. Otomatik kenar boşlukları gibi merkezleme teknikleri ile birleştirildiğinde, çıkarmadan kalan alan eşit olarak dağıtılır. Değer, ekran boyutuna göre otomatik olarak ayarlanır.

İlk bakışta, çığır açan görünmeyebilir. Ancak Calc (), küçük ekranlardaki kırık boşluk, üst üste binen sabit başlıklar ve merkez dışı bölümler gibi günlük düzen sorunlarını çözmek için idealdir. Uzun medya sorguları yerine, bir satırdaki calc () genellikle yeterlidir. İşte bazı yaygın tek satır kullanım durumları:

• Dolgu: Calc (5VW + 20px); dolgu sıvısı tutar. Küçük ekranlarda bile, asla 20 pikselin altına düşmez.
• Yükseklik: Calc (100VH - 80PX); Sabit bir başlığınız olduğunda içeriği görünür tutar. Ekran yüksekliğine göre otomatik olarak ayarlanır.
• Genişlik: Calc (% 60 - 1REM); Tutarlı aralığı korurken bölüm genişliği üzerinde esnek kontrol sağlar. Çevredeki kenar boşluklarını marj-sol: calc (% 40 + 0.5REM) gibi değerler kullanarak ayarlayabilirsiniz; elemanı konteyner içinde görsel olarak ortalamak veya hizalamak için.

Kısacası, Calc () her kesme noktası için ekstra CSS yazma ihtiyacını ortadan kaldırır. Stilleri tekrar tekrar yeniden yazmak yerine, doğrudan değerlerinize mantık oluşturabilir ve düzenin otomatik olarak yanıt vermesine izin verebilirsiniz. Sadece boyutları tanımlamakla kalmaz, aynı zamanda öğelerin nasıl davranması gerektiğine karar verirsiniz.

Calc () 'nin nasıl çalıştığını anlamak

Calc () 'nin temel sözdizimi şuna benziyor:

 calc(value operator value) 

Burada, geçerli bir uzunluk veya birimi değerde kullanabilirsiniz ve operatör +, -, *, veya / /olabilir.

Örneğin, bir elemanın genişliğini 40 piksel azaltmak istiyorsanız, genişlik yazarsınız: Calc (% 100 - 40px); %Kullanımına dikkat edin? Genişliği esnek yapan da budur.

Calc (100px - 40px) kullanırsak, sonuç her zaman 60 piksel, yani statik olurdu. Ancak bir yüzde kullanarak tarayıcının boyutu ekrana veya üst öğeye göre hesaplamasına izin veriyoruz. Düzen değiştikçe otomatik olarak ayarlanır.

Hızlı ipucu (ve ayrıca ortak bir kural): Calc () 'nin düzgün çalışmasını sağlamak için her zaman değerler ve operatörler arasında boşluk ekleyin. Mekanlar olmadan, CSS çalışmaz. Aşağıda, boşluk olmayan Calc () işlevinin artık geçerli olmadığı için kap genişliğinin varsayılan olarak geri yüklendiğini göreceksiniz:

Birden çok birim kullanma

Farklı göreceli birimleri birleştirmeye başladığınızda Calc () 'nin gerçek faydasının nasıl geldiğini gördünüz. Örneğin, pikselli yüzdeler veya REM'lerle görüntüleme genişliği genişlikleri, çünkü o zaman düzeniniz ekran boyutu değişikliklerine göre yanıt vermeye başlar.

Bunu daha net hale getirmek için, gerçek düzenlerde nasıl çalıştıklarını görmek için birkaç kullanışlı kombinasyon.

Ayrıca birden fazla değer ve birimleri bir satırda birleştirebilirsiniz, bu da boyutlandırmayı duyarlı düzenleri daha doğru hale getirir. Aşağıdaki bu örnek %, PX ve REM'i düzenleme ölçeklendirmesini, sabit aralığı ve tipografiyi karıştırmak için kullanır:

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

• Konteyner ile % 50 ölçek
• 40px bir kenar çubuğu gibi sabit alanı çıkarır
• 1REM, yazı tipi boyutuna göre aralık ekler

Yuvalama calc () işlevleri

Daha karmaşık yerleşim mantığı oluşturmak için bir calc () 'yi diğerine de yuva yapabilirsiniz. Değerler arasında net ilişkilerle tasarım hakkında (katman katmanı) nasıl düşündüğünüzü yansıtmanın harika bir yoludur. Örneğin, genişlik: calc (200px - calc (100px + 2REM));

Burada tarayıcı ilk olarak dolgu, kenar boşluklarını veya başka bir öğenin boyutunu temsil edebilen 100px + 2REM'i hesaplar. Daha sonra son genişliği elde etmek için toplam 200px'den çıkarır. Genişlik REM nedeniyle göreceli kalır.

Bu tür bir yuvalama, düzeniniz birden fazla faktöre bağlı olduğunda kullanışlıdır. Matematiği kendiniz yapmak veya sabit değerleri sabitlemek yerine, ilişkiyi doğrudan CSS'ye yazabilirsiniz. Tasarımınızı esnek tutar ve daha sonra güncellemeyi kolaylaştırır.

Sık sık iç içe geçmiş calc () 'ya ihtiyacınız olmaz, ancak katmanlı aralık veya üst üste binen öğelerle uğraşırken yardımcı olabilir. Bununla birlikte, ezici olabilecekleri için önce basit hesaplamalarla başlamak isteyebilirsiniz. Nasıl çalıştığı konusunda rahat olduğunuzda karmaşıklık eklemek doğal hissedecektir.

Clamp () olduğunda neden calc () kullanıyorsunuz?

Clamp () daha sık kullanırsanız, bu sorunuz olabilir. Açık bir cevap almak için, ikisi arasındaki farkı anlamak iyi bir fikir olurdu:

Clamp () moderndir, bu nedenle medya sorgularına güvenmeden sıvı tasarımları oluşturmak için kullanma konusunda heyecanlanmak kolaydır. Ancak Clamp () daha akıllı hissetse de, Calc () 'nin aşağıdakiler gibi daha alakalı olduğu birçok durum vardır:

• Sabit değerlerin esnek düzenlerden çıkarılması: Yükseklik kullanma: Calc (100VH - 80px), bir bölümün ekranın eksi ekranın sabit bir başlığın yüksekliğini doldurmasını sağlar, böylece öğeler örtüşmez. Clamp () bunu yapamaz çünkü çıkarmayı desteklemez.
• Hassasiyetli Ofset Elemanları: Marj-sol gibi bir değer: Calc (% 50-200px); görsel olarak dengeli tutarken bir elemanı kabına göre değiştirir. Clamp () bu tür ilişkisel konumlandırmayı gerçekleştiremez.
• Yan taraf bölümlerini hizalama: Genişliğe sahip bir sütun: Calc (% 60-2REM); Alanın% 60'ını tutarlı bir boşluk alıyor. Clamp () tek bir değeri ölçeklendirmek için idealdir, Calc () çoklu değerler arasındaki ilişkiler gerektiğinde mükemmeldir.

Sonuç olarak, tek bir değerin ekran boyutları arasında nasıl ölçeklenmesi gerektiğini tanımlarken Clamp () harika. Ancak calc (), düzeniniz yukarıdaki durumlarda olduğu gibi, aynı anda birden fazla şeye bağlı olduğunda ihtiyacınız olan şeydir.

Calc () + Clamp () Birleştirme

Calc () ve Clamp () kendi başlarına güçlü olsa da, neden her ikisini de birleştirebildiğinizde neden bir tane kullanın? Esnek ölçeklemeyi hassas kontrolle birleştirmek gibi yerleşik mantıkla sıvı tasarımları oluşturmak için CLAMP () içindeki calp () yuva yapabilirsiniz.

Örneğin, dolgu: kelepçe (1REM, Calc (2VW + 10px), 3REM); 1REM ve 3REM arasında ölçeklenen boşluk oluşturur, ancak “tercih edilen” değer, görünüm portu genişliğini ve sabit bir değeri karıştıran bir Calc () formülüne dayanır.

Bu size tasarımınız üzerinde duyarlı, mantıklı ve kesin kontrol sağlar. Calc () ve Clamp () 'nin ayrı ayrı ne zaman kullanacağınızı ve bunları ne zaman birleştireceğinizi öğrendikten sonra, özel kesme noktalarına güvenmeden düzeninizi tam olarak kontrol edebilirsiniz.

Calc () ile CSS değişkenlerini kullanma

Calc () 'nin CSS değişkenleriyle esnekliğini de genişletebilirsiniz. Değişkenleri diğer birimlerle birleştirin, bunlar üzerinde matematik yapın ve yeniden kullanılabilir değerler etrafında düzen mantığı oluşturun. Örneğin, tanımlarsanız: kök {–gap: 40px;}, o zaman dolguyu kullanarak: calc (var (–gap) + 1Rem); Kök değerlerinize göre duyarlı dolgu ayarlamanıza yardımcı olur.

Not: Calc () içindeki CSS değişkenlerini kullanırken, değişkeninizi var () etrafına sarın. Yukarıda nasıl yaptığımı görün.

Bu, Calc () ile kesin bir kontrole sahipken tutarlı bir tasarım sistemi (CSS değişkenleriniz) kullanarak eksiksiz bir web sitesi oluşturmanıza olanak tanır. Ve düzeniniz boyunca boşluğu ayarlamak gibi (global) değişiklikler yapmak istiyorsanız, kök değerlerini değiştirerek bunu yapabilirsiniz.

Clamp () ile bu kadar kolay değil. Clamp () CSS değişkenlerini desteklerken, her değer tam, geçerli bir birime çözülmelidir. Bununla ne demek istiyorum?

Kelepçe (1REM, var (–fluid boyutu), 3REM) gibi bir işlev yalnızca –fluid boyutu 4VW gibi bir şeye çözümlenirse çalışır. Ve ondan ekleme veya çıkarma gibi bir değişkenle matematik yapmanız gerekiyorsa, bu parçayı calc () 'ya sarmanız gerekir. Bu küçük şeyler, değişkenlerle dinamik değerler oluştururken Calc () 'yi gerekli kılar.

Calc () divi 5

Hem Calc () hem de CLAMP (), düzenler, aralık ve yanıt verme konusunda güçlü kontrol sağlayan gelişmiş CSS fonksiyonlarıdır, ancak yalnızca rahat yazma kodu iseniz. Bu, kullanımlarını geliştiricilere veya web profesyonellerine sınırlar. Peki ya görsel iş akışlarını tercih eden ve hala tasarımlarında calc () ve clamp () kullanmak isteyenler ne olacak? Bunu yapabilir misin?

Evet, yapabilirsin. Divi 5'in içinde, hem calc () hem de clamp () gelişmiş birimler olarak mevcuttur ve onlarla çalışmak için tek bir kod satırı yazmanız gerekmez.

YouTube kanalımıza abone olun

Tek yaptığınız herhangi bir sayısal giriş alanının içine calc () girin.

Divi Builder anında hareket eder. Calc () değerinizi girdikten sonra, tasarım yaparken canlı geri bildirim alırsınız. İnşaatçı, Devtools veya önizlemeler arasında geçiş yapmaya gerek yok ve nasıl görüneceğini tahmin etmeye gerek yok.

Divi 5, koda dokunmadan daha akıllı ve daha esnek tasarımları kolaylaştırır. Yeniden kullanılabilir, dinamik düzenler oluşturmak için Calc () 'yi Divi'nin tasarım değişkenleriyle veya kendi CSS değişkenlerinizle birleştirebilirsiniz. Bunu bir sonraki bölümde nasıl yapacağınızı göstereceğim.

Bu arada, Divi 5'in gelişmiş birimlerdeki tüm CSS işlevlerini de desteklediğini biliyor muydunuz? Onları da öğrenmek isteyebilirsiniz

Divi 5'in gelişmiş birimleri hakkında her şeyi öğrenin

Divi 5, calc () 'i kullanmayı nasıl zahmetsiz hale getirir

Divi 5'in tasarımlarınızda Calc () kullanmayı kullandığınızı ve çalışırken size anında önizlemeler verirken yaptığını gördünüz. Ama daha fazlası var. Divi, geliştiricilerin bir kod satırı yazmadan güvendiği aynı araçları kullanarak sadece bir çözüm değil, aynı zamanda duyarlı, mantık tabanlı düzenler oluşturmanın tamamen entegre, kodsuz bir yolu verir.

Gölgelerde sessizce çalışırken calc () kahramanca kullanmanıza nasıl yardımcı olur:

1. Herhangi bir sayısal alana calc () uygulayın

Kodlamamanız sınırlı olduğunuz anlamına gelmez. Divi 5'te, Calc () her yerde çalışır Sayısal bir değer kabul edilir (düşünün: genişlik, yükseklik, dolgu, marj, boşluk, yazı tipi boyutu, her yerde). Alan bir sayı kabul ederse, calc () destekler.

Ve calc () uygulamak nispeten basittir. Tek yapmanız gereken diğer gelişmiş birimlerden calc () seçmek ve formülünüzü girmektir.

Bu, üreticiyi terk etmeden yerleşim matematiğini görsel olarak işleyebileceğiniz anlamına gelir. Sabit bir başlığın yüksekliğini çıkarmak, yazı tipi boyutlarına esnek boşluk eklemek veya daha iyi yanıt verme birimleri karıştırma olsun, Divi hepsini doğrudan tasarım alanlarının içinde yapmanızı sağlar.

Sadece formülünüzü yazın ve sonuç anında güncellenir-kod paneli yok, sekme değiştirme yok ve ikinci tahmin yok. Tam kontrol, iş akışınıza inşa edilmiş.

2. Anında canlı önizlemeler alın

Divi 5'te calc () kullanmanın en iyi parçalarından biri, gerçek zamanlı olarak ne yaptığınızı görebilmenizdir. Aralık veya hizalamanın nasıl görüneceğini tahmin etmek zorunda değilsiniz. Calc () formülünüzü girdiğinizde, oluşturucu anında güncellenir.

Gördüğünüz gibi, Calc () değerlerine girerken dolgu hemen değişti. Ayrıca, dolguların ekran boyutuna göre nasıl ayarlandığını göstermek için farklı kesme noktaları arasında geçiş yaptım.

Ne yaparsanız yapın, sonucu yazarken göreceksiniz. Bu anında geri bildirim, hesaplamanın düzeninizi nasıl etkilediğini anlamanıza yardımcı olur ve sekmeleri değiştirmeden değerleri hızlı bir şekilde değiştirmenize olanak tanır.

3. Calc () ile gelişmiş iş akışları oluşturun

Divi 5'te Calc () kullanmak güçlü değildir, çünkü artık değerler ekleyebilir veya çıkarabilirsiniz. Gerçek güç, daha akıllı iş akışlarının kilidini açmaktır. Divi, CLAMP (), CSS değişkenleri, tasarım değişkenleri ve seçenek grup ön ayarları gibi gelişmiş araçlarla birleştirmenizi sağlar.

Basit bir kerelik ayarlarla sınırlı değilsiniz. Divi kullanarak, ekran boyutuna akıcı yanıt veren, tutarlı boşluk kurallarını takip eden ve tasarım jetonları değiştiğinde otomatik olarak güncelleyen düzen sistemleri oluşturabilirsiniz. Bakalım nasıl:

1. CSS değişkenleri ile calc () genişletin

Divi 5, CSS değişkenlerini doğrudan tasarım alanlarının içindeki destekler, bu da yeniden kullanılabilir değerleri tanımlayabileceğiniz ve görsel olarak hesaplayabileceğiniz anlamına gelir. Diyelim ki tüm sayfa bölümlerimde sabit bir dolgu kullanmak istiyorum, bu yüzden CSS değişkeni olarak kaydedeceğim:

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

Bunu yapmak için sayfa ayarlarına> Gelişmiş> Özel CSS'ye gidip kök değerlerimi buraya ekleyeceğim:

Şimdi, her yere tam formülü girmek yerine, Divi içindeki herhangi bir dolgu alanında var (–Section-padding) kullanabilirsiniz. Sonuç güncellemeleri canlı ve daha sonra kök değerini değiştirirsem, tüm düzen bu değişikliği yansıtır.

Güncellenmiş Gelişmiş Birim Calc Var'ı gösterir, yani CSS değişkeninin bir Calc () formülünün içindeki var () işlevi kullanılarak eklendiği anlamına gelir.

Divi'de CSS değişkenlerini kullanmak şaşırtıcı derecede basittir. Stil sayfanıza dokunmadan bunları sayfanın kendisinde tanımlayabilirsiniz. Bu, tutarlı bir tasarım çerçevesinin korunmasına, yeni değerleri test etmeye ve duyarlı düzen kuralları oluşturmaya yardımcı olur.

2. Tasarım çerçevenizde calc () kullanın

Divi 5, Calc () değerlerini tasarım değişkenleri olarak kaydetmenizi sağlar ve bir düzen mantığını tüm web sitenizde yeniden kullanmayı kolaylaştırır. Diyelim ki hizmet bölümlerinizin her zaman ekran ekranını sabit bir başlığın yüksekliğini doldurmasını istiyorsunuz. Ardından, bir sayı değişkeni oluşturabilir ve değer hesaplamasıyla (120vh - 30px) bölüm yüksekliğini adlandırabilirsiniz.

Burada, 30px sabit başlığın yüksekliğidir.

Şimdi, kaydedilen değişkeni uygulamak için, bölümün tasarım ayarlarına gidin ve dinamik alan simgesini bulmak için yüksekliğin üzerine gelin. Üzerine tıklayın, kaydedilen değişkeniniz açılır. Uygulamak için bölüm yüksekliğine tıklayın.

Bu yaklaşım, tasarımınızı tutarlı tutarken size tam düzen kontrolü sağlar. Ön ayarlara veya statik değerlere kilitlenmiyorsunuz. Bunun yerine, sayfalara, şablonlara ve ekran boyutlarına görsel olarak adapte olan mantık oluşturuyorsunuz.

Tasarım değişkenleri büyük olasılıkların kilidini açar. Örneğin, tasarım çerçevenizi görsel olarak oluşturabilir ve tasarım kurallarını tutarlı tutmak için tüm web sitesi sayfalarınızda kullanabilirsiniz. Ayrıca, herhangi bir sayfa tasarlamadan önce tipografinizi ve boşluk ve boyutlandırma sistemlerinizi oluşturmanızı öneririz.

3. Seçenek grup ön ayarlarını oluşturun ve kaydet

Düzeniniz Calc () değerlerini tutarlı bir şekilde kullandıktan sonra, Divi 5 yeniden kullanım için bu mantığı kurtarmayı kolaylaştırır. Seçenek grubu ön ayarları olarak tüm stil kurulumunuzu (veya dolgu, boşluklar, kenar boşlukları ve genişlikler gibi ayrı ayarlar) depolayabilirsiniz. Bu, Calc () formüllerini tekrar tekrar uygulamak yerine, sadece bir ön ayar seçmeniz ve yerleşim matematiğinin anında uygulandığı anlamına gelir.

Örneğin, birden çok bölümde dolgu: calc (4REM + 2VW) kullandıysanız, her yerde yeniden yazmanız gerekmez. Sadece önceden ayar olarak kaydedin:

Şimdi, kaydedilmiş ön ayarınızı gerektiğinde uygulayın. Her şey görsel olarak güncellenir, böylece efekti hemen canlı olarak görebilirsiniz.

Daha da iyisi, bu ön ayarlarda tasarım değişkenlerini kullandıysanız, değerleri küresel olarak daha sonra güncelleyebilirsiniz. Değişkeni bir kez değiştirin ve onu kullanan her ön ayar güncellemeyi yansıtacaktır. Bu, büyük ölçekli düzenlemeleri hızlı ve tutarlı hale getirir.

Tasarım değişkenlerindeki kaydedilen değerleri nasıl değiştirerek, bize canlı bir önizleme verirken dolgu bölümünde nasıl güncellendiklerine dikkat edin? Bunun nedeni, aralık bölümü ön ayarının içinde bölüm yüksekliği değişkenini kullandım.

Divi 5'in getirdiği güç. Gelişmiş düzen mantığını sitede tutarlı tutarken tasarım sisteminizi ölçeklendirmenize yardımcı olur. Divi'nin modüler tasarım sistemi ile calc () gibi gelişmiş birimleri birleştirmeye alıştıktan sonra (daha fazla calc () etkili bir şekilde ustalaşmaya ilişkin ipuçları içeren durumları kullanın) , web siteleri oluşturmak için verimli ve eğlenceli bir yolun kilidini açacaksınız.

Divi matematiği kolay hissettiriyor

Calc () ve Clamp () gibi CSS işlevlerini kullanmak için geliştirici olmanıza gerek yok. Divi 5, bu gelişmiş araçları keşfetmesi, test etmesi ve uygulanması kolay görsel bir arayüze getirir. Basit düzen ayarlarından karmaşık tasarım sistemlerine kadar bir kod çizgisi yazmadan her şeyi yapabilirsiniz.

İster boşluğu ayarlayın, ister değişkenler kullanarak isterse yeniden kullanılabilir ön ayarlar oluşturun, Divi duyarlı tasarım matematiğini herkes için erişilebilir hale getirir. Calc () 'nin Divi içinde ne kadar sorunsuz çalıştığını test etmek ister misiniz? Divi Public Alpha'yı bugün indirin ve kendiniz deneyimleyin.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut web sitelerini taşımadan biraz önce bekleyin.