CSS ve web kullanıcı arayüzündeki son yenilikler: I/O 2024 özeti

Una Kravets

Web platformu, CSS ve web kullanıcı arayüzü özelliklerinin ön planda olduğu heyecan verici bir evrimle yeniliklerle dolu. Web kullanıcı arayüzü için altın bir çağda yaşıyoruz. Yeni CSS özellikleri, daha önce hiç görmediğimiz bir hızda tarayıcılarda kullanıma sunuluyor. Bu da güzel ve ilgi çekici web deneyimleri oluşturmak için sınırsız olanaklar sunuyor. Bu blog yayınında, CSS'nin mevcut durumunu derinlemesine inceleyecek ve Google I/O 2024'te canlı olarak tanıtılan, web uygulamalarını oluşturma şeklimizi yeniden tanımlayan en önemli yeni özelliklerden bazılarını ele alacağız.

Yeni etkileşimli deneyimler

Web deneyimi temelde sizinle kullanıcılarınız arasındaki bir çağrı ve yanıttır. Bu nedenle, kaliteli kullanıcı etkileşimlerine yatırım yapmak çok önemlidir. Web sayfalarında gezinme ve sayfalar arasında gezinme konusunda web'de daha önce hiç sahip olmadığımız özellikleri kullanıma sunan bazı büyük iyileştirmeler üzerinde çalışıyoruz.

Kaydırmaya dayalı animasyonlar

Adından da anlaşılacağı gibi, kaydırmaya dayalı animasyonlar API'si, kaydırma gözlemcilerine veya diğer ağır komut dosyalarına güvenmeden kaydırmaya dayalı dinamik animasyonlar oluşturmanıza olanak tanır.

Kaydırmaya dayalı animasyonlar oluşturma

Platformda zamana dayalı animasyonların çalışma şekline benzer şekilde, artık animasyonu başlatmak, duraklatmak ve geri sarmak için kaydırıcının kaydırma ilerleme durumunu kullanabilirsiniz. Bu nedenle, ileri kaydırdığınızda animasyonun ilerlediğini, geri kaydırdığınızda ise animasyonun ters yönde ilerlediğini görürsünüz. Bu sayede, dinamik görsel etki için scrollytelling olarak da bilinen, öğelerin görünüm alanına ve görünüm alanında animasyonlu olduğu kısmi veya tam sayfa görseller oluşturabilirsiniz.

Kaydırmaya dayalı animasyonlar, önemli içeriği vurgulamak, kullanıcılara bir hikayede rehberlik etmek veya web sayfalarınıza dinamik bir dokunuş katmak için kullanılabilir.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Yukarıdaki kod, bir resmin opaklığını ve ölçeğini değiştirerek görüntü alanında görünen basit bir animasyonu tanımlar. Animasyon, kaydırma konumu tarafından yönlendirilir. Bu efekti oluşturmak için önce CSS animasyonunu ayarlayın, ardından animation-timeline değerini belirleyin. Bu durumda, varsayılan değerleriyle view() işlevi, resmi kaydırma alanına (bu örnekte görünüm alanı da) göre izler.

Tarayıcı desteğini ve kullanıcı tercihlerini, özellikle erişilebilirlik ihtiyaçları açısından göz önünde bulundurmak önemlidir. Bu nedenle, tarayıcının kaydırmaya dayalı animasyonları destekleyip desteklemediğini kontrol etmek için @supports kuralını kullanın ve kullanıcıların hareket tercihlerine saygı duymak için kaydırmaya dayalı animasyonunuzu @media (prefers-reduced-motion: no-preference) gibi bir kullanıcı tercihi sorgusuna yerleştirin. Bu kontrolleri yaptıktan sonra stillerinizin çalışacağından ve animasyonun kullanıcı için sorunlu olmadığından emin olabilirsiniz.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Kaydırmaya dayalı animasyonlar, tam sayfa kaydırmalı hikaye anlatımı deneyimleri anlamına gelebileceği gibi, bir web uygulamasında kaydırırken başlık çubuğunun küçülmesi ve gölge göstermesi gibi daha ince animasyonlar da anlamına gelebilir.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Bu demoda, başlık, metin, gezinme çubuğu ve arka plan gibi birkaç farklı animasyon karesi animasyonu kullanılıyor ve ardından her birine ilgili kaydırmaya dayalı animasyon uygulanıyor. Her birinin farklı bir animasyon stili olsa da hepsinde aynı animasyon zaman çizelgesi, en yakın kaydırma çubuğu ve aynı animasyon aralığı (sayfanın üst kısmından 150 piksele kadar) bulunur.

Kaydırmaya dayalı animasyonların performans avantajları

Bu yerleşik API, yazdığınız özel komut dosyası veya ek bir üçüncü taraf bağımlılığının dahil edilmesi gibi, sürdürmeniz gereken kod yükünü azaltır. Ayrıca, çeşitli kaydırma gözlemcilerinin gönderilmesi ihtiyacını ortadan kaldırarak önemli performans avantajları sağlar. Bunun nedeni, kaydırmaya dayalı animasyonların, yeni API'yi doğrudan CSS'de veya JavaScript kancalarını kullanarak dönüştürmeler ve opaklık gibi birleştiricide animasyon oluşturulabilen özelliklere animasyon eklerken ana iş parçacığı dışında çalışmasıdır.

Tokopedia, yakın zamanda kaydırmaya dayalı animasyonlar kullandı. Bu sayede, ürün gezinme çubuğu kaydırdıkça görünür hale geliyor. Bu API'yi kullanmak hem kod yönetimi hem de performans açısından ciddi avantajlar sağladı.

