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

Geçtiğimiz birkaç ay, web kullanıcı arayüzü için altın bir çağın başlangıcını başlattı. Yeni platform özellikleri, her zamankinden daha fazla web özelliğini ve özelleştirme özelliğini destekleyen tarayıcılar arası sıkı bir yaklaşımla benimsenmiştir.

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
• mikro söz diziminin n'incisi
• text-wrap: balance
• initial-letter
• Dinamik görüntü alanı birimleri
• Geniş renk gamı
• color-mix()
• İç içe yerleştirme
• Basamaklı katmanlar
• Kapsamlı stiller
• Trigonometrik fonksiyonlar
• Bağımsız dönüşüm özellikleri
• popover
• sabit konumlandırma
• seçme menüsü
• Ayrı mülk geçişleri
• Kaydırma odaklı animasyonlar
• Geçiş işlemlerini görüntüleme

Yeni Uyumlu

Yeni duyarlı tasarım özelliklerini kullanmaya başlayalım. Yeni platform özellikleri, duyarlı stil bilgilerine sahip bileşenlerle mantıksal arayüzler oluşturmanızı, daha fazla yerel kullanıcı arayüzü sunmak için sistem özelliklerinden yararlanan arayüzler derlemenizi ve tamamen özelleştirilebilirlik için kullanıcının tercih sorguları ile tasarım sürecinin bir parçası olmasını sağlar.

Kapsayıcı Sorguları

Kapsayıcı sorguları kısa süre önce tüm modern tarayıcılarda kararlı hale geldi. Bunlar, bir üst öğenin alt öğelerine uygulanması gereken stilleri belirlemek üzere üst öğenin boyutunu ve stilini sorgulamanıza olanak tanır. Medya sorguları, yalnızca görüntü alanındaki bilgilere erişebilir ve bu bilgilerden yararlanabilir. Diğer bir deyişle, yalnızca bir sayfa düzeninin makro görünümü üzerinde çalışabilirler. Öte yandan, kapsayıcı sorguları, düzenlerde herhangi bir sayıda düzeni veya düzeni 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. İçindeki e-postalar ızgara düzenini ayarlar ve boş alana göre e-posta zaman damgasını gösterir veya gizler. Bu, sayfa içindeki tamamen aynı bileşendir, yalnızca 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, ayrı ayrı ayrılmış alanlarına yanıt verir. Kenar çubuğu daha fazla alan içeren bir üst çubuk haline gelir ve düzenin daha çok birincil gelen kutusuna benzediğini görürüz. Daha az alan olduğunda, her ikisi de sıkıştırılmış biçimde görüntülenir.

Bu yayında kapsayıcı sorguları ve mantıksal bileşen oluşturma hakkında daha fazla bilgi edinebilirsiniz.

Stil Sorguları

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

Aşağıdaki örnekte, kartın arka plan ve gösterge simgesinin stilini belirlemek için özel özellik değerlerinde depolanan hava durumu özellikleri (ör. yağmur, güneşli ve bulutlu) kullanılı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;
 }
}

Bu, stil sorguları için yalnızca başlangıçtır. Gelecekte, bir özel özellik değerinin var 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 çalışıyoruz. Bu, yağmur veya bulut örtüsü olasılığı için bir yüzde değeri kullanılarak burada gösterilen stillerin uygulanmasını mümkün kılar.

Stil sorguları hakkındaki blog yayınımızda daha fazla bilgi edinebilir ve diğer demoları inceleyebilirsiniz.

:has()

Güçlü ve dinamik özelliklerden bahsetmişken :has() seçici, modern tarayıcılardaki en güçlü yeni CSS özelliklerinden biridir. :has() ile bir üst öğenin belirli bir alt öğe içerip içermediğini veya bu alt öğelerin belirli bir durumda olup olmadığını kontrol ederek stilleri uygulayabilirsiniz. Bu, aslında artık bir üst seçicimiz olduğu anlamına gelir.

