Yeni nesil web stili

Modern CSS'nin heyecan verici bazı özelliklerini yakından takip edin.

Adam Argyle

Una Kravets

Şu anda CSS'de çok sayıda heyecan verici gelişme var. Bunların birçoğu günümüzün tarayıcılarında zaten destekleniyor! Aşağıdan izleyebileceğiniz CDS 2019 konuşmamızda, dikkat edilmesi gerektiğini düşündüğümüz yeni ve yakında kullanıma sunulacak özellikler ele alınıyor.

Bu yayın bugün kullanabileceğiniz özelliklere odaklanıyor. Houdini gibi yakında kullanıma sunulacak özellikler hakkında konuşmayı mutlaka izleyin. Bahsettiğimiz tüm özelliklerin demolarını CSS@CDS sayfamızda da bulabilirsiniz.

İçindekiler

• Kaydırma Yakalama
• :focus-within
• Medya Sorguları Düzey 5
• Mantıksal özellikler
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Taşma

Kaydırarak Yapıştırma

Kaydırma Tutturma, kullanıcı içeriğinizi dikey, yatay veya her ikisinde de kaydırırken tutturma noktaları tanımlamanıza olanak tanır. Yerleşik kaydırma eylemsizliği ve yavaşlama özelliğine sahiptir ve dokunma işlevi etkin durumdadır.

Bu örnek kod, bir <section> öğesinde yatay kaydırmayı ayarlar ve tutturma noktaları, alt <picture> öğelerinin sol taraflarına hizalanır:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

İşleyiş şekli:

• Üst <section> öğesinde,
  • overflow-x, yatay kaydırmaya izin vermek için auto olarak ayarlandı.
  • Kullanıcı, <section> öğesinin kaydırma alanının sınırlarına ulaştığında üst öğelerin kaymasını önlemek için overscroll-behavior-x contain olarak ayarlandı. (Bu işlem, tutturma için kesinlikle gerekli değildir, ancak genellikle iyi bir fikirdir.)
  • Görüntü alanının her zaman en yakın tutturma noktasına tutturulmasını sağlamak için scroll-snap-type, yatay tutturma için x ve mandatory olarak ayarlanır.
• Alt <picture> öğelerinde scroll-snap-align başlatılacak şekilde ayarlanır. Bu durumda her resmin sol tarafındaki tutturma noktaları ayarlanır (direction öğesinin ltr değerine ayarlandığı varsayılır).

Bu da canlı bir demo:

Ayrıca, dikey kaydırma tutturma ve matris kaydırma tutturma demolarına da göz atabilirsiniz.

Not: Kaydırma tutturma dikey tutturmayı destekliyor olsa da, bazı durumlarda kontrolün kullanıcıdan alınmış gibi görünebileceğinden, bu özelliği sayfa düzeyinde kullanırken dikkatli olun. Yapışmayı, sayfanın kendisi yerine sayfanızdaki bir bileşene uygulamanız genellikle en iyisidir.

:focus-within

:focus-within uzun süredir var olan bir erişilebilirlik sorununu ele alır: Yardımcı teknolojilerin kullanıcıları tarafından kullanıcı arayüzünün erişilebilir olmasını sağlamak için bir alt öğeye odaklanmanın, üst öğenin sunumunu etkilemesi gereken birçok durum vardır.

Örneğin, birkaç öğe içeren bir açılır menünüz varsa öğelerden herhangi birine odaklanıldığında menü görünür durumda kalmalıdır. Aksi takdirde, klavye kullanıcıları için menü kaybolur.

:focus-within, odak belirtilen bir öğenin herhangi bir alt öğesinde olduğunda tarayıcıya bir stil uygulamasını bildirir. Menü örneğine dönersek, menü öğesinde :focus-within ayarını yaparak menü öğesine odaklanıldığında menünün görünür kalmasını sağlayabilirsiniz:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Aşağıdaki demoda odaklanılabilir öğeler arasında gezinmeyi deneyin. Siz menü öğelerine odaklandıkça menülerin görünür durumda kaldığını fark edeceksiniz:

Medya Sorguları Düzey 5

Yeni medya sorguları, uygulamalarımızın kullanıcı deneyimini kullanıcıların cihaz tercihlerine göre ayarlamamız için güçlü yollar sağlamaktadır. Temel olarak tarayıcı, CSS'mizde prefers-* medya sorgusu grubunu kullanarak yanıtlayabileceğimiz sistem düzeyindeki tercihler için bir proxy işlevi görür:

Geliştiricilerin en çok heyecan duyacağını düşündüğümüz yeni sorgular aşağıda verilmiştir:

• azaltılmış-hareketi-tercih eder
• renk-şemasını tercih eder
• kontrast tercih eder
• azaltılmış-şeffaflığı tercih eder
• zorunlu-renkler
• ters-renkler

Bu sorgular erişilebilirlik açısından büyük bir kazançtır. Örneğin, daha önce bir kullanıcının işletim sistemini yüksek kontrast moduna ayarladığını bilmemiz mümkün değildi. Markanıza uygun bir web uygulaması için yüksek kontrast modu sağlamak isterseniz kullanıcılardan bu modu uygulamanızın kullanıcı arayüzünden seçmelerini istemeniz gerekiyordu. Artık yüksek kontrast ayarını, prefers-contrast kullanarak işletim sisteminden algılayabilirsiniz.

Bu medya sorgularının heyecan verici sonuçlarından biri, çok çeşitli kullanıcı tercihlerini ve erişilebilirlik gereksinimlerini karşılamak üzere sistem düzeyinde kullanıcı tercihlerinin birden çok kombinasyonu için tasarım yapabilmemizdir. Kullanıcılar loş ortamlarda yüksek kontrastlı koyu mod isterse bunu yapabilirsiniz.

Ahmet için "az hareketin tercih edilmesi" ifadesinin "hareket yok" şeklinde uygulanması önemli değildir. Kullanıcı, animasyon istemediğini değil, daha az hareketi tercih ettiğini söylüyor. Azaltılmış hareketin hareket olmadığını iddia ediyor. Kullanıcı, azaltılmış hareketi tercih ettiğinde geçiş animasyonu kullanan bir örneği burada görebilirsiniz:

Not: Chrome Canary'de, DevTools Oluşturma çekmecesinden uygun ayarları seçerek prefers-reduced-motion veya prefers-color-scheme kullanan CSS'yi test edebilirsiniz. Oluşturma'ya erişmek için Komut Menüsü'nü açın ve Show Rendering komutunu çalıştırın.

Mantıksal özellikler

Mantıksal özellikler, uluslararasılaştırmayı başaran geliştirici sayısının artmasıyla birlikte ortaya çıkan bir sorunu çözer. margin ve padding gibi birçok düzen özelliği, yukarıdan aşağıya ve soldan sağa doğru okunan bir dil olduğunu varsayar.

Çeşitli yazma modlarıyla birden fazla dil için sayfa tasarlarken geliştiriciler tüm bu özellikleri birden çok öğede ayrı ayrı düzenlemek zorunda kaldı. Bu durum kısa sürede sürdürülebilirlik kabusu haline geldi.

Mantıksal özellikler, çeviriler ve yazma modlarında düzen bütünlüğünü korumanızı sağlar. Bunlar, içeriklerin mekansal düzenlemesinden çok içeriğin anlamsal sıralamasına göre dinamik bir şekilde güncellenir. Mantıksal özelliklerle, her öğenin iki boyutu vardır:

• Blok boyutu, bir çizgideki metin akışına diktir. (İngilizcede block-size, height ile aynıdır.)
• Satır içi boyut, bir satırdaki metin akışına paraleldir. (İngilizcede inline-size, width ile aynıdır.)

Bu boyut adları, tüm mantıksal düzen özellikleri için geçerlidir. Dolayısıyla, örneğin İngilizcede block-start ile top, inline-end ile right aynıdır.

