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 bu heyecan verici evrimin merkezinde yer alıyor. Web kullanıcı arayüzü için altın bir çağda yaşıyoruz. Yeni CSS özellikleri, tarayıcılara daha önce hiç görmediğimiz bir hızda sunuluyor ve güzel ve ilgi çekici web deneyimleri oluşturmak için bir olasılıklar dünyası sunuyor. Bu blog yayınında, CSS'nin mevcut durumuna derinlemesine değinilecek ve Google I/O 2024'te canlı olarak gösterilen, web uygulamalarını geliştirme şeklimizi yeniden tanımlayan en yeni ve oyunun kurallarını değiştiren özelliklerden bazıları incelenecek.

Yenilikçi etkileşimli deneyimler

Web deneyimi temel olarak sizinle kullanıcılarınız arasında bir çağrı ve yanıt ilişkisidir. Bu nedenle, kaliteli kullanıcı etkileşimlerine yatırım yapmak çok önemlidir. Web sayfalarında içerisinde ve aralarında gezinme konusunda web'de daha önce hiç sahip olmadığımız özellikleri kullanıma sunacak büyük iyileştirmeler üzerinde çalışıyoruz.

Kaydırmayla çalışan animasyonlar

Tarayıcı desteği

• 115
• 115
• 
• x

Kaynak

Adından da anlaşılacağı gibi, kaydırma odaklı animasyonlar API'si, kaydırma gözlemcilerine veya diğer yoğun komut dosyalarına gerek kalmadan kaydırma tabanlı dinamik animasyonlar oluşturmanıza olanak tanır.

Kaydırmayla çalışan animasyonlar oluşturma

Platformda zamana dayalı animasyonların işleyişine benzer şekilde, artık bir animasyonu başlatmak, duraklatmak ve geri almak için kaydırma çubuğunun kaydırma ilerleme durumunu kullanabilirsiniz. Dolayısıyla, ileri doğru kaydırırken bu animasyonun ilerlediğini, geri doğru kaydırırken ise tam tersini göreceksiniz. Bu sayede, dinamik görsel etki için görüntü alanında ve görüntü alanında animasyonlu öğeler içeren kısmi veya tam sayfa görseller oluşturabilirsiniz. Bu yönteme scrollytelling (kaydırmayla hikaye anlatma) denir.

Kaydırmayla çalışan animasyonlar, önemli içerikleri vurgulamak, kullanıcıları bir hikayede yönlendirmek veya web sayfalarınıza dinamik bir dokunuş eklemek için kullanılabilir.

Kaydırmayla çalışan animasyon görseli

Canlı demo

@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%;
}

Önceki kod, bir resmin opaklığını ve ölçeğini değiştirerek görüntü alanında görünen basit bir animasyon tanımlar. Animasyon, kaydırma konumuna göre hareket eder. Bu efekti oluşturmak için önce CSS animasyonunu, ardından animation-timeline öğesini ayarlayın. Bu durumda, varsayılan değerleriyle view() işlevi, resmi kaydırma alanına (bu örnekte aynı zamanda görüntü alanı) göre izler.

Özellikle erişilebilirlik ihtiyaçları için tarayıcı desteğini ve kullanıcı tercihlerini göz önünde bulundurmanız önemlidir. Bu nedenle, tarayıcının kaydırmayla çalışan animasyonları destekleyip desteklemediğini kontrol etmek için @supports kuralını kullanın ve kullanıcıların hareket tercihlerine saygı göstermek için kaydırmayla çalışan animasyonunuzu @media (prefers-reduced-motion: no-preference) gibi bir kullanıcı tercihi sorgusuna sarın. Bu kontrolleri yaptıktan sonra, stillerinizin çalışacağını ve animasyonun kullanıcı için sorun oluşturmayacağını bilirsiniz.

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

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

Kaydırmayla çalışan animasyon görseli

Canlı demo

@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 birkaç farklı animasyon karesi (başlık, metin, gezinme çubuğu ve arka plan) kullanılır ve ardından her birine kaydırmayla çalışan ilgili animasyon uygulanır. Her birinin farklı bir animasyon stili olsa da hepsinin animasyon zaman çizelgesi, en yakın kaydırma çubuğu ve animasyon aralığı (sayfanın üst kısmından 150 piksele kadar) aynıdır.

Kaydırmayla çalışan animasyonlardan elde edilen performans avantajları

Bu yerleşik API, yazdığınız özel komut dosyası veya ek bir üçüncü taraf bağımlılığının eklenmesi olsun, sürdürmeniz gereken kod yükünü azaltır. Ayrıca çeşitli kaydırma gözlemcileri gönderme ihtiyacını ortadan kaldırır. Bu da oldukça önemli performans avantajları sağlar. Bunun nedeni, yeni API'yi doğrudan CSS'de mi yoksa JavaScript kancalarını kullanarak mı kullandığınızdan bağımsız olarak, kaydırma odaklı animasyonların, dönüştürme ve opaklık gibi, birleştiricide animasyon uygulanabilen özellikleri animasyona dönüştürürken ana iş parçacığında çalışmasıdır.

Tokopedia, yakın zamanda kaydırmayla çalışan animasyonlar kullanarak ürün gezinme çubuğunun kaydırırken görünmesini sağladı. Bu API'nin kullanılması hem kod yönetimi hem de performans açısından ciddi avantajlar sağladı.

