Web kullanıcı arayüzündeki yenilikler

Bramus
Una Kravets

Yayınlanma tarihi: 1 Temmuz 2026

Google I/O 2026'da, Web kullanıcı arayüzü platformunda kullanıma sunulacak birçok güncellemeyi paylaştık. Kullanıcı tercihlerine saygı göstermekten doğal etkileşimler uygulamaya, gezinmeye rehberlik etmeye, karmaşayı azaltmaya ve çeşitli form faktörlerine uyum sağlamaya kadar modern web, geliştiricilere yüksek kaliteli ve dokunsal kullanıcı deneyimleri oluşturmak için inanılmaz derecede güçlü araçlar sunar.

"Web kullanıcı arayüzündeki yenilikler" oturumunda bahsedilen tüm özelliklerin kapsamlı bir özetini, temel kullanıcı deneyimi ilkelerimize göre yapılandırılmış olarak aşağıda bulabilirsiniz.

1. bölüm: Kullanıcı tercihlerine saygı gösterin

Kişiselleştirme, web'in kullanılabilirliği açısından temel bir unsurdur. Modern web API'leri, kullanıcıların sistem düzeyindeki tercihlerine otomatik olarak uyum sağlamayı kolaylaştırır. Bu kavramlar temel gibi görünse ve yıllardır bunlardan bahsediyor olsak da aslında bu dinamik kişiselleştirmeyi oluşturmayı kolaylaştıran birkaç yeni API ve kalıp var.

1. contrast-color().

contrast-color() CSS işlevi, giriş rengini alır ve WCAG AA minimum kontrast algoritmasına göre giriş rengiyle daha yüksek kontrasta sahip olan black veya white değerini otomatik olarak döndürür. Bu sayede, metin-arka plan rengi çiftlerini manuel olarak korumaya gerek kalmadan okunabilirlik sağlanır.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

contrast-color() hakkında daha fazla bilgi edinin.

2. light-dark().

light-dark() CSS işlevi, tek bir bildirim içinde bir özellik için iki farklı değer (renk veya resim) belirtmenize olanak tanır. Bu değerlerden biri açık mod, diğeri ise koyu mod içindir. Tarayıcı, etkin color-scheme'ya (:root veya bir üst öğede light, dark ya da light dark olarak ayarlanmalıdır) göre doğru kontrast rengini otomatik olarak seçer.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark()'daki yenilik, artık yalnızca renk değerleriyle sınırlı olmamasıdır. Chrome 150'den itibaren iki resim değeri de kabul edilmektedir.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. CSS özel işlevleri (@function)

@function @ kuralı, özel ve yeniden kullanılabilir işlevleri doğrudan yerel CSS içinde tanımlamanıza olanak tanır. Yerel kapsamlı özel özellikleri bağımsız değişken olarak kabul edebilir, hesaplamalar yapabilir ve result tanımlayıcısını kullanarak değerler döndürebilir. Böylece, ön işlemcilere olan ihtiyaç azalır.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Kapsayıcı stil sorguları ve CSS if() işlevi ile birlikte, bu demoda gösterildiği gibi her türden değerle çalışan özel bir --light-dark() işlevi oluşturabilirsiniz:

4. Kapsayıcı stili sorguları

CSS kapsayıcı sorgularının bir parçası olan stil sorguları, geliştiricilerin bir üst kapsayıcının hesaplanmış özel özellik değerlerine göre alt öğelere stil uygulamasına olanak tanır. Bu sayede, açık boyut kapsama gerektirmeden dinamik bileşenler oluşturulabilir.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Bu demoda, renkleri bir --theme özel niteliğe göre ayarlamak için stil sorguları kullanılır.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Stil sorguları hakkında daha fazla bilgi edinin.

5. CSS if() işlevi

if() CSS işlevi, satır içi koşullu mantığı doğrudan CSS özelliği değerlerine getirir. Noktalı virgülle ayrılmış bir dizi koşulu (stil sorguları, medya sorguları veya özellik sorguları) değerlendirir ve ilk doğru koşulla ilişkili farklı değerler ayarlamanıza olanak tanır. İsteğe bağlı bir else geri dönüşü de ayarlayabilirsiniz.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

