Web kullanıcı arayüzündeki yenilikler: I/O 2025 Özeti

Una Kravets

Yayınlanma tarihi: 14 Ağustos 2025

Google I/O etkinlik sezonu sona ererken bu gönderide, bu yılki etkinliklerimizde paylaşılan CSS ve Web kullanıcı arayüzü ile ilgili en önemli noktalar özetlenmektedir.

Geliştiricilerin bir zamanlar yalnızca hayalini kurduğu inanılmaz derecede güçlü özellikler tarayıcılara geldi ve tarayıcılar arası uyumluluğa her zamankinden daha hızlı bir şekilde ulaşıyor. Ancak bu ilerlemeye rağmen, en yaygın kullanıcı arayüzü kalıplarından bazılarının doğru şekilde uygulanması şaşırtıcı derecede zor olmaya devam ediyor. Daha basit olması gereken bileşenleri oluşturmak için genellikle JavaScript çerçevelerine, karmaşık CSS hilelerine ve çok sayıda özel koda güvenmeniz gerekiyor.

Chrome ekibi, diğer tarayıcı satıcıları, CSSWG ve WHATWG gibi standart kuruluşları ve Open UI gibi topluluk gruplarıyla işbirliği yaparak bu temel kullanıcı arayüzü kalıplarının uygulanmasını gerçekten kolaylaştırmaya odaklanıyor.

Özelleştirilebilir seçim menüleri

<select> öğesi formlar için gereklidir ancak iç yapısı geçmişte tarayıcı tarafından korunuyordu. Bu durum, tutarlı ve kapsamlı CSS stilini neredeyse imkansız hale getiriyordu. Daha iyi bir <select> oluşturmak için yapı taşlarının (Popover API ve CSS Anchor Positioning API) anlaşılması gerekir.

Popover API: Artık Baseline'da

Özel bir açılır liste için diğer tüm kullanıcı arayüzü öğelerinin üzerinde görünen, kolayca kapatılabilen ve odağı doğru şekilde yöneten kayan bir seçenek kutusu gerekir. Popover API tüm bunları halleder ve bu yıl itibarıyla Baseline Newly available (Temel Yeni Kullanıma Sunulan) durumuna ulaşmıştır. Bu da her büyük tarayıcıda kararlı olduğu anlamına gelir.

Açılır pencere oluşturmak için iki bölüm gerekir: tetikleyici öğe (ör. <button>) ve açılır pencere öğesinin kendisi. Popover'a id ve [popover] özelliğini verip düğmenin [popovertarget] özelliğinde bu id özelliğine referans vererek bunları bağlayın.

Popover API, öğenin tüm yaşam döngüsünü yöneterek şunları sağlar:

• En üst katman oluşturma: Z-endeksiyle uğraşmanıza gerek kalmaz.
• İsteğe bağlı olarak kapatma özellikleri: Kullanıcı, popover alanının dışını tıkladığında kapanır.
• Otomatik odak yönetimi: Tarayıcı, popover'a girip çıkarken sekme gezinmesini yönetir.
• Erişilebilir bağlamalar: Temel etkileşim modeli yerel olarak işlenir.

<dialog> öğesi güncelleniyor

Yerleşke güçlü bir seçenek olsa da her zaman doğru tercih değildir. Örneğin, kullanıcı geri bildirimi gerektiren sayfa engelleme etkileşimlerinde bir modal <dialog> daha uygundur.

<dialog>, geçmişte [popover]'in bazı kolaylıklarından yoksundu ancak bu durum değişiyor. Yeni closedby="any" özelliği sayesinde, kullanıcı dışarıyı tıkladığında veya Escape tuşuna bastığında kapanan modal iletişim kutuları artık hafif kapatma işlevini destekliyor.

Ayrıca, komut çağırıcılar ([command] ve [commandfor]), bir düğmeyi bir işleme (ör. command="show-modal" ile bir iletişim kutusu açma) bağlamak için bildirimsel ve JavaScript'siz bir yol sağlar.

CSS Anchor Positioning

Bir popover göründüğünde, onu açan öğeye göre konumlandırılması gerekir. Bunu JavaScript ile manuel olarak hesaplamak güvenilir değildir ve performansı olumsuz etkileyebilir.

