CSS ve kullanıcı arayüzündeki yenilikler: I/O 2023 Sürümü

Una Kravets

Bramus

Adam Argyle

Son birkaç ay, web kullanıcı arayüzü için altın bir çağın başlangıcı oldu. Yeni platform özellikleri, tarayıcılar arası sıkı bir şekilde benimsenerek kullanıma sunuldu. Bu özellikler, her zamankinden daha fazla web özelliği ve özelleştirme seçeneğini destekliyor.

Yakın zamanda kullanıma sunulan veya yakında kullanıma sunulacak en heyecan verici ve etkili 20 özelliği aşağıda bulabilirsiniz:

• Container sorguları
• Stil sorguları
• :has() seçici
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• Dinamik görünüm alanı birimleri
• Geniş gama renk alanları
• color-mix()
• İç içe yerleştirme
• Katmanları basamaklandırma
• Kapsamlı stiller
• Trigonometrik fonksiyonlar
• Ayrı ayrı dönüştürme özellikleri
• popover
• sabitleme konumlandırması
• selectmenu
• Ayrı mülk geçişleri
• Kaydırmaya dayalı animasyonlar
• Görünüm geçişleri

Yeni Duyarlı

Yeni duyarlı tasarım özelliklerinden bazılarını kullanmaya başlayalım. Yeni platform özellikleri sayesinde, duyarlı stil bilgisine sahip bileşenlerle mantıksal arayüzler oluşturabilir, daha doğal bir kullanıcı arayüzü sunmak için sistem özelliklerinden yararlanan arayüzler oluşturabilir ve kullanıcının, tam özelleştirme için kullanıcı tercihi sorgularıyla tasarım sürecinin bir parçası olmasına olanak tanıyabilirsiniz.

Kapsayıcı sorguları

Kapsayıcı sorguları kısa süre önce tüm modern tarayıcılarda kararlı hale geldi. Bu özellikler, bir üst öğenin boyutunu ve stilini sorgulamanıza olanak tanıyarak alt öğelerine hangi stillerin uygulanması gerektiğini belirlemenizi sağlar. Medya sorguları yalnızca görünüm penceresindeki bilgilere erişip bunları kullanabilir. Bu nedenle, yalnızca sayfa düzeninin makro görünümünde çalışabilirler. Öte yandan, kapsayıcı sorguları, herhangi bir sayıda düzeni veya düzenler içindeki düzenleri destekleyebilen daha hassas bir araçtır.

Aşağıdaki gelen kutusu örneğinde, birincil gelen kutusu ve Favoriler kenar çubuğu her ikisi de kapsayıcıdır. Bu e-postalardaki ızgara düzeni ayarlanır ve e-posta zaman damgası, kullanılabilir alana göre gösterilir veya gizlenir. Bu, sayfadaki aynı bileşendir ancak farklı görünümlerde görünür.

Kapsayıcı sorgumuz olduğundan bu bileşenlerin stilleri dinamiktir. Sayfa boyutunu ve düzenini ayarlarsanız bileşenler, kendilerine ayrılan alana göre tepki verir. Kenar çubuğu, daha fazla alan içeren bir üst çubuğa dönüşüyor ve düzenin birincil gelen kutusuna daha çok benzediğini görüyoruz. Daha az yer olduğunda her ikisi de daraltılmış biçimde gösterilir.

Kapsayıcı sorguları ve mantıksal bileşenler oluşturma hakkında daha fazla bilgiyi bu yayında bulabilirsiniz.

Stil Sorguları

Kapsayıcı sorgusu spesifikasyonu, üst kapsayıcının stil değerlerini sorgulamanıza da olanak tanır. Bu özellik şu anda Chrome 111'de kısmen uygulanmaktadır. Burada kapsayıcı stillerini uygulamak için CSS özel özelliklerini kullanabilirsiniz.