Aşağı kaydırdığınızda Tokopedia'daki bu ürün gezinme çubuğu, kaydırma hareketine dayalı animasyonlarla hareket eder.

"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ğinin farkındayız ve şimdiden sırada ne olabileceğini düşünüyoruz. Buna, yalnızca yeni animasyon zaman çizelgelerini değil, aynı zamanda bir animasyonu başlatmak için kaydırma noktasını kullanma olanağı da (kaydırmayla tetiklenen animasyonlar) dahildir.

Gelecekte tarayıcılarda daha da fazla kaydırma özelliği kullanıma sunulacak. Aşağıdaki demoda, gelecekte kullanıma sunulacak bu özelliklerin bir kombinasyonu gösterilmektedir. Seçicilerdeki ilk tarih ve saati ayarlamak için CSS scroll-start-target'ü, üstbilgi tarihini güncellemek için JavaScript scrollsnapchange etkinliğini kullanır. Bu sayede verileri, yakalanan etkinlikle senkronize etmek çok kolaydır.

Canlı demoyu Codepen'de

inceleyin

JavaScript scrollsnapchanging etkinliğiyle bir seçiciyi gerçek zamanlı olarak güncellemek için bu temeli de kullanabilirsiniz.

Bu özellikler şu anda yalnızca Canary'da bir işaretin arkasındadır. Ancak daha önce platformda geliştirilmesi imkansız veya çok zor olan özellikleri kullanıma sunar ve kaydırma tabanlı etkileşim olanaklarının geleceğini vurgular.

Ekibimiz, kaydırmayla çalışan animasyonları kullanmaya başlama hakkında daha fazla bilgi edinmeniz için Chrome for Developers YouTube kanalında yeni bir video serisi yayınladı. Bu eğitimde, Bramus Van Damme'den kaydırmayla çalışan animasyonlarla ilgili temel bilgileri (özelliğin işleyiş şekli, kelime dağarcığı, efekt oluşturmanın çeşitli yolları ve zengin deneyimler oluşturmak için efektleri nasıl birleştireceğiniz) öğreneceksiniz. Bu video serisini mutlaka incelemenizi öneririz.

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

Web sayfalarında içeriden animasyon oluşturmaya yönelik güçlü bir yeni özellikten bahsettik. Bununla birlikte, sorunsuz bir kullanıcı deneyimi oluşturmak için sayfa görüntülemeleri arasında animasyon oluşturmaya yönelik görüntü geçişleri adlı güçlü bir yeni özellik de mevcuttur. Görünüm geçişleri, web'e yeni bir akışlılık düzeyi getirerek tek bir sayfadaki veya hatta farklı sayfalardaki farklı görünümler arasında sorunsuz geçişler oluşturmanıza olanak tanır.

Tarayıcı desteği

• 111
• 111
• x
• 18

Kaynak

Airbnb, sorunsuz ve kesintisiz bir web gezinme deneyimi için görünüm geçişlerini kullanıcı arayüzüne entegre etme denemeleri yapan şirketlerden biridir. Bu sayede, giriş düzenleyici kenar çubuğundan fotoğrafları düzenlemeye ve olanaklar eklemeye kadar tüm işlemleri sorunsuz bir kullanıcı akışında yapabilirsiniz.

Airbnb'de görülen aynı belge görünümü geçişi.

Maxwell Barvian'ın, görüntüler arasındaki geçişleri gösteren portföy.

Bu tam sayfa efektleri güzel ve sorunsuz olsa da, kullanıcı etkileşimi üzerine liste görünümünüzün güncellendiği bu örnekte olduğu gibi mikro etkileşimler de oluşturabilirsiniz. Bu efekt, görüntü 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, document.startViewTransition kullanarak bir etkileşimi sarmalamak ve DOM düğümleri oluştururken JavaScript'i kullanarak geçiş yapan her öğenin view-transition-name değerine sahip olduğundan emin olmak kadar basittir.

Demo görseli

Canlı demo

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üntüleme geçişi adları, görüntüleme geçişinize özel animasyonlar uygulamak için kullanılabilir. Ancak bu, birçok öğenin geçiş yaptığı durumlarda can sıkıcı olabilir. Bu yıl görüntü geçişleriyle ilgili ilk yeni güncelleme bu sorunu basitleştiriyor ve özel animasyonlara uygulanabilecek görüntü geçişi sınıfları oluşturma olanağı sunuyor.

Tarayıcı desteği

• 125
• 125
• x
• 18.2

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

Görüntüleme geçişlerinde yapılan bir diğer büyük iyileştirme, görüntüleme geçişi türleri için destektir. Görüntüleme geçiş türleri, sayfa görüntülemelerine gidip gelirken animasyon yaparken farklı bir tür görsel görüntüleme geçişi istediğinizde kullanışlıdır.

Tarayıcı desteği

• 125
• 125
• x
• 18

Örneğin, bir ana sayfanın bir blog sayfasına animasyonla geçişinin, söz konusu blog sayfasının ana sayfaya animasyonla geri geçişinden farklı olmasını isteyebilirsiniz. Alternatif olarak, sayfaların bu örnekte olduğu gibi farklı şekillerde (soldan sağa ve tam tersi) açılıp kapanmasını da tercih edebilirsiniz. Daha önce bu işlemi yapmak karmaşıktı. Stilleri uygulamak için DOM'a sınıflar ekleyebilir ve daha sonra bu sınıfları kaldırmanız gerekirdi. view-transition-types, yeni geçişleri başlatmadan önce bunu manuel olarak yapmanızı gerektirmek yerine tarayıcıda eski geçişlerin temizlenmesini sağlar ve bu işi sizin için yapar.