Mantıksal özellikler sayesinde, bağımsız öğeler üzerinde onlarca düzen özelliğini güncellemek yerine sayfanızın writing-mode ve direction özelliklerini değiştirerek düzeninizi diğer diller için otomatik olarak güncelleyebilirsiniz.

Aşağıdaki demoda, <body> öğesindeki writing-mode özelliğini farklı değerlere ayarlayarak mantıksal özelliklerin nasıl çalıştığını görebilirsiniz:

position: sticky

position: sticky değerine sahip bir öğe, ekran dışına çıkmaya başlayana kadar blok akışında kalır, ardından sayfanın geri kalanıyla birlikte kaydırma durdurulur ve öğenin top değeri tarafından belirtilen konumda kalır. Söz konusu öğe için ayrılan alan, akışta kalır ve kullanıcı tekrar yukarı kaydırdığında öğe geri döner.

Yapışkan konumlandırma, önceden JavaScript gerektiren birçok kullanışlı efekt oluşturmanıza olanak tanır. Olasılıkların bazılarını göstermek için çeşitli demolar oluşturduk. Her demo büyük ölçüde aynı CSS'yi kullanır ve her bir efekti oluşturmak için HTML işaretlemesini çok az ayarlar.

Yapışkan Yığın

Bu demoda tüm yapışkan öğeler aynı kapsayıcıyı paylaşmaktadır. Bu, kullanıcı sayfayı aşağı kaydırırken her yapışkan öğenin bir öncekinin üzerine kaydığı anlamına gelir. Yapışkan öğeler aynı takılıp konumunu paylaşır.

Yapışkan Kaydırma

Burada yapışkan öğeler kuzenler. (Yani ebeveynleri kardeşlerdir.) Yapışkan bir öğe, kapsayıcısının alt sınırına ulaştığında kapsayıcıyla birlikte yukarıya doğru hareket eder. Bu da, alttaki yapışkan öğelerin daha yüksek olanları yukarı ittiği izlenimi oluşturur. Başka bir deyişle, takılı kalan konum için rekabet ediyormuş gibi görünürler.

Sabit Desperado

Sticky Slide gibi, bu demodaki yapışkan öğeler kuzenler. Ancak, iki sütunlu bir ızgara düzenine ayarlanmış kapsayıcılara yerleştirilmiştir.

backdrop-filter

backdrop-filter özelliği, grafik efektlerini öğenin kendisi yerine bir öğenin arkasındaki alana uygulamanıza olanak tanır. Bu yöntem, daha önce yalnızca karmaşık CSS ve JavaScript saldırılarıyla elde edilebilen pek çok güzel efektin tek bir satır CSS ile yapılabildiğini gösterir.

Örneğin, bu demoda işletim sistemi tarzı bulanıklaştırma işlemi için backdrop-filter kullanılmıştır:

backdrop-filter hakkında zaten harika bir yayınımız var. Daha fazla bilgi edinmek için ilgili sayfayı ziyaret edin.

:is()

:is() sanal sınıfı aslında on yıldan eski olmasına rağmen hâlâ hak ettiği kadar kullanmıyor. Bağımsız değişken olarak virgülle ayrılmış bir seçici listesi alır ve o listedeki seçicilerle eşleşir. Bu esneklik onu son derece kullanışlı hale getirir ve gönderdiğiniz CSS miktarını önemli ölçüde azaltabilir.

İşte size kısa bir örnek:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

CSS ızgara düzeninde bir süredir gap (eski adıyla grid-gap) kullanılıyor. gap, alt öğelerin etrafındaki boşluklar yerine kapsayıcı öğenin dahili aralığını belirterek, birçok yaygın düzen sorununu çözer. Örneğin, boşluk varsa alt öğelerdeki kenar boşluklarının, kapsayıcı öğenin kenarlarında istenmeyen beyaz boşluklara neden olması konusunda endişelenmenize gerek yoktur:

Daha da iyi bir haberimiz var: Izgaranın sahip olduğu tüm alan avantajlarına sahip olan gap, flexbox'a geliyor:

• Çok fazla yerine bir boşluk beyanı var.
• Projenizde hangi alt öğelerin boşluk bırakmaya sahip olması gerektiğine dair kurallar oluşturmanıza gerek yoktur. Boşlukların yerine kapsayıcı öğe verilir.
• Bu kod, lobotomlaştırılmış baykuş gibi daha eski stratejilerden daha kolay anlaşılır.

Aşağıdaki videoda, biri ızgara düzeni diğeri esnek düzen olmak üzere iki öğe için tek bir gap özelliği kullanmanın avantajları gösterilmektedir:

Şu anda esnek düzenlerde gap desteği yalnızca FireFox'tadir. Nasıl çalıştığını görmek için bu demoyu izleyin:

CSS Houdini

Houdini, tarayıcıya özel CSS'yi nasıl yorumlayacağını söylemenize olanak tanıyan, tarayıcının oluşturma motoru için kullanılan alt düzey bir API'dir. Diğer bir deyişle, CSS Nesne Modeli'ne erişmenizi sağlayarak CSS'yi JavaScript aracılığıyla genişletmenize olanak tanır. Bunun birkaç avantajı vardır:

• Özel CSS özellikleri oluşturmanız için size çok daha fazla güç sağlar.
• Oluşturma sorunlarını uygulama mantığından ayırmak daha kolaydır.
• Tarayıcının artık komut dosyalarını ayrıştırması ve ikinci bir oluşturma döngüsü yapması gerekmeyeceği için, şu anda JavaScript ile gerçekleştirdiğimiz CSS çoklu doldurma işleminden daha yüksek performans sağlar. Houdini kodu ilk oluşturma döngüsünde ayrıştırılır.

Houdini, çeşitli API'lerin genel adıdır. Bunlar ve mevcut durumları hakkında daha fazla bilgi için Houdini Hazır mı? Konuşmamızda, şu anda en çok desteklenen Özellikler ve Değerler API'si, Paint API ve Animasyon İş Akışı'nı ele aldık. Bu heyecan verici API'ların her birine kolayca bir gönderi ayırabiliriz. Ancak şimdilik, API'lerle neler yapabileceğinize dair fikir vermeye başlayan genel bakış ve bazı etkileyici demolar için konuşmamıza göz atabilirsiniz.

Taşma

Ufukta, konuşmak istediğimiz ancak ayrıntılı bir şekilde ele alamadığımız birkaç konu daha var. Bu nedenle hepsini hızlı bir şekilde gözden geçirdik.⚡ Bu özelliklerden bazılarını henüz duymadıysanız konuşmanın son kısmını mutlaka izleyin!

• size: yüksekliği ve genişliği aynı anda ayarlamanıza olanak tanıyan bir özelliktir
• aspect-ratio: Doğal olarak bir en boy oranına sahip olmayan öğeler için bir en boy oranı belirleyen özelliktir
• min(), max() ve clamp(): yalnızca genişlik ve yükseklik değil, herhangi bir CSS mülkünde sayısal kısıtlamalar ayarlamanızı sağlayan işlevler
• Mevcut bir özellik list-style-type ancak yakında emoji ve SVG'ler dahil daha geniş bir değer aralığını destekleyecek
• display: outer inner: display özelliği yakında iki parametre kabul edecek. Böylece inline-flex gibi bileşik anahtar kelimeler kullanmak yerine dış ve iç düzenlerini açıkça belirtebilirsiniz.
• CSS bölgeleri: İçeriğin içine ve dışına akabileceği belirli, dikdörtgen olmayan bir alanı doldurmanızı sağlar
• CSS modülleri: JavaScript, bir CSS modülü isteyebilecek ve üzerinde işlem yapılması kolay olan zengin bir nesneyi geri alabilecek