Yeni nesil web stili

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

Adam Argyle

Una Kravets

Şu anda CSS'de tonlarca heyecan verici olay var. ve bunların birçoğu günümüz tarayıcılarında zaten desteklenmektedir! CDS 2019'daki konuşmamızı aşağıdan izleyebilirsiniz: dikkat edilmesi gerektiğini düşündüğümüz bazı yeni ve yakında kullanıma sunulacak özellikleri içeriyor.

Bu gönderi, şu anda kullanabileceğiniz özelliklere, konuşmayı izlemeyi unutmayın. Houdini gibi yeni özellikler hakkında daha fazla konuşmak istiyorum. Ayrıca, CSS@CDS sayfası.

İçindekiler

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

Kaydırma Tutturma

Kaydırma Tutturma, kullanıcı içeriğinizi dikey, yatay veya her iki yönde kaydırırken tutturma noktaları tanımlamanıza olanak tanır. Yerleşik kaydırma hareketsizliği ve yavaşlaması sağlar ve dokunmayla etkinleşir.

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

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

Aşağıda canlı bir demo göreceksiniz:

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

Not: Kaydırma tutturma dikey tutturmayı desteklese de, bazı durumlarda kontrolün kullanıcıdan alındığını hissedebileceğinden, bu özelliği sayfa düzeyinde kullanırken dikkatli olun. Genellikle en iyi yöntem, sayfanın kendisi yerine sayfanızdaki bir bileşene tutturmayı uygulamaktır.

:focus-within

:focus-within, uzun süredir var olan bir erişilebilirlik sorununu ele alır: Kullanıcı arayüzünün yardımcı teknolojilerin kullanıcıları için erişilebilir olmasını sağlamak amacıyla 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 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ı söyler. Menü örneğine dönersek, menü öğesinde :focus-within özelliğini ayarlayarak, bir menü öğesine odaklanıldığında bu öğenin görünür kalmasını sağlayabilirsiniz:

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

Aşağıdaki demoda odaklanılabilir öğelere geçiş yapmayı deneyin. Menü öğelerine odaklandığınızda menülerin hâlâ görünür olduğunu görürsünüz:

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ü yöntemler sunuyor. Temel olarak tarayıcı, prefers-* medya sorguları grubunu kullanarak CSS'mizde yanıt verebileceğimiz sistem düzeyindeki tercihler için bir proxy işlevi görür:

Geliştiricilerin en çok ilgisini çekeceğini düşündüğümüz yeni sorguları aşağıda bulabilirsiniz:

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

Bu sorgular, erişilebilirlik açısından büyük bir kazanımdır. Örneğin, bir kullanıcının işletim sistemini yüksek kontrast moduna ayarladığını bilmemiz mümkün değildi. Markanıza sadık kalan bir web uygulaması için yüksek kontrastlı bir mod sunmak istediğinizde, kullanıcılardan uygulamanızın kullanıcı arayüzünden bu modu seçmelerini istemeniz gerekiyordu. Artık prefers-contrast kullanarak işletim sisteminden yüksek kontrast ayarını algılayabilirsiniz.

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

Adam daha az hareket ediyor: "hareket yok" şeklinde uygulanmaz. Kullanıcı, animasyon istemediğini değil, daha az hareketi tercih ettiğini söylüyor. Azaltılmış hareketin hareket olmadığını iddia eder. Aşağıda, kullanıcı azaltılmış hareketi tercih ettiğinde çapraz geçiş animasyonunun kullanıldığı bir örneği görebilirsiniz:

Not: Chrome Canary'de, Geliştirici Araçları Oluşturma çekmecesinde uygun ayarları seçerek prefers-reduced-motion veya prefers-color-scheme kullanan CSS'yi test edebilirsiniz. Oluşturma özelliğine erişmek için Komut menüsünü açın ve Show Rendering komutunu çalıştırın.

Mantıksal özellikler

Daha fazla geliştirici uluslararasılaştırmayı ele alırken görünürlük elde eden bir sorunu mantıksal özellikler çö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.

Geliştiriciler, çeşitli yazma modlarıyla birden fazla dilde sayfa tasarlarken, tüm bu özellikleri birden fazla öğede ayrı ayrı ayarlamak zorunda kaldı. Bu durum kısa sürede bir sürdürülebilirlik kabusu haline geldi.

Mantıksal özellikler, çevirilerde ve yazma modlarında düzen bütünlüğünü sağlamanıza olanak tanır. İçeriklerin uzamsal düzeni yerine anlamsal sıralamasına göre dinamik olarak güncellenirler. Mantıksal özelliklerle her öğenin iki boyutu vardır:

