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 hiç olmadığı kadar hızlı bir şekilde tarayıcılar arası uyumluluğa 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 nedenle, tutarlı ve kapsamlı CSS stili oluşturmak neredeyse imkansızdı. Daha iyi bir <select> oluşturmak için yapı taşlarını (Popover API ve CSS Anchor Positioning API) anlamak gerekir.

Popover API: Artık Baseline'da

Özel 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ı yönetir ve bu yıl itibarıyla Baseline Newly available (Temel Yeni Kullanıma Sunulan) durumuna ulaşmıştır. Bu da tüm büyük tarayıcılarda 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: Artık Z-endeksiyle uğraşmanıza gerek yok.
• İ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.

<dialog>, geçmişte [popover]'nin 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 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 JavaScript'siz, bildirimsel 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 ö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 simgesini nasıl kullanacağınızı gösterir:

Bunu bir adım ileriye taşıyarak position-try-fallbacks ile yedekler tanımlayarak tarayıcının bağlantılarınızı yeniden konumlandırmasını sağlayın ve ekranın dışına çıkmalarını önleyin. 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; öğesini ve seçeneklerin açılır listesini hedefleyen yeni ::picker(select) sahte öğesini <select> öğesine 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çerikler 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ı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 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ırma çubukları oluşturmak, durum yönetimi, kaydırma sırasında takılma, etkileşim ve erişilebilirlik gibi birçok faktör nedeniyle hâlâ zorlu bir süreçtir. Ancak, düşünürseniz, carouseller aslında ekstra kullanıcı arayüzü olanakları içeren süslü 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ırma çubuğunun "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 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 yapmak için CSS ile sabitleme konumlandırması kullanmanız önerilir.

::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 gibi ele alır ve klavye ile gezinmeyi yönetir.

Kaydırma düğmelerine benzer şekilde, content özelliğiyle etkinleştirerek kaydırma işaretçilerini başlatın 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 "yerleştirilmiş" konumdayken eşleşir. Bantlarda, bantın ortasında gösterilen öğ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, öğelerin görünüm alanına kaydırıldıkça ö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 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 kartlar

Fareyle kullanıcı adının veya bağlantının üzerine geldiğinizde görünen zengin pop-up'lar olan fareyle üzerine gelme kartları son derece 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

Bildirimli bilgi kutucuklarının temelinde [interestfor] özelliği yer alır. Bu yeni özellik, pop-over'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> olabilen 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 gezinme, 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 öğelerini 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 parça yeni bir pop-over türüdür: popover="hint". İpucu pop-up'ları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 olarak açılan bir popover'a ve fareyle üzerine gelindiğinde faydalı bir ipucu göstermek için ilgi alanına dayalı ipucu popover'ına sahip olabilir.

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ı 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 Carousel'ları)
• 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ı