Sayfalandırma demosunun kaydı. Türler, kullanılacak animasyonu belirler. Etkin geçiş türleri sayesinde stiller stil sayfasında ayrılır.

Artık bir nesne 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, kapsamının geniş olmasıdır. Birçok uygulama tek sayfadan değil, birden fazla sayfa içeren güçlü bir kanvastan oluşur. Bu nedenle, Chromium 126'da çok sayfalı uygulamalar için belge arası görünüm geçişleri desteğini kullanıma sunduğumuzu duyurmaktan heyecan duyuyoruz.

Tarayıcı desteği

• 126
• 126
• x
• 

Bu yeni belgeler arası özellik grubu, web.dev'den web.dev/blog'a gitme gibi aynı kaynakta bulunan web deneyimlerini içerir ancak web.dev'den blog.web.dev'e veya google.com gibi başka bir alana gitme gibi kaynakta geçişi içermez.

Aynı doküman görünümü geçişleriyle arasındaki en önemli fark, geçişinizi document.startViewTransition() ile sarmamanız gerektiğidir. Bunun yerine, CSS @view-transition at-kuralı'nı kullanarak görüntü geçişinde yer alan her iki sayfayı da etkinleştirin.

@view-transition {
  navigation: auto;
}

Daha özel bir efekt için, görüntü geçişi nesnesine erişim sağlayan yeni pageswap veya pagereveal etkinlik dinleyicilerini 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 ise yeni sayfayı başlatıldıktan sonra oluşturulmaya başlamadan önce özelleştirebilirsiniz.

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

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

Çok sayfalı bir uygulamada görüntü geçişlerini gösterme. Demo bağlantısına bakın.

Gelecekte, görüntüleme geçişlerini aşağıdakiler de dahil olmak üzere genişletmeyi planlıyoruz:

• Kapsamlı geçişler: Bir geçişi DOM alt ağacıyla sınırlayarak sayfanın geri kalanının etkileşimli olmaya devam etmesini sağlar ve aynı anda çalışan birden fazla görüntüleme geçişini destekler.
• Hareketle kontrol edilen görünüm geçişleri: Web'de daha yerel deneyimler için doküman içi görünüm geçişini tetiklemek üzere sürükleme veya kaydırma hareketlerini kullanın.
• CSS'de gezinme eşleştirme: JavaScript'te pageswap ve pagereveal etkinliklerini kullanmaya alternatif olarak, belgeler arası görüntü geçişinizi doğrudan CSS'nizde özelleştirin. Çok sayfalı uygulamalarda görüntü geçişleri hakkında daha fazla bilgi edinmek (ör. ön oluşturma ile en yüksek performansı nasıl elde edeceğiniz) için Bramus Van Damme'nin 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şiyor. Yeni özellikler ve iyileştirmeler, kullanıcı arayüzü bileşenlerinin oluşturulmasını basitleştirerek harika deneyimler oluşturmaya odaklanmanıza olanak tanır. Bu, CSS Çalışma Grubu, Open UI Topluluğu ve WHATWG (Web Hiper Metin Uygulama Teknolojisi Çalışma Grubu) 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, basit görünen bir istektir: açılır menülere (select öğesi) stil uygulama özelliği. Bu sorun, yüzeyde basit görünse de düzen ve oluşturma, kaydırma ve etkileşim, kullanıcı aracısı stili ve CSS özellikleri ve hatta HTML'de yapılan değişiklikler gibi platformun birçok parçasına dokunuyor.

Seçilen bir öğenin parçalarını inceleme

Açılır listeler birçok parçadan oluşur ve dikkate alınması gereken birçok durum 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ğını yönetme
• Seçilen seçenek değerini görselleştirme
• Ok etkileşim tarzı
• Durum yönetimi (açık/kapalı)

Şu anda bu durumun tümünü kendiniz yönetmek zordur ancak platform da bunu kolaylaştırmaz. Bu sorunu düzeltmek için bu parçaları ayırdık ve stil açılır listelerini etkinleştirecek ancak çok daha fazlasını yapacak birkaç basit özellik kullanıma sunuyoruz.

Popover API

İlk olarak popover adlı bir genel özellik kullanıma sunduk. Bu özelliğin, birkaç hafta önce yeni kullanıma sunulmuş temel düzeye ulaştığını duyurmaktan memnuniyet duyuyoruz.

Tarayıcı desteği

• 114
• 114
• 125
• 17

Kaynak

Pop-up öğeleri, bir düğme gibi bir başlatıcıyla veya JavaScript ile açılana kadar display: none ile gizlenir. Temel bir pop-up oluşturmak için öğede pop-up özelliğini ayarlayın ve kimliğini popovertarget kullanarak bir düğmeye bağlayın. Şimdi düğme, tetikleyicidir.

Demo görseli

Canlı demo

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

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

Popover özelliği artık etkinleştirildiğinden tarayıcı, aşağıdakiler de dahil olmak üzere birçok önemli davranışı ek komut dosyası olmadan işler:

• Üst katmana promosyon.: Sayfanın geri kalanının üzerinde ayrı bir katman olduğundan z-index ile uğraşmanız gerekmez.
• Işık kapatma işlevi: Pop-up alanının dışındaki bir yeri tıkladığınızda pop-up kapatılır ve odak geri döner.
• Varsayılan sekme odağı yönetimi: Pop-up açıldığında bir sonraki sekme, pop-up'ın içinde durur.
• Yerleşik klavye bağlamaları: esc tuşuna basmak veya açma/kapatma düğmesini iki kez tıklamak pop-up'ı kapatır ve odağı geri verir.
• Varsayılan bileşen bağlamaları. : Tarayıcı, bir pop-up'ı tetikleyicisine anlamsal olarak bağlar.

Önemli: Pop-up özelliği, doğası gereği herhangi bir semantik anlam içermez. Bu nedenle, pop-up öğesine daha fazla bağlamsal anlam sağlamak için uygun HTML veya ARIA'yı kullanmanız gerekir. Ayrıca pop-up, sayfanın geri kalanını etkileşimsiz hale getirmek veya kullanıcının dikkatini başka bir yere çekmek için sayfanın geri kalanını etkisiz hale getirmez. Bu tür bir deneyim istiyorsanız <dialog> öğesi muhtemelen daha uygundur.

GitHub ana sayfasındaki menü.

Hatta bu pop-up API'yi farkında olmadan şu anda kullanıyor olabilirsiniz. GitHub, ana sayfadaki "yeni" menüsünde ve pull istek incelemesi genel bakış sayfasında pop-up'ı uyguladı. Daha eski tarayıcıları desteklemek için Oddbird tarafından GitHub'ın Keith Cirkel'inden önemli ölçüde destek alınarak geliştirilen popover polyfill'i kullanarak bu özelliği kademeli olarak geliştirdiler.

"Pop-up'a geçerek binlerce satır kodun desteğini sonlandırdık. Popover, sihirli z-dizin numaralarıyla uğraşma ihtiyacını ortadan kaldırarak bize yardımcı oluyor. Beyan edilen düğme davranışıyla doğru erişilebilirlik ağacı ilişkisinin kurulmasını ve yerleşik odak davranışlarının kullanılmasını sağlamak, Tasarım Sistemimizin kalıpları doğru şekilde uygulamasını önemli ölçüde kolaylaştırıyor. -Keith Cirkel, Yazılım Mühendisi, GitHub"

Giriş ve çıkış efektlerini animasyonlu hale getirme

Pop-up'larınız olduğunda muhtemelen etkileşim eklemek istersiniz. Geçtiğimiz yıl, animasyonlu pop-up'ları 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 özelliği.

display gibi ayrı mülkler arasında geçişleri etkinleştirmek için allow-discrete anahtar kelimesini içeren transition-behavior mülkü.

Tarayıcı desteği

• 117
• 117
• 129
• 17,4

Kaynak

display: none'dan üst katmana giriş efektlerini canlandıran @starting-style kuralı.

Tarayıcı desteği

• 117
• 117
• 129
• 17,5

Kaynak

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

Tarayıcı desteği

• 117
• 117
• x
• x

Kaynak

Bu özellikler, pop-up veya iletişim kutusu fark etmeksizin en üst katmanda animasyonlu olarak gösterdiğiniz tüm öğeler için geçerlidir. Arka planı olan bir iletişim kutusunun tamamı şu şekilde görünür:

Demo görseli

Canlı demo

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 öğesini ayarlayın. Böylece tarayıcı, bu öğenin DOM'de hangi stillerde animasyonlu olacağını bilir. Bu işlem hem diyalog hem de arka plan için yapılır. Ardından, hem iletişim kutusunun hem de arka planın açık durumunu biçimlendirin. Bu işlem, iletişim kutuları için open özelliğini, pop-up'lar için ise ::popover-open sözde öğesini kullanır. Son olarak, ayrık özelliklerin geçiş yapabileceği animasyon modunu etkinleştirmek için allow-discrete anahtar kelimesini kullanarak opacity, display ve overlay öğelerini canlandırın.

Sabitleme konumlandırması

Popover, hikayenin yalnızca başlangıcıydı. Yer işareti konumlandırma desteği artık Chrome 125'te kullanıma sunuldu.

Tarayıcı desteği

• 125
• 125
• x
• x

Kaynak

Tarayıcı, ankraj konumlandırmayı kullanarak yalnızca birkaç satır kodla konumlandırılmış bir öğeyi bir veya daha fazla ankraj öğesine bağlama mantığını yönetebilir. Aşağıdaki örnekte, her düğmeye basit bir ipucu sabitlenmiş ve bu ipucu alt ortada konumlandırılmıştır.

Demo görseli

Canlı demo

Yerleşim öğesindeki anchor-name mülkünü (bu örnekte düğme) ve konumlandırılmış öğedeki position-anchor mülkünü (bu örnekte ipucu) kullanarak CSS'de bir ankraj konumlandırma ilişkisi oluşturun. Ardından, anchor() işlevini kullanarak ankara göre mutlak veya sabit konumlandırma uygulayın. Aşağıdaki kod, ipucu ü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, doğrudan anchor işlevinde anchor-name özelliğini kullanın ve position-anchor özelliğini atlayın. Bu, birden fazla öğeye sabitleme yaparken yararlı olabilir.

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

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

Son olarak, konumlandırılmış öğeyi ankrajına hizalamak için justify ve align mülkleri 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;
}

