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 daha fazla web özelliği ve özelleştirme seçeneği sunuyor.

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

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

The New Responsive

Bazı yeni duyarlı tasarım özellikleriyle başlayalım. Yeni platform özellikleri sayesinde, duyarlı stil bilgileri içeren bileşenlerle mantıksal arayüzler oluşturabilir, sistem özelliklerinden yararlanarak daha doğal bir kullanıcı arayüzü sunan arayüzler oluşturabilir ve kullanıcının, tamamen özelleştirilebilir bir tasarım süreci 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, ü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üntü alanındaki bilgilere erişip bu bilgileri 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 hem birincil gelen kutusu hem de Favoriler kenar çubuğu birer kapsayıcıdır. Bu e-postalardaki e-postalar, kullanılabilir alana göre ızgara düzenlerini ayarlar ve e-posta zaman damgasını gösterir veya gizler. Bu, sayfa içindeki aynı bileşendir ve yalnızca farklı görünümlerde görünür.

Kapsayıcı sorgumuz olduğu için 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 biçimlendirmek için yağmur, güneşli ve bulutlu gibi özel özellik değerlerinde depolanan hava durumu özellikleri 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, bir özel nitelik değerinin mevcut olup olmadığını belirlemek ve kod tekrarını azaltmak için boole sorgularımız olacak. Şu anda, bir değer aralığına göre stil uygulamak için aralık sorguları üzerinde görüşmelerimiz devam ediyor. Bu sayede, yağmur ihtimali veya bulut örtüsü için yüzdelik değer kullanarak burada gösterilen stilleri uygulamak mümkün olur.

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

:has()

Güçlü ve dinamik özelliklerden bahsetmişken, :has() seçicinin modern tarayıcılarda kullanıma sunulan en güçlü yeni CSS özelliklerinden biri olduğunu belirtelim. :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, artık bir üst öğe seçicimiz olduğu anlamına gelir.

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çiciyi 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 olmasını sağlar.

Daha fazla bilgi edinmek ve diğer demoları incelemek için :has() hakkında bu blog yayınını inceleyin.

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şılaştırılabilir.

Bu özellik hakkında daha fazla bilgiyi nth-of söz dizimi ile 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 yapar ve bir CSS pikselinde (görüntü pikseli değil) durur. Tarayıcı, ikili aramada adımları daha da azaltmak için ortalama çizgi genişliğinin% 80'iyle başlar.

Bu özellik 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 başlık stili için daha iyi kontrol sağlar.

:first-letter sözde öğesinde initial-letter özelliğini kullanarak aşağıdakileri belirtebilirsiniz: Harfin kapladığı satır sayısına göre boyutu. Harfin oturacağı yer için harfin blok ofseti veya "sink" değeri.

intial-letter kullanma hakkında daha fazla bilgiyi burada bulabilirsiniz.

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 katmaz. Bu nedenle 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 kullanılıyor: - 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ünüm alanı birimleri, ek dinamik tarayıcı araç çubukları (ör. üstteki adres veya alttaki sekme çubuğu) görünürken ve görünmezken 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üntü alanı birimleri başlıklı makaleyi inceleyin.

Geniş gama renk alanları

Web platformuna eklenen bir diğer önemli yenilik ise geniş gamlı renk alanlarıdır. Geniş gama renkleri web platformunda 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 gibi bir dizi yeni renk alanı 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 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ç da 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 alanında çalışmak, srgb gibi bir renk alanı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. Marka renginiz olan maviyi% 10 şeffaflıkla karıştırdığınızda% 90 opaklıkta bir marka rengi elde edersiniz. Bu sayede renk sistemlerini nasıl hızlıca oluşturabileceğinizi görebilirsiniz.

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

Daha fazla örnek ve ayrıntı için renk karışımıyla ilgili blog yayınımıza göz atın veya bu renk karışımı() deneme alanını deneyin.

CSS'nin Temelleri