Kapsayıcı sorgu örneğine dayanarak, bileşenleri daha da dinamik hale getirmek için :has() kullanabilirsiniz. Bu örnekte, "yıldız" öğesi olan bir öğeye gri bir arka plan uygulanır ve işaretli onay kutusu bulunan bir öğenin arka planı mavi olur.

Ancak bu API, üst öğe seçimiyle sınırlı değildir. Ayrıca, üst öğe içindeki alt öğelerin stilini belirleyebilirsiniz. Örneğin, öğede yıldız öğesi varsa başlık kalın harflerle gösterilir. Bu, .item:has(.star) .title ile sağlandı. :has() seçiciyi kullanarak üst öğelere, alt öğelere ve hatta kardeş öğelere erişebilirsiniz. Bu da her gün yeni kullanım alanları ile son derece esnek bir API haline gelir.

Daha fazla bilgi edinin ve diğer demoları keşfedin, :has() hakkındaki bu blog yayınına göz atın.

söz diziminin n'inci

Web platformunda artık daha gelişmiş n'inci-alt öğe seçimi var. Gelişmiş n'inci alt söz dizimi, An+B'nin mevcut mikro söz dizimini, arama yapacağınız daha spesifik bir alt kümeyle birlikte kullanmanıza olanak tanıyan yeni bir anahtar kelime ("of") verir.

Özel sınıfta :nth-child(2) gibi normal n'inci alt öğeleri kullanırsanız tarayıcı, sınıfın özel uygulandığı öğeyi ve ikinci alt öğeyi seçer. Bu, ilk olarak tüm .special öğelerini önceden filtreleyen ve ardından bu listeden ikinci öğeyi seçen :nth-child(2 of .special) ile zıtlıktır.

Söz diziminin n'inci ile ilgili makalemizde bu özelliği daha ayrıntılı şekilde keşfedin.

text-wrap: balance

Stillerimize mantık yerleştirebileceğimiz tek yer seçiciler ve stil sorguları değildir; tipografi ise başka bir türdür. Chrome 114 sürümünden itibaren, balance değerine sahip text-wrap özelliğini kullanarak başlıklar için metin sarmalama dengelemeden yararlanabilirsiniz.

Tarayıcı, metni dengelemek için, fazladan satırlara yol açmayan, en küçük genişlikte ikili program araması yapar ve bir CSS pikselinde durur (pikseli görüntülemez). İkili aramadaki adımları daha da küçültmek için tarayıcı, ortalama çizgi genişliğinin% 80'i ile başlar.

Bu makaleden bu konuyla ilgili daha fazla bilgi edinebilirsiniz.

initial-letter

Web tipografisinde yapılan bir başka güzel iyileştirme de initial-letter. Bu CSS özelliği, araya eklenen açılır kutu stili için size daha iyi kontrol sağlar.

Sözde :first-letter öğesinde şunu belirtmek için initial-letter kullanırsınız: Harfın kaç satır kapladığına bağlı olarak harf boyutu. Mektubun blok ofseti veya "lavabo" olarak belirtilen yer.

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

Dinamik görüntü alanı birimleri

Günümüzde web geliştiricilerinin karşılaştığı yaygın sorunlardan biri, özellikle mobil cihazlarda doğru ve tutarlı tam görüntü alanı boyutlandırmasıdır. Bir geliştirici olarak 100vh öğesinin (görüntü alanı yüksekliğinin% 100'ü) "görüntü alanı kadar uzun" anlamına gelmesini istersiniz ancak vh birimi, mobil cihazlarda gezinme çubuklarının geri çekilmesi gibi şeyleri dikkate almaz. Bu nedenle, bazen öğeler çok uzun hale gelir ve kaydırmaya neden olur.

Bu sorunu çözmek için artık web platformunda aşağıdakiler dahil olmak üzere yeni birim değerlerimiz bulunuyor: - Etkin görüntü alanının en küçük 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).

Üstteki adres veya alttaki sekme çubuğu gibi ek dinamik tarayıcı araç çubukları görünür olduğunda ve görünmedikleri zaman dinamik görüntü alanı birimlerinin değeri 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 bölümünü okuyun.

