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
CSS işlevleri hangi karakterlerle tanımlanabilir?
[]
{}
()
::
:
CSS'nin yerleşik matematik işlevleri var mı?
calc()
işlevi, font-size: calc(10px + calc(5px * 3));
gibi başka bir calc()
öğesinin içine yerleştirilebilir
Aşağıdakilerden hangileri CSS şekil işlevleridir?
ellipse()
square()
circle()
rect()
inset()
polygon()