Chrome 125'ten itibaren CSS Anchor Positioning API'yi kullanabilirsiniz. Bu yeni özellik, bir öğeyi başka bir öğeye bildirime dayalı olarak bağlar ve ekranın kenarına yaklaştığında yeniden konumlandırmayı otomatik olarak gerçekleştirir. Bu özellik, çok istenen özellikleri kullanıma sunmak için tarayıcılar arası bir girişim olan Interop 2025'in bir parçasıdır. Bu nedenle, 2025'in sonuna kadar tüm büyük tarayıcılarda kullanıma sunulmasını bekleyebiliriz.

Öğeleri anchor-name ve position-anchor özellikleriyle açıkça bağlayabilirsiniz ancak spesifikasyonda ve Chrome 133'te yapılan bir güncelleme, <popover> ile onu çağıran <button> arasında örtülü bir bağlantı ilişkisi oluşturur. Bu, kodu büyük ölçüde basitleştirir ve artık popover'ı tek bir CSS satırıyla (ör. position-area: bottom span-left) konumlandırabileceğiniz anlamına gelir.

chrome.dev'deki bağlantı aracı, istediğiniz yerleşimi elde etmek için position-area simgesini nasıl kullanacağınızı gösterir:

position-try-fallbacks ile yedekler tanımlayarak tarayıcının, bağlantılarınızı yeniden konumlandırmasını sağlayabilir ve ekranın dışına çıkmalarını önleyebilirsiniz. Aşağıdaki demoda, yerleşik yeniden konumlandırma mantığı için bu özelliği kullanan bir popover gösterilmektedir:

Gerçekten özelleştirilebilir bir <select>

Bu yapı taşları önceki sürümlerde yer alırken <select> öğeleri için web'e özgü stil oluşturma özelliği nihayet Chrome 134'te kullanıma sunuldu. Bu özellikler arasında yeni bir appearance özelliği, yeni sözde öğeler ve <selectedcontent> öğesi yer alıyor.

Özelleştirmeyi etkinleştirmek için appearance: base-select; öğesini <select> öğesine ve seçeneklerin açılır listesini hedefleyen yeni ::picker(select) sahte öğesine uygulayın. Bu işlem, stil oluşturma için yeni dahili bölümleri kullanıma sunar. Örneğin:

• <selectedcontent>: Düğmede gösterilen seçili seçeneğin içeriğini temsil eder.
• ::picker-icon: Açılır ok simgesi
• <option>:checked ve ::checkmark: Seçilen seçeneği ve onay işareti göstergesini stilize etmek için

Bu sayede, seçeneklerde zengin içeriklere yer verilebilir ve gösterim üzerinde ayrıntılı kontrol sağlanabilir. Örneğin, display: none içinde selectedcontent kullanarak seçenekler listesinde bir simge ve altyazı gösterebilir ancak kapalı durumda bunları gizleyebilirsiniz.

En iyi yanı, bu API'nin kademeli olarak geliştirilebilmesidir. Bu özellikleri desteklemeyen tarayıcılarda kullanıcılar yine de işlevsel bir web'e özgü seçim alırlar. Web'e özgü select öğesinin yerleşik erişilebilirlik, klavye ile gezinme ve form entegrasyonunu korurken özel bir görünüm elde edersiniz.

Bantlar

Bantlar, web'de her yerde bulunur ve yalnızca ana bölümlerde yer almaz. Örneğin, uygulama mağazası kullanıcı arayüzü gibi dar düzenlerde yatay olarak kaydırılabilen içerikler de bantlara dahildir. Ancak web'de bant oluşturmak hâlâ zorlu bir süreçtir. Durum yönetimi, kaydırma sırasında oluşan sarsıntı, etkileşim ve erişilebilirlik gibi birçok faktör göz önünde bulundurulmalıdır. Ancak bantlar, aslında ekstra kullanıcı arayüzü olanakları sunan gelişmiş kaydırma alanlarıdır.

Kaydırma banner'ları kullanmaya başlama

Bir kaydırma bandı oluşturmak için kapsayıcılarından taşan öğelerin listesiyle başlarsınız. İçeriğin kaydırılabilir olmasını sağlarken yatay kaydırma çubuğunu gizlemek için scrollbar-width: none kullanın. Ayrıca, kaydırılabilir alanın "hızlı" olmasını sağlamak için scroll-snap-type ve scroll-snap-align uygulayın. Bu sayede, kullanıcı kaydırdıkça öğelerin yerine tutturulması sağlanır.

::scroll-button ile önceki ve sonraki

