İşlevler

CSS Podcast - 020: İşlevler

Bu kursta şimdiye kadar çeşitli CSS işlevleriyle karşılaştınız. Izgara modülünde, öğeleri boyutlandırmanıza yardımcı olan minmax() ve fit-content() ile tanıştınız. color 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 birçok yerleşik işlev bulunur.

Her CSS işlevinin belirli bir amacı vardır. Bu derste, işlevleri nerede ve nasıl kullanacağınızı çok daha iyi kavrayacak üst düzey bir genel bakış edineceksiniz.

İşlev nedir?

İşlev, belirli bir görevi tamamlayan, adlandırılmış, bağımsız bir kod parçasıdır. Bir işlev, kodunuz içinde çağrılabileceği ve verileri işleve geçirebileceğiniz şekilde adlandırılır. Bu işleme, bağımsız değişken iletme olarak bilinir.

Birçok CSS işlevi tam işlevdir. Diğer bir deyişle, bunlara aynı bağımsız değişkenleri iletirseniz, kodunuzun geri kalanında ne olursa olsun size her zaman aynı sonucu verirler. Bu işlevler, CSS'nizdeki değerler değiştikçe genellikle yeniden hesaplanır. Bu, dildeki diğer öğelere (ör. currentColor gibi hesaplanan basamaklı değerler) benzer.

CSS'de kendi işlevlerinizi yazmak yerine yalnızca sağlanan işlevleri kullanabilirsiniz. Ancak bazı bağlamlarda işlevler iç içe yerleştirilerek daha fazla esneklik sağlanır. Bu modülün ilerleyen bölümlerinde bu konu daha ayrıntılı olarak ele alınacaktır.

İşlevsel seçiciler

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

:is() ve :not() gibi işlevleri ayrıntılı bir şekilde anlatan sözde sınıflar modülünde işlevsel seçiciler hakkında bilgi edindiniz. Bu işlevlere aktarılan bağımsız değişkenler, daha sonra değerlendirilen CSS seçicilerdir. Öğelerle eşleşme varsa CSS kuralının geri kalanı bunlara uygulanır.

Özel özellikler ve var()

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

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

Özel mülk, CSS kodunuzdaki değerleri jetona dönüştürmenize olanak tanıyan bir değişkendir. Özel mülkler basamaktan da etkilenir. Bu, bağlamsal olarak değiştirilebilecekleri veya yeniden tanımlanabilecekleri anlamına gelir. Özel özelliklerin önünde iki kısa çizgi (--) bulunmalıdır ve özellikler büyük/küçük harfe duyarlıdır.

var() işlevi gerekli bir bağımsız değişkeni alır: değer olarak döndürmeye çalıştığınız özel özellik. Yukarıdaki snippet'te var() işlevine --base-color bağımsız değişken olarak geçirildi. --base-color tanımlanırsa var(), değeri döndürür.

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

var() işlevine bir yedek bildirim değeri de aktarabilirsiniz. Diğer bir deyişle, --base-color bulunamazsa bunun yerine iletilen beyan kullanılır. Bu örneğin örneğinde, hotpink rengi kullanılır.

Bir 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() ile benzer bir yapıyı izler. Bir veya daha fazla bağımsız değişken iletir ve bunları CSS bildiriminizin 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ıp ::after sözde öğesinin content öğesi olarak ayarlar. <a> öğesinin href özelliğinin değeri değiştirilirse bu durum otomatik olarak bu content özelliğine yansıtılır.

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

url() işlevi, bir dize URL'si alarak resimleri, yazı tiplerini ve içeriği yüklemek için kullanılır. Geçerli bir URL geçirilmezse veya URL'nin işaret ettiği kaynak bulunamazsa url() işlevi hiçbir şey döndürmez.

Renk işlevleri

Renk işlevleri hakkında tüm bilgileri color modülünde öğrendiniz. Henüz okumadıysanız okumanızı kesinlikle öneririz.

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

Matematiksel ifadeler

Diğer birçok programlama dilinde olduğu gibi CSS de çeşitli hesaplama türlerinde yardımcı olacak yararlı matematik işlevleri sağlar.

calc()

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

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

Bu örnekte calc() işlevi, bir öğenin genişliğini içeren üst öğenin% 100'ü olarak boyutlandırmak ve daha sonra hesaplanan bu değerden 2rem tanesini kaldırmak için kullanı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. Bir var() işlevindeki özel özellikleri de bir ifadenin parçası olarak geçirebilirsiniz.

min() ve max()