Kullanıcılara açıkça avantaj sağlayan yeni özellikler oluşturmak denklemin bir parçasıdır ancak Chrome'da kullanıma sunulan birçok özelliğin amacı, geliştirici deneyimini iyileştirmek ve daha güvenilir ve düzenli bir CSS mimarisi oluşturmaktır. Bu özellikler arasında CSS iç içe yerleştirme, basamaklı katmanlar, 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 nihayet 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 {

  }
}

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 480px satır içi alan olduğunda (veya bu alanla eşit olduğunda) flex için düzen ayarı yapılır. Koşullar karşılandığında tarayıcı 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ğerlerine göre öncelikli olduğunu tutarlı bir şekilde belirlemektir. 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 alanı 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;
  }
}

Bu canlı demoda @scope ile @layer kapsam sınırlamalarını birlikte 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 fonksiyonlar hakkındaki makalemize göz atın.

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

Dönüştürme işlevleri sayesinde geliştirici ergonomisi iyileşmeye devam ediyor. I/O'yu son düzenlediğimizden beri, tüm modern tarayıcılarda tek tek 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şlevleri uygulamak üzere dönüştürme işlevini kullanıyordunuz. Bu işlem çok fazla tekrara yol açıyordu ve özellikle animasyonda farklı zamanlarda birden fazla dönüştürme uygularken 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 hızlarıyla çeviri, döndürme veya ölçekleme 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ılanlarla yerleşik pop-up işlevselliği.
2. İki öğeyi birbirine bağlayarak sabit konumlandırmayı etkinleştirmek için CSS API.
3. Bir select öğesinin içindeki içeriği stilize etmek istediğinizde kullanabileceğiniz, özelleştirilebilir bir açılır menü bileşeni.

Pop-up

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

• En üst katman için destek sunulduğundan 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 yükseltirsiniz.
• 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.
• Pop-over'ın hedefinin ve pop-over'ın kendisinin bağ dokusu 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.

Yerleşke için DOM yapısı bildirimseldir ve yerleşke öğenize id ve popover özelliğini 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 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. Bunun aksine, popover=manual öğeleri başka bir öğe türünü 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

Popover'lar, 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ının genişliğini kullanın. Ardından, yerleşimin geri kalan stillerini uygulamak için mevcut konumlandırma değerlerini kullanın.

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

Bu sorunu çözmek için sabitleme konumlandırma API'si, özelleştirebileceğiniz yedek konumlar içerir. Aşağıdaki örnekte "top-then-bottom" adlı bir yedek konum oluşturuluyor. 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 reklamların konumlandırılması 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 örneklere göz atın:

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 şekilde 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östermenin bir yoluna ihtiyacı var. Bunlar, geçmişte genellikle animasyon oluşturulamayan özelliklerdir. Örneğin, üst katmana ve display: none'ya animasyon oluşturma.

Açılır pencereler, selectmenu'ler 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 mekanizma etkinleştiriyor.

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 sonra kapatılan durum için öğeye doğrudan bir dönüştürme değeri uygulanıyor. Bunun görüntülü reklamlarla çalışması için transition özelliğine aşağıdaki gibi 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 yapmaktan bahsetmiştik. 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 kaydırma kapsayıcısının kaydırma konumuna göre animasyon oynatmayı kontrol etmenize olanak tanır. Bu, yukarı veya aşağı kaydırdığınızda animasyonun ileri ya da geri sarılacağı anlamına gelir. Ayrıca, kaydırmaya dayalı animasyonlarla bir animasyonu, öğenin kaydırma kapsayıcısı içindeki konumuna göre de kontrol edebilirsiniz. Bu sayede paralaks arka plan resmi, kaydırma ilerleme çubukları ve görünüme girdikçe kendini gösteren 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ılabilmesini içerir. 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ştirmenizi 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 sarmalayı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 görünüm geçişleri kılavuzumuzun tamamını inceleyin.

Sonuç

CSS ve HTML'deki en son gelişmeleri developer.chrome.com adresinden takip edebilir, web'deki diğer yenilikler için I/O videolarını inceleyebilirsiniz.