Yeni nesil web stili

Modern CSS'deki heyecan verici özelliklerden bazılarını öğrenin.

Adam Argyle

Una Kravets

Şu anda CSS'de çok sayıda heyecan verici gelişme yaşanıyor ve bunların çoğu günümüz tarayıcılarında zaten destekleniyor. Aşağıda izleyebileceğiniz CDS 2019 konuşmamızda, dikkate alınması gerektiğini düşündüğümüz birkaç yeni ve yakında kullanıma sunulacak özellikten bahsediyoruz.

Bu yayında, şu anda kullanabileceğiniz özelliklere odaklanıyoruz. Houdini gibi yakında kullanıma sunulacak özellikler hakkında daha ayrıntılı bilgi edinmek için konuşmayı izlemeyi unutmayın. Ele aldığımız tüm özelliklerin demolarını CSS@CDS sayfamızda da bulabilirsiniz.

İçindekiler

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

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 dokunmaya uygundur.

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,
  • Yatay kaydırmaya izin vermek için overflow-x auto olarak ayarlanır.
  • Kullanıcı <section> öğesinin kaydırma alanının sınırlarına ulaştığında üst öğelerin kaydırılmasını önlemek için overscroll-behavior-x, contain olarak ayarlanır. (Bu, fotoğraf çekmek için kesinlikle gerekli değildir ancak genellikle iyi bir fikirdir.)
  • scroll-snap-type, yatay sabitleme için x ve görüntü alanının her zaman en yakın sabitleme noktasına sabitlenmesini sağlamak için mandatory olarak ayarlanır.
• 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).

Canlı bir demoyu aşağıda bulabilirsiniz:

Dikey kaydırma sabitleme ve matris kaydırma sabitleme ile ilgili denemelere de göz atabilirsiniz.

:focus-within

:focus-within, uzun zamandır var olan bir erişilebilirlik sorununu ele alır: Bir alt öğeye odaklanmanın, kullanıcı arayüzünün yardımcı teknolojileri kullanan kullanıcılar tarafından erişilebilir olması için ü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, menü klavye kullanıcıları için kaybolur.

:focus-within, odak belirli bir öğenin herhangi bir alt öğesindeyken tarayıcıya bir stil uygulamasını söyler. Menü örneğine dönersek, menü öğesinde :focus-within öğesini 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, Sekme tuşuyla odaklanılabilir öğeler arasında 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üzeyi 5

Yeni medya sorguları, uygulamalarımızın kullanıcı deneyimini kullanıcının cihaz tercihlerine göre ayarlamamızı sağlayan güçlü yöntemler sunar. 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:

• prefers-reduced-motion
• prefers-color-scheme
• prefers-contrast
• azaltılmış-şeffaflığı tercih eder
• zorunlu-renkler
• inverted-colors

Bu sorgular erişilebilirlik açısından büyük bir kazançtır. Daha önce, örneğin bir kullanıcının işletim sistemini yüksek kontrast moduna ayarladığını bilmenin bir yolu yoktu. Markanıza sadık kalan bir web uygulaması için yüksek kontrast modu sağlamak istediğinizde, kullanıcılardan uygulamanızın kullanıcı arayüzünden bu modu seçmelerini istemeniz gerekiyordu. Artık prefers-contrast sayesinde yüksek kontrast ayarını işletim sisteminden algılayabilirsiniz.

Bu medya sorgularının heyecan verici bir sonucu, çok çeşitli kullanıcı tercihlerini ve erişilebilirlik ihtiyaçlarını karşılamak için sistem düzeyinde birden fazla kullanıcı tercihi kombinasyonu için tasarım yapabilmemizdir. Kullanıcılar loş ışıklı ortamlarda yüksek kontrastlı koyu modu kullanmak isterse bunu yapabilirsiniz.

Adam için "azaltılmış hareket tercih edilir" seçeneğinin "hareket yok" olarak uygulanmaması önemlidir. Kullanıcı, animasyon istemediğini değil, daha az hareket tercih ettiğini belirtiyor. Azaltılmış hareketin hareket olmadığını iddia eder. Kullanıcı azaltılmış hareketi tercih ettiğinde geçiş animasyonu kullanan bir örneği aşağıda bulabilirsiniz:

Mantıksal özellikler

Mantıksal özellikler, daha fazla geliştirici uluslararasılaştırmayla uğraştıkça görünürlüğü artan bir sorunu çözer. margin ve padding gibi birçok düzen özelliği, yukarıdan aşağıya ve soldan sağa okunan bir dil varsaymaktadır.

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 yazım modlarında düzen bütünlüğünü korumanıza olanak tanır. Bunlar, içeriklerin mekansal düzenlemesine değil, içeriklerin anlamsal sıralamasına göre dinamik olarak güncellenir. Mantıksal özelliklerde her öğenin iki boyutu vardır:

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

Mantıksal özellikler sayesinde, tek tek öğelerdeki düzinelerce düzen özelliğini güncellemek yerine sayfanızı writing-mode ve direction özelliklerini değiştirerek diğer diller için otomatik olarak güncelleyebilirsiniz.

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