"Geleneksel JS kaydırma etkinliklerini kullanmaya kıyasla kod satırlarımızın% 80'ini azaltmayı başardık ve kaydırma sırasında ortalama CPU kullanımının% 50'den% 2'ye düştüğünü gözlemledik. - Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia"

Kaydırma efektlerinin geleceği

Bu efektlerin web'i daha ilgi çekici bir yer haline getirmeye devam edeceğini biliyoruz ve bir sonraki adımda neler olabileceğini düşünüyoruz. Bu kapsamda, yeni animasyon zaman çizelgelerini kullanmanın yanı sıra animasyonun başlangıcını tetiklemek için kaydırma noktası (kaydırmayla tetiklenen animasyonlar) kullanma özelliği de yer alır.

Gelecekte tarayıcılara daha da fazla kaydırma özelliği eklenecek. Aşağıdaki demoda, gelecekte kullanıma sunulacak bu özelliklerin bir kombinasyonu gösterilmektedir. Seçicilerde başlangıç tarihini ve saatini ayarlamak için CSS scroll-start-target, başlık tarihini güncellemek için ise JavaScript scrollsnapchange etkinliğini kullanır. Bu sayede, verileri yakalanan etkinlikle senkronize etmek kolaylaşır.

Ayrıca, scrollsnapchanging JavaScript etkinliğiyle seçiciyi gerçek zamanlı olarak güncellemek için bu bilgileri kullanabilirsiniz.

Bu özellikler şu anda yalnızca Canary'de bir işaretin arkasında yer alıyor. Ancak bu özellikler, platformda daha önce mümkün olmayan veya oluşturulması çok zor olan işlevleri etkinleştiriyor ve kaydırmaya dayalı etkileşimlerin gelecekteki olanaklarını vurguluyor.

Kaydırmaya dayalı animasyonları kullanmaya başlama hakkında daha fazla bilgi edinmek için ekibimizin yeni yayınladığı video serisine göz atın. Bu seriyi Chrome for Developers YouTube kanalında bulabilirsiniz. Burada, Bramus Van Damme'dan kaydırmaya dayalı animasyonların temellerini öğreneceksiniz. Bu özellik nasıl çalışır, sözlük, efekt oluşturmanın çeşitli yolları ve zengin deneyimler oluşturmak için efektleri birleştirme gibi konuları ele alacağız. Bu video serisini mutlaka izleyin.

Geçişleri görüntüleme

Web sayfalarında içeriklerin animasyonunu sağlayan güçlü bir yeni özelliği ele aldık. Ancak sorunsuz bir kullanıcı deneyimi oluşturmak için sayfa görüntülemeleri arasındaki animasyonları sağlayan, görünüm geçişleri adı verilen güçlü bir yeni özellik de var. Görünüm geçişleri, web'e yeni bir akışkanlık düzeyi getirerek tek bir sayfa içindeki farklı görünümler arasında veya hatta farklı sayfalar arasında sorunsuz geçişler oluşturmanıza olanak tanır.

Airbnb, sorunsuz bir web'de gezinme deneyimi için görünüm geçişlerini kullanıcı arayüzüne entegre etme konusunda denemeler yapan şirketlerden biridir. Buna, listeleme düzenleyici kenar çubuğu, fotoğrafları düzenleme ve olanak ekleme gibi işlemler de dahildir. Tüm bu işlemler, akıcı bir kullanıcı akışı içinde gerçekleştirilir.

Bu tam sayfa efektleri güzel ve sorunsuz olsa da, mikro etkileşimler de oluşturabilirsiniz. Örneğin, bu örnekte liste görünümünüz kullanıcı etkileşimiyle güncelleniyor. Bu efekt, görünüm geçişleriyle kolayca elde edilebilir.

Tek sayfalık uygulamanızda görünüm geçişlerini hızlı bir şekilde etkinleştirmenin yolu, bir etkileşimi document.startViewTransition ile sarmalamak ve geçiş yapan her öğenin view-transition-name özelliğine sahip olmasını sağlamaktır. Bu işlemi, DOM düğümlerini oluştururken satır içi olarak veya JavaScript kullanarak dinamik olarak yapabilirsiniz.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Geçiş sınıflarını görüntüleme

Görünüm geçişi adları, görünüm geçişinize özel animasyonlar uygulamak için kullanılabilir. Ancak bu, geçiş yapan çok sayıda öğe olduğunda zahmetli olabilir. Bu yıl görünüm geçişleriyle ilgili yapılan ilk yeni güncelleme bu sorunu basitleştiriyor ve özel animasyonlara uygulanabilecek görünüm geçişi sınıfları oluşturma özelliğini sunuyor.

Geçiş türlerini görüntüleme

Görünüm geçişleriyle ilgili bir diğer önemli gelişme ise görünüm geçişi türleri için destek sunulmasıdır. Görünüm geçişi türleri, sayfa görünümlerine animasyon eklerken ve sayfa görünümlerinden animasyon kaldırırken farklı bir görsel görünüm geçişi istediğinizde kullanışlıdır.

Örneğin, ana sayfanın bir blog sayfasına animasyonla geçiş yaparken blog sayfasının ana sayfaya animasyonla geri dönmesinden farklı bir animasyon kullanmasını isteyebilirsiniz. Alternatif olarak, sayfaların bu örnekteki gibi soldan sağa ve tam tersi şekilde farklı yöntemlerle değiştirilmesini isteyebilirsiniz. Önceden bu işlem karmaşıktı. Stilleri uygulamak için sınıfları DOM'a ekleyip daha sonra kaldırmanız gerekiyordu. View-transition-types, tarayıcının yeni geçişleri başlatmadan önce eski geçişleri manuel olarak temizlemenizi gerektirmek yerine bu işlemi sizin için yaparak eski geçişleri temizlemesini sağlar.