Önceki demoda, if() işlevi, contrast-color() işlevinin çıkışına dayalı olarak temalı bir kontrast rengi oluşturmak için kullanılıyor.

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

@supports ile kullanılacak CSS at-rule() işlevi, geliştiricilerin bir tarayıcının @starting-style veya @view-transition gibi belirli bir @ kuralını tanıyıp tanımadığını özellik algılama yoluyla belirlemesine olanak tanır.

Örneğin, @function desteğini kontrol etmek için aşağıdaki şekilde kullanın:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

at-rule() yalnızca @ kuralının temel desteğini kontrol etmeye olanak tanır ve belirli tanımlayıcıları, girişleri veya tam @ kuralı bloklarını test etmek için kullanılamaz. Sabitlenmiş sorgular veya stil sorguları gibi öğeleri tespit etmek için geçici çözümler mevcuttur.

@supports at-rule hakkında daha fazla bilgi edinin.

7. <meta name="text-scale">

text-scale HTML meta etiketi, sayfada <html> kök öğesinin ilk yazı tipi boyutunun işletim sistemi ve tarayıcı düzeyindeki metin ölçeği ayarlarına orantılı olarak ölçeklendirilmesini sağlar. Bu, özellikle mobil platformlar için çok önemlidir.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Uygulandığında, html öğesindeki yazı tipi boyutu artık işletim sistemi tarafından belirlenir. Bu nedenle, temel bir font-size ayarlamanıza gerek yoktur. Daha sonra em ve rem gibi göreli birimlerle uzunluklar kullanırsanız hesaplanan piksel değerleri bu temel yazı tipi boyutuna göre belirlenir.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Geliştirici Araçları'ndaki oluşturma sekmesinden tercih edilen yazı tipi boyutunu taklit edebilirsiniz. Değeri değiştirmek için açılır listeyi kullanın.

<meta name=text-scale> hakkında daha fazla bilgi edinin.

2. bölüm: Doğal etkileşimleri uygulama

Web deneyimlerinin yerel uygulamalar kadar dokunsal olmasını sağlamak için sezgisel, fiziksel hareket ve doğal hareketler çok önemlidir. Modern CSS, bunu yapmanızı kolaylaştırır.

8. linear() yumuşak geçiş işlevi

linear() yumuşak geçiş işlevi, belirtilen sınırsız sayıda ilerleme noktası arasında doğrusal olarak enterpolasyon yaparak karmaşık ve özel geçiş eğrileri (ör. sıçramalar, yaylar veya elastik aşmalar) oluşturmanıza olanak tanır.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Aşağıdaki demoda, iletişim kutusu gösterilirken veya gizlenirken doğal bir yumuşatma efekti vermek için linear() kullanılıyor.

linear() hakkında daha fazla bilgi edinin.

9. @starting-style

@starting-style CSS @-kuralı, öğe ilk kez DOM'da oluşturulduğunda veya display özelliği none değerinden görünür bir değere değiştiğinde geçiş yapmak istediğiniz öğedeki özelliklerin başlangıç değerlerini tanımlar. Bu sayede, giriş geçişleri sorunsuz bir şekilde gerçekleşir.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Önceki demoda bu, <dialog> ilk kez görünür hale geldiğinde animasyonla göstermek için kullanılıyordu.

10. transition-behavior: allow-discrete

transition-behavior özelliği (genellikle transition kısaltmasında allow-discrete olarak kullanılır), display veya overlay gibi ayrı özellikleri geçiş yapmanıza olanak tanır. Böylece öğeler, gizlenmeden önce çıkış animasyonları sırasında görünür kalır.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() ve sibling-count()

sibling-index() ve sibling-count() CSS işlevleri, bir öğenin kardeşleri arasındaki 1 tabanlı konumunu ve toplam kardeş sayısını temsil eden tam sayıları döndürür. JavaScript olmadan CSS'de kademeli animasyon gecikmelerini dinamik olarak hesaplamak için idealdir.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Bu demoda, iletişim kutusunun içeriği animation-delay içindeki sibling-index() kullanılarak kademelendirilmiştir.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. İletişim kutusu ışığını kapatma (closedby özelliği)