Aşağıdaki örnekte, kartın arka planını ve gösterge simgesini şekillendirmek için özel özellik değerlerinde depolanan hava durumu özellikleri (ör. yağmurlu, güneşli ve bulutlu) kullanılmaktadır.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Stil sorgularında bu sadece bir başlangıç. Gelecekte, özel özellik değerinin mevcut olup olmadığını belirlemek ve kod tekrarını azaltmak için Boole sorgularımız olacak. Şu anda, değer aralığına göre stil uygulamak için aralık sorguları üzerinde görüşmeler yapıyoruz. Bu sayede, yağmur veya bulut örtüsü olasılığı için yüzde değeri kullanarak burada gösterilen stilleri uygulamak mümkün olur.

Daha fazla bilgi edinmek ve daha fazla demo görmek için stil sorguları hakkındaki blog yayınımıza göz atabilirsiniz.

:has()

Güçlü ve dinamik özelliklerden bahsetmişken, :has() seçici, modern tarayıcılarda kullanıma sunulan en güçlü yeni CSS özelliklerinden biridir. :has() ile, bir üst öğenin belirli alt öğeler içerip içermediğini veya bu alt öğelerin belirli bir durumda olup olmadığını kontrol ederek stiller uygulayabilirsiniz. Bu durumda, artık bir üst seçicimiz var demektir.

Kapsayıcı sorgusu örneğinden yola çıkarak, bileşenleri daha da dinamik hale getirmek için :has() kullanabilirsiniz. Bu örnekte, "yıldız" öğesi içeren bir öğeye gri arka plan, işaretli onay kutusu içeren bir öğeye ise mavi arka plan uygulanıyor.

Ancak bu API yalnızca üst öğe seçimiyle sınırlı değildir. Üst öğe içindeki alt öğeleri de stilize edebilirsiniz. Örneğin, öğede yıldız öğesi varsa başlık kalın olur. Bu işlem .item:has(.star) .title ile gerçekleştirilir. :has() seçicisini kullanarak üst öğelere, alt öğelere ve hatta kardeş öğelere erişebilirsiniz. Bu da her gün yeni kullanım alanları ortaya çıkan, gerçekten esnek bir API'dir.

Daha fazla bilgi edinmek ve diğer bazı demoları incelemek için :has() hakkında bu blog yayınına göz atın.

nth-of söz dizimi

Web platformunda artık daha gelişmiş nth-child seçimi yapılabiliyor. Gelişmiş nth-child söz dizimi, yeni bir anahtar kelime ("of") sağlar. Bu anahtar kelime, An+B'nin mevcut mikro söz dizimini, arama yapılacak daha spesifik bir alt küme ile birlikte kullanmanıza olanak tanır.

Özel sınıfta :nth-child(2) gibi normal nth-child kullanırsanız tarayıcı, özel sınıfın uygulandığı ve aynı zamanda ikinci alt öğe olan öğeyi seçer. Bu, önce tüm .special öğelerini önceden filtreleyen ve ardından bu listeden ikinci öğeyi seçen :nth-child(2 of .special) ile karşıt bir durumdur.

Bu özellik hakkında daha fazla bilgiyi nth-of söz dizimiyle ilgili makalemizde bulabilirsiniz.

text-wrap: balance

Seçiciler ve stil sorguları, stillerimize mantık yerleştirebileceğimiz tek yerler değildir. Tipografi de bunlardan biridir. Chrome 114'ten itibaren, text-wrap özelliğini balance değeriyle kullanarak başlıklarda metin sarmalama dengeleme özelliğini kullanabilirsiniz.

Tarayıcı, metni dengelemek için ek satırlara neden olmayan en küçük genişlik için etkili bir şekilde ikili arama gerçekleştirir ve bir CSS pikselinde (görüntü pikseli değil) durur. Tarayıcı, ikili aramadaki adımları daha da azaltmak için ortalama satır genişliğinin% 80'iyle başlar.

Bu konu hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

initial-letter