Yer işareti konumlandırmayı pop-up ile kullanmak çok kullanışlı olsa da yer işareti konumlandırmayı kullanmak için pop-up kesinlikle gerekli değildir. Sabitleme konumlandırması, görsel bir ilişki oluşturmak için herhangi iki (veya daha fazla) öğeyle kullanılabilir. Aslında, Roman Komarov'un makalesinden esinlenilen aşağıdaki demoda, fareyle üzerine geldiğinizde veya Sekme tuşuna bastığınızda liste öğelerine sabitlenen bir alt çizgi stili gösterilmektedir.

Demo görseli

Canlı demo

Bu örnekte, left, right ve bottom öğelerinin fiziksel özelliklerini kullanarak sabitleme konumunu ayarlamak için sabitleme işlevi kullanılmaktadır. İmleci bağlantılardan birinin üzerine getirdiğinizde hedef ankrajı değişir ve tarayıcı, konumlandırmayı uygulamak için hedefi kaydırır. Aynı zamanda, şık bir efekt oluşturmak için rengi de animasyonlu olarak 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

Muhtemelen daha önce kullandığınız varsayılan yönlü mutlak konumlandırmaya ek olarak, ankraj konumlandırma API'sinin bir parçası olarak eklenen ve iç içe yerleştirilmiş alan adı verilen yeni bir düzen mekanizması da mevcuttur. İç içe yerleştirilmiş alan, konumlandırılmış öğeleri ilgili sabitleme noktalarına göre yerleştirmeyi kolaylaştırır ve sabitleme öğesinin ortada olduğu 9 hücreli bir ızgara üzerinde çalışır. Örneğin, inset-area: top konumlandırılmış öğeyi en üste, inset-area: bottom ise en alta yerleştirir.

İlk ana sayfa örneğinin basitleştirilmiş sürümü, inset-area ile ş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 konumda başlayıp sola, sağa veya tüm sütunları ya da satırları kaplayacak şekilde yayılacak şekilde 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ümlerdeki bu araca göz atın:

Bu öğeler sabitlendiğinden, sabit öğe hareket ettikçe konumlandırılmış öğe de sayfa üzerinde dinamik olarak hareket eder. Bu durumda, doğal boyutlarına göre yeniden boyutlandırılan kapsayıcı sorgusu tarzında kart öğelerimiz var (medya sorgularıyla yapamadığınız bir şey). Kart kullanıcı arayüzü değiştikçe sabitlenmiş menü de yeni düzene göre kaydırılır.

Demo görseli

Canlı demo

position-try-options ile dinamik sabitleme konumları

Menülerin ve alt menü gezinmesinin oluşturulması, pop-up ve ankraj yerleşimi kombinasyonuyla ç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 halletmesine izin verebilirsiniz. Bunu birkaç şekilde yapabilirsiniz. İlk olarak kendi yerleşim kurallarınızı oluşturmanız gerekir. Bu durumda, alt menü başlangıçta "mağaza" düğmesinin sağına yerleştirilir. Ancak menünün sağ tarafında yeterli alan olmadığında @position-try bloğu oluşturabilir ve bu bloğa --bottom özel tanımlayıcısını atayabilirsiniz. Ardından, bu @position-try bloğunu position-try-options kullanarak ankraja bağlarsınız.

Artık tarayıcı, bu sabitlenmiş durumlar arasında geçiş yaparak önce sağ konumu dener, ardından aşağıya kayar. Bu, güzel bir geçişle yapılabilir.

Demo görseli

Canlı demo

#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, sabitlemenizin blokta veya satır içi yönlerde dönmesi gibi bazı temel etkileşimleri istiyorsanız tarayıcı birkaç anahtar kelime sağlar.

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ı yazma işlemini tamamen atlayın. Böylece, yalnızca birkaç satır CSS ile tam işlevli, konuma duyarlı bir ankraj konumlandırılmış öğeye sahip olabilirsiniz.

Demo görseli

Canlı demo

.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 özellik grubu, yaratıcılığınızı ortaya çıkarmak ve ana konumlandırılmış öğeler ile katmanlı arayüzler üzerinde daha iyi kontrol sahibi olmak için mükemmel bir başlangıçtır. Ancak bu daha başlangıç. Örneğin, şu anda popover yalnızca çağıran öğe olarak düğmelerle veya JavaScript ile çalışmaktadır. Web platformunun her yerinde görülen bir model olan Wikipedia tarzı önizlemeler gibi öğelerle etkileşim kurulabilmesi ve ayrıca bir bağlantıdan ve kullanıcının ilgi gösterdiği durumlarda tıklama gerekmeden (ör. fareyle üzerine gelme veya sekme odak noktası) pop-up'ın tetiklenebilmesi gerekir.

Popover API'nin bir sonraki adımı olarak, bu ihtiyaçları karşılamak ve bu deneyimleri yerleşik uygun erişilebilirlik kancalarıyla yeniden oluşturmayı kolaylaştırmak için interesttarget üzerinde çalışıyoruz. İdeal davranışlarla ilgili birçok açık soru bulunan bu erişilebilirlik sorununu çözmek zordur. Ancak bu işlevi platform düzeyinde çözmek ve normalleştirmek, bu deneyimleri herkes için 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, Keith Cirkel ve Luke Warlow adlı iki üçüncü taraf geliştiricinin çalışmaları sayesinde Canary'da test edebileceğiniz, geleceğe yönelik başka bir genel çağırıcı (invoketarget) da mevcuttur. invoketarget, popovertarget'un <dialog>, <details>, <video>, <input type="file"> ve daha fazlası dahil tüm etkileşimli öğeler için normalleştirilmiş pop-up'lar sağladığı açıklayıcı geliştirici deneyimini destekler.

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

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