<dialog> öğesindeki closedby özelliği (any değeriyle), özel JavaScript gerektirmeden, modal iletişim kutularının dışına tıklandığında veya ESC tuşuna basıldığında bunları otomatik olarak kapatarak bildirimli "light dismiss" davranışını kullanmanıza olanak tanır.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Önceki demoda deneyebilirsiniz.

13. corner-shape

Deneysel corner-shape kısa özellik, geliştiricilerin yuvarlak köşeleri (border-radius) değiştirerek bevel, scoop, notch veya squircle gibi özel görsel şekiller oluşturmasına olanak tanır (superellipse() aracılığıyla). Kenarlıklar, gölgeler ve odak ana hatları şekle otomatik olarak uyar.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

3. bölüm: Rehberli gezinme sağlama

Kullanıcı yolculuğuna rehberlik etmek, bağlamın korunmasına ve uygulamanın akışının anlaşılmasına yardımcı olarak kafa karıştırıcı yeniden yüklemeleri ortadan kaldırır. Bu işlemi, son zamanlarda birkaç güncelleme alan görünüm geçişleri de dahil olmak üzere çeşitli şekillerde yapabilirsiniz.

14. Aynı dokümanda görünüm geçişleri

View Transition API'nin bir parçası olan aynı belge geçişleri, anlık görüntüler yakalayarak ve bunları CSS kullanarak geçirerek tek sayfalık uygulamalarda (SPA'lar) DOM durumları arasında animasyon oluşturmak için bir mekanizma sağlar.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Aynı dokümanda görünüm geçişleri hakkında daha fazla bilgi edinin.

15. Dokümanlar arası görünüm geçişleri

View Transition API'yi çok sayfalı uygulamalara (MPA'lar) genişletir. Böylece, sayfalar arasında aynı view-transition-name olan öğeleri eşleştirerek farklı dokümanlar arasında gezinirken sorunsuz ve animasyonlu geçişler oluşturabilirsiniz.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Belgeler arası görünüm geçişleri hakkında daha fazla bilgi edinin.

16. Öğe kapsamlı görünüm geçişleri

Chrome 147'de kullanıma sunulan element-scoped view transitions, sayfanın geri kalanını etkin ve etkileşimli tutarken yalnızca belirli bir DOM alt ağacında (element.startViewTransition() kullanarak) görünüm geçişi çalıştırmanıza olanak tanır.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Öğe kapsamlı bir görünüm geçişi başlatıldığında bu geçiş yalıtılmış olarak çalışır: Yalnızca bu alt ağaçta view-transition-name içeren öğeler taranır ve ::view-transition sahtesi kapsam kökünün kendisine yerleştirilir. view-transition-scope: all otomatik olarak uygulandığı için izolasyon mümkündür.

Bu sayede birden fazla görünüm geçişi aynı anda çalıştırılabilir ve görünüm geçişleri iç içe yerleştirilebilir. Bu listelerdeki öğeler karıştırılırken listelerin kendilerini de değiştirebilirsiniz.

Ayrıca, grup sözde sınıfları otomatik olarak iç içe yerleştirilir ve gerektiğinde kapsayan grup-çocuk sözde sınıfının taşması kırpılır.

Kapsamlı görünüm geçişleri, mikro etkileşimler ve sayfa içi durumlu şekil değiştirme için mükemmeldir. Görsel bir değişiklik olduğunda kullanıcıya daha fazla bağlam bilgisi verir. Bu, uygulamanızın kullanılabilirliğini artırmanın yanı sıra görünümünü ve kullanım deneyimini iyileştirmenin harika bir yoludur. Bu küçük şeyler büyük fark yaratır.

Öğe kapsamlı görünüm geçişleri hakkında daha fazla bilgi edinin.

17. İki aşamalı görünüm geçişleri

Bu deneysel özellik, yeni DOM'un hazır olmasını beklemeden hemen belgeler arası görünüm geçişini başlatır. Belgeler arası görünüm geçişine devam etmeden önce ara iskelet ekranına veya yükleme kullanıcı arayüzüne geçiş yapar.

