CSS Functional Notations Nedir? Nasıl Kullanılır?
CSS Selectors ile ilgili yazının ardından CSS yazı dizisine Calc() fonksiyonunun da içerisinde yer aldığı, esasında belirli fonksiyonlar bağlamında (örneğin rgb() ve rgba() gibi) da aşina olduğumuz fonksiyonel gösterim (functional notations) ile devam edelim.
CSS Functional Notations
Fonksiyonel gösterim (functional notation), daha karmaşık tipleri ya da özel işlemleri çağırabilen bir bileşen (component) değeri tipidir. Sözdizimi çoğu programlama dilinde söz konusu olan, klasik fonksiyon tanımlarında olduğu gibi, hemen fonksiyon adının ardından gelen parantez ve bu parantez içerisindeki argüman(lar)dan oluşur; funcname(argumants). Fonksiyonlar, bir CSS özellik değerine benzer şekilde birden çok bağımsız değişken alabilir. Hazır özellik tanımlamalarından bahsetmişken küçük bir de ekleme yapmak istiyorum. Yazının giriş paragrafında örnek olarak gösterdiğim rgb() ve rgba() kullanımlarında, belirtilen renk tanımlarının tamamı bir argüman olarak nitelendirilmektedir1. Dolayısıyla, renk değerleri arasındaki virgül esasında gereksiz bir kullanım olacaktır. Aşağıdaki örnekler aynı sonucu sağlasalar da doğru kullanım ilk satırdaki gibidir.
rgb(0 255 0)
rgb(0, 255, 0)Peki, hangi fonksiyonları kullanabilmekteyiz?
RGB / RGBA Fonksiyonu
Renklerin numeric (sayısal) olarak ifade edilmesini sağlayan bir fonksiyondur. Renklerin yanı sıra alpha channel ile belirtilen rengin transparanlık değeri de fonksiyon içerisinde belirtilebilir. Ancak, renk kanallarının onaltılık (hexadecimal) sayılar olarak ifade edilmesini sağlayan CSS onaltılık renk gösterimi (CSS hex color notation) daha pratik bir alternatiftir. Örneğin, #00ff00 ve rgb(0 255 0) bize aynı renk çıktısını (a lime green) verecektir. Yazım biçimi aşağıdaki şekillerdedir:
rgb( <percentage>#{3} <alpha-value>? )
rgb( <number>#{3} <alpha-value>? )
rgb( <percentage>#{3} , <alpha-value>? )
rgb( <number>#{3} , <alpha-value>? )Alpha channel ifadesi number (örneğin 30) veya percentage (örneğin 80%) şeklinde olabilir. Alpha channel ile birlikte hex color notation #0000ffcc ve buna karşılık gelen rgb notation rgb(0 0 100% / 80%) şeklinde olacaktır.
CSS Calc Fonksiyonu
CSS calc(), doğrudan CSS değeri atarken basit hesaplamalar (toplama (+), çıkarma (-), çarpma (*) ve bölme (/)) yapabilmemizi sağlar. Bu sayede matematiksel ifadeleri bileşen değerleri olarak kullanabiliriz. Bu fonksiyonun en kullanışlı özelliği birimleri karıştırma yeteneğidir. Örneğin, pikselleri yüzde ile çarpabiliriz. En temel yazım biçimlerini şu biçimlerle örneklendirebiliriz2:
.classname { width: calc(100% - 60px); }
#idname { font-size: calc(2 * 15px); }Elbette calc() yazımında da uyulması gereken bazı kurallar mevcut3. Klasik matematik işlemlerinde olduğu gibi hesaplama soldan sağa doğru yapılır ve önce bölme veya çarpma, ardından toplama ve çıkartma işlemleri gerçekleştirilir. Hesaplama işleminde parantez kullanılmışsa önce parantez içi hesaplanacaktır. calc() yalın kullanımı modern tarayıcılar tarafından günümüzde desteklense de eski sürümler için -moz- ve -webkit- öneklerinin (prefix) kullanılması gerekmektedir. O halde örneklere geçebiliriz. İlk örneğimizde, container ve sidebar adında iki elemanımız olsun. Sağ bölümün genişliği sabit, sol bölümün ise yüzdeli.. Buna göre bu 2 nesneyi kolayca nasıl yan yana getirebiliriz?
Bir diğer kullanımda çözünürlüğe bağlı olarak .col ile sıralanacak alan sayısına müdahale edelim.
Son örneğimizde ise bir görseli yatay, dikey ve hem yatay hem de dikey olarak ortalayalım.
İlk örnekte görselin genişliğini nasıl hesaplayarak calc() değerinden düştüysek sonraki örneklerde de kullandığınız element(ler)in kapladığı alan (width, height, margin vb.) değerlerini de göz önünde bulundurmanız gerekmekte4.
CSS Url Fonksiyonu
Url() fonksiyonu bir dosya çağırmak için kullanılır. Parametre mutlak (absolute) bir URL, göreli (relative) bir URL veya bir veri (data) URI‘sidir. Url() fonksiyonu, attr() işlevi gibi başka bir CSS işlevinin parametresini de verebilir. Aldığı değere bağlı olarak bir görüntü, yazı tipi veya stil sayfasını CSS içerisinde kullanabilmemizi sağlar. Örnek yazımları aşağıda görebilirsiniz.
url(https://alanadi.com/img/logo.jpg);
url(data:image/png;base64,iRxVB0…);
url(fontName.woff);
url(#IDofSVGpath);Kullanımları ise şu şekilde örneklendirebiliriz:
background-image: url("https://alanadi.com/image.gif");
list-style-image: url('../images/bullet.jpg');
content: url("icon.jpg");
cursor: url(cursor.cur);
border-image-source: url(/media/target.png);
src: url('arial.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");CSS Attr Fonksiyonu
Attr() fonksiyonu, seçilen elementin bir niteliğinin değerini alıp stil sayfasında kullanmamızı sağlar5. Ayrıca pseudo-element bağlamında da kullanılabilir. Bu durumda pseudo-element‘in kaynak öğesindeki özniteliğin değeri döndürülecektir. Örnek yazımları şu şekildedir:
attr(data-count);
attr(title);Kullanımları ise şu şekilde örneklendirebiliriz:
attr(src url);
attr(data-count number);
attr(data-width px);
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");blur(), drop-shadow(), env(), fit-content(), grayscale(), hsl(), image(), min(), max(), opacity(), rotate(), scale(), var() gibi daha pek çok fonksiyon ile ilgili detaya Keyword index ve Builtin Functions sayfalarından ulaşabilirsiniz.