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, her zamankinden daha fazla web özelliği ve özelleştirme özelliğini destekleyen, tarayıcılar arası sıkı bir uyumla kullanıma sunuldu.

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üntü 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
• sabit konumlandırma
• selectmenu
• Ayrı mülk geçişleri
• Kaydırmaya dayalı animasyonlar
• Görünüm geçişleri

The New Responsive

Yeni duyarlı tasarım özelliklerini kullanmaya başlayalım. Yeni platform özellikleri sayesinde, duyarlı stil bilgileri içeren 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ı tercihi sorgularıyla kullanıcının tasarım sürecine dahil olmasını sağlayarak tam özelleştirme imkanı sunabilirsiniz.

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ü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, 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, sayfa içindeki aynı bileşendir ve 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, kendilerine ayrılan alana göre yanıt 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 alan 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ı stilleri uygulamak için CSS özel özelliklerini kullanabilirsiniz.

Aşağıdaki örnekte, kartın arka planını ve gösterge simgesini biçimlendirmek 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. Ayrıca, değer aralığına göre stil uygulamak için aralık sorguları üzerinde çalışıyoruz. Bu sayede, yağmur veya bulut örtüsü olasılığı 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 atın.

: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 öğeleri 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 öğe 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ç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 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 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 özelliği daha ayrıntılı olarak nth-of söz dizimiyle ilgili makalemizde inceleyebilirsiniz.

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ıklar için metin sarmalama dengeleme özelliğini kullanabilirsiniz.

Tarayıcı, metni dengelemek için ek satırlara neden olmayan en küçük genişliği bulmak üzere etkili bir şekilde ikili arama yapar ve bir CSS pikselinde (görüntü pikseli değil) durur. İkili aramadaki adımları daha da azaltmak için tarayıcı, 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 özelliğini :first-letter sözde öğesinde kullanarak şunları belirtebilirsiniz: Harfin kapladığı satır sayısına göre boyutu. Harfin oturacağı yer için harfin blok kayması veya "batması".

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 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üntü alanı birimleri başlıklı makaleyi inceleyin.

Geniş gama renk alanları

Web platformuna eklenen bir diğer önemli yenilik ise geniş gama renk alanlarıdır. Web platformunda geniş gama renkler 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 ç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ı genişleten color-mix() işlevi, 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. 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ıca 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 görebilirsiniz.

Daha fazla örnek ve ayrıntı için renk karıştırma hakkındaki blog yayınımıza göz atın veya bu renk karıştırma deneme alanını deneyin.

CSS Temelleri

Kullanıcılara net avantajlar 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ı 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 kodları 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.

Katmanları basamaklandırma

Belirlediğimiz bir diğer geliştirici sorunu da hangi stillerin diğerlerinden daha öncelikli olduğunu belirlemede 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ğı vererek bu sorunu çözer. Bu da stillerinizin ne zaman uygulanacağı konusunda daha hassas bir kontrol anlamına gelir.

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ına veya stil çakışmasını önlemek için belirli adlandırma kurallarına güveniyordu. Ancak yakında @scope kullanabilirsiniz.

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 özelliklerini bu canlı demoda görebilirsiniz:

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

Trigonometrik fonksiyonlar

Yeni CSS tesisatının bir diğer parçası da mevcut CSS matematik işlevlerine eklenen trigonometrik işlevlerdir. Bu işlevler artık tüm modern tarayıcılarda kararlıdır ve web platformunda daha doğal düzenler oluşturmanıza olanak tanır. Harika bir örnek olarak, sin() ve cos() işlevleri kullanılarak tasarlanıp animasyon eklenebilen bu radyal menü düzenini verebiliriz.

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

Geliştirici ergonomisi, tek tek dönüştürme işlevleriyle iyileşmeye devam ediyor. I/O'yu en son düzenlediğimizden beri, tüm modern tarayıcılarda bireysel 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 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ılara sahip olabilirsiniz.

.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çek 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ıç olarak üç çö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 sabit konumlandırmayı etkinleştirmek için CSS API'si.
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ğıdaki gibi bazı 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 taşırsınız.
• auto popover'larında ücretsiz olarak hafif kapatma davranışı sunulur. Bu sayede, 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.
• Popover'ın hedefinin ve popover'ı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.

Popover'ın DOM yapısı bildirimseldir ve popover öğ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. Buna karşılık, popover=manual öğeleri başka bir öğe türünü zorla kapatmaz, hemen odaklanmaz ve hafifçe kapatılmaz. Bir geçiş 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ş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ı, önce ipucunu üstte konumlandırmaya çalışır. Bu konum görüntü alanına sığmazsa tarayıcı, ipucunu sabitleme öğesinin altında, altta 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);
  }
}

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 selectmenüler 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, 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ı 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 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ı özellikleri canlandırma 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, 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 öğ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 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 Animasyonları API'sini ç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ırmaya dayalı ve ipeksi pürüzsüzlükte 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 tek tek bölümlerinin nasıl geçiş yapacağını da kontrol edebilirsiniz.

Görünüm geçişleri, progresif 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 yedekle 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'lar) çalışmaktadır. Çok sayfalı uygulama desteği üzerinde çalışılmaktadır. Tüm süreç hakkında bilgi edinmek için Görünüm geçişleri kılavuzumuzun tamamını inceleyin.

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.