İki aşamalı görünüm geçişleri hakkında daha fazla bilgi edinin.

18. Kaydırmaya dayalı animasyonlar

Kaydırmaya dayalı animasyonlar, CSS animasyonunun ilerleme durumunu doğrudan kaydırma kapsayıcısının kaydırma konumuna bağlayarak geliştiricilerin verimli paralaks efektleri ve kaydırma göstergeleri gibi kaydırmaya dayalı arayüzler oluşturmasına olanak tanır.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Kaydırma ile tetiklenen animasyonlar

Chrome'da yeni olan özelliklerden biri de kaydırma tetiklemeli animasyonlardır. Kaydırma ile tetiklenen animasyonlar, bir kaydırma sınırı aşıldığında standart zamana dayalı bir CSS animasyonunu tetikler (tetikleyiciyi tanımlamak için timeline-trigger, oynatmak için animation-trigger kullanılır). Bu animasyonlar, IntersectionObserver için bildirim temelli bir alternatif sunar.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Kaydırma ile tetiklenen animasyonların temel mekanizması, etkin veya etkin olmayan zaman çizelgesi tetikleyicileridir.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Ne olduğunu görmek için aşağıdaki demoda görselleştiriciyi açın: İlk aralık, etkinleştirme aralığıdır ve tetikleyicinin ne zaman etkinleşeceğini belirler. İkinci aralık, ne kadar süreyle etkin kalması gerektiğini belirleyen etkin aralıktır.

Kaydırma ile tetiklenen animasyonlar hakkında daha fazla bilgi edinin.

20. scroll-target-group: auto

Artık kullanıcının kaydırma konumuna göre gezinme bağlantılarını otomatik olarak vurgulayan yerel bir CSS kaydırma gözlemcisi oluşturabilirsiniz. Bir gezinme listesinde scroll-target-group: auto ayarlandığında tarayıcı, aria-current="true" değerini otomatik olarak ayarlar ve etkin bağlantıya :target-current sözde sınıfını uygular. :target-current daha sonra etkin bağlantıları daha fazla stilize etmek için kullanılabilir.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

scroll-target-group ile CSS scroll-spy hakkında daha fazla bilgi edinin.

21. scrollIntoView() kapsayıcı seçeneği

scrollIntoView() yöntemine container seçeneği eklenir. target.scrollIntoView({container: 'nearest'}) ayarlandığında kaydırma işlemi en yakın üst öğe kaydırılabilir alanıyla sınırlanır ve tüm öğeler kaydırılmaz. Böylece, sayfa düzeyinde kaydırmanın kafa karıştırıcı etkisi önlenir.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Bu demoda, seçeneği etkinleştirmek ve devre dışı bırakmak için onay kutusunu kullanın:

container: "nearest" hakkında daha fazla bilgi edinin.

22. Beklenebilir programatik kaydırma

Tüm programatik kaydırma yöntemleri (ör. scroll(), scrollTo() ve scrollIntoView()) artık Promise döndürüyor. Bu sayede geliştiriciler, sonraki mantığı (ör. vurgu efekti ekleme) yürütmeden önce await yumuşak kaydırma animasyonlarının tamamlanmasını bekleyebilir.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Aşağıdaki demoda bu özelliği kullanırken görebilirsiniz: Önce öğe kaydırılarak görünür hale getirilir, ardından öğeye vurgu efekti eklenir.

4. bölüm: İçeriği en üst düzeye çıkarma, gürültüyü azaltma

En sinir bozucu web deneyimlerinden biri, içerik görmeyi beklerken rahatsız edici pop-up'lar veya banner'lar tarafından engellenmektir. Görsel dağınıklığı ve uygulama kenarlıklarını ortadan kaldırarak, ikincil işlemleri katmanlı kullanıcı arayüzünün arkasına taşıyarak içerik alanına öncelik verin.

23. Kaydırma durumu sorguları (scrolled)