Geniş gam renk alanları

Web platformuna eklenen bir başka yeni anahtar da geniş renk alanlarıdır. Web platformunda geniş renk gamı kullanıma sunulmadan önce canlı renklere sahip, modern cihazlarda görüntülenebilen fotoğraflar çekebiliyordunuz ancak bu canlı değerlere uygun bir düğme, metin rengi veya arka plan bulamıyordunuz.

Ancak artık web platformunda REC2020, P3, XYZ, LAB, OKLAB, LCH ve OKLCH dahil yeni renk alanları bulunuyor. HD Renk Rehberi'nde yeni web renk alanları ve daha fazlasıyla tanışın.

DevTools'da renk aralığının nasıl genişlediğini, srgb aralığının bittiği ve daha geniş renk gamının başladığı yeri gösteren beyaz çizgiyle hemen görebilirsiniz.

Renk için kullanabileceğiniz çok daha fazla araç var. Tüm harika gradyan iyileştirmelerini de kaçırmayın. Adam Argyle'ın, yeni bir web renk seçiciyi ve renk geçişi oluşturucuyu denemenize yardımcı olmak için geliştirdiği yepyeni bir araç bile var. Bu aracı gradient.style adresinde deneyebilirsiniz.

renk-mix()

Genişletilmiş renk alanlarında genişletme color-mix() işlevidir. Bu işlev, karıştırılan renklerin kanallarına dayalı olarak yeni değerler oluşturmak için iki renk değerinin karıştırılmasını destekler. Karıştırdığınız renk alanı sonuçları etkiler. Oklch gibi daha algılanabilir bir renk alanında çalışırken srgb'ye göre farklı bir renk aralığı kullanılı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 katabilme özelliği. Artık markanızın renk değişkenlerini kullanarak bu renklerin farklı opaklıklarda varyasyonlarını oluşturabilirsiniz. Bunu yapmanın yolu, bir rengi şeffafla karıştırmaktır. Markanızın rengini mavi ile% 10 şeffaf arasında karıştırdığınızda, %90 opak bir marka rengi elde edersiniz. Bunun hızlı bir şekilde renk sistemleri oluşturmanızı nasıl sağladığını görebilirsiniz.

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

Color-mix hakkındaki blog yayınımızda daha fazla örnek ve ayrıntı görebilir veya bu color-mix() playground özelliğini deneyebilirsiniz.

CSS Temelleri

Net kullanıcı kazanımları sağlayan yeni özellikler oluşturmak denklemin bir parçasıdır, ancak Chrome'da kullanıma sunulan özelliklerin birçoğu geliştirici deneyimini iyileştirmenin yanı sıra daha güvenilir ve düzenli CSS mimarisi oluşturmayı hedefler. Bu özellikler arasında CSS iç içe yerleştirme, basamak katmanları, kapsamlı stiller, trigonometrik işlevler ve bağımsız dönüştürme özellikleri bulunur.

İç içe yerleştirme

Sass'ın çok sevdiği ve yıllardır en çok talep gören CSS geliştiricilerinden biri olan CSS iç içe yerleştirme özelliği sonunda web platformuna geliyor. İç içe aktarma, geliştiricilerin artıkları azaltan daha kısa ve öz, gruplandırılmış bir biçimde yazmalarına olanak tanır.

.card {}
.card:hover {}

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

  }
}

Medya Sorgularını da iç içe yerleştirebilirsiniz. Böylece Kapsayıcı Sorgularını da iç içe yerleştirebilirsiniz. Aşağıdaki örnekte, kapsayıcıda yeterli genişlik olması halinde kart dikey düzenden yatay düzene değiştirilmektedir:

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

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

Düzenin flex olarak ayarlanması, kapsayıcıda daha fazla (veya eşit değerde) 480px satır içi alan 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 ile ilgili yayınımıza göz atın.

Katmanları basamakla

Geliştiriciler için belirlediğimiz bir başka sorun da, stillerin diğerlerine karşı kazandığı tutarlılıktır. Bu sorunu çözmenin bir parçası da CSS basamakları üzerinde daha iyi kontrole sahip olmaktır.