min() işlevi, geçirilen bir veya daha fazla bağımsız değişkenin hesaplanan en küçük değerini döndürür. max() işlevi ise bunun tersini yapar: Geçirilen 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ındaki en küçük değer olmalıdır. Yükseklik, 20vh (görüntü alanı yüksekliğinin% 20'si) ile 20rem arasındaki 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.

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

Bu örnekte font-size, görüntü alanının genişliğine göre değişken olacaktır. Yakınlaştırma düzeyinden bağımsız olarak bir vw birimi aynı boyutta olacağından, vw birimi, ekranı yakınlaştırmaya yardımcı olmak için rem birimine eklenir. Kök yazı tipi boyutuna bağlı olarak bir rem birimiyle çarpıldığında, clamp() işlevine göreli bir hesaplama noktası sağlanır.

min(), max() ve clamp() işlevleri hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Şekiller

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

Bu özelliklerin her ikisiyle de kullanılabilecek şekil işlevleri vardır. circle(), ellipse() ve inset() gibi basit şekilleri boyutlandırmak için yapılandırma bağımsız değişkenleri kullanılır. polygon() gibi daha karmaşık şekiller, özel şekiller oluşturmak için virgülle ayrılmış X ve Y ekseni değeri çiftleri alı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, SVG doldurma kuralını bağımsız değişken olarak alan bir path() işlevi de vardır. Bu, Illustrator veya Inkscape gibi bir grafik aracında çizilebilen ve ardından CSS'nize kopyalanabilen son derece karmaşık şekillere olanak tanır.

Dönüşümler

Son olarak, CSS işlevlerine genel bakışta, bir öğeyi eğen, yeniden boyutlandıran, hatta derinliğini değiştiren dönüştürme işlevleri vardır. Aşağıdaki işlevlerin tümü transform özelliğiyle kullanılır.

Döndürme

Bir öğeyi merkez ekseninde döndüren rotate() işlevini kullanarak döndürebilirsiniz. Bir öğeyi belirli bir eksende döndürmek için rotateX(), rotateY() ve rotateZ() işlevlerini de kullanabilirsiniz. Derece, dönüş ve radyan birimlerini geçirebilirsiniz.

.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öndürme işlevleri gibi derece, açı ve dönüşleri kabul eden döndürmedir.

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

Ölçeklendir

transform ve scale() işleviyle bir öğenin ölçeklendirmesini değiştirebilirsiniz. İşlev, pozitif veya negatif ölçeklemeyi belirleyen 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çeklenir. Her ikisinin de tanımlanması X ve Y için kısaltma olur. rotate()'de olduğu gibi, bir öğeyi belirli bir eksende ölçeklendirmek için scaleX(), scaleY() ve scaleZ() işlevleri vardır.

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

Ayrıca, rotate işlevinde olduğu gibi bir scale3d() işlevi de vardır. Bu, scale() işlevine benzer ancak üç bağımsız değişken içerir: X, Y ve Z ölçek faktörü.

Çeviri

translate() işlevleri, bir öğeyi belge akışındaki konumunu korur. Uzunluk ve yüzde değerlerini bağımsız değişken olarak kabul ederler. translate() işlevi, bir bağımsız değişken tanımlanırsa X ekseni boyunca bir öğeyi çevirir. Her iki bağımsız değişken de tanımlanmışsa X ve Y ekseni boyunca bir öğeyi çevirir.

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

Diğer dönüştürme işlevlerinde olduğu gibi, translateX, translateY ve translateZ ile belirli bir eksen için belirli işlevleri kullanabilirsiniz. X, Y ve Z çevirisini tek bir işlevde tanımlamanıza olanak tanıyan translate3d özelliğini de kullanabilirsiniz.

Sapma

Açıları bağımsız değişken olarak kabul eden skew() işlevlerini kullanarak bir öğeyi eğebilirsiniz. skew() işlevi, translate() işlevine çok benzer bir şekilde çalışır. Yalnızca bir bağımsız değişken tanımlarsanız bu yalnızca X eksenini, her ikisini de tanımlarsanız X ve Y eksenlerini etkiler. Her bir ekseni bağımsız olarak etkilemek için skewX ve skewY seçeneklerini de kullanabilirsiniz.

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

Perspektif

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

David Desandro tarafından hazırlanan bu örnek, çok faydalı bir makalede yer alıyor. Bu örnekte, gerçek 3D deneyimler oluşturmak için perspective-origin-x ve perspective-origin-y özellikleriyle birlikte bu şablonun nasıl kullanılabileceği gösteriliyor.

Animasyon işlevleri, gradyanlar ve filtreler

CSS, öğeleri animasyonlamanıza, bunlara renk geçişleri uygulamanıza ve görünümlerini değiştirmek için grafik filtreleri kullanmanıza yardımcı olan işlevler de sağlar. Bu modülün olabildiğince kısa ve öz tutulması için bunlar bağlantılı modüllerde ele alınmıştır. Hepsi bu modülde gösterilen işlevlere benzer bir yapıya sahiptir.

Öğrendiklerinizi sınayın

Fonksiyonlar hakkındaki bilgilerinizi test edin