İşlevler

CSS Podcast - 020: İşlevler

Bu kursta bu zamana kadar çeşitli CSS işlevleriyle tanıştınız. Kılavuz modülünde, öğeleri boyutlandırmanıza yardımcı olan minmax() ve fit-content() ile tanıştınız. Renk modülünde, renkleri tanımlamanıza yardımcı olan rgb() ve hsl() ile tanıştınız.

Diğer birçok programlama dilinde olduğu gibi, CSS'de de ihtiyaç duyduğunuzda erişebileceğiniz çok sayıda yerleşik işlev vardır.

Her CSS işlevinin belirli bir amacı vardır. Bu derste, işlevlerin nerede ve nasıl kullanılacağını daha iyi anlayabilmeniz için işlevlere genel bir bakış sunulmaktadır.

İşlev nedir?

İşlev, belirli bir görevi tamamlayan, adlandırılmış ve bağımsız bir kod parçasıdır. İşlevler, kodunuzda çağırabilmeniz ve işleve veri iletebilmeniz için adlandırılır. Buna bağımsız değişken gönderme denir.

Birçok CSS işlevi saf işlevdir. Yani aynı bağımsız değişkenleri onlara iletirseniz kodunuzun geri kalanında ne olursa olsun her zaman aynı sonucu döndürürler. Bu işlevler, CSS'nizdeki değerler değiştikçe genellikle yeniden hesaplanır. Bu durum, currentColor gibi hesaplanmış basamaklı değerler gibi dildeki diğer öğelere benzer.

CSS'de kendi işlevlerinizi yazmak yerine yalnızca sağlanan işlevleri kullanabilirsiniz. Ancak işlevler bazı bağlamlarda birbirinin içine yerleştirilebilir. Bu da işlevlere daha fazla esneklik sağlar. Bu konuyu bu modülün ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.

İşlevsel seçiciler

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Yarı sınıf modülündeki işlevsel seçiciler hakkında bilgi edindiniz. Bu modülde :is() ve :not() gibi işlevler ayrıntılı olarak açıklanmıştır. Bu işlevlere iletilen bağımsız değişkenler CSS seçicileridir ve daha sonra değerlendirilir. Öğelerle eşleşme varsa CSS kuralının geri kalanı bu öğelere uygulanır.

Özel özellikler ve var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Özel özellik, CSS kodunuzdaki değerleri dizine eklemenize olanak tanıyan bir değişkendir. Özel mülkler de ardışık düzenden etkilenir. Bu, bağlama göre değiştirilebilecekleri veya yeniden tanımlanabilecekleri anlamına gelir. Özel mülkler iki kısa çizgiyle (--) başlamalı ve büyük/küçük harfe duyarlıdır.

var() işlevi, zorunlu bir bağımsız değişken alır: değer olarak döndürmeye çalıştığınız özel özellik.

Önceki snippet'te var() işlevine bağımsız değişken olarak --base-color geçirilmiştir. --base-color tanımlanmışsa var() değeri döndürülür.

.my-element {
    background: var(--base-color, hotpink);
}

var() işlevine yedek beyan değeri de iletebilirsiniz. Bu, --base-color bulunamazsa bunun yerine iletilen beyan kullanılacağı anlamına gelir. Bu örnekte, hotpink rengi kullanılır.

Değer döndüren işlevler

var() işlevi, değer döndüren CSS işlevlerinden yalnızca biridir. attr() ve url() gibi işlevler var()'ye benzer bir yapıya sahiptir. Bir veya daha fazla bağımsız değişken iletir ve bunları CSS beyanınızın sağ tarafında kullanırsınız.

a::after {
  content: attr(href);
}

Buradaki attr() işlevi, <a> öğesinin href özelliğinin içeriğini alır ve ::after sözde öğesinin content olarak ayarlar. <a> öğesinin href özelliğinin değeri değişirse bu durum otomatik olarak bu content özelliğine yansıtılır.

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() işlevi, dize URL'si alır ve resim, yazı tipi ve içerik yüklemek için kullanılır. Geçerli bir URL iletilmezse veya URL'nin işaret ettiği kaynak bulunamazsa url() işlevi hiçbir şey döndürmez.

Renk işlevleri

renk modülünde renk işlevleri hakkında bilgi edinmiştiniz. Henüz okumadıysanız bu makaleyi okumanızı önemle tavsiye ederiz.