Henüz bu API'nin kapsamına girmeyen kullanım alanları olduğunu biliyoruz. Örneğin, sabitlenmiş bir öğeyi sabitleyicisine bağlayan oku, özellikle de sabitlenmiş öğenin konumu değiştikçe biçimlendirme ve bir öğenin, sınırlayıcı kutusuna ulaştığında ayarlanan başka bir konuma sabitlenmek yerine "kaydırılmasını" ve görüntü alanında kalmasını sağlama. Bu güçlü API'yi kullanıma sunmaktan heyecan duyuyoruz. Gelecekte API'nin özelliklerini daha da genişletmeyi planlıyoruz.

Stil uygulanabilir seçim

Ekip, popover ve anchor'ü birlikte kullanarak özelleştirilebilir bir seçim açılır menüsünü etkinleştirme konusunda ilerleme kaydetti. İyi bir haberimiz var. Bu konuda çok ilerleme kaydettik. Maalesef bu API şu anda deneme aşamasındadır. Ancak, ilerleme durumumuzla ilgili bazı canlı demoları ve güncellemeleri paylaşmak ve sizden geri bildirim almak için sabırsızlanıyorum. Öncelikle, kullanıcıların yeni, ö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 ayarlanmış bir görünüm özelliği kullanmaktır. Görünüm ayarlandıktan sonra yeni, özelleştirilebilir bir seçim deneyimine kaydolursunuz.

select {
  appearance: base-select;
}

Not: Bu API'nin şu anda deneysel olduğunu ve bu nedenle söz dizimi muhtemelen değişeceğini unutmayın.

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

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 kodda, Gmail kullanıcı arayüzünde <selectedoption> öğesinin özelleştirilmesi gösterilmektedir. Bu örnekte, görsel bir simge, yer kazanmak için seçilen yanıt türünü temsil etmektedir. Seçenek stilini önizleme stilinden ayırmak 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, kullanıcıların içeriği daha kolay ayrıştırması için seçeneklerde bayrak resimleri içeren özelleştirilmiş bir kullanıcı arayüzü görebilirsiniz. Desteklenmeyen tarayıcılar, anlayamadıkları satırları (ör. özel düğme, veri listesi, seçili seçenek ve seçeneklerdeki resimler) yoksayar. Bu nedenle, yedek seçenek mevcut varsayılan seçim kullanıcı arayüzüne benzer olacaktır.

Soldaki desteklenen tarayıcı görseli ve sağdaki desteklenmeyen tarayıcı yedeği.

Özelleştirilebilir seçimlerle olasılıkların sınırı yoktur. Airbnb tarzındaki bu ülke seçiciyi, duyarlı tasarım için akıllı bir stil kullanması nedeniyle özellikle seviyorum. Yakında kullanıma sunulacak stillenebilir seçeneğiyle bunu ve daha fazlasını yapabilirsiniz. Bu özellik, web platformuna çok ihtiyaç duyulan bir katkı sunar.

Demo görseli

Canlı demo

Özel akordeon

Chrome ekibinin odaklandığı tek kullanıcı arayüzü bileşeni, belirli bir stilin (ve bununla birlikte gelen tüm parçaların) çözülmesi değil. İlk ek bileşen güncellemesi, akordeondaki öğelerden yalnızca birinin aynı anda açılabileceği özel akordeonlar oluşturma olanağıdır.

Tarayıcı desteği

• 120
• 120
• 130
• 17.2

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

Özel akordeon demosu

<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

Kullanıcı arayüzü bileşenleriyle ilgili bir diğer iyileştirme de :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 çalışır ancak bir form denetimiyle yalnızca kullanıcı girişle önemli ölçüde etkileşime geçtikten sonra eşleşir. Bu, bir form değeriyle etkileşim kurulup kurulmadığını veya "kirli" hale gelip gelmediğini belirlemek için çok daha az kod gerektiği anlamına gelir. Bu durum, kullanıcı geri bildirimi sağlamak için çok yararlı olabilir ve geçmişte bunu yapmak için gerekli olan çok sayıda komut dosyasını azaltır.

Tarayıcı desteği

• 119
• 119
• 88
• 16,5

Kaynak

Demo Ekran Kaydı

Canlı Demo

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

Yakın zamanda kullanıma sunulan kullanışlı bir bileşen güncellemesi de field-sizing: content. Bu bileşen, girişler ve metin alanları gibi form denetimlerine uygulanabilir. Bu sayede girişin boyutu, içeriğine göre büyüyebilir (veya küçülebilir). field-sizing: content, özellikle çok küçük bir giriş kutusunda isteminizi ilk kısımlarında yazdığınız metni görmek için yukarı kaydırmanız gerekebilecek sabit boyutlara çözümlenmediğiniz için metin alanları için özellikle kullanışlı olabilir.

Tarayıcı desteği

• 123
• 123
• x
• x

Kaynak

Demo Ekran Kaydı

Canlı Demo

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

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

<hr> <select> içinde başlıyor

Seçimlerde <hr> veya yatay çizgi öğesini etkinleştirme özelliği, küçük ancak faydalı bir bileşen özelliğidir. Bu, semantik açıdan pek bir kullanıma sahip olmasa da, özellikle yer tutucu değer gibi bir gruplandırma grubuyla gruplandırmak istemeyebileceğiniz içerikleri seçtiğiniz bir listede güzelce ayırmanıza yardımcı olur.