position: sticky

position: sticky içeren bir öğe, ekrandan çıkmaya başlayana kadar blok akışında kalır. Bu noktada, sayfanın geri kalanıyla birlikte kaytmayı durdurur ve öğenin top değeri tarafından belirtilen konuma yapışır. Bu öğe için ayrılan alan akışta kalır ve kullanıcı sayfayı tekrar yukarı kaydırdığında öğe bu alana 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. Yani kullanıcı sayfayı aşağı kaydırdığında her yapışkan öğe öncekinin üzerine kayar. Yapışkan öğeler aynı yapışkan konumu paylaşır.

Yapışkan Slayt

Burada, yapışkan öğeler kuzendir. (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ı hareket eder. Bu da, alttaki yapışkan öğelerin üsttekileri yukarı ittiği izlenimi verir. Başka bir deyişle, reklamlar sabit konum için rekabet ediyor gibi görünüyor.

Sticky Desperado

Yapışkan Slayt'ta olduğu gibi, bu demodaki yapışkan öğeler de kuzendir. Ancak bu öğeler, iki sütunlu ızgara düzenine ayarlanmış kapsayıcılara yerleştirilmiştir.

backdrop-filter

backdrop-filter özelliği, öğenin kendisine değil, öğenin arkasındaki alana grafik efektler uygulamanızı sağlar. Bu sayede, daha önce yalnızca karmaşık CSS ve JavaScript kodları kullanılarak elde edilebilen birçok harika efekt tek bir CSS satırı ile elde edilebilir.

Örneğin, bu demoda işletim sistemi tarzında bulanıklık elde etmek için backdrop-filter kullanılmaktadır:

backdrop-filter hakkında harika bir yayınımız var. Daha fazla bilgi için bu yayını inceleyebilirsiniz.

:is()

:is() sözde sınıfı aslında on yıldan uzun bir süredir var olmasına rağmen, hak ettiği kadar kullanılmı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, bu özelliği 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üzeni, bir süredir gap (önceki adıyla grid-gap) kullanılıyordu. gap, alt öğelerin etrafındaki aralıklar yerine kapsayıcı öğenin dahili aralığını belirterek birçok yaygın düzen sorununu çözer. Örneğin, boşluk kullanıldığında alt öğelerdeki kenar boşluklarının, kapsayıcı öğenin kenarlarında istenmeyen boşluklara neden olmasından endişelenmenize gerek yoktur:

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

• Birden fazla boşluk beyanı yerine tek bir boşluk beyanı vardır.
• Projeniz için hangi alt öğelerin boşluğa sahip olması gerektiği konusunda kurallar oluşturmanıza 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 de 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 motoru için düşük düzey API'lerden oluşan bir gruptur. Tarayıcıya özel CSS'yi nasıl yorumlayacağını söylemenize olanak tanır. Diğer bir deyişle, CSS Nesne Modeli'ne erişim sağlar ve JavaScript aracılığıyla CSS'yi extend olanak tanır. Bunun birkaç avantajı vardır:

• Bu sayede özel CSS özellikleri oluşturmak için çok daha fazla güce sahip olursunuz.
• 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ı gerekmediğinden, JavaScript ile şu anda yaptığımız CSS polyfilling'den daha performanslıdır. Houdini kodu, ilk oluşturma döngüsünde ayrıştırılır.

Houdini, çeşitli API'ler için bir çatı adıdır. Bu özellikler ve mevcut durumları hakkında daha fazla bilgi edinmek için Houdini Hazır mı? başlıklı makaleyi inceleyin. Görüşmemizde, şu anda en çok desteklenenler olduğu için Properties and Values API, Paint API ve Animation Worklet'i ele aldık. Bu heyecan verici API'lerin her birine kolayca birer makale ayırabiliriz. Ancak şimdilik, API'lerle neler yapabileceğinize dair bir fikir edinmeye başlamanızı sağlayacak genel bilgiler ve bazı harika demolar için konuşmamıza göz atın.

Taşma

Bahsetmek istediğimiz ancak kapsamlı bir şekilde değinmeye vaktimiz olmayan birkaç konu daha var. Bu nedenle bir tura değindik.⚡ Bu özelliklerden bazılarını henüz duymadıysanız konuşmanın son bölümünü izlemeyi unutmayın.

• size: Yükseklik 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 belirlemenize olanak tanıyan işlevler
• list-style-type mevcut bir mülktür ancak yakında emoji ve SVG'ler dahil olmak üzere daha geniş bir değer yelpazesini destekleyecektir
• display: outer inner: display mülkü yakında iki parametreyi kabul edecek. Bu parametreler, inline-flex gibi bileşik anahtar kelimeler kullanmak yerine dış ve iç düzenlerini açıkça belirtmenize olanak tanıyacak.
• CSS bölgeleri: İçeriğin girip çıkabileceği, belirtilen dikdörtgen olmayan bir alanı doldurmanıza olanak tanır.
• CSS modülleri: JavaScript, CSS modülü isteyebilir ve üzerinde işlem yapılması kolay olan zengin bir nesne döndürebilir.