İşlevler

CSS Podcast'i - 020: İşlevler 'nı inceleyin.

Bu kursta şimdiye kadar çeşitli CSS işlevleriyle karşılaştınız. grid modülünde, minmax() ve fit-content() ile tanıştınız, farklı açılar belirleniyor. color (Renk) modülünde, renkleri tanımlamanıza yardımcı olan rgb() ve hsl() tanıtıldı.

Diğer birçok programlama dili gibi CSS'de birçok yerleşik işlev vardır ihtiyaç duyduğunuzda erişebilirsiniz.

Her CSS işlevinin belirli bir amacı vardır. Bu derste, üst düzey bir genel bakış ve böylece bunları nerede ve nasıl kullanacağınızı daha iyi anlarsınız.

İşlev nedir?

İşlev, belirli bir görevi tamamlayan, adlandırılmış ve bağımsız bir kod parçasıdır. İşlev, kodunuzun içinde çağırabilmeniz ve işleve veri iletebilmeniz için adlandırılmıştır. Bu, bağımsız değişkenlerin aktarılması olarak bilinir.

Çoğu CSS işlevi yalnızca işlevlerdir. Yani, aynı argümanlara aynı argümanları iletirseniz her zaman aynı sonucu verirler. kodunuzun geri kalanında neler olduğundan bağımsız olarak güncelleyin. Bu işlevler genellikle CSS'nizdeki değerler değiştikçe yeniden hesaplanır. dilindeki diğer öğelere benzer bir şekilde olduğunda ör. currentColor gibi hesaplanan basamaklı değerler.

CSS'de yalnızca sağlanan işlevleri kullanabilirsiniz. kendi mesajınızı yazmak yerine Ancak işlevler bazı bağlamlarda iç içe yerleştirilebilir. bu da onlara daha fazla esneklik sağlar. 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;
}

Fonksiyonel seçiciler hakkında bilgi edindiniz. sözde sınıf modülü gibi ayrıntılı fonksiyonların :is() ve :not(). Bu işlevlere iletilen bağımsız değişkenler CSS seçicilerdir, ve bu öğeler daha sonra değerlendirilir. Öğelerle bir eşleşme varsa CSS kuralının geri kalanı onlara uygulanır.

Özel özellikler ve var()

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

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

Özel mülk, CSS kodunuzdaki değerleri tokenlere ayırmanızı sağlayan bir değişkendir. Özel mülkler de şelaleden etkilenir Bu da bağlamsal olarak manipüle edilebilecek veya yeniden tanımlanabilecek demektir. Özel özelliklerin önünde iki tire (--) bulunması gerekir ve özellik büyük/küçük harfe duyarlıdır.

var() işlevi, gerekli bir bağımsız değişken alır: değer olarak döndürmeye çalıştığınız özel özelliği seçin. Yukarıdaki snippet'te var() işlevi için bağımsız değişken olarak --base-color iletildi. --base-color tanımlanmışsa var(), değeri döndürür.

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

var() işlevine yedek bildirim değeri de aktarabilirsiniz. Bu, --base-color bulunamazsa Bunun yerine, iletilen bildirim kullanılır. Bu örnek için renk, hotpink rengidir.

Bir değer döndüren işlevler

var() işlevi, değer döndüren CSS işlevlerinden yalnızca biridir. İşlevler attr() ve url(), var() ile benzer bir yapı izler: bir veya daha fazla bağımsız değişken iletmeniz ve bunları CSS beyanınızın sağ tarafında kullanmanız gerekir.

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

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

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

url() işlevi bir dize URL'si alır ve resimleri, yazı tiplerini ve içeriği yüklemek için kullanılır. Geçerli bir URL iletilmezse veya URL'nin işaret ettiği kaynak bulunamıyorsa url() işlevi tarafından hiçbir şey döndürülmez.

Renk işlevleri

color [renk] modülünde renk işlevleri hakkında bilgi edindiniz. Bu e-postayı henüz okumadıysanız kesinlikle okumanızı öneririz.

CSS'de kullanılabilen bazı renk işlevleri: 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 dili gibi CSS, çeşitli hesaplama türlerine yardımcı olmak için yararlı matematiksel işlevler sağlar.

calc()

calc() fonksiyonunun parametresi tek bir matematiksel ifade alır. Bu matematiksel ifade, çeşitli türlerin bir karışımı olabilir. Örneğin uzunluk, sayı, açı ve frekans. Birimler de karıştırılabilir.

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

Bu örnekte, calc() işlevi bir öğenin genişliğini boyutlandırmak için kullanılmaktadır. %100'ü %100 oranında olduğu için daha sonra, hesaplanan değerden 2rem kaldırılı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. Ayrıca, bir ifadenin parçası olarak var() işlevinde özel özellikler de aktarabilirsiniz.