CSS'de kullanılabilen bazı renk işlevleri şunlardır: rgb(), hsl(), lab(), lch(), oklab(), oklch() ve color(). Bunların tümü, yapılandırma bağımsız değişkenlerinin iletildiği ve bir rengin döndürüldüğü benzer bir forma sahiptir.

Matematiksel ifadeler

Diğer birçok programlama dili gibi CSS de çeşitli hesaplama türlerinde yardımcı olacak yararlı matematiksel işlevler sağlar.

Aritmetik işlevler

calc()

calc() işlevi, parametresi olarak tek bir matematiksel ifade alır. Bu matematiksel ifade; uzunluk, sayı, açı ve sıklık gibi türlerin bir karışımı olabilir. Birimler de karıştırılabilir.

.my-element {
    width: calc(100% - 2rem);
}

Bu örnekte, bir öğenin genişliğini içeren üst öğesinin% 100'ü olacak şekilde boyutlandırmak için calc() işlevi kullanılmakta ve ardından 2rem, hesaplanan bu değerden kaldırılmaktadır.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() işlevi başka bir calc() işlevinin içine yerleştirilebilir. Özel özellikleri, bir ifadenin parçası olarak var() işlevine de iletebilirsiniz.

min() ve max()

min() işlevi, iletilen bir veya daha fazla bağımsız değişkenin en küçük hesaplanmış değerini döndürür. max() işlevi ise tam tersini yapar: İletilen bir veya daha fazla bağımsız değişkenin en büyük değerini alır.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Bu örnekte, genişlik 20vw (görüntü alanı genişliğinin% 20'si) ile 30rem arasında en küçük değer olmalıdır. Yükseklik, 20vh (görüntü alanı yüksekliğinin% 20'si) ile 20rem arasında en büyük değer olmalıdır.

clamp()

clamp() işlevi üç bağımsız değişken alır: minimum boyut, ideal boyut ve maksimum boyut.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Bu örnekte font-size, görüntü alanının genişliğine göre akışkan olacaktır. vw birimi, ekran yakınlaştırma işlemine yardımcı olmak için bir rem birimine eklenir. Bunun nedeni, yakınlaştırma seviyesinden bağımsız olarak vw biriminin aynı boyutta olmasıdır. Kök yazı tipi boyutuna göre bir rem birimi ile çarpma işlemi, clamp() işlevine göreli bir hesaplama noktası sağlar.

min(), max() ve clamp() işlevleri hakkında daha fazla bilgi edinmek için bu işlevlerle ilgili makaleyi inceleyin.

Trigonometrik İşlevler

Trigonometrik fonksiyonlar, bir dairedeki herhangi bir noktayı açıya göre bulmanıza, ses dalgaları gibi döngüsel olayları modellemenize, yörüngeleri açıklamanıza ve daha fazlasını yapmanıza olanak tanır. CSS'de, özellikleri rotasyona göre ayarlamak, animasyonlara zamanlama uygulamak, öğeleri bir noktaya göre döndürmek ve diğer kullanımlar için trigonometrik işlevleri kullanabilirsiniz.

Daha fazla bilgi ve örnek için trigonometrik işlevler hakkındaki makalemizi inceleyin.

sin(), cos() ve tan()

sin(), cos() ve tan() işlevleri bir açı bağımsız değişkeni alır ve sırasıyla sinüs, kosinüs ve tanjantı döndürür. sin() ve cos() işlevleri, -1 ile 1 arasında bir sayı döndürür. tan() işlevi, -Infinity ile +Infinity arasında bir sayı döndürür. Açı bağımsız değişkeni, desteklenen herhangi bir açı birimi olabilir.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

Önceki örnekte --sine-degrees ve --sine-radians aynı değere (bu örnekte 0.7071) sahiptir.

Önceki örnekte, sonucu belirtilen yarıçapla çarparak x ve y eksenlerinde salınım animasyonları oluşturmak için sin() ve cos() işlevleri kullanılır. Her iki işlevi de aynı anda kullanmak, yörünge animasyonu oluşturmanıza olanak tanır. Tüm işlev çağrıları için açıyı sorunsuz bir şekilde animasyonlu hale getirmek amacıyla --angle adlı bir özel özellik kullanırız.

asin(), acos() ve atan()

asin(), acos() ve atan(), sin(), cos() ve tan() işlevlerinin tersidir. Bağımsız değişken olarak bir sayı alır ve -90deg ile 90deg arasında bir açı değeri döndürür. asin() ve acos() işlevleri -1 ile 1 arasında bir sayı kabul ederken atan() işlevi -Infinity ile +Infinity arasında bir sayı kabul eder.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

