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 hiç olmadığı kadar 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 özel kod yığınlarına güvenmeniz gerekir.

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 dahili 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 açılır liste, 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 gerektirir. Popover API tüm bunları yönetir 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.

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

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

Pop-up güçlü bir araç olsa da her zaman doğru seçim olmayabilir. Örneğin, kullanıcı geri bildirimi gerektiren sayfa engelleme etkileşimlerinde modal <dialog> daha uygundur.

Geçmişte <dialog>, [popover]'ın 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, Interop 2025'in bir parçasıdır. Bu, çok istenen özellikleri kullanıma sunmak için tarayıcılar arası bir girişimdir. 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 özellikleri ile 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 nasıl kullanacağınızı gösterir:

position-try-fallbacks ile yedekler tanımlayarak tarayıcının, ekran dışına çıkmalarını önlemek için bağlantılarınızı yeniden konumlandırmasını sağlayın. 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 aldığından, <select> öğeleri için web'e özgü stil oluşturma özelliği nihayet Chrome 134'te kullanıma sunuldu. Buna yeni bir appearance özelliği, yeni sözde öğeler ve <selectedcontent> öğesi dahildir.

Özelleştirmeyi etkinleştirmek için appearance: base-select; öğesine ve seçeneklerin açılır listesini hedefleyen yeni ::picker(select) sahte öğesine <select> uygulayın. Bu, aşağıdakiler de dahil olmak üzere stil oluşturma için yeni dahili parçaları kullanıma sunar:

• <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çerik kullanılabilir ve gösterim üzerinde ayrıntılı kontrol sağlanır. Örneğin, seçenekler listesinde bir simge ve altyazı gösterebilir ancak display: none içinde selectedcontent kullanarak bunları kapalı durumda 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ır. 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 yalnızca ana bölümlerde değil, web'in her yerinde bulunur. Buna, uygulama mağazası kullanıcı arayüzü gibi dar düzenlerde yatay olarak kaydırılabilen içerikler dahildir. Ancak web'de kaydırmalı öğeler oluşturmak hâlâ zorlu bir süreç. Durum yönetimi, kaydırma sırasında takılma, etkileşim ve erişilebilirlik gibi birçok faktör göz önünde bulundurulmalıdır. Ancak, düşünürseniz kaydırma çubukları aslında ekstra kullanıcı arayüzü olanakları sunan, gelişmiş kaydırma alanlarıdır.

Kaydırma reklamları 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ırma çubuğunun "hızlı" görünmesi için scroll-snap-type ve scroll-snap-align uygulayın. Bu sayede, kullanıcı kaydırdıkça öğelerin yerine oturması sağlanır.

Önceki ve sonraki ::scroll-button

Chrome 135'te kullanıma sunulan yeni ::scroll-button() sözde öğesi, tarayıcıya durum bilgisi içeren ve erişilebilir "sonraki" ve "önceki" düğmeleri oluşturmasını söyler. Tarayıcı, doğru ARIA rollerini ve sekme sırasını otomatik olarak işler, hatta başlangıca veya sona ulaştığınızda düğmeleri devre dışı bırakır. Tüm bunlar, herhangi bir JavaScript eklenmeden 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 kaydırma çubuğuna göre 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 sahte öğeleri, gezinme işaretçilerini doğrudan kaydırma kapsayıcınızdaki öğelerle ilişkilendirir. Tarayıcı, grubu tablist olarak 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ılmaktadır. Ayrıca, scroll-marker-group özelliğini kullanarak kaydırma işaretlerini ::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 bu özelliğin 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. Kaydırma durumu 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 "sabitlenmiş" konumdayken eşleşir. Bantlarda, bantın ortasında gösterilen öğe.
• scroll-state(stuck): Üst öğesi sabitlendiğ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, öğelerin kaydırılarak görünüme girmesiyle ölçeklenmesi ve solması 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 sabitleme 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 de kullanabilirsiniz. interactivity: inert, kullanıcının CSS kullanarak atalet uygulamasını sağlar. Bu sayede, ekran dışındaki carousel öğ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 fareyle üzerine gelme kartları

Fareyle kullanıcı adının veya bağlantının üzerine geldiğinizde görünen zengin pop-up'lar olan hovercard'lar inanılmaz derecede faydalı olsa da doğru şekilde oluşturulması zordur. Gecikmeleri, etkinlik işlemeyi ve çoklu cihaz desteğini doğru şekilde uygulamak 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

Bildirim temelli bilgi kutucuklarının temelinde [interestfor] özelliği yer alır. Bu yeni özellik, popover'ların gücünü sunar ancak bunları kullanıcıların "ilgi alanlarına" göre tetikler. Örneğin, bir işaretçi cihazdaki 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ülmedi.

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. Ayrıca, semantik bileşen bağlamaları ve temel erişilebilirlik ağacı modeli yerel olarak işlenir.

İlgi çekme araçlarını stilize etme

İlgi alanı tetikleyiciler bazı yeni özellikler içerir. Bunlardan biri, interest-target-delay CSS özelliğiyle giriş ve çıkış gecikmelerini kontrol etme olanağıdır. Diğeri ise :has-interest sözde sınıfını kullanarak çağırma öğesini ilgi alanına sahip olup olmamasına göre stilize etme özelliğidir.

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

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

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

İlgi alanı tetikleyiciler için önemli bir bulmaca parçası yeni bir pop-over türüdür: popover="hint". İpucu pop-up'ının diğer pop-up'lardan temel farkı, açıldığında diğer pop-up'ları kapatmamasıdır. Bu, 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 Bildirimseldir

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ı artırabilir 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 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ısı