Chrome 135'te kullanıma sunulan yeni ::scroll-button() sözde öğesi, tarayıcıya durum bilgisi olan, erişilebilir "sonraki" ve "önceki" düğmeleri oluşturmasını söyler. Tarayıcı, doğru ARIA rollerini, sekme sırasını otomatik olarak işler ve hatta başlangıca veya sona ulaştığınızda düğmeleri devre dışı bırakır. Tüm bunlar ek JavaScript olmadan yapılır.

Kaydırma düğmelerini başlatmak için onlara içerik ve erişilebilir bir etiket verin. Örneğin:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Bu düğmeleri CSS ile şekillendirin ve üst öğe olan bantla ilişkili olarak konumlandırın. Bunu yapmanın önerilen yolu CSS ile sabitleme konumlandırmasıdır.

::scroll-marker ile doğrudan gezinme

Nokta göstergeleri veya küçük resimler için ::scroll-marker ve ::scroll-marker-group sözde öğeleri, gezinme işaretçilerini doğrudan kaydırma kapsayıcınızdaki öğelerle ilişkilendirir. Tarayıcı, grubu tablist gibi değerlendirir ve klavye ile gezinmeyi yönetir.

Kaydırma düğmelerine benzer şekilde, content özelliğiyle kaydırma işaretçilerini etkinleştirin ve erişilebilir bir etiket sağlayın. Aşağıdaki örnekte, kaydırma işaretçisinin etiketini ayarlamak için bir veri özelliği kullanılıyor. Ayrıca, scroll-marker-group özelliğini kullanarak kaydırma işaretçilerini ::scroll-marker-group konumlandırın. Son olarak, yeni :target-current sözde sınıfını kullanarak etkin işaretçiyi stilize edin. Temel bir bant için bunun nasıl görünebileceğine dair bir örneği aşağıda bulabilirsiniz:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Kaydırma durumu sorguları

Kaydırmayla ilgili yeni CSS özellikleri sayesinde daha dinamik ve etkileşimli bantlar oluşturabilirsiniz. scroll-state sorgusu, kaydırıcının durumuna göre uygulanan yeni bir medya sorgusudur. @container ifadesinde scroll-state() kullanılarak erişilebilen üç farklı kaydırma durumu sorgusu türü vardır. Bunları şöyle sıralayabiliriz:

• scroll-state(snapped): Bir öğe "yerleştirilmiş" konumdayken eşleşir. Bantlarda, bantın ortasında yer alan öğe.
• scroll-state(stuck): Üst öğesi sabit hale geldiğinde bir öğeyi (ör. başlık) stilize edin.
• scroll-state(scrollable): Kaydırılacak daha fazla içerik olduğunu göstermek için karartma gibi görsel göstergeler ekleyin.

Tümünü bir araya getirin

Yeni CSS bandı temel öğeleri, kaydırma durumu sorguları ve sabitleme konumlandırmanın birleşimi, özelleştirilmiş ve etkileşimli bantlar oluşturmanızı kolaylaştırır. Animasyonları doğrudan kaydırma konumuna bağlamak için kaydırmaya dayalı animasyonlar ekleyerek bir adım daha ileri gidin. Böylece, öğeler görünüm alanına kaydırıldıkça ölçeklendirme ve solma gibi yüksek performanslı efektler oluşturabilirsiniz. Bu animasyonlar ana ileti dizisinden bağımsız olarak çalışır ve akıcı bir deneyim sağlar.

Bu etkileşimli bant, scroll-state() sorgularını, ::scroll-button, ::scroll-marker, CSS bağlantı konumlandırmasını ve :target-current birleştirir.

Ayrıca, kullanıcıların etkin içeriğe odaklanmasına yardımcı olmak için interactivity adlı yeni bir özellik kullanabilirsiniz. interactivity: inert, kullanıcının CSS kullanarak atalet uygulamasını sağlar. Bu sayede, ekran dışındaki kaydırma öğeleri odaklanılamaz hale gelir ve erişilebilirlik ağacından kaldırılır.

CSS bantları hakkında daha fazla bilgi edinin.

Etkileşimli bilgi kutucukları

Kullanıcı adının veya bağlantının üzerine geldiğinizde görünen zengin pop-up'lar olan bilgi kutucukları son derece kullanışlıdır ancak doğru şekilde oluşturulması zordur. Gecikmeleri, etkinlik işlemeyi ve çeşitli cihaz desteğini doğru şekilde ayarlamak için özel bir ekibin aylarca çalışması gerekebilir. Ancak bu sorunu tamamen çözecek yeni bir bildirimsel çözüm üzerinde çalışıyoruz.