min() ve max()

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

clamp()

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

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

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

min(), max() ve clamp() işlevleri hakkında daha fazla bilgiyi şurada bulabilirsiniz: bu makaleyi inceleyin.

Şekiller

İlgili içeriği oluşturmak için kullanılan clip-path offset-path ve shape-outside CSS özellikleri, kutunuzu görsel olarak kırpmak veya içeriğin etrafından akması için bir şekil sağlamak için şekilleri kullanır.

Bu özelliklerin her ikisiyle de kullanılabilecek şekil işlevleri vardır. Örneğin, basit şekiller circle() ellipse() ve inset() boyutlandırmak için yapılandırma bağımsız değişkenlerini alırlar. Daha karmaşık şekiller, ör. polygon() özel şekiller oluşturmak için virgülle ayrılmış X ve Y eksen değeri çiftlerini alabilirsiniz.

.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, bir grafik aracıyla çizilebilecek son derece karmaşık şekillerin ortaya çıkmasına olanak tanır. tercih edebilirsiniz.

Dönüşümler

CSS işlevlerine dair bu genel bakışta son olarak, ve derinliğini değiştiren yöntemleri kullanabilirsiniz. Aşağıdaki işlevlerin tümü transform özelliğiyle kullanılır.

Döndürme

Bir öğeyi döndürmek için rotate() işlevini kullanın. Ayrıca şunu da kullanabilirsiniz: rotateX() rotateY() ve rotateZ() işlevleri kullanabilirsiniz. Derece, dönüş ve radyan birimlerini geçirerek dönüş seviyesini belirleyebilirsiniz.

.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 sayıdır ve X, Y ve Z koordinatlarını tanımlar. Dördüncü bağımsız değişken olan rotasyon, derece, açı ve dönüşleri kabul eder.

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

Ölçek

Bir öğenin ölçeklendirmesini transform ve scale() işlevini kullanın. Fonksiyon, bir veya iki sayıyı pozitif ya da negatif ölçeklendirmeyi belirleyen bir değer olarak kabul eder. Yalnızca tek bir sayı bağımsız değişkeni tanımlarsanız hem X hem de Y ekseni aynı şekilde ölçeklendirilir ve her ikisinin de tanımlanması, X ve Y'nin kısaltmasıdır. Tıpkı rotate() gibi, mevcut scaleX(), scaleY() ve scaleZ() bir öğeyi belirli bir eksende ölçeklendirmek için kullanılır.

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

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

Çeviri

translate() işlevleri, bir öğeyi doküman akışındaki konumunu korurken taşır. 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 eksenindeki bir öğeyi çevirir. ve her iki bağımsız değişken de tanımlanırsa X ve Y eksenindeki bir öğeyi çevirir.

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

Diğer dönüştürme işlevlerinde olduğu gibi belirli bir eksen için belirli işlevleri kullanabilirsiniz, kullanarak translateX translateY ve translateZ. Ayrıca şunu da kullanabilirsiniz: translate3d Bu, X, Y ve Z hareketlerini tek bir fonksiyonda tanımlamanıza olanak tanır.

Egzersiz

Bir öğeyi eğmek için skew() açıları bağımsız değişken olarak kabul eden işlevler. 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 etkiler. Her ikisini de tanımlarsanız X ve Y eksenini etkiler. Ayrıca şunu da kullanabilirsiniz: skewX ve Her bir ekseni bağımsız olarak etkilemek için skewY.

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

Perspektif

Son olarak, perspective mülkü kullanıcı ile Z düzlemi arasındaki mesafeyi değiştirmek için kullanılır. Bu mesafe hissi verir ve tasarımlarınızda bir alan derinliği oluşturmak için kullanılabilir.

David Desandro'nun çok faydalı makalesinden bu örneği, ürünün nasıl kullanılabileceğini gösteriyor. ile birlikte perspective-origin-x ve perspective-origin-y özelliklerini kullanarak tam anlamıyla 3D deneyimler oluşturun.

Animasyon işlevleri, gradyanlar ve filtreler

CSS, öğeleri animasyonunuza yardımcı olan işlevler de sunar. gradyanlar uygulayabilir ve görünümlerini değiştirmek için grafik filtreleri kullanabilir. Bu modülü mümkün olduğunca kısa ve öz tutmak için bağlı modüllerde ele alınmıştır. Bunların tümü, bu modülde gösterilen fonksiyonlara benzer bir yapıya sahiptir.

Öğrendiklerinizi sınayın

Fonksiyonlarla ilgili bilginizi test etme