atan2() işlevi, başlangıca göre bir noktayı temsil eden iki bağımsız değişken alır ve bu noktanın yönünü temsil eden açıyı döndürür. Öğeleri belirli bir noktaya bakacak şekilde döndürmek için bu seçeneği kullanabilirsiniz. Bağımsız değişkenler sayı, boyut birimi veya yüzde olabilir ancak her iki bağımsız değişken de aynı türde olmalıdır.

Yukarıdaki örnekte, görüntü alanının merkezi ile mevcut fare konumu arasındaki açıyı belirlemek için atan2() işlevi kullanılmıştır. y değerinin ilk bağımsız değişken, x değerinin ise ikinci bağımsız değişken olduğunu unutmayın. Ardından, "göz bebeklerini" "gözlerin" merkezine göre konumlandırmak için açı kullanılır. Böylece, "göz bebekleri" fareyi takip eder.

hypot()

hypot() işlevi, dik üçgenin kenarlarını temsil eden iki uzunluk bağımsız değişkeni alır ve hipotenüsün uzunluğunu döndürür. Bu kısayolu, üstel fonksiyonları kullanarak hesaplama yapmak için kullanabilirsiniz. Her iki bağımsız değişken de aynı birim türünde olmalıdır ve hypot() aynı türü döndürür.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Üssel fonksiyonlar

pow() ve exp()

pow() işlevi, taban ve üs olmak üzere iki sayısal bağımsız değişken alır ve tabanı üssün kuvvetine yükseltir. Her iki bağımsız değişken de birim içermeyen sayılar olmalıdır. exp() işlevi tek bir bağımsız değişken alır ve pow() işlevini e tabanı ile çağırmaya eşdeğerdir.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

sqrt() işlevi, sayısal bir bağımsız değişken alır ve bu bağımsız değişkenin karekökünü döndürür. Parametre birim içeremez.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

log() işlevi, sayısal bir değerin logaritmasını döndürür. Bir bağımsız değişken ile çağrılırsa doğal logaritmayı döndürür. İkinci bir bağımsız değişken iletilirse log() işlevi, ikinci bağımsız değişkeni logaritmanın tabanı olarak kullanır.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

İşaretle ilgili işlevler

abs()

abs() işlevi, sayısal bir bağımsız değişken alır ve bağımsız değişken değerinin mutlak (pozitif) değerini döndürür.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

Önceki örnekte, alpha değeri -1 olduğunda şeffaf metin elde edilir. Ancak abs() işlevi, 1 değerinin mutlak değerini döndürür. Bu da tamamen opak metin elde edilmesine neden olur.

sign()

sign() işlevi sayısal bir bağımsız değişken alır ve bağımsız değişkenin işaretini döndürür. Pozitif değerler 1, negatif değerler ise -1 döndürür. Sıfır değerler 0 döndürür.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

Önceki örneklerde, --value pozitifse en yüksek değer 75vh olur. Negatifse üst değer 25vh olur. Sıfır ise en yüksek değer 50vh olur.

Şekiller

clip-path, offset-path ve shape-outside CSS özellikleri, kutunuzu görsel olarak kırpmak veya içeriğin akması için bir şekil sağlamak amacıyla şekilleri kullanır.

Bu iki mülk ile birlikte kullanılabilecek şekil işlevleri vardır. circle(), ellipse() ve inset() gibi basit şekiller, boyutlarını belirlemek için yapılandırma bağımsız değişkenlerini kullanır. polygon() gibi daha karmaşık şekiller, özel şekiller oluşturmak için virgülle ayrılmış X ve Y ekseni değer çiftlerini kullanır.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() gibi, bağımsız değişken olarak SVG dolgu kuralı alan bir path() işlevi de vardır. Bu sayede Illustrator veya Inkscape gibi bir grafik aracında çizilip CSS'nize kopyalanabilen son derece karmaşık şekiller oluşturabilirsiniz.

Dönüşümler

CSS işlevlerine genel bakışımızda son olarak, bir öğenin perspektifini değiştiren, boyutunu ayarlayan ve hatta derinliğini değiştiren dönüştürme işlevlerini ele alacağız. Aşağıdaki işlevlerin tümü transform mülküyle kullanılır.

Döndürme

Bir öğeyi döndürmek için rotate() işlevini kullanabilirsiniz. Bu işlev, öğeyi merkez ekseni üzerinde döndürür. Bir öğeyi belirli bir eksende döndürmek için rotateX(), rotateY() ve rotateZ() işlevlerini de kullanabilirsiniz. Dönme düzeyini belirlemek için derece, tur ve radyan birimleri iletebilirsiniz.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() işlevi dört bağımsız değişken alır.