Ekran Görüntüsü Seçin

Canlı Demo'yu 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>

Seçimde hr kullanma hakkında daha fazla bilgi edinin.

Yaşam kalitesini artıran iyileştirmeler

Yalnızca etkileşimler ve bileşenler için değil, sürekli olarak iterasyon yapıyoruz. Geçtiğimiz yıl kullanım kolaylığı sağlayan birçok güncelleme yaptık.

Ön izlemeyle iç içe yerleştirme

Yerleşik CSS iç içe yerleştirme özelliği geçen yıl tüm tarayıcılarda kullanıma sunuldu ve o zamandan beri önizlemeyi desteklemek için iyileştirildi. Bu da artık öğe adlarının önünde & kullanılmasının zorunlu olmadığı anlamına geliyor. Bu sayede, iç içe yerleştirme işlemi çok daha ergonomik ve geçmişte alıştığım gibi oluyor.

Tarayıcı desteği

• 120
• 120
• 117
• 17.2

Kaynak

CSS iç içe yerleştirmeyle ilgili en sevdiğim özelliklerden biri, bileşenleri görsel olarak engellemenize ve bu bileşenlere kapsayıcı sorguları ve medya sorguları gibi durum ve değiştiriciler eklemenize olanak tanımasıdır. Daha önce, belirlilik amacıyla bu sorguların tümünü dosyanın alt kısmında gruplandırma alışkanlığım vardı. Artık bunları kodunuzun yanına mantıklı 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

Blok düzeninde align-content gibi merkezleme mekanizmalarını kullanabilme özelliği de oldukça kullanışlı bir değişiklik. Yani artık bir div içinde dikey olarak ortalama gibi işlemleri, esnek veya ızgara düzeni uygulamak zorunda kalmadan ve bu düzen algoritmalarından istemeyebileceğiniz kenar boşluğu daraltmayı önleme gibi yan etkiler olmadan yapabilirsiniz.

Tarayıcı desteği

• 123
• 123
• 125
• 17,4

Ekran görüntüsü

Canlı Demo

div {
  align-content: center;
}

Metin kaydırma: denge ve güzellik

Düzenden bahsetmişken, metin düzeninde text-wrap: balance ve pretty eklenmesiyle güzel bir iyileştirme yapıldı. text-wrap: balance daha düzgün bir metin bloğu için kullanılırken text-wrap: pretty, metnin son satırındaki tekil kelimeleri azaltmaya odaklanır.

Demo Ekran Kaydı

Canlı Demo

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek balance ve pretty'nin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

h1 {
  text-wrap: balance;
}

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

Uluslararası yazım güncellemeleri

CJK metin özellikleri için yazı düzeni güncellemeleri, geçen yıl doğal ifade sınırında satırı sarmalayan word-break: auto-phrase özelliği gibi birçok güzel güncelleme aldı.

Tarayıcı desteği

• 119
• 119
• x
• x

word-break: normal ve word-break: auto-phrase karşılaştırması

Ayrıca, Çince, Japonca ve Korece yazı tiplerinin okunabilirliğini artırmak ve görsel açıdan daha ilgi çekici sonuçlar elde etmek için noktalama işaretleri arasındaki kerning'i uygulayan text-spacing-trim seçeneği de vardır.

Tarayıcı desteği

• 123
• 123
• x
• x

Kaynak

Noktalama işareti karakterleri bir satırda göründüğünde, CJK noktasının sağ yarısı kaldırılmalıdır.

Göreceli renk söz dizimi

Renk temaları dünyasında, göreli renk söz diziminde büyük bir güncelleme yapıldı.

Bu örnekte, renklerde Oklch tabanlı tema kullanılmıştır. Ton değeri kaydırma çubuğuna göre ayarlandıkça temanın tamamı değişir. Bu, göreli renk söz dizimi ile yapılabilir. Arka plan, tona göre birincil rengi kullanır ve değerini ayarlamak için açıklık, renk ve ton kanallarını ayarlar. --i, değerlerin gradyanı için listedeki kardeş dizindir. Tema oluşturmak için adımlamayı özel özelliklerle ve göreli renk söz dizimini nasıl birleştirebileceğinizi gösterir.

Demo Ekran Kaydı

Canlı Demo

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek balance ve pretty'nin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

: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 tema oluşturma çok daha dinamik ve basit hale geldi.

Tarayıcı desteği

• 123
• 123
• 120
• 17,5

Kaynak

