font-display (CSS)

font-display, web geliştiricilerinin web sayfalarında kullandıkları fontların nasıl yüklendiğini kontrol etmelerine olanak tanıyan bir CSS özelliğidir. Bu özellik sayesinde, sayfa yüklendiğinde kullanılan fontların nasıl davranacağını belirleyebilir ve sayfa yüklemesinin hızını artırabilir. font-display: swap özelliği kullanıldığında, web sayfası yüklendiğinde hemen yedek bir font görüntülenir ve ana font yüklenirken geçici olarak tanımlanan font yerine kullanılır. Böylece, sayfa yüklenme […]
~Tilde Operatörü (CSS)

tilde (~) operatörü, seçici birimleri belirlerken kullanılan bir operatördür, özellikle belirli bir öğeden sonraki tüm elementleri seçmek için kullanılır. Mesela, bir HTML dosyasında, birden fazla div bulunabilir ve bu elementlerin bazıları farklı sınıflara sahip olabilir. Bu elementlerin bir alt kümesini seçmek istiyorsak, ~ operatörünü kullanabiliriz. Yukarıdaki CSS kodu, belgedeki tüm .div2 class’ına sahip elementleri seçer, ancak sadece bu öğelerden önce gelen […]
image-set() (CSS)

Bir veya daha fazla arka plan resmi için farklı boyutlar veya çözünürlükler belirleyerek, mediaquery kullanarak sayfa yükleme hızını ve performansını artırmaya yardımcı olur. image-set() fonksiyonu, her bir resim dosyası, bir çözünürlük faktörüne sahip birim değeriyle ayrılmış bir url() ile tanımlanır. Burada, 1x, 2x ve 3x çözünürlük durumları belirtilmiştir. Tarayıcı, hangi çözünürlük durumuna uygun olduğunu belirleyerek, en uygun boyuttaki resmi seçer. Ayrıca, image-set() fonksiyonu, mediaquery ile birlikte kullanılarak, belirli bir […]
color-scheme (CSS)

color-scheme, web sitelerinin tasarımında kullanılan renk paletlerinin yönetimi için kullanılan bir özelliktir. Bu özellik, bir web sayfasının renk şemasını kolayca değiştirebilmenizi sağlar. color-scheme, web tasarımında birkaç farklı şekilde kullanılabilir; witesindeki tüm text renklerini, arka plan renklerini ve diğer öğelerin renklerini değiştirebilirsiniz. Ayrıca, farklı renk şemalarını kullanarak web sitenize farklı bir hissiyat ve stil verebilirsiniz. CSS […]
scroll-snap (CSS)

scroll-snap, bir sayfanın içeriğinin belirli aralıklarla belirli hızlarda veya adımlarda kaydırılmasına olanak tanır. Özellikle mobil cihazlarda kullanıcı deneyimini artırmak için son derece yararlıdır. Kullanımı oldukça basittir. scroll-snap-type İlk adım, belirli bir kaydırma yöntemi belirlemektir. Bu özellik, scroll-snap özelliğinin belirli bir sayfaya veya elementin nasıl hareket edeceğini belirler. scroll-snap-type, herhangi bir HTML elementine uygulanabilir ve aşağıdaki […]