İş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.

Yukarıda açıklanan bir işlevin şeması

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, dilde bulunan diğer öğelere (ör. currentColor gibi hesaplanmış basamaklı değerler) 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. Yukarıdaki 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 rgb(), rgba(), hsl(), hsla(), hwb(), lab() ve lch()'dir. Bunların tümü, yapılandırma bağımsız değişkenlerinin aktarıldığı ve bir rengin geri 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.

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

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 bilgiyi bu makalede bulabilirsiniz.

Ş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 kopyalanabilecek 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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.

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

İ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);
}

Ölçek

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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ü.

Çeviri

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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 öğeyi X ekseni boyunca, her iki bağımsız değişken de tanımlanmışsa öğeyi X ve Y ekseni boyunca hareket ettirir.

.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.

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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 ekseni bağımsız olarak etkilemek için skewX ve skewY değerlerini de kullanabilirsiniz.

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

Perspektif

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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 animate 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ı verilen 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

CSS işlevleri hangi karakterlerle tanımlanabilir?

{}
:
[]
()
::

CSS'de yerleşik matematik işlevleri var mı?

Doğru
Yanlış

calc() işlevi, font-size: calc(10px + calc(5px * 3)); gibi başka bir calc() işlevinin içine yerleştirilebilir.

Doğru
Yanlış

Aşağıdakilerden hangisi CSS şekil işlevleridir?

polygon()
ellipse()
inset()
circle()
rect()
square()