İlk 3 bağımsız değişken, X, Y ve Z koordinatlarını tanımlayan sayılardır. Dördüncü bağımsız değişken, diğer dönme işlevleri gibi derece, açı ve dönüşleri kabul eden dönmedir.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Bir öğeyi döndürmek için ayrı rotate mülkünü kullanabilirsiniz. transform mülkü dışında kullanıldığında, diğer dönüşümlerden ayrı olarak geçiş yapabilirsiniz. Döndürme işlevlerine benzer değerleri kabul eder.

Ölçek

transform ve scale() işlevini kullanarak bir öğenin ölçeğini değiştirebilirsiniz. İşlev, pozitif veya negatif ölçeklendirmeyi belirleyen bir değer olarak bir veya iki sayı kabul eder. Yalnızca bir sayı bağımsız değişkeni tanımlarsanız hem X hem de Y ekseni aynı şekilde ölçeklendirilir. Her ikisini de tanımlamak, X ve Y için kısa bir yoldur. rotate() gibi, bir öğeyi belirli bir eksende ölçeklendirmek için scaleX(), scaleY() ve scaleZ() işlevleri de vardır.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

rotate işlevi gibi scale3d() işlevi de vardır. Bu işlev scale() işlevine benzer ancak üç bağımsız değişken alır: X, Y ve Z ölçek faktörü.

Bir öğeyi ölçeklendirmek için tek bir scale özelliğini kullanabilirsiniz. transform mülkü dışında kullanıldığında, diğer dönüşümlerden ayrı olarak geçiş yapabilirsiniz.

Çeviri

translate() işlevleri, doküman akışındaki konumunu korurken bir öğeyi taşır. Bunlar, uzunluk ve yüzde değerlerini bağımsız değişken olarak kabul eder. translate() işlevi, bir bağımsız değişken tanımlanmışsa bir öğeyi X ekseni boyunca, her iki bağımsız değişken de tanımlanmışsa bir öğeyi X ve Y ekseni boyunca çevirir.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Diğer dönüşüm işlevlerinde olduğu gibi, translateX, translateY ve translateZ kullanarak belirli bir eksen için belirli işlevler kullanabilirsiniz. X, Y ve Z çevirisini tek bir işlevde tanımlamanıza olanak tanıyan translate3d işlevini de kullanabilirsiniz.

scale ve rotate gibi, bir öğeyi taşımak için transform mülkünün dışında translate mülkünü de kullanabilirsiniz.

.my-element{
  translate: 20px 30px;
}

Eğilme

Bağımsız değişken olarak açı kabul eden skew() işlevlerini kullanarak bir öğeyi çarpıtabilirsiniz. skew() işlevi, translate() işlevine çok benzer şekilde çalışır. Yalnızca bir bağımsız değişken tanımlarsanız bu bağımsız değişken yalnızca X eksenini etkiler. İkisini de tanımlarsanız X ve Y eksenini etkiler. Ayrıca, her bir ekseni bağımsız olarak etkilemek için skewX ve skewY değerlerini de kullanabilirsiniz.

.my-element {
  transform: skew(10deg);
}

Perspektif

Son olarak, kullanıcı ile Z düzlemi arasındaki mesafeyi değiştirmek için dönüştürme mülkleri ailesinin bir parçası olan perspective mülkünü kullanabilirsiniz. Bu, uzaklık hissi verir ve tasarımlarınızda alan derinliği oluşturmak için kullanılabilir.

David Desandro'nun çok faydalı makalesindeki bu örnekte, perspective-origin-x ve perspective-origin-y özellikleriyle birlikte gerçek 3D deneyimler oluşturmak için bu özelliğin nasıl kullanılabileceği gösterilmektedir.

Animasyon işlevleri, degradeler ve filtreler

CSS, öğeleri animasyonlu hale getirmenize, onlara renk geçişleri uygulamanıza ve görünümlerini değiştirmek için grafik filtreler kullanmanıza yardımcı olan işlevler de sağlar. Bu modülü mümkün olduğunca kısa tutmak için bu konular bağlantılı modüllerde ele alınmıştır. Bunların tümü, bu modülde gösterilen işlevlere benzer bir yapıya sahiptir.

Öğrendiklerinizi test etme

İşlevlerle ilgili bilginizi test edin