Basamaklı katmanlar, kullanıcılara hangi katmanların diğerlerinden daha yüksek önceliğe sahip olduğunu kontrol ederek, yani stillerinizin ne zaman uygulanacağına ilişkin daha hassas bir kontrol olanağı sunarak bu sorunu çözer.

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

Kapsamlı CSS

CSS kapsamlı stiller, geliştiricilerin belirli stillerin uygulanacağı sınırları belirtmesine olanak tanıyarak temelde CSS'de yerel ad ilerleme hızını oluşturur. Daha önce geliştiriciler, sınıfları yeniden adlandırmak için 3. taraf komut dosyalarını veya stil çakışmasını önlemek için belirli adlandırma kurallarını kullanıyordu. Ancak çok geçmeden @scope kullanıma sunuldu.

Burada, bir .title öğesini .card için kapsamına alıyoruz. Bu, söz konusu başlık öğesinin sayfadaki blog yayını başlığı veya başka bir başlık gibi diğer .title öğeleriyle çakışmasını engeller.

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

Bu canlı demoda, @layer ile birlikte kapsam oluşturma sınırlarıyla birlikte @scope öğesini görebilirsiniz:

css-cascade-6 spesifikasyonunda @scope hakkında daha fazla bilgi edinebilirsiniz.

Trigonometrik fonksiyonlar

Yeni CSS tesisatının bir diğer parçası da mevcut CSS matematik fonksiyonlarına eklenen trigonometrik fonksiyonlardır. Bu işlevler artık tüm modern tarayıcılarda kararlı durumdadır ve web platformunda daha organik düzenler oluşturmanıza olanak tanır. Bunun güzel bir örneği, artık sin() ve cos() işlevlerini kullanarak tasarlayıp animasyon oluşturmak mümkün olan bu dairesel menü düzenidir.

Aşağıdaki demoda noktalar bir merkez noktasının etrafında dönüyor. Her bir noktayı kendi merkezi etrafında döndürüp sonra dışa doğru hareket ettirmek yerine, her bir nokta X ve Y eksenlerinde çevrilir. X ve Y eksenleri üzerindeki mesafeler, sırasıyla cos() ve sin() değerleri dikkate alınarak belirlenir.--angle

Bu konuda daha ayrıntılı bilgi edinmek için trigonometrik fonksiyonlar hakkındaki makalemizi inceleyin.

Bağımsız dönüşüm özellikleri

Geliştiricinin ergonomisi, bağımsız dönüştürme işlevleriyle gelişmeye devam etmektedir. Son I/O etkinliğimizden bu yana, bağımsız dönüşümler tüm modern tarayıcılarda istikrarlı şekilde devam etti.

Eskiden, bir kullanıcı arayüzü öğesini ölçeklendirmek, döndürmek ve çevirmek üzere alt fonksiyonlar uygulamak için dönüştürme işlevinden yararlanıyordunuz. Bu yöntem çok fazla tekrar gerektiriyordu ve özellikle animasyonun farklı anlarında birden fazla dönüşüm uygularken can sıkıcıydı.

.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ırarak ve bunları tek tek uygulayarak CSS animasyonlarınızda tüm bu ayrıntıları elde edebilirsiniz.

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

.target:hover {
  scale: 2;
}

Bu sayede çevirme, döndürme veya ölçekle ilgili değişiklikler, animasyon sırasında farklı zamanlarda ve farklı değişim hızlarında eş zamanlı olarak gerçekleşebilir.

Daha fazla bilgi için bağımsız dönüştürme işlevleriyle ilgili bu gönderiye bakın.

Özelleştirilebilir Bileşenler

Bazı önemli geliştirici ihtiyaçlarını web platformu üzerinden giderdiğimizden emin olmak için OpenUI topluluk grubuyla çalışıyoruz ve başlangıç olarak üç çözüm belirledik:

1. Etkinlik işleyicileri, bildirim temelli DOM yapısı ve erişilebilir varsayılanları içeren yerleşik pop-up işlevselliği.
2. Çapa konumlandırmasını sağlamak için iki öğeyi birbirine bağlayan bir CSS API.
3. Belirli bir bölümün içindeki içeriğin stilini ayarlamak istediğinizde kullanabileceğiniz özelleştirilebilir bir açılır menü bileşeni.

Pop-up

Popover API'sı, öğelere tarayıcı desteğinde yerleşik olarak bulunan sihirli bir dokunuş sağlar. Örneğin:

• Üst katman desteği sayesinde z-index hizmetini yönetmeniz gerekmez. Bir pop-up veya iletişim kutusu açtığınızda, bu öğeyi sayfanın üst kısmındaki özel bir katmanda tanıtmış olursunuz.
• auto pop-up'larında ücretsiz olarak ışık kapatma davranışı. Böylece, bir öğenin dışını tıkladığınızda pop-up pencere kapatılır, erişilebilirlik ağacından kaldırılır ve odak düzgün şekilde yönetilir.
• Pop-over hedefinin bağ dokusu ve pop-up'ın kendisi için varsayılan erişilebilirlik.

Tüm bunlar, tüm bu işlevselliği oluşturmak ve bu durumların tümünü izlemek için daha az JavaScript yazılması gerektiği anlamına gelir.

Pop-up için DOM yapısı bildirim temellidir ve popover öğenize bir id ve popover özelliği vermek kadar net bir şekilde yazılabilir. Ardından bu kimliği, popovertarget özelliğine sahip bir düğme gibi pop-up'ı açacak öğeyle senkronize edersiniz:

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

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

popover, popover=auto kelimesinin kısaltmasıdır. popover=auto içeren bir öğe, açıldığında diğer pop-up'ları zorla kapatır, açıldığında odağı alır ve ışığı kapanabilir. Buna karşılık, popover=manual öğeleri diğer öğe türlerini zorla kapatmaz, odağı hemen almaz ve ışık kapatılmaz. Bir düğmeyle veya başka bir kapatma işlemiyle kapanıyor.

Pop-up'larla ilgili en güncel belgeler şu anda MDN'de bulunabilir.

Çapa konumlandırma

Pop-up'lar, genellikle belirli öğelere sabitlenmesi gereken iletişim kutuları ve araç ipuçları gibi öğelerde de sıklıkla kullanılır. Aşağıdaki 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 sabittir ve pop-up, etkinlik ayrıntılarını gösteren iletişim kutusudur.

anchor() işleviyle ortalanmış bir ipucu oluşturabilirsiniz. Bunun için bağlayıcının genişliğini kullanarak ipucunu sabitin x konumunun% 50'sine konumlandırabilirsiniz. Ardından, yerleşim stillerinin geri kalanını uygulamak için mevcut konumlandırma değerlerini kullanın.

Peki, pop-up'ı konumlandırma şeklinize bağlı olarak görüntü alanına sığmazsa ne olur?

Bu sorunu çözmek için çapa konumlandırma API'si, özelleştirebileceğiniz yedek konumları içerir. Aşağıdaki örnekte, "üst-ardından-alt" adlı bir yedek konum oluşturulmaktadır. Tarayıcı, ilk olarak ipucunu en üste yerleştirmeye çalışır. Bu, görüntü alanına sığmazsa en alttaki sabitleme öğesinin altına konumlandırır.

.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);
  }
}

Bu blog yayınında çapa konumlandırma hakkında daha fazla bilgi edinin.

<selectmenu>

Hem pop-over hem de sabit konumlandırmayla tamamen özelleştirilebilir seçim menüleri oluşturabilirsiniz. OpenUI topluluk grubu bir süredir bu menülerin temel yapısını araştırıyor ve içlerindeki içeriklerin özelleştirilebilmesini sağlamanın yollarını arıyor. Aşağıdaki görsel örnekleri ele alalım:

En soldaki selectmenu örneğini, takvim etkinliğinde gösterilecek renge karşılık gelen renkli noktalarla oluşturmak için 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ık mülk geçişleri