• Blok boyutu, bir satırdaki metin akışına diktir. (İngilizcede block-size ile height aynıdır.)
• Satır içi boyut, bir satırdaki metnin akışına paralellidir. (İngilizcede inline-size ile width 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 için ise right aynıdır.

Mantıksal özelliklerle, bağımsız öğelerde 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 içeren bir öğe, ekran dışına çıkıncaya kadar blok akışında kalır. bu noktada sayfanın geri kalanıyla kaydırmayı durdurur ve öğenin top değeri ile belirtilen konumda kalır. Bu öğe için ayrılan alan akışta kalır Kullanıcı sayfayı tekrar yukarı kaydırdığında öğe bu öğeye geri döner.

Yapışkan konumlandırma, önceden JavaScript gerektiren birçok yararlı efekt oluşturmanıza olanak tanır. Olasılıklardan bazılarını göstermek için birkaç demo 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 yalnızca küçük bir şekilde ayarlar.

Yapışkan Grup

Bu demoda, tüm yapışkan öğeler aynı kapsayıcıyı paylaşır. Diğer bir deyişle, kullanıcı sayfayı aşağı kaydırırken her yapışkan öğe bir öncekinin üzerine kayıyor. Yapışkan öğeler aynı yapışkan konumu paylaşır.

Yapışkan Slayt

Burada, yapışkan öğeler kuzenlerdir. (Yani ebeveynleri kardeştir.) Yapışkan bir öğe, kapsayıcısının alt sınırına ulaştığında kapsayıcıyla birlikte yukarı doğru hareket ederek alttaki yapışkan öğelerin daha üst kısımları yukarı ittiği izlenimi yaratır. Başka bir deyişle, sıkışmış pozisyon için rekabet ediyor gibi görünürler.

Yapışkan Desperado

Sticky Slide'daki gibi, bu demodaki yapışkan öğeler de kuzenlerdir. Ancak bunlar, iki sütunlu ızgara düzenine ayarlanmış kapsayıcılara yerleştirilir.

backdrop-filter

backdrop-filter özelliği, grafik efektlerini bir öğenin kendisi yerine bir öğenin arkasındaki alana uygulamanıza olanak tanır. Bu, daha önce yalnızca tek bir satır CSS ile yapılabilecek karmaşık CSS ve JavaScript hack'leri ile gerçekleştirilebilen birçok etkileyici efekt yaratıyor.

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

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

:is()

:is() sözde sınıf aslında on yıldan eski olsa da hak ettiğini düşündüğümüz kadar fayda sağlamıyor. Bağımsız değişken olarak seçicilerin virgülle ayrılmış bir listesini alır ve bu listedeki tüm seçicileri eşleştirir. Bu esneklik sayesinde son derece kullanışlı olabilir 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üzeni, bir süredir gap (önceki adıyla grid-gap) kullanılıyordu. gap, alt öğelerin çevresindeki boşluk yerine kapsayıcı öğenin dahili aralığını belirterek karşılaşılan pek çok düzen sorununu çözer. Örneğin, boşluk olduğunda alt öğelerdeki kenar boşluklarının, kapsayıcı öğenin kenarlarında istenmeyen boşluk oluşmasına neden olacağı konusunda endişelenmeniz gerekmez:

Daha da iyi bir haberimiz var: gap, flexbox'a geliyor ve ızgaradaki boşluk bırakma avantajlarının tümünü sunuyor:

• Çok sayıda yerine tek bir boşluk beyanı vardır.
• Projeniz için hangi alt öğelerin boşluğa sahip olması gerektiği konusunda kurallar belirlemenize gerek yoktur. Boşluk yerine kapsayıcı öğede bu boşluk bulunur.
• Bu kod, lobotomize baykuş gibi daha eski stratejilerden daha kolay anlaşılır.

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

FireFox şu anda esnek düzenlerde gap özelliğini yalnızca desteklemektedir. Ancak nasıl çalıştığını görmek için bu demoyu inceleyin:

CSS Houdini

Houdini, tarayıcının oluşturma motoruna yönelik bir alt düzey API grubudur. Tarayıcıya, özel CSS'yi nasıl yorumlayacağını bildirmenizi sağlar. Başka bir deyişle, CSS Nesne Modeli'ne erişmenizi sağlayarak CSS'yi JavaScript aracılığıyla genişletmenize olanak tanır. Bunun bazı avantajları vardır:

• Özel CSS özellikleri oluşturma konusunda size daha fazla güç sağlar.
• Oluşturma endişelerini 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ğinden, şu anda JavaScript ile yaptığımız CSS çoklu doldurma işleminden daha etkilidir; Houdini kodu ilk oluşturma döngüsünde ayrıştırılır.

Houdini, çeşitli API'lerin çatı adıdır. Bunlar ve mevcut durumları hakkında daha fazla bilgi edinmek için Houdini henüz hazır mı? başlıklı makaleye göz atın. Konuşmamızda, şu anda en çok desteklenen özellikler oldukları için Properties andvalues API, Paint API ve Animation Worklet'ten bahsettik. Bu heyecan verici API'lerin her birine kolayca ayrıntılı bir yayın ayırabiliriz ancak şimdilik genel bakış için konuşmamıza ve API'lerle neler yapabileceğinize dair fikir vermeye başlayan bazı demolara göz atabilirsiniz.

Taşma

Henüz ufukta tartışmak istediğimiz ancak derinlemesine değinmeye vaktimiz olmadığı için bunları bir hız turuna dahil ettik.⚡ Bu özelliklerden bazılarını henüz duymadıysanız konuşmanın son bölümünü izlemeyi unutmayın.

• size: yüksekliği ve genişliği aynı anda ayarlamanıza olanak tanıyan bir özellik
• aspect-ratio: Kendiliğinden bir olmayan öğeler için en boy oranı ayarlayan bir özellik.
• min(), max() ve clamp(): yalnızca genişlik ve yükseklikte değil, herhangi bir CSS mülkünde de sayısal kısıtlamalar ayarlamanıza olanak tanıyacak işlevler
• list-style-type mevcut bir mülktür, ancak yakında emoji ve SVG'ler de dahil olmak üzere daha geniş bir değer aralığını destekleyecektir
• display: outer inner: display özelliği yakında iki parametreyi kabul edecek. Böylece, inline-flex gibi bileşik anahtar kelimeler kullanmak yerine dış ve iç düzenlerini açıkça belirtebileceksiniz.
• CSS bölgeleri: İçeriğin içine ve dışına akabileceği, belirtilen, dikdörtgen olmayan bir alanı doldurmanıza olanak tanır.
• CSS modülleri: JavaScript, bir CSS modülü isteyebilecek ve üzerinde kolayca işlem yapılabilen zengin bir nesneyi geri alabilecek