[interestfor] ile ilgi alanına göre tetiklenen pop-up'lar

Bildirimli fareyle üzerine gelme kartlarının temelindeki sihirli güç, [interestfor] özelliğidir. Bu yeni özellik, popover'ların gücünü getirir ancak bunları kullanıcı "ilgisini" temel alarak tetikler. Örneğin, bir işaretçi cihazda kullanıcı ilgisi, işaretçiyle üzerine gelme, klavyeyle sekme navigasyonu veya dokunmatik ekranlarda uzun basma ya da dokunma olabilir. Mobil etkileşim henüz çözülmemiştir.

Tıklamaya dayalı bir popover'ı ilgi alanına dayalı bir popover'a dönüştürmek için bir <button> veya <a> olabilecek bir çağırma öğesi oluşturun ve bu öğeye [popover] öğesinin id değerine eşit bir [interestfor] özelliği verin. HTML'de şu şekilde görünür:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Tarayıcı, aşağıdakiler dahil olmak üzere tüm karmaşık etkinlik mantığını işler:

• Giriş ve çıkış etkinlikleri: İnce işaretçi cihazlarda fareyle üzerine gelme, klavyeyle sekme gezinmesi, kaba işaretçi cihazlarda uzun basma veya dokunma.
• Etkinlik gecikmeleri: Giriş ve çıkış gecikmelerini tek bir CSS özelliğiyle kontrol edin.

Bu özellik, popover'ın DOM ağacının geri kalanının üzerinde yeni bir katmanda oluşturulduğu üst katman desteği gibi diğer popover özelliklerini destekler. Semantik bileşen bağlamaları ve temel erişilebilirlik ağacı modeli yerel olarak işlenir.

İlgi alanı çağırıcılarını stilize etme

İlgi alanı çağırma işlemleri bazı yeni özellikler içerir. Bunlardan biri, interest-target-delay CSS özelliği kullanılarak giriş ve çıkış gecikmelerini kontrol etme olanağıdır. Diğeri ise :has-interest sözde sınıfı kullanılarak çağırma öğesinin ilgi alanı olup olmadığına göre stil verme olanağıdır.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" ve çok işlevli kullanıcı arayüzü

İlgi çekici öğeler için önemli bir yenilik olan popover="hint" ipucu pop-over'ı kullanıma sunuldu. İpucu pop-over'ı, açıldığında diğer pop-over'ları kapatmamasıyla diğer pop-over'lardan ayrılıyor. Bu özellik, halihazırda açık olan bir menüyü veya sohbet penceresini kapatmadan görünmesi gereken ipuçları ya da önizleme kartları için idealdir.

Bu sayede, güçlü ve çok işlevli kullanıcı arayüzleri oluşturabilirsiniz. Tek bir düğme artık birincil tıklama işlemi (ör. bildirim panelini açma) için popovertarget kullanılarak otomatik açılır pencereye sahip olabilir ve fareyle üzerine gelindiğinde faydalı bir ipucu göstermek için ilgi alanına dayalı ipucu açılır penceresi gösterebilir.

Gelecek Bildirime Dayalı

Burada ele alınan özellikler, daha güçlü ve bildirimsel bir web platformuna doğru temel bir değişimi temsil etmektedir. Tarayıcının durum yönetimi ve erişilebilirlik ile ilgili karmaşık ve tekrarlayan işleri yapmasına izin vererek JavaScript'in büyük bir kısmını kaldırabilir, performansı iyileştirebilir ve en iyi yaptığımız işe, yani yenilikçi ve ilgi çekici kullanıcı deneyimleri oluşturmaya odaklanabiliriz. Web kullanıcı arayüzü için gerçekten altın bir çağdayız ve bu çağ henüz başlıyor. Daha güçlü ve daha kolay bir web oluşturma çalışmalarımızı buradan takip edebilirsiniz.

Diğer kaynaklar:

• Popover API
• Sabitleme Konumlandırması
• Sabitleme aracı
• Komut Çağırıcılar
• Özelleştirilebilir Seçme Menüleri (RFC)
• CSS Carousels
• CSS Atlı Karınca Galeri
• CSS Atlı Karınca yapılandırıcı
• CSS kaydırma durumu sorguları
• İlgi Alanı Tetikleyicileri Açıklayıcı