CSS kapsayıcı sorgularının bir parçası olan scroll-state sorguları, kapsayıcının kaydırma durumuna (container-type: scroll-state ile) göre alt öğeleri stilize etmenize olanak tanır. scrolled sorgusu (örneğin, scroll-state(scrolled: bottom)), en son göreli kaydırmanın yönünü algılayarak "Hidey Bar" gibi kalıpları etkinleştirir.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

"Hidey Bar" deseni hakkında daha fazla bilgi edinin.

24. Sabitlenmiş kapsayıcı sorguları

CSS Anchor Positioning, anchored container queries'i içerir. Bu özellik, sabitlenmiş bir öğede hangi yedek konumun (örneğin, fallback: bottom veya fallback: flip-block) etkin olduğunu kontrol etmenize olanak tanır. Böylece, sabitlenmiş bir öğenin (ör. ipucu okları) stilinde dinamik güncellemeler yapabilirsiniz.

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Aşağıdaki demoda, sabitlenmiş bir kapsayıcı sorgusu kullanılarak, sabitlenmiş bir popover, yedek konumuna ve görüntü alanındaki konumuna göre kendini yeniden konumlandırıyor. İstemci üzerinde açılan ipucu, kaynaktan başlayarak aşağıdan yukarıya doğru animasyonla gösterilir. Çağıranın altında olduğunda yukarıdan aşağıya doğru animasyon oluşturur.

25. CSS border-shape

border-shape özelliği, clip-path ile aynı şekil söz dizimini kullanarak dikdörtgen olmayan kenarlıklar tanımlamanıza olanak tanır. Kırpmanın aksine, border-shape kenarlıkları, ana hatları ve gölgeleri özel şekille görsel olarak hizalı tutar. Ayrıca corner-shape'nın özelliklerinin ötesine geçer. Çünkü border-shape çok daha esnektir.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. CSS shape() işlevi

CSS shape() işlevi, CSS'de karmaşık geometrik yolları satır içi olarak tanımlamanıza olanak tanır. İçeriğin üzerinde kayabileceği organik, dikdörtgen olmayan şekiller oluşturmak için clip-path, border-shape veya shape-outside gibi özelliklerle kullanılabilir.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Eksen başına yapışkan konumlandırma

Taşma spesifikasyonunda yakın zamanda yapılan ve kapsayıcıların yalnızca tek bir eksen için kaydırılabilir alan olmasına olanak tanıyan değişiklik sayesinde, sabit konumlandırma artık iki farklı kaydırma kapsayıcısını (her eksen için bir tane) aynı anda izleyebilir. Bu, tablodaki sabit ilk sütun ve üst satırın tek eksenli kaydırma kapsayıcılarının içinde bile beklendiği gibi çalışmasını sağlar.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Bu özellik, Chrome 148'de deneysel web platformu özellikleri işareti etkinleştirilerek test edilebilir.

Eksen başına position: sticky hakkında daha fazla bilgi

5. bölüm: Form faktörüne uyum sağlama

Web'in en değerli özelliklerinden biri esnekliğidir. Kullanıcılar, her biri kendi etkileşim mekanizmasına sahip çeşitli cihazlardan web'de gezinebilir. Düzenler, sanal klavye açıkken veya dokunma hedefleri etkin durumdayken cihaz ve giriş yöntemine temel olarak uyum sağlamalıdır. Web için tasarım yaparken form faktörünü göz önünde bulundurmak, sitenize veya web uygulamanıza ekstra bir incelik katar ve kullanıcı beklentilerini karşılar.

28. Aşırı kaydırma hareketleri (kaydırılabilir alanlar)

Form faktörüne uyum sağlamanın bir örneği, mobil web'de kaydırma ve harekete dayalı etkileşimleri kullanabilmektir. Bu efektlerden bazılarını elde etmek için kaydırma çubuklarını kullanabilirsiniz ancak bu her zaman sezgisel bir yaklaşım değildir.

