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, 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()
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 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
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);
}
Ö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ü.
Ç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 öğ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
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
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ı?
calc()
işlevi, font-size: calc(10px + calc(5px * 3));
gibi başka bir calc()
işlevinin içine yerleştirilebilir.
Aşağıdakilerden hangisi CSS şekil işlevleridir?
polygon()
ellipse()
inset()
circle()
rect()
square()