light-dark() işlevi, renk temalandırma seçeneklerini basitleştiren ergonomik bir iyileştirmedir. Böylece, tema stillerini daha kısa bir şekilde yazabilirsiniz. Bu görsel diyagramda Adam Argyle tarafından bu konu çok güzel bir şekilde açıklanmıştır. Daha önce, tema seçeneklerini ayarlamak için iki farklı kod bloğu (varsayılan temanız ve bir 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ına yazabilirsiniz.

light-dark()'in görselleştirmesi. Daha fazla bilgi için demoya göz atın.

html {
  color-scheme: light dark;
}

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

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

:has() seçici

Modern kullanıcı arayüzünden bahsederken, geçtiğimiz yılın en etkili birlikte çalışabilirlik özelliklerinden biri olan :has() seçicisinden bahsetmemek olmaz. Bu seçici, geçen yılın Aralık ayında tüm tarayıcılarda kullanıma sunuldu. Bu API, mantıklı stiller yazma konusunda devrim niteliğindedir.

Tarayıcı desteği

• 105
• 105
• 121
• 15.4

Kaynak

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

has()'in Tokopedia'daki karşılaştırma bloklarına stil uygulamak için kullanıldığı demo.

:has(), bloklara iç içeriklerine göre stil vermek için :has() kullanan PolicyBazaar da dahil olmak üzere birçok şirket için özellikle yararlı olduğunu kanıtlamıştır. Örneğin, karşılaştırma bölümünde stil, blokta karşılaştırılacak bir plan varsa veya blok boşsa ayarlanır.

":has() seçicisiyle, kullanıcının seçiminin JavaScript tabanlı doğrulamasını ortadan kaldırıp bunu, önceki deneyimle aynı şekilde sorunsuz çalışan bir CSS çözümüyle değiştirebildik." –Aman Soni, Teknik Lider, PolicyBazaar

Container sorguları

Web'e eklenen ve kullanım alanı giderek genişleyen 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ğı sunar. Yalnızca ekran boyutunu sorgulayan medya sorgularından çok daha hassas bir yaklaşımdır.

Tarayıcı desteği

• 105
• 105
• 110
• 16

Kaynak

Angular kısa süre önce angular.dev adresinde, başlık bloklarına sayfadaki mevcut alanlarına göre stil vermek için kapsayıcı sorguları kullanan yeni ve güzel bir doküman sitesi kullanıma sundu. Bu sayede, 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.

Angular.dev sitesinde, başlık kartlarında kapsayıcı sorguları gösterilmektedir.

Kapsayıcı sorguları olmadan bu tür bir şey yapmak oldukça zordu ve performans açısından zararlıydı. Bu işlem için yeniden boyutlandırma gözlemcileri ve öğe gözlemcileri gerekiyordu. Artık bir öğeye üst öğesinin boyutuna göre stil uygulamak çok kolay.

Demo Ekran Kaydı

Canlı Demo

Angular başlık kartı kapsayıcı sorgusunu yeniden oluşturma.

@property

Son olarak, @property özelliğini çok yakında temele eklemeyi planlıyoruz. 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, CSS'de bağlamsal anlam, tür denetimi, varsayılan değerler ve yedek değerlere de olanak tanır. Aralık stili sorgular gibi daha da güçlü özelliklere kapı açar. Daha önce hiç mümkün olmayan bu özellik, CSS diline çok fazla derinlik katıyor.

Tarayıcı desteği

• 85
• 85
• 128
• 16,4

Kaynak

Demo Ekran Kaydı

Canlı Demo

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

Sonuç

Tarayıcılara sunulan bu güçlü yeni kullanıcı arayüzü özelliklerinin tümüyle sınırsız olasılık elde edebilirsiniz. Kaydırmayla çalışan animasyonlar ve görüntü geçişleri içeren yeni etkileşimli deneyimler, web'i daha önce hiç görmediğimiz şekillerde daha akıcı ve etkileşimli hale getiriyor. Üst düzey kullanıcı arayüzü bileşenleri, yerel deneyimin tamamını değiştirmeden güçlü ve güzel bir şekilde özelleştirilmiş bileşenler oluşturmayı hiç olmadığı kadar kolaylaştırıyor. Son olarak, mimari, düzen, yazı tipi ve duyarlı tasarımda yapılan yaşam kalitesi iyileştirmeleri yalnızca küçük büyük sorunları çözmekle kalmaz, geliştiricilere çeşitli cihazlarda, form faktörlerinde ve kullanıcı ihtiyaçlarına uygun çalışan karmaşık arayüzler oluşturmak için ihtiyaç duydukları araçları da sağlar.

Bu yeni özellikler sayesinde, kaydırmalı anlatım ve öğeleri birbirine bağlama gibi performans açısından ağır olan özellikler için üçüncü taraf komut dosyalarını kaldırabilir, ankraj konumlandırması ile öğeleri birbirine bağlayabilir, akıcı sayfa geçişleri oluşturabilir, açılır menülere stil verebilir ve kodunuzun genel yapısını doğal olarak iyileştirebilirsiniz.

Web geliştirici olmak için hiç bu kadar iyi bir zaman olmamıştı. CSS3'ün duyurulmasından bu yana bu kadar enerji ve heyecan görmedik. İhtiyacımız olan ancak geçmişte yalnızca hayal ettiğimiz özellikler nihayet gerçek oluyor ve platformun bir parçası haline geliyor. Öncelik verip bu özellikleri hayata geçirebilmemiz, sizin görüşleriniz sayesinde mümkün oldu. Zor ve sıkıcı işleri yerel olarak yapmayı kolaylaştırmak için çalışıyoruz. Böylece, markanızın öne çıkmasını sağlayan temel özellikler ve tasarım ayrıntıları gibi önemli konulara daha fazla zaman ayırabilirsiniz.

Bu yeni özellikler kullanıma sunulduğunda daha fazla bilgi edinmek için developer.chrome.com ve web.dev adreslerini takip edin. Ekibimiz, web teknolojileriyle ilgili en son haberleri bu adreslerde paylaşır. Kaydırmayla çalışan animasyonlar, görüntü geçişleri, ankraj konumlandırması ve hatta stil uygulanabilir seçim özelliğini deneyin ve görüşlerinizi bizimle paylaşın. Size yardımcı olmaya ve görüşlerinizi dinlemeye hazırız.