Chrome ekibi, OpenUI topluluk grubuyla birlikte, overscrollcontainer ve komut çağırıcıları kullanarak dokunma ve kaydırma işlemlerinde doğal bir şekilde çalışan, yerel, hareket odaklı kaydırılabilir alanlar (ör. kaydırılabilir Gmail listeleri veya kaydırarak kapatılan yan menüler) oluşturmanıza olanak tanıyan, önerilen bir bildirimsel çözüm üzerinde çalışıyor.

Kaydırma sonu hareketleri hakkında daha fazla bilgi edinin.

29. HTML-in-Canvas

HTML-in-Canvas API, geliştiricilerin <canvas> içine gerçek DOM öğeleri yerleştirmesine (layoutsubtree özelliğini kullanarak) olanak tanıyan büyük bir paradigma değişikliğidir. Bu öğeler tamamen aranabilir ve erişilebilir olmaya devam eder. Ayrıca, WebGL/WebGPU gölgelendiricilerin yerel olarak etkileşime girmesine izin verirken otomatik doldurma gibi tarayıcı özelliklerini de destekler.

Lightning round

Web'i ileriye taşıyan diğer bazı güçlü özelliklere hızlıca göz atalım.

30. DOM durumunu koruyarak taşıma (moveBefore())

moveBefore() DOM yöntemi, DOM düğümlerini (ör. videolar, iFrame'ler veya odaklanılmış girişler) durumlarını bozmadan ya da yeniden yüklemeyi tetiklemeden yeniden üst öğe olarak atamanıza olanak tanır.

Bu sayede, düzeninizde yeniden üst öğe atadığınızda videolar oynatılmaya devam eder, iFrame'ler yeniden yüklenmez, CSS animasyonları yeniden başlatılmaz ve giriş alanları odaklarını korur.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

moveBefore() hakkında daha fazla bilgi edinin.

31. CSS text-fit

text-fit, yazı tipi boyutunu, metin satırlarını içeren öğenin (örneğin, text-fit: grow per-line-all) tam genişliğine tam olarak sığacak şekilde dinamik olarak ölçeklendiren deneysel bir CSS özelliğidir.

text-fit hakkında daha fazla bilgi edinin.

32. CSS text-box (text-box-trim ve text-box-edge)

text-box özelliği (ve uzun biçimleri text-box-trim ve text-box-edge), metnin üstündeki ve altındaki dikey boşluğu (satır aralığı) kırparak mükemmel dikey hizalama ve ortalama sağlar.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

text-trim hakkında daha fazla bilgi edinin.

33. CSS boşluk süslemeleri

CSS boşluk süslemeleri, ızgara ve flexbox'a column-rule getirir ve geliştiricilerin satırlar ile sütunlar arasındaki olukları stilize etmesine olanak tanıyan yeni bir row-rule özelliği sunar. Satırlar ve sütunlar arasındaki çizgileri şekillendirmek için artık kenarlıklar veya sözde öğelerle uğraşmanıza gerek yok.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSS Gap Decorations hakkında daha fazla bilgi edinin.

34. Kaydırma çubuğu duyarlı görünüm alanı birimleri (vw, vh vb.)

vw ve vh gibi görüntü alanı birimleri, öğeleri 100vw olarak ayarlarken yanlışlıkla yatay taşmayı önlemek için kaydırma çubuklarının boyutunu (:root üzerinde overflow-y: scroll veya scrollbar-gutter: stable kullanılarak görünürlüğü garanti ediliyorsa) otomatik olarak çıkarır.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Kaydırma çubuğu duyarlı görüntü alanı birimleri hakkında daha fazla bilgi edinin.

35. Sözde öğelere JavaScript erişimi

Web API'leri artık CSS sözde öğelerini (ör. ::before veya ::after) JavaScript'e sunuyor.

CSSPseudoElement örneğini Element.pseudo(type) kullanarak alabilir ve Event.pseudoTarget kullanarak hangi sözde öğenin bir etkinliği tetiklediğini kontrol edebilirsiniz.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSSPseudoElement hakkında daha fazla bilgi edinin.

Sonuç

Web kullanıcı arayüzündeki yenilikler ile ilgili özetimizin sonuna geldik. Bu özelliklerden yararlanarak harika arayüzler oluşturacağınızı umuyoruz. Gelecek yıl görüşmek üzere!