Web tipiyle ilgili bir diğer güzel iyileştirme de initial-letter. Bu CSS özelliği, girintili büyük harf stilini daha iyi kontrol etmenizi sağlar.

initial-letter sözde öğesinde :first-letter kullanarak aşağıdakileri belirtirsiniz: Harfin kapladığı satır sayısına göre boyutu. Harfin yerleştirileceği blok kaydırma veya "girinti".

intial-letter kullanımı hakkında daha fazla bilgi için burayı inceleyin.

Dinamik görüntü alanı birimleri

Web geliştiricilerin günümüzde karşılaştığı yaygın sorunlardan biri, özellikle mobil cihazlarda doğru ve tutarlı tam görünüm alanı boyutlandırmasıdır. Geliştirici olarak 100vh (görüntü alanı yüksekliğinin% 100'ü) değerinin "görüntü alanı kadar yüksek ol" anlamına gelmesini istersiniz ancak vh birimi, mobil cihazlarda geri çekilen gezinme çubukları gibi öğeleri hesaba katmadığı için bazen çok uzun olur ve kaydırmaya neden olur.

Bu sorunu çözmek için web platformunda artık aşağıdakiler de dahil olmak üzere yeni birim değerleri sunuyoruz: - En küçük etkin görüntü alanı boyutunu temsil eden küçük görüntü alanı yüksekliği ve genişliği (veya svh ve svw). - En büyük boyutu temsil eden büyük görüntü alanı yüksekliği ve genişliği (lvh ve lvw). - Dinamik görüntü alanı yüksekliği ve genişliği (dvh ve dvw).

Dinamik görüntü alanı birimleri, ek dinamik tarayıcı araç çubukları (ör. üstteki adres veya alttaki sekme çubuğu) görünürken ve görünmüyorken değer olarak değişir.

Bu yeni birimler hakkında daha fazla bilgi için Büyük, küçük ve dinamik görünüm alanı birimleri başlıklı makaleyi inceleyin.

Geniş gama renk alanları

Web platformuna eklenen bir diğer yeni özellik ise geniş renk gamı destekli renk uzaylarıdır. Web platformunda geniş renk gamı kullanıma sunulmadan önce, modern cihazlarda görüntülenebilen canlı renklerle fotoğraf çekebiliyordunuz ancak düğme, metin rengi veya arka planı bu canlı değerlerle eşleştiremiyordunuz.

Ancak artık web platformunda REC2020, P3, XYZ, LAB, OKLAB, LCH ve OKLCH dahil olmak üzere çeşitli yeni renk alanları var. HD Renk Kılavuzu'nda yeni web renk alanları ve daha fazlasıyla tanışın.

Ayrıca, srgb aralığının nerede bittiğini ve daha geniş gamlı renk aralığının nerede başladığını belirten beyaz çizgiyle birlikte, renk aralığının nasıl genişlediğini Geliştirici Araçları'nda hemen görebilirsiniz.

Renk için çok daha fazla araç mevcut. Ayrıca, gradyanla ilgili tüm harika iyileştirmeleri de kaçırmayın. Adam Argyle'ın yeni bir web renk seçici ve gradyan oluşturucu denemenize yardımcı olmak için geliştirdiği yepyeni bir araç bile var. Bu aracı gradient.style adresinde deneyebilirsiniz.

color-mix()

Genişletilmiş renk alanlarını daha da genişleten işlev color-mix()'dir. Bu işlev, karıştırılan renklerin kanallarına göre yeni değerler oluşturmak için iki renk değerinin karıştırılmasını destekler. Karıştırma işlemini yaptığınız renk alanı sonuçları etkiler. oklch gibi daha algısal bir renk uzayında çalışmak, srgb gibi bir renk uzayında çalışmaktan farklı bir renk aralığı kullanır.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

color-mix() işlevi, uzun süredir istenen bir özelliği sunar: opak renk değerlerini korurken bunlara biraz şeffaflık ekleme. Artık bu renklerin farklı opaklıklarda varyasyonlarını oluştururken marka rengi değişkenlerinizi kullanabilirsiniz. Bunu yapmanın yolu, bir rengi şeffafla karıştırmaktır. Markanızın mavi rengini% 10 şeffaflıkla karıştırdığınızda% 90 opaklıkta bir marka rengi elde edersiniz. Bu sayede renk sistemlerini nasıl hızlı bir şekilde oluşturabileceğinizi görebilirsiniz.

Bu özelliği bugün Chrome Geliştirici Araçları'nda stiller bölmesindeki çok güzel bir önizleme Venn şeması simgesiyle kullanabilirsiniz.

Renk karıştırma ile ilgili blog yayınımızda daha fazla örnek ve ayrıntı bulabilir veya bu renk karıştırma deneme alanını deneyebilirsiniz.

CSS Temelleri

Kullanıcılara açıkça fayda sağlayan yeni özellikler oluşturmak denklemin bir parçasıdır ancak Chrome'da kullanıma sunulan özelliklerin çoğu, geliştirici deneyimini iyileştirmeyi ve daha güvenilir ve düzenli bir CSS mimarisi oluşturmayı amaçlar. Bu özellikler arasında CSS iç içe yerleştirme, katmanları basamaklandırma, kapsamlı stiller, trigonometrik fonksiyonlar ve ayrı ayrı dönüştürme özellikleri yer alır.

İç içe yerleştirme

CSS iç içe yerleştirme, Sass'ta sevilen ve yıllardır en çok istenen CSS geliştirici özelliklerinden biri olarak web platformunda kullanıma sunuluyor. İç içe yerleştirme, geliştiricilerin daha kısa ve gruplandırılmış bir biçimde yazmasına olanak tanıyarak gereksiz tekrarları azaltır.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Ayrıca Medya Sorgularını iç içe yerleştirebilirsiniz. Bu da Kapsayıcı Sorgularını iç içe yerleştirebileceğiniz anlamına gelir. Aşağıdaki örnekte, kapsayıcısında yeterli genişlik varsa kart dikey düzenden yatay düzene değiştirilir:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Kapsayıcıda flex düzenlemesi, 480px satır içi alan olduğunda (veya eşit olduğunda) gerçekleşir. Tarayıcı, koşullar karşılandığında bu yeni görüntüleme stilini uygular.

Daha fazla bilgi ve örnek için CSS iç içe yerleştirme hakkındaki yayınımıza göz atın.

Basamaklı katmanlar

Belirlediğimiz bir diğer geliştirici sorunu da hangi stillerin diğerlerinden daha öncelikli olduğunu belirlerken tutarlılık sağlamaktır. Bu sorunu çözmenin bir yolu, CSS sıralaması üzerinde daha iyi kontrol sahibi olmaktır.

Basamaklı katmanlar, kullanıcılara hangi katmanların diğerlerinden daha öncelikli olduğunu kontrol etme olanağı sunarak bu sorunu çözer. Bu sayede, stillerinizin ne zaman uygulanacağı konusunda daha hassas bir kontrol elde edersiniz.

Basamaklı katmanları kullanma hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Kapsamlı CSS

CSS kapsamlı stiller, geliştiricilerin belirli stillerin geçerli olduğu sınırları belirtmesine olanak tanır. Bu sayede, CSS'de doğal ad alanları oluşturulur. Daha önce geliştiriciler, sınıfları yeniden adlandırmak için 3. taraf komut dosyalarından veya stil çakışmasını önlemek için belirli adlandırma kurallarından yararlanıyordu. Ancak yakında @scope kullanabileceksiniz.

Burada, .title öğesini .card ile sınırlıyoruz. Bu, başlık öğesinin sayfadaki diğer .title öğeleriyle (ör. blog yayını başlığı veya başka bir başlık) çakışmasını önler.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Kapsam sınırlarıyla birlikte @scope ve @layer'yi bu canlı demoda görebilirsiniz:

@scope hakkında daha fazla bilgiyi css-cascade-6 spesifikasyonunda bulabilirsiniz.

Trigonometrik fonksiyonlar

Yeni CSS işlevleri arasında, mevcut CSS matematik işlevlerine eklenen trigonometrik işlevler de yer alıyor. Bu işlevler artık tüm modern tarayıcılarda kararlı bir şekilde çalışıyor ve web platformunda daha organik düzenler oluşturmanıza olanak tanıyor. Buna iyi bir örnek olarak, artık sin() ve cos() işlevleri kullanılarak tasarlanıp animasyon eklenebilen bu radyal menü düzeni verilebilir.

Aşağıdaki demoda noktalar, merkezi bir nokta etrafında dönüyor. Her nokta kendi merkezi etrafında döndürülüp dışarı doğru hareket ettirilmek yerine X ve Y eksenlerinde çevrilir. X ve Y eksenlerindeki mesafeler, --angle değerinin sırasıyla cos() ve sin() değerleri dikkate alınarak belirlenir.

Bu konu hakkında daha ayrıntılı bilgi için trigonometrik işlevler hakkındaki makalemize göz atın.

Bağımsız dönüştürme özellikleri

Geliştirici ergonomisi, ayrı dönüştürme işlevleriyle iyileşmeye devam ediyor. Son I/O etkinliğimizden bu yana, tüm modern tarayıcılarda bağımsız dönüşümler kararlı hale geldi.

Geçmişte, bir kullanıcı arayüzü öğesini ölçeklendirmek, döndürmek ve çevirmek için alt işlevler uygulamak üzere dönüştürme işlevini kullanıyordunuz. Bu işlem çok fazla tekrarlama içeriyordu ve özellikle animasyonda farklı zamanlarda birden fazla dönüştürme uygulandığında sinir bozucu oluyordu.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Artık dönüşüm türlerini ayırıp bunları ayrı ayrı uygulayarak CSS animasyonlarınızda tüm bu ayrıntıları kullanabilirsiniz.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Bu sayede, animasyon sırasında farklı zamanlarda farklı değişim oranlarıyla çeviri, döndürme veya ölçeklendirme değişiklikleri aynı anda yapılabilir.

Daha fazla bilgi için bireysel dönüştürme işlevleriyle ilgili bu yayına göz atın.

Özelleştirilebilir Bileşenler

Web platformu aracılığıyla geliştiricilerin temel ihtiyaçlarından bazılarını karşıladığımızdan emin olmak için OpenUI topluluk grubu ile birlikte çalışıyoruz ve başlangıç için üç çözüm belirledik:

1. Etkinlik işleyicileri, bildirimli DOM yapısı ve erişilebilir varsayılan değerlere sahip yerleşik pop-up işlevi.
2. İki öğeyi birbirine bağlayarak sabitleme konumlandırmayı etkinleştirmek için CSS API'si.
3. Bir select'in içindeki içeriğe stil vermek istediğinizde kullanabileceğiniz, özelleştirilebilir bir açılır menü bileşeni.

Pop-up

Popover API, öğelere aşağıdaki gibi bazı yerleşik tarayıcı desteği özellikleri sunar:

• En üst katman için destek sunulur. Bu sayede z-index yönetmeniz gerekmez. Bir popover veya iletişim kutusu açtığınızda bu öğeyi sayfanın üst kısmındaki özel bir katmana taşırsınız.
• auto popover'larında ücretsiz olarak hafif kapatma davranışı. Böylece, bir öğenin dışını tıkladığınızda popover kapatılır, erişilebilirlik ağacından kaldırılır ve odak düzgün şekilde yönetilir.
• Bağlantı dokusunun hedefi ve popover'ın kendisi için varsayılan erişilebilirlik.

Tüm bunlar, bu işlevlerin oluşturulması ve bu durumların izlenmesi için daha az JavaScript yazılması gerektiği anlamına gelir.

Popover'ın DOM yapısı bildirimseldir ve popover öğenize id ve popover özelliği vermek kadar net bir şekilde yazılabilir. Ardından, bu kimliği popover'ı açacak öğeyle (ör. popovertarget özelliği olan bir düğme) senkronize edersiniz:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover, popover=auto için kullanılan bir kısaltmadır. popover=auto içeren bir öğe açıldığında diğer popover'ları zorla kapatır, açıldığında odaklanır ve hafifçe kapatılabilir. Buna karşılık, popover=manual öğeleri başka öğe türlerini zorla kapatmaz, hemen odaklanmaz ve hafifçe kapatılmaz. Açma/kapatma düğmesi veya başka bir kapatma işlemiyle kapatılırlar.

Popover'larla ilgili en güncel dokümanları şu anda MDN'de bulabilirsiniz.

Sabitleme konumu

Açılır pencereler, genellikle belirli öğelere sabitlenmesi gereken iletişim kutuları ve ipuçları gibi öğelerde de sıklıkla kullanılır. Bu etkinlik örneğini ele alalım. Bir takvim etkinliğini tıkladığınızda, tıkladığınız etkinliğin yanında bir iletişim kutusu görünür. Takvim öğesi bağlantı noktası, popover ise etkinlik ayrıntılarını gösteren iletişim kutusudur.

anchor() işlevini kullanarak ortalanmış bir ipucu oluşturabilirsiniz. İpucunu, bağlantının x konumunun% 50'sine yerleştirmek için bağlantıdan alınan genişliği kullanın. Ardından, yerleşim stillerinin geri kalanını uygulamak için mevcut konumlandırma değerlerini kullanın.

Ancak pop-over'ı konumlandırma şeklinize göre pop-over, görünüm alanına sığmazsa ne olur?

Bu sorunu çözmek için sabitleme konumu API'si, özelleştirebileceğiniz yedek konumlar içerir. Aşağıdaki örnekte "top-then-bottom" adlı bir yedek konum oluşturulur. Tarayıcı, ipucunu önce en üste yerleştirmeye çalışır. Bu, görüntü alanına sığmazsa tarayıcı, ipucunu sabitleme öğesinin altına, en alta yerleştirir.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Sabit konumlandırma hakkında daha fazla bilgiyi bu blog yayınında bulabilirsiniz.

<selectmenu>

Hem popover hem de sabitleme konumlandırmasıyla tamamen özelleştirilebilir seçim menüleri oluşturabilirsiniz. OpenUI topluluk grubu, bu menülerin temel yapısını araştırıyor ve içindeki içeriklerin özelleştirilmesine olanak tanımanın yollarını arıyor. Aşağıdaki görsel örnekleri inceleyin:

En soldaki selectmenu örneğini oluşturmak için, takvim etkinliğinde gösterilecek renge karşılık gelen renkli noktalarla birlikte aşağıdaki gibi yazabilirsiniz:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Ayrı mülk geçişleri

Tüm bunların popover'ları sorunsuz bir şekilde geçiş yapabilmesi için web'in ayrı özellikleri animasyonla göstermesi gerekir. Bunlar, geçmişte genellikle animasyon oluşturulamayan özelliklerdir. Örneğin, üst katmana ve display: none'ya animasyon oluşturma.

Popover'lar, selectmenu'lar ve hatta iletişim kutuları veya özel bileşenler gibi mevcut öğeler için güzel geçişler sağlamaya yönelik çalışmalar kapsamında tarayıcılar, bu animasyonları desteklemek için yeni bir altyapı oluşturuyor.

Aşağıdaki popover demosunda, açık durum için :popover-open, açılmadan önceki durum için @starting-style kullanılarak popover'lar animasyonla açılıp kapatılıyor ve açıldıktan sonraki kapalı durum için öğeye doğrudan bir dönüştürme değeri uygulanıyor. Tüm bunların görüntülü reklamlarla çalışması için transition özelliğine aşağıdaki şekilde eklenmesi gerekir:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Etkileşimler

Böylece, web kullanıcı arayüzü özellikleriyle ilgili bu turdaki son durağımız olan etkileşimlere geliyoruz.

Ayrı özelliklerin animasyonunu yapma konusunu ele almıştık. Ancak Chrome'da kaydırmaya dayalı animasyonlar ve görünüm geçişleriyle ilgili bazı heyecan verici API'ler de kullanıma sunuluyor.

Kaydırmaya dayalı animasyonlar

Kaydırmaya dayalı animasyonlar, bir animasyonun oynatılmasını kaydırma kapsayıcısının kaydırma konumuna göre kontrol etmenizi sağlar. Bu durumda, yukarı veya aşağı kaydırdığınızda animasyon ileri ya da geri sarılır. Ayrıca, kaydırmaya dayalı animasyonlarla bir öğenin kaydırma kapsayıcısı içindeki konumuna göre animasyonu da kontrol edebilirsiniz. Bu sayede paralaks arka plan resmi, kaydırma ilerleme çubukları ve görünüme girdikçe ortaya çıkan resimler gibi ilgi çekici efektler oluşturabilirsiniz.

Bu API, bildirim temelli kaydırmaya dayalı animasyonları kolayca oluşturmanıza olanak tanıyan bir dizi JavaScript sınıfını ve CSS özelliğini destekler.

Kaydırma ile CSS animasyonu oluşturmak için yeni scroll-timeline, view-timeline ve animation-timeline özelliklerini kullanın. JavaScript Web Animations API'yi çalıştırmak için ScrollTimeline veya ViewTimeline örneğini Element.animate() işlevine timeline seçeneği olarak iletin.

Bu yeni API'ler, mevcut Web Animations ve CSS Animations API'leriyle birlikte çalışır. Bu nedenle, bu API'lerin avantajlarından yararlanır. Bu animasyonların ana iş parçacığı dışında çalıştırılması da bu kapsamdadır. Evet, doğru okudunuz: Artık yalnızca birkaç satır ek kodla ana iş parçacığından bağımsız olarak çalışan, kaydırma tabanlı ve akıcı animasyonlar oluşturabilirsiniz. Ne kadar da güzel!

Bu kaydırmaya dayalı animasyonları oluşturma hakkında kapsamlı ve ayrıntılı bir kılavuz için lütfen kaydırmaya dayalı animasyonlar hakkındaki bu makaleyi inceleyin.

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

View Transition API, iki durum arasında animasyonlu bir geçiş oluştururken DOM'u tek bir adımda değiştirmeyi kolaylaştırır. Bunlar görünümler arasında basit geçişler olabilir ancak sayfanın bağımsız bölümlerinin nasıl geçiş yapacağını da kontrol edebilirsiniz.

Görünüm geçişleri, aşamalı geliştirme olarak kullanılabilir: DOM'u herhangi bir yöntemle güncelleyen kodunuzu alın ve özelliği desteklemeyen tarayıcılar için geri dönüşle birlikte görünüm geçişi API'sine sarın.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Geçişin nasıl görüneceği CSS üzerinden kontrol edilir.

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Maxi Ferreira'nın bu harika demosunda gösterildiği gibi, bir görünüm geçişi gerçekleşirken oynatılan video gibi diğer sayfa etkileşimleri çalışmaya devam eder.

Görünüm geçişleri şu anda Chrome 111'den itibaren tek sayfalık uygulamalarla (SPA) çalışmaktadır. Çok sayfalı uygulama desteği üzerinde çalışıyoruz. Daha fazla bilgi için tüm süreci adım adım açıklayan görünüm geçişleri kılavuzumuza göz atın.

Sonuç

CSS ve HTML'deki en son yenilikleri developer.chrome.com adresinden takip edebilir, web'deki diğer yenilikler için I/O videolarına göz atabilirsiniz.