Artık bir nesneyi kabul eden document.startViewTransition işlevinizde türler ayarlayabilirsiniz. update, DOM'u güncelleyen geri çağırma işlevidir ve types, türleri içeren bir dizidir.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Çok sayfalı görüntüleme geçişleri

Web'i güçlü kılan şey, kapsamının genişliğidir. Birçok uygulama tek bir sayfadan değil, birden fazla sayfa içeren sağlam bir yapıdan oluşur. Bu nedenle, Chromium 126'da çok sayfalı uygulamalar için belgeler arası görünüm geçişi desteğini kullanıma sunduğumuzu duyurmaktan heyecan duyuyoruz.

Bu yeni belgeler arası özellik seti, aynı kaynakta bulunan web deneyimlerini (ör. web.dev'den web.dev/blog'a gitme) içerir. Ancak kaynaklar arası gezinme (ör. web.dev'den blog.web.dev'e veya google.com gibi başka bir alan adına gitme) bu kapsamda değildir.

Aynı doküman görünümü geçişleriyle ilgili temel farklardan biri, geçişinizi document.startViewTransition() ile sarmalamanız gerekmemesidir. Bunun yerine, CSS @view-transition at-rule'u kullanarak görünüm geçişine dahil olan her iki sayfayı da etkinleştirin.

@view-transition {
  navigation: auto;
}

Daha özel bir efekt için, görünüm geçişi nesnesine erişmenizi sağlayan yeni pageswap veya pagereveal etkinlik işleyicilerini kullanarak JavaScript'i bağlayabilirsiniz.

pageswap ile eski anlık görüntüler alınmadan hemen önce giden sayfada son dakika değişiklikleri yapabilir, pagereveal ile de başlatıldıktan sonra oluşturulmaya başlanmadan önce yeni sayfayı özelleştirebilirsiniz.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Gelecekte, görünüm geçişlerini daha da geliştirmeyi planlıyoruz. Örneğin:

• Kapsamlı geçişler: Geçişi bir DOM alt ağacıyla sınırlamanıza olanak tanır. Böylece sayfanın geri kalanı etkileşimli olmaya devam edebilir ve aynı anda çalışan birden fazla görünüm geçişi desteklenir.
• Hareketle tetiklenen görünüm geçişleri: Web'de daha doğal deneyimler için sürükleme veya kaydırma hareketlerini kullanarak dokümanlar arası görünüm geçişini tetikleyin.
• CSS'de gezinme eşleştirme: JavaScript'te pageswap ve pagereveal etkinliklerini kullanmaya alternatif olarak, belgeler arası görünüm geçişinizi doğrudan CSS'nizde özelleştirin. Önceden oluşturma ile en yüksek performanslı şekilde ayarlama da dahil olmak üzere çok sayfalı uygulamalarda görünüm geçişleri hakkında daha fazla bilgi edinmek için Bramus Van Damme'ın aşağıdaki konuşmasına göz atın:

Motor destekli kullanıcı arayüzü bileşenleri: Karmaşık etkileşimleri basitleştirme

Karmaşık web uygulamaları oluşturmak kolay bir iş değildir ancak CSS ve HTML, bu süreci çok daha yönetilebilir hale getirmek için gelişmektedir. Yeni özellikler ve geliştirmeler, kullanıcı arayüzü bileşenlerinin oluşturulmasını kolaylaştırarak harika deneyimler sunmaya odaklanmanızı sağlar. Bu çalışma; CSS Çalışma Grubu, Open UI Community Group ve WHATWG (Web Hypertext Application Technology Working Group) gibi çeşitli önemli standart kuruluşları ve topluluk gruplarının ortak çalışmasıyla gerçekleştirilir.

Geliştiricilerin en büyük sorunlarından biri, görünüşte basit bir istek olan açılır menüleri (select öğesi) stilize etme özelliğidir. İlk bakışta basit gibi görünse de bu, platformun birçok bölümünü etkileyen karmaşık bir sorundur. Düzen ve oluşturma, kaydırma ve etkileşim, kullanıcı aracısı stili ve CSS özellikleri, hatta HTML'de yapılan değişiklikler bu sorunun kapsamındadır.

Açılır liste birçok parçadan oluşur ve dikkate alınması gereken birçok durumu içerir. Örneğin:

• Klavye bağlamaları (etkileşime girmek/etkileşimden çıkmak için)
• Kapatmak için tıklayın
• Etkin pop-up yönetimi (bir pop-up açıldığında diğer pop-up'ları kapatma)
• Sekme odağı yönetimi
• Seçili seçenek değerini görselleştirme
• Ok etkileşimi stili
• Durum yönetimi (açma/kapama)

Şu anda tüm bu durumu kendiniz yönetmeniz zordur ancak platform da bunu kolaylaştırmaz. Bu sorunu düzeltmek için bu parçaları ayırdık ve açılır listeleri stilize etmenin yanı sıra çok daha fazlasını yapmanızı sağlayacak birkaç temel özellik sunuyoruz.

Popover API

İlk olarak popover adlı bir genel özellik kullanıma sunduk. Bu özelliğin birkaç hafta önce Baseline'de yeni kullanıma sunulan durumuna ulaştığını duyurmaktan heyecan duyuyoruz.

Popover öğeleri, bir düğme gibi bir çağırma öğesiyle veya JavaScript ile açılana kadar display: none ile gizlenir. Temel bir popover oluşturmak için öğede popover özelliğini ayarlayın ve popovertarget kullanarak kimliğini bir düğmeye bağlayın. Şimdi düğme, çağıran işlevdir.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Artık popover özelliği etkinleştirildiğinden tarayıcı, aşağıdakiler de dahil olmak üzere birçok önemli davranışı ek komut dosyası yazmaya gerek kalmadan işler:

• En üst katmana yükseltme: Sayfanın geri kalanının üzerinde ayrı bir katman olduğundan z-index ile uğraşmanız gerekmez.
• Hafifçe kapatma işlevi: Popover alanının dışını tıkladığınızda popover kapatılır ve odak geri döner.
• Varsayılan sekme odağı yönetimi: Popover'ı açtığınızda bir sonraki sekme durağı popover'ın içinde olur.
• Yerleşik klavye bağlamaları: esc tuşuna basıldığında veya iki kez geçiş yapıldığında popover kapatılır ve odak geri döner.
• Varsayılan bileşen bağlamaları. : Tarayıcı, popover'ı tetikleyicisine anlamsal olarak bağlar.

Hatta bu popover API'yi bugün farkında olmadan kullanıyor olabilirsiniz. GitHub, ana sayfasındaki "yeni" menüsünde ve pull isteği inceleme genel bakışında popover uyguladı. Bu özelliği, eski tarayıcıları desteklemek için Oddbird tarafından GitHub'ın kendi geliştiricisi Keith Cirkel'ın önemli desteğiyle oluşturulan popover polyfill kullanarak kademeli olarak geliştirdiler.

"Popover'a geçerek binlerce satır kodu kullanımdan kaldırmayı başardık. Popover, sihirli z-index sayılarıyla mücadele etme ihtiyacını ortadan kaldırarak, bildirime dayalı düğme davranışı ile doğru erişilebilirlik ağacı ilişkisinin kurulmasını sağlayarak ve odaklanma davranışlarını yerleşik olarak sunarak tasarım sistemimizin kalıpları doğru şekilde uygulamasına önemli ölçüde yardımcı oluyor. -Keith Cirkel, Yazılım Mühendisi, GitHub

Giriş ve çıkış efektlerini animasyonla gösterme

Pop-up'larınız olduğunda etkileşim eklemek isteyebilirsiniz. Geçtiğimiz yıl, popover'ları animasyonla desteklemek için dört yeni etkileşim özelliği kullanıma sunuldu. Bunlardan bazıları:

Animasyon karesi zaman çizelgesinde display ve content-visibility öğelerini animasyon haline getirme

transition-behavior özelliği, allow-discrete anahtar kelimesiyle birlikte kullanılarak display gibi ayrı özelliklerin geçişleri etkinleştirilir.

Giriş efektlerini @starting-style öğesinden display: none öğesine ve üst katmana animasyonla taşıyan @starting-style kuralı.

Animasyon sırasında üst katman davranışını kontrol etmek için kullanılan yer paylaşımı özelliği.

Bu özellikler, pop-up veya iletişim kutusu gibi üst katmanda animasyon uyguladığınız tüm öğelerde çalışır. Arka planlı bir iletişim kutusunda tüm bunlar şu şekilde görünür:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Öncelikle @starting-style özelliğini ayarlayın. Böylece tarayıcı, bu öğeyi DOM'da hangi stillere göre canlandıracağını bilir. Bu işlem hem iletişim kutusu hem de arka plan için yapılır. Ardından, hem iletişim kutusu hem de arka plan için açık durumu stilize edin. Bu özellik, iletişim kutusu için open özelliğini, popover için ise ::popover-open sahte öğesini kullanır. Son olarak, ayrı özelliklerin geçiş yapabileceği animasyon modunu etkinleştirmek için opacity, display ve overlay özelliklerini allow-discrete anahtar kelimesini kullanarak canlandırın.

Sabitleme konumu

Pop-up yalnızca hikayenin başlangıcıydı. Çok heyecan verici bir güncelleme olarak, sabit konumlandırma desteğinin Chrome 125'ten itibaren kullanılabileceğini duyurmak istiyoruz.

Sabit konumlandırma kullanıldığında tarayıcı, yalnızca birkaç satır kodla konumlandırılmış bir öğeyi bir veya daha fazla sabit öğeye bağlama mantığını işleyebilir. Aşağıdaki örnekte, her düğmeye basit bir ipucu sabitlenmiş ve alt orta kısma yerleştirilmiştir.

CSS'de, sabitleme öğesinde (bu örnekte düğme) anchor-name özelliğini ve konumlandırılmış öğede (bu örnekte ipucu) position-anchor özelliğini kullanarak sabitlenmiş bir ilişki oluşturun. Ardından, anchor() işlevini kullanarak sabitleme noktasına göre mutlak veya sabit konumlandırma uygulayın. Aşağıdaki kod, ipucunun üst kısmını düğmenin alt kısmına yerleştirir.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Alternatif olarak, position-anchor özelliğini atlayıp doğrudan bağlantı işlevinde bağlantı adını kullanın. Bu, birden fazla öğeye tutturma işlemi yaparken yararlı olabilir.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Son olarak, konumlandırılmış öğeyi sabitleme noktasına ortalamak için justify ve align özellikleri için yeni anchor-center anahtar kelimesini kullanın.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Sabit konumlandırmayı popover ile kullanmak çok kolay olsa da sabit konumlandırmayı kullanmak için popover kesinlikle gerekli değildir. Görsel ilişki oluşturmak için sabitleme konumu herhangi iki (veya daha fazla) öğeyle birlikte kullanılabilir. Hatta Roman Komarov'un bir makalesinden esinlenerek hazırlanan aşağıdaki demoda, fareyle üzerine geldiğinizde veya sekme tuşuyla geçtiğinizde liste öğelerine bağlı bir alt çizgi stili gösteriliyor.

Bu örnekte, left, right ve bottom öğelerinin fiziksel özelliklerini kullanarak sabitleme konumunu ayarlamak için sabitleme işlevi kullanılmaktadır. Bağlantılardan birinin üzerine geldiğinizde hedef bağlantı değişir ve tarayıcı, hedefi konumlandırmayı uygulamak için kaydırır. Aynı zamanda, düzgün bir efekt oluşturmak için rengi de animasyonla değiştirir.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area konumlandırma

Daha önce kullandığınız varsayılan yönlü mutlak konumlandırmaya ek olarak, inset area adlı sabitleme konumlandırma API'sinin bir parçası olarak yeni bir düzen mekanizması da eklendi. İç alan, konumlandırılmış öğeleri ilgili sabit öğelerine göre yerleştirmeyi kolaylaştırır ve sabit öğenin ortada olduğu 9 hücreli bir ızgarada çalışır. Örneğin, inset-area: top konumlandırılan öğeyi en üste, inset-area: bottom ise en alta yerleştirir.

İlk bağlantı demosu, inset-area ile basitleştirilmiş hâliyle şu şekilde görünür:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Bu konumsal değerleri, merkez konumdan başlayıp kullanılabilir sütun veya satırların tamamını kaplayacak şekilde sola, sağa ya da her iki yöne doğru yayılmak için span anahtar kelimeleriyle birleştirebilirsiniz. Mantıksal özellikleri de kullanabilirsiniz. Bu düzen mekanizmasını görselleştirmeyi ve kullanmayı kolaylaştırmak için Chrome 125 ve sonraki sürümlerde bu aracı inceleyin:

Bu öğeler sabitlendiğinden, konumlandırılmış öğe, sabiti hareket ettikçe sayfada dinamik olarak hareket eder. Bu durumda, kendi boyutlarına göre yeniden boyutlandırılan (medya sorgularıyla yapamayacağınız bir şey) container-query-styled kart öğelerimiz var ve kart kullanıcı arayüzü değiştiğinde sabitlenmiş menü yeni düzene göre kayacak.

position-try-options ile dinamik bağlantı konumu

Açılır öğe ve sabitleme konumlandırması kombinasyonuyla menü ve alt menü gezinme özelliği oluşturmak çok daha kolaydır. Ayrıca, sabitlenmiş öğenizle bir görüntü alanının kenarına ulaştığınızda konumlandırma değişikliğini tarayıcının sizin için yapmasına da izin verebilirsiniz. Bunu birkaç şekilde yapabilirsiniz. Birincisi, kendi konumlandırma kurallarınızı oluşturmaktır. Bu durumda, alt menü başlangıçta "vitrin" düğmesinin sağında yer alır. Ancak menünün sağında yeterli alan olmadığında @position-try bloğu oluşturabilir ve bu bloğa --bottom özel tanımlayıcısını verebilirsiniz. Ardından, @position-try bloğunu position-try-options kullanarak sabitleyiciye bağlarsınız.

Tarayıcı artık bu sabitlenmiş durumlar arasında geçiş yapacak, önce doğru konumu deneyecek ve ardından alta geçecektir. Bu işlem, güzel bir geçişle yapılabilir.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Açık konumlandırma mantığının yanı sıra, tarayıcının, blok veya satır içi yönlerde sabitleme noktanızı çevirmek gibi bazı temel etkileşimler için sağladığı birkaç anahtar kelime vardır.

position-try-options: flip-block, flip-inline;

Basit bir çevirme deneyimi için bu çevirme anahtar kelime değerlerinden yararlanın ve position-try tanımı yazmayı tamamen atlayın. Artık yalnızca birkaç satır CSS ile konum duyarlı, tam işlevsel bir sabit konumlu öğe oluşturabilirsiniz.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Sabit konumlandırma hakkında daha fazla bilgi edinin.

Katmanlı kullanıcı arayüzünün geleceği

Her yerde bağlı deneyimler görüyoruz. Bu yayında gösterilen özellikler, yaratıcılığı ortaya çıkarmak ve sabit konumlu öğeler ile katmanlı arayüzler üzerinde daha iyi kontrol sağlamak için mükemmel bir başlangıç noktasıdır. Ancak bu daha başlangıç. Örneğin, popover şu anda yalnızca çağırma öğesi olarak düğmelerle veya JavaScript ile çalışmaktadır. Web platformunda her yerde görülen Wikipedia tarzı önizlemeler gibi içeriklerle etkileşim kurulabilmeli ve bağlantıdan, kullanıcının ilgisini göstermesinden (tıklama gerekmeksizin, örneğin fareyle üzerine gelme veya sekme odağı) popover tetiklenebilmelidir.

Popover API'nin bir sonraki adımı olarak, bu ihtiyaçları karşılamak ve bu deneyimleri uygun erişilebilirlik kancalarıyla yeniden oluşturmayı kolaylaştırmak için interesttarget üzerinde çalışıyoruz. Bu, çözülmesi zor bir erişilebilirlik sorunudur ve ideal davranışlarla ilgili birçok açık soru vardır. Ancak bu işlevselliği platform düzeyinde çözmek ve normalleştirmek, herkes için bu deneyimleri iyileştirecektir.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Ayrıca, iki üçüncü taraf geliştirici olan Keith Cirkel ve Luke Warlow'un çalışmaları sayesinde Canary'de test edilebilecek, geleceğe yönelik başka bir genel çağırma işlevi (invoketarget) de mevcuttur. invoketarget, popovertarget tarafından sağlanan ve <dialog>, <details>, <video>, <input type="file"> gibi tüm etkileşimli öğeler için normalleştirilmiş pop-up'lar sunan bildirimsel geliştirici deneyimini destekler.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Bu API'nin henüz kapsamadığı kullanım alanları olduğunu biliyoruz. Örneğin, sabitlenmiş bir öğeyi sabitine bağlayan oku, özellikle sabitlenmiş öğenin konumu değiştiğinde şekillendirme ve bir öğenin sınırlayıcı kutusuna ulaştığında ayarlanan başka bir konuma sabitlenmek yerine "kaymasına" ve görünüm alanında kalmasına olanak tanıma. Bu güçlü API'yi kullanıma sunmaktan heyecan duyuyoruz ve gelecekte özelliklerini daha da genişletmeyi dört gözle bekliyoruz.

Stil verilebilir seçim

popover ve anchor'ı birlikte kullanan ekip, özelleştirilebilir bir seçim açılır listesini etkinleştirme konusunda ilerleme kaydetti. Neyse ki bu konuda büyük bir ilerleme kaydedildi. Kötü haber ise bu API'nin şu anda hâlâ deneysel aşamada olmasıdır. Ancak ilerleme durumumuzla ilgili bazı canlı demolar ve güncellemeler paylaşmaktan, geri bildirimlerinizi almaktan heyecan duyuyorum. İlk olarak, kullanıcıların yeni ve özelleştirilebilir seçim deneyimine nasıl dahil edileceği konusunda ilerleme kaydedildi. Bunu yapmanın şu anda devam eden yolu, CSS'de appearance: base-select olarak ayarlanan bir görünüm özelliği kullanmaktır. Görünüm ayarlandıktan sonra yeni ve özelleştirilebilir bir seçme deneyimine dahil olursunuz.

select {
  appearance: base-select;
}

appearance: base-select'ya ek olarak birkaç yeni HTML güncellemesi de var. Özelleştirme için seçeneklerinizi datalist içine alma ve seçeneklerinize resim gibi rastgele etkileşimli olmayan içerikler ekleme gibi özellikler bu kapsamdadır. Ayrıca, seçeneklerin içeriğini yansıtacak yeni bir öğeye (<selectedoption>) erişebilirsiniz. Bu öğeyi kendi ihtiyaçlarınıza göre özelleştirebilirsiniz. Bu öğe gerçekten kullanışlı.

Demo görseli

Canlı demo

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Aşağıdaki kod, Gmail kullanıcı arayüzünde <selectedoption> simgesinin nasıl özelleştirileceğini gösterir. Burada, yer kazanmak için seçilen yanıt türünü görsel bir simge temsil eder. Seçenek stilini önizleme stilinden ayırt etmek için selectedoption içinde temel görüntüleme stillerini kullanabilirsiniz. Bu durumda, seçenekte gösterilen metin selectedoption içinde görsel olarak gizlenebilir.

Demo görseli

Canlı demo

selectedoption .text {
  display: none;
}

Bu API için <select> öğesini yeniden kullanmanın en büyük avantajlarından biri geriye dönük uyumluluktur. Bu ülke seçiminde, içeriğin kullanıcı tarafından daha kolay ayrıştırılması için seçeneklerde bayrak resimlerinin yer aldığı özelleştirilmiş bir kullanıcı arayüzü görebilirsiniz. Desteklenmeyen tarayıcılar, özel düğme, datalist, selectedoption ve seçeneklerdeki resimler gibi anlamadıkları satırları yoksayacağından yedek, mevcut varsayılan seçim kullanıcı arayüzüne benzer olacaktır.

Özelleştirilebilir seçimlerle olasılıklar sınırsızdır. Duyarlı tasarım için akıllı bir stil kullanıldığından, Airbnb tarzı bu ülke seçiciyi özellikle beğeniyorum. Yakında kullanıma sunulacak olan stil verilebilir seçim öğesiyle bu ve daha pek çok şeyi yapabilirsiniz. Bu öğe, web platformu için çok gerekli bir eklentidir.

Özel akordeon

Chrome ekibinin odaklandığı tek kullanıcı arayüzü bileşeni, belirli stil sorunlarını (ve beraberinde gelen tüm parçaları) çözmek değildir. İlk ek bileşen güncellemesi, yalnızca bir öğenin aynı anda açılabildiği özel akordiyonlar oluşturma özelliğidir.

Bu özelliği etkinleştirmenin yolu, birden fazla ayrıntı öğesine aynı ad değerini uygulamaktır. Böylece, radyo düğmeleri grubuna benzer şekilde, bağlı bir ayrıntı grubu oluşturulur.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid ve :user-invalid

Diğer bir kullanıcı arayüzü bileşeni iyileştirmesi, :user-valid ve :user-invalid sözde sınıflarıdır. Son zamanlarda tüm tarayıcılarda kararlı olan :user-valid ve :user-invalid sözde sınıfları, :valid ve :invalid sözde sınıflarına benzer şekilde davranır ancak bir form kontrolüyle yalnızca kullanıcı girişiyle önemli ölçüde etkileşimde bulunduktan sonra eşleşir. Bu sayede, bir form değeriyle etkileşimde bulunulup bulunulmadığını veya değerin "kirli" hale gelip gelmediğini belirlemek için çok daha az kod gerekir. Bu durum, kullanıcı geri bildirimi sağlamak için çok faydalı olabilir ve geçmişte bu işlemi yapmak için gerekli olan birçok komut dosyasını azaltır.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

user-* form doğrulama sözde öğelerini kullanma hakkında daha fazla bilgi edinin.

field-sizing: content

Kısa süre önce kullanıma sunulan bir diğer kullanışlı bileşen güncellemesi de field-sizing: content. Bu güncelleme, girişler ve metin alanları gibi form kontrollerine uygulanabilir. Bu, girişin boyutunun içeriğine bağlı olarak büyümesini (veya küçülmesini) sağlar. field-sizing: content, metin alanları için özellikle kullanışlı olabilir. Artık, isteminizin önceki bölümlerinde yazdıklarınızı görmek için çok küçük bir giriş kutusunda yukarı kaydırmanız gerekmez.

textarea, select, input {
  field-sizing: content;
}

Alan boyutlandırma hakkında daha fazla bilgi edinin.

<select> <hr>

Seçme listelerinde <hr> veya yatay çizgi öğesini etkinleştirme özelliği de küçük ama kullanışlı bir bileşen özelliğidir. Bu, çok fazla anlamsal kullanıma sahip olmasa da özellikle bir yer tutucu değeri gibi, optgroup ile gruplandırmak istemeyebileceğiniz içerikleri seçme listesinde güzel bir şekilde ayırmanıza yardımcı olur.

Ekran görüntüsü seçin

Canlı Demoyu seçin.

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

select ifadesinde hr kullanma hakkında daha fazla bilgi edinin.

Yaşam kalitesini artıran iyileştirmeler

Sürekli olarak yineleme yapıyoruz. Bu sadece etkileşimler ve bileşenler için geçerli değildir. Geçtiğimiz yıl içinde kullanıma sunulan, hayat kalitesini artıran birçok başka güncelleme de var.

İleriye bakma ile iç içe yerleştirme

Yerel CSS iç içe yerleştirme özelliği geçen yıl tüm tarayıcılarda kullanıma sunuldu ve o zamandan beri ileriye bakma özelliğini destekleyecek şekilde geliştirildi. Bu nedenle, öğe adlarından önce & kullanılması artık zorunlu değil. Bu sayede iç içe yerleştirme işlemi çok daha ergonomik ve geçmişte alıştığım şekilde yapılıyor.

CSS iç içe yerleştirme ile ilgili en sevdiğim şeylerden biri, bileşenleri görsel olarak engellemenize ve bu bileşenlere kapsayıcı sorguları ve medya sorguları gibi durumlar ve değiştiriciler eklemenize olanak tanımasıdır. Daha önce, bu sorguların hepsini dosyanın en altında gruplandırıyordum. Artık bunları, kodunuzun geri kalanının hemen yanında anlamlı bir şekilde yazabilirsiniz.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Blok düzeni için align-content

Bir diğer güzel değişiklik ise blok düzeninde align-content gibi ortalama mekanizmalarını kullanabilme özelliğidir. Bu sayede, artık flex veya ızgara düzeni uygulamanıza gerek kalmadan ve bu düzen algoritmalarından istemeyebileceğiniz kenar boşluğu daralmasını önleme gibi yan etkiler olmadan bir div içinde dikey olarak ortalama gibi işlemler yapabilirsiniz.

Ekran görüntüsü

Canlı Demo

div {
  align-content: center;
}

Metin kaydırma: dengeli ve güzel

Düzen demişken, text-wrap: balance ve pretty karakterlerinin eklenmesiyle metin düzeninde önemli bir iyileştirme yapıldı. text-wrap: balance daha düzgün bir metin bloğu için kullanılırken text-wrap: pretty, metindeki son satırda tek başına kalan kelimeleri azaltmaya odaklanır.

h1 {
  text-wrap: balance;
}

text-wrap: balance hakkında daha fazla bilgi edinin.

Uluslararası tipografi güncellemeleri

CJK metin özellikleriyle ilgili tipografik düzen güncellemeleri, geçen yıl birçok güzel güncelleme aldı. Örneğin, satırı doğal ifade sınırında saran word-break: auto-phrase özelliği.

Ayrıca, text-spacing-trim (noktalama işaretleri arasındaki karakter aralığını ayarlayarak Çince, Japonca ve Korece tipografinin okunabilirliğini artırır ve görsel açıdan daha hoş sonuçlar elde edilmesini sağlar).

Göreceli renk söz dizimi

Renk temaları dünyasında, göreceli renk söz dizimiyle ilgili büyük bir güncelleme gördük.

Bu örnekte, renkler Oklch tabanlı temalandırma kullanır. Ton değeri, kaydırma çubuğuna göre ayarlandığından temanın tamamı değişir. Bu, göreceli renk söz dizimiyle elde edilebilir. Arka planda, tona göre birincil renk kullanılır ve değerini ayarlamak için parlaklık, kroma ve ton kanalları düzenlenir. --i, değerlerin derecelendirilmesi için listedeki kardeş dizinidir. Temalar oluşturmak üzere adımlamayı özel özellikler ve göreceli renk söz dizimiyle nasıl birleştirebileceğinizi gösterir.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() işlevi

light-dark() işleviyle birlikte temalandırma çok daha dinamik ve basitleştirilmiş hale geldi.

light-dark() işlevi, tema stillerini daha kısa bir şekilde yazabilmeniz için renk teması seçeneklerini basitleştiren ergonomik bir iyileştirmedir. Bu işlev, Adam Argyle'ın hazırladığı görsel şemada çok güzel bir şekilde gösterilmektedir. Daha önce tema seçeneklerini ayarlamak için iki farklı kod bloğu (varsayılan temanız ve kullanıcı tercihi sorgusu) kullanmanız gerekiyordu. Artık light-dark() işlevini kullanarak hem açık hem de koyu temalar için bu stil seçeneklerini aynı CSS satırında yazabilirsiniz.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Kullanıcı açık tema seçtiyse düğmenin açık mavi bir arka planı olur. Kullanıcı koyu bir tema seçtiyse düğmenin arka planı koyu mavi olur.

:has() seçici

Ayrıca, geçen yılın en etkili birlikte çalışabilirlik özelliklerinden biri olan ve geçen yılın Aralık ayında tarayıcılarda kullanıma sunulan :has() seçicisinden bahsetmeden modern kullanıcı arayüzü hakkında konuşmak eksik kalır. Bu API, mantıksal stiller yazma konusunda oyunun kurallarını değiştiriyor.

:has() seçicisi, bir alt öğenin belirli alt öğeleri olup olmadığını veya bu alt öğelerin belirli bir durumda olup olmadığını kontrol etmenizi sağlar ve temelde bir üst öğe seçicisi olarak da işlev görebilir.

:has(), PolicyBazaar gibi birçok şirket için özellikle yararlı olduğunu kanıtlamıştır. Bu şirketler, blokları iç içeriklerine göre şekillendirmek için :has() kullanır. Örneğin, karşılaştırma bölümünde blokta karşılaştırılacak bir plan varsa veya blok boşsa stil ayarlanır.

":has() seçiciyle, kullanıcının seçiminin JavaScript tabanlı doğrulanmasını ortadan kaldırıp yerine CSS çözümü getirdik. Bu çözüm, daha önce olduğu gibi sorunsuz bir şekilde çalışıyor.–Aman Soni, Teknoloji Yöneticisi, PolicyBazaar"

Kapsayıcı sorguları

Web'e yeni eklenen ve kullanımı giderek artan bir diğer önemli özellik de kapsayıcı sorgularıdır. Bu özellik, stilleri uygulamak için bir öğenin üst öğesinin doğal boyutunu sorgulama olanağı sağlar. Bu, yalnızca görüntü alanı boyutunu sorgulayan medya sorgularına kıyasla çok daha ayrıntılı bir yöntemdir.

Angular kısa süre önce angular.dev adresinde, başlık bloklarını sayfadaki kullanılabilir alanlarına göre stilize etmek için kapsayıcı sorgularını kullanan yeni ve güzel bir doküman sitesi yayınladı. Bu nedenle, düzen değişip çok sütunlu kenar çubuğu düzeninden tek sütunlu düzene geçse bile başlık blokları kendi kendine ayarlanabilir.

Kapsayıcı sorguları olmadan bu tür bir şeyi yapmak oldukça zordu ve yeniden boyutlandırma gözlemcileri ile öğe gözlemcileri gerektirdiğinden performans açısından zararlıydı. Artık bir öğeyi üst öğesinin boyutuna göre stilize etmek çok kolay.

@property

Son olarak, @property'nin çok yakında Baseline'da kullanıma sunulacağını duyurmaktan heyecan duyuyoruz. Bu, CSS özel özelliklerine (CSS değişkenleri olarak da bilinir) anlamsal anlam kazandırmak için önemli bir özelliktir ve bir dizi yeni etkileşim özelliğini etkinleştirir. @property ayrıca CSS'de bağlamsal anlam, tür denetimi, varsayılanlar ve yedek değerleri de etkinleştirir. Aralık stili sorgular gibi daha da güçlü özelliklerin önünü açıyoruz. Bu özellik daha önce hiç mümkün olmamıştı ve artık CSS diline çok fazla derinlik katıyor.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Sonuç

Tarayıcılarda kullanıma sunulan bu yeni ve güçlü kullanıcı arayüzü özellikleriyle olasılıklar sınırsız. Kaydırmaya dayalı animasyonlar ve görünüm geçişleriyle yeni etkileşimli deneyimler, web'i daha önce hiç görmediğimiz şekilde daha akıcı ve etkileşimli hale getiriyor. Ayrıca, yeni nesil kullanıcı arayüzü bileşenleri sayesinde, yerel deneyimin tamamını kaldırmadan sağlam ve güzel bir şekilde özelleştirilmiş bileşenler oluşturmak hiç olmadığı kadar kolay. Son olarak, mimari, düzen, tipografi ve duyarlı tasarımda yapılan yaşam kalitesini artıran iyileştirmeler yalnızca küçük ama önemli sorunları çözmekle kalmaz, aynı zamanda geliştiricilere çeşitli cihazlarda, form faktörlerinde ve kullanıcı ihtiyaçlarında çalışan karmaşık arayüzler oluşturmak için gereken araçları da sağlar.

Bu yeni özellikler sayesinde, kaydırma ile hikaye anlatımı ve bağlama öğelerini birbirine sabitleme gibi performansı yoğun kullanan özellikler için üçüncü taraf komut dosyalarını kaldırabilir, akıcı sayfa geçişleri oluşturabilir, açılır listelere stil verebilir ve kodunuzun genel yapısını yerel olarak iyileştirebilirsiniz.

Web geliştiricisi olmak için daha iyi bir zaman olmamıştı. CSS3'ün duyurulmasından bu yana bu kadar enerji ve heyecan yaşanmamıştı. Geçmişte yalnızca hayalini kurduğumuz ancak ihtiyaç duyduğumuz özellikler nihayet gerçeğe dönüşüyor ve platformun bir parçası haline geliyor. Bu özellikleri önceliklendirmemizi ve hayata geçirmemizi sağlayan, sizin sesinizdir. Zor ve sıkıcı işleri yerel olarak yapmayı kolaylaştırmak için çalışıyoruz. Böylece markanızı farklı kılan temel özellikler ve tasarım ayrıntıları gibi önemli şeyleri geliştirmeye daha fazla zaman ayırabilirsiniz.

Bu yeni özellikler kullanıma sunuldukça daha fazla bilgi edinmek için developer.chrome.com ve web.dev adreslerini ziyaret edin. Ekibimiz, web teknolojilerindeki en son haberleri bu adreslerde paylaşıyor. Kaydırmaya dayalı animasyonları, görünüm geçişlerini, sabitleme konumlandırmayı veya hatta stil verilebilir seçim özelliğini deneyin ve düşüncelerinizi bizimle paylaşın. Görüşlerinizi almak ve size yardımcı olmak için her zaman hazırız.