Tüm bunların pop-up'ları sorunsuz bir şekilde içeri ve dışarı aktarması için web'in, ayrı özellikleri canlandırabilmesi için bir yönteme ihtiyacı vardır. Bunlar, geçmişte üst katmana doğru ve üst katmandan animasyon yapmak ve display: none ile çıkış yapmak gibi genellikle animasyon oluşturulamayan özelliklerdir.

Pop-up'lar, seçili menüler ve hatta iletişim kutuları ya da özel bileşenler gibi mevcut öğeler için hoş geçişler sağlama çalışmasının bir parçası olarak tarayıcılar, yeni su tesisatının bu animasyonları desteklemesini sağlıyor.

Aşağıdaki pop-up demosu, açık durum için :popover-open, açılmadan önce durum için @starting-style ise giriş ve çıkış durumu için pop-up'ları canlandırır ve açıldıktan sonra durumu için doğrudan öğeye bir dönüşüm değeri uygular. Tüm bunların görüntülü reklam ile çalışabilmesi için aşağıdaki gibi transition özelliğine 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

Bu da bizi, web kullanıcı arayüzü özellikleriyle ilgili bu son durak olan etkileşimlere getiriyor.

Ayrı özelliklerin animasyon uygulamasından daha önce bahsettik, ancak Chrome'da kaydırmaya dayalı animasyonlar ve görünüm geçişleriyle ilgili bazı heyecan verici API'ler de var.

Kaydırmayla çalışan animasyonlar

Kaydırma odaklı animasyonlar, kaydırma kapsayıcısının kaydırma konumuna göre bir animasyonun oynatılmasını kontrol etmenizi sağlar. Bu, siz yukarı veya aşağı kaydırdığınızda animasyonun ileriye veya geriye doğru ilerleyeceği anlamına gelir. Ayrıca, kaydırmaya dayalı animasyonlarda, bir öğenin kaydırma kapsayıcısı içindeki konumuna göre animasyonu da kontrol edebilirsiniz. Bu, paralaks arka plan resmi, kaydırma ilerleme çubukları ve görünüme giren resimler gibi ilginç efektler oluşturmanıza olanak sağlar.

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

Kaydırarak bir 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 Element.animate() öğesine timeline seçeneği olarak ScrollTimeline veya ViewTimeline örneği iletin.

Bu yeni API'ler mevcut Web Animasyonları ve CSS Animasyonları API'leriyle birlikte çalıştığından bu API'lerin avantajlarından yararlanır. Bu, bu animasyonların ana iş parçacığının dışında tutulmasını sağlayabilmeyi de içerir. Evet, doğru okuma: Sadece birkaç satır ekstra kodla artık kaydırma ile yönlendirilen, ana iş parçacığının dışında kalan akıcı animasyonlarınız olabilir. Beğenmedim ne dersiniz?

Kaydırmaya dayalı bu animasyonların nasıl oluşturulacağıyla ilgili kapsamlı bir kılavuz için lütfen kaydırma tabanlı animasyonlarla ilgili bu makaleye bakın.

Geçişleri göster

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

Görüntüleme Geçişleri, Progresif Geliştirme olarak kullanılabilir: DOM'u hangi yöntemle güncelleyen kodunuzu alın ve özelliği desteklemeyen tarayıcılar için bir yedeğiyle görünüm geçiş API'sının içine yerleştirin.

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ünmesi gerektiğ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, oynatılan video gibi diğer sayfa etkileşimleri, Görüntüleme Geçişi gerçekleşirken çalışmaya devam ediyor.

Görünüm Geçişleri şu anda Chrome 111'deki Tek Sayfalı Uygulamalar (SPA'lar) ile çalışmaktadır. Birden fazla sayfalı uygulama desteği üzerinde çalışıyoruz. Daha fazla bilgi edinmek için görünüm geçiş kılavuzumuzun tamamını inceleyin.

Sonuç

CSS ve HTML'deki en son açılışları developer.chrome.com adresinden takip edin ve diğer web açılışları için I/O videolarını izleyin.