Bu sayfa, Cloud Translation API ile çevrilmiştir.

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ğa girdik. Yeni platform özellikleri, her zamankinden daha fazla web özelliğini ve özelleştirme özelliğini destekleyen sıkı tarayıcılar arası kullanımla 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:

Kapsayıcı sorguları
Stil sorguları
:has() seçici
nth-of mikrosöz dizimi
text-wrap: balance
initial-letter
Dinamik görüntü alanı birimleri
Geniş renk gamına sahip renkler
color-mix()
İç içe yerleştirme
Katmanları basamaklandırma
Kapsamlı stiller
Trigonometrik fonksiyonlar
Bağımsız dönüşüm özellikleri
popover
anchor positioning
selectmenu
Ayrı mülk geçişleri
Kaydırmayla çalışan animasyonlar
Geçişleri görüntüleme

Yeni Duyarlı

Yeni duyarlı tasarım özelliklerinden bazılarını inceleyelim. Yeni platform özellikleri, duyarlı stil bilgilerine sahip bileşenlerle mantıksal arayüzler oluşturmanıza, daha doğal bir his veren kullanıcı arayüzleri sunmak için sistem özelliklerinden yararlanan arayüzler oluşturmanıza ve tam bir özelleştirme imkanı sunan kullanıcı tercih sorgularıyla kullanıcıyı tasarım sürecinin bir parçası haline getirmenize olanak sağlar.

Kapsayıcı Sorguları

Tarayıcı desteği

Kaynak

Kapsayıcı sorguları kısa süre önce tüm modern tarayıcılarda kararlı hale geldi. Bu işlevler, alt öğelerine uygulanacak stilleri belirlemek için bir ü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. Yani yalnızca bir sayfa düzeninin makro görünümünde çalışabilirler. Öte yandan kapsayıcı sorguları, herhangi bir sayıda düzeni veya düzen içindeki düzenleri destekleyebilecek daha hassas bir araçtır.

Aşağıdaki gelen kutusu örneğinde Birincil Gelen Kutusu ve Favoriler kenar çubuğunun her ikisi de kapsayıcıdır. İçlerindeki e-postalar, ızgara düzenlerini ayarlar ve e-posta zaman damgasını mevcut alana göre gösterir veya gizler. Bu, sayfadaki bileşenin aynısıdır ancak 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 ayrı ayrı ayrılmış alanlarına göre tepki verir. Kenar çubuğu, daha fazla alana sahip bir üst çubuk haline gelir ve düzenin birincil gelen kutusuna daha çok benzediğini görürüz. Alan daha az olduğunda her ikisi de sıkıştırılmış biçimde gösterilir.

adlı kaleme göz atın.

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

Stil Sorguları

Tarayıcı desteği

Kaynak

Kapsayıcı sorgu spesifikasyonu, bir ü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. Bu sürümde, kapsayıcı stilleri uygulamak için CSS özel özelliklerini kullanabilirsiniz.

Aşağıdaki örnekte, kartın arka planına ve gösterge simgesine stil vermek için özel özellik değerlerinde depolanan yağmur, güneşli ve bulutlu gibi 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;
 }
}

Hava durumu kartları demosu.

Bu, stil sorguları için yalnızca başlangıçtır. Gelecekte, özel bir özellik değerinin olup olmadığını belirlemek ve kod tekrarını azaltmak için mantıksal sorgular kullanacağız. Şu anda, bir dizi değere göre stil uygulamak için aralık sorguları üzerinde tartışıyoruz. Bu sayede, yağmur veya bulut örtüsü olasılığı için yüzdelik değer kullanılarak burada gösterilen stiller uygulanabilir.

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

`:has()`

Tarayıcı desteği

Kaynak

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

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

Demo'nun ekran görüntüsü

Ancak bu API, üst öğe seçimiyle sınırlı değildir. Üst öğedeki alt öğelere de stil uygulayabilirsiniz. Örneğin, öğede yıldız öğesi varsa başlık kalın harflerle yazılır. 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 sayede, her gün yeni kullanım alanları ortaya çıkan gerçekten esnek bir API elde edersiniz.

Not: Büyük DOM ağaçlarında oluşturma performansındaki yavaşlamaları önlemek için bu seçicinin kapsamını mümkün olduğunca yakın tutmanızı öneririz. Örneğin, kök html öğesinde eşleşmeleri kontrol etmek için :has() kullanmak, bir gezinme çubuğunda veya daha küçük bir ağaca sahip bir kart öğesinde eşleşmeleri kontrol etmekten daha yavaş olur.

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

nth-of söz dizimi

Tarayıcı Desteği

Web platformunda artık n. çocuk seçimi için daha gelişmiş seçenekler mevcuttur. Gelişmiş n. alt öğe söz dizimi, arama yapılacak daha spesifik bir alt kümeyle An+B'nin mevcut mikro söz dizimini kullanmanıza olanak tanıyan yeni bir anahtar kelime ("of") sağlar.

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

Bu özelliği daha ayrıntılı olarak incelemek için n. sıradaki ifade söz dizimine ilişkin makalemizi inceleyin.

`text-wrap: balance`

Stillerimize mantık yerleştirebileceğimiz tek yerler seçici ve stil sorguları değildir. Yazı tipi de bunlardan biridir. Chrome 114'ten itibaren, balance değerine sahip text-wrap mülkünü kullanarak başlıklar için metin kaydırma dengelemeyi kullanabilirsiniz.

Demoyu deneyin

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 pikseli (görüntü pikseli değil) üzerinde durur. İkili program aramasındaki adımları daha da küçültmek için tarayıcı, ortalama çizgi genişliğinin% 80'i ile başlar.

Demoyu deneyin

Bu makaleden daha fazla bilgi edinebilirsiniz.

`initial-letter`

Tarayıcı desteği

Kaynak

Web tipografisinde yapılan bir diğer olumlu iyileştirme initial-letter. Bu CSS özelliği, iç içe yerleştirilmiş büyük harf stili üzerinde daha fazla kontrol sahibi olmanızı sağlar.

:first-letter sözde öğesinde initial-letter'ü kullanarak şunları belirtirsiniz: Harfin, kapladığı satır sayısına göre boyutu. Harfin yerleştirileceği blok ofseti veya "çukur".

göz atın.

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

Dinamik görüntü alanı birimleri

Tarayıcı desteği

Web geliştiricilerinin günümüzde karşılaştığı yaygın sorunlardan biri, özellikle mobil cihazlarda tam ekran boyutunu doğru ve tutarlı bir şekilde ayarlama sorunudur. Geliştirici olarak, 100vh parametresinin (görüntü alanı yüksekliğinin% 100'ü) "görüntü alanı kadar yüksek" olmasını istersiniz ancak vh birimi, mobil cihazlarda gezinme çubuklarını geri çekme gibi şeyleri hesaba katmaz. Bu nedenle bazen çok uzun olur ve kaydırmaya neden olur.

Çok fazla kaydırma çubuğu gösteriliyor

Bu sorunu çözmek için artık web platformunda aşağıdakiler gibi yeni birim değerlerimiz vardır: - 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 geniş 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, üstteki adres veya alttaki sekme çubuğu gibi ek dinamik tarayıcı araç çubukları görünür ve görünmezken değer olarak değişir.

Yeni ekran alanı birimleri görselleştirildi

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 okuyun.

Geniş renk alanı

Tarayıcı desteği

Kaynak

Web platformuna eklenen bir diğer önemli özellik de geniş renk gamına sahip renk alanlarıdır. Web platformunda geniş renk yelpazesi kullanıma sunulmadan önce, modern cihazlarda görüntülenebilen canlı renkler içeren bir fotoğraf çekebiliyordunuz ancak bu canlı değerlerle eşleşen bir düğme, metin rengi veya arka plan seçemiyordunuz.

Geniş ve dar renk gamları arasında geçiş yapan bir dizi resim gösterilir. Bu resimler, renk canlılığını ve etkilerini gösterir.
Siz de deneyin

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

Yeni renk alanlarının her birinin ilişkisini ve boyutunu göstermeye yardımcı olmak için farklı renklerde beş tane üst üste yığılmış üçgen.

Renk aralığının nasıl genişlediğini DevTools'ta hemen görebilirsiniz. Bu beyaz çizgi, srgb aralığının nerede bittiğini ve daha geniş renk aralığının nerede başladığını gösterir.

Renk seçicide bir gamut çizgisini gösteren Geliştirici Araçları.

Renk için çok daha fazla araç mevcuttur. Eklenen harika degrade iyileştirmelerini de kaçırmayın. Adam Argyle, yeni bir web renk seçici ve gradyan oluşturucuyu denemenize yardımcı olmak için yepyeni bir araç bile geliştirdi. Bu aracı gradient.style adresinden deneyebilirsiniz.

color-mix()

Tarayıcı desteği

Kaynak

Genişletilmiş renk alanlarına genişletmek color-mix() işlevidir. 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ırdığınız renk alanı sonuçları etkiler. oklch gibi daha algısal bir renk uzayında çalışmak, srgb gibi bir şeyden farklı bir renk aralığında çalışı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);

Her biri farklı sonuçlar veren 7 renk alanı (srgb, doğrusal-srgb, lch, oklch, lab, oklab, xyz) gösterilmektedir. Çoğu pembe veya mor, çok azı hâlâ mavi. — Demoyu deneyin

color-mix() işlevi, uzun zamandır istenen bir özelliği sunar: opak renk değerlerini korurken bunlara biraz şeffaflık ekleme olanağı. Artık marka renk değişkenlerinizi, bu renklerin farklı opaklıklarda varyantlarını oluştururken kullanabilirsiniz. Bunu yapmanın yolu, bir rengi şeffafla karıştırmaktır. Mavi marka renginizi %10 şeffafla karıştırdığınızda %90 opak bir marka rengi elde edersiniz. Bu sayede renk sistemlerini hızlı bir şekilde oluşturabilirsiniz.

belgesine göz atın.

Bunu Chrome Geliştirici Araçları'ndaki stiller bölmesinde çok güzel bir önizleme venn şeması simgesiyle çalışırken görebilirsiniz.

Venn şeması renk karışımı simgesini içeren DevTools ekran görüntüsü

Daha fazla örnek ve ayrıntı için color-mix işleviyle ilgili blog yayınımızı inceleyin veya bu color-mix() alanını deneyin.

adlı kaleme göz atın.

CSS Temelleri

Kullanıcılar için net kazanımlar sağlayan yeni özellikler geliştirmek denklemin bir parçasıdır. Ancak Chrome'a eklenen ö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, kademeli katmanlar, kapsamlı stiller, trigonometrik işlevler ve bağımsız dönüşüm özellikleri yer alır.

İç içe yerleştirme

Tarayıcı Desteği

Kaynak

CSS iç içe yerleştirme, Sass'ta kullanıcıların sevdiği ve CSS geliştiricilerinin yıllardır en çok istediği özelliklerden biri olarak nihayet web platformuna geliyor. İç içe yerleştirme, geliştiricilerin gereksiz tekrarları azaltan daha kısa ve 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. Bu, kapsayıcı sorgularını da iç içe yerleştirebileceğiniz anlamına gelir. Aşağıdaki örnekte, kapsayıcısında yeterli genişlik varsa bir kart dikey düzenden yatay düzene geçirilir:

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

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

flex için düzen ayarı, kapsayıcıda 480px satır içi alan bulunduğunda (veya 480px'a 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 konulu makalemizi inceleyin.

Katmanları basamakla

Tarayıcı desteği

Kaynak

Tespit ettiğimiz bir diğer geliştirici sorunu, hangi stillerin diğerlerinden daha iyi performans gösterdiği konusunda tutarlılık sağlamaktır. Bu sorunu çözmenin bir yolu da CSS basamağı üzerinde daha iyi kontrol sahibi olmaktır.

Dizi katmanları, kullanıcılara hangi katmanların diğerlerinden daha yüksek önceliğe sahip olduğu konusunda kontrol vererek bu sorunu çözer. Bu sayede, stillerinizin ne zaman uygulanacağı konusunda daha hassas kontrol sahibi olabilirsiniz.

Cascade Görseli

Codepen Projesi ekran görüntüsü — Codepen'deki projeyi keşfedin.

Basamaklandırılmış katmanları kullanma hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

Kapsamlı CSS

Tarayıcı Desteği

Kaynak

CSS kapsamlı stiller, geliştiricilerin belirli stillerin geçerli olduğu sınırları belirtmesine olanak tanır ve temel olarak CSS'de yerel ad alanları 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 yakında @scope'ü kullanabileceksiniz.

Burada, bir .title öğesini .card olarak kapsamlı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;
  }
}

Şu canlı demoda, @layer ile birlikte kapsam sınırlarının gösterildiği @scope öğesini görebilirsiniz:

Demodaki kartın ekran görüntüsü

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

Trigonometrik fonksiyonlar

Tarayıcı desteği

Kaynak

Mevcut CSS matematik işlevlerine eklenen trigonometrik işlevler de yeni CSS altyapısı kapsamındadır. 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. En iyi örneklerden biri de artık sin() ve cos() işlevleriyle tasarlanıp canlandırılabilen bu dairesel menü düzenidir.

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

göz atın.

Bu konu hakkında daha ayrıntılı bilgi için trigonometrik işlevler hakkındaki makalemizi inceleyin.

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

Tarayıcı Desteği

Kaynak

Geliştirici ergonomisi, bağımsız dönüştürme işlevleriyle iyileşmeye devam ediyor. I/O'yu son kez düzenlediğimizden bu yana, tekil dönüştürme işlemleri tüm modern tarayıcılarda 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 transform işlevini kullanıyordunuz. Bu işlem çok fazla tekrar gerektiriyordu ve özellikle animasyonda farklı zamanlarda birden fazla dönüşüm uygulandığında can sıkıcı 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ı tek tek uygulayarak CSS animasyonlarınızda tüm bu ayrıntıları görebilirsiniz.

.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ında aynı anda kaydırma, döndürme veya ölçek değişiklikleri yapılabilir.

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

Özelleştirilebilir Bileşenler

Web platformu üzerinden geliştiricilerin temel ihtiyaçlarının bazılarını karşılayabilmek için OpenUI topluluk grubuyla birlikte çalışıyoruz ve başlangıç için üç çözüm belirledik:

Etkinlik işleyicileri, açıklayıcı DOM yapısı ve erişilebilir varsayılan değerler içeren yerleşik pop-up işlevi.
Bağlantı metni konumlandırmasını etkinleştirmek için iki öğeyi birbirine bağlayan bir CSS API.
Bir seçim içindeki içeriğe stil uygulamak istediğiniz durumlarda kullanabileceğiniz özelleştirilebilir açılır menü bileşeni.

Pop-up API, öğelere bazı yerleşik tarayıcı desteği özellikleri sunar. Örneğin:

Üst katman desteği sayesinde z-index'yi yönetmeniz gerekmez. Bir pop-up'ı veya iletişim kutusunu açtığınızda bu öğeyi sayfanın üst kısmındaki özel bir katmana yükseltmiş olursunuz.
auto pop-up'larında ücretsiz olarak hafif kapatma davranışı. Böylece, bir öğenin dışındaki yeri tıkladığınızda pop-up 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 bu işlevleri oluşturmak ve tüm bu durumları izlemek için daha az JavaScript yazılması gerekir.

Pop-up örneği

Popover'ın DOM yapısı açıklayıcıdır ve popover öğenize id ve popover özelliğini eklemek kadar net bir şekilde yazılabilir. Ardından bu kimliği, pop-up'ı açacak öğeyle (ör. popovertarget özelliğine sahip 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 pop-up'ları zorla kapatır, açıldığında odağı alır ve hafifçe kapatılabilir. Buna karşılık, popover=manual öğeleri diğer öğe türlerini zorla kapatmaz, hemen odaklanmaz ve hafifçe kapatılmaz. Açma/kapatma düğmesi veya başka bir kapatma işlemiyle kapanır.

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

Sabitleme konumlandırması

Pop-up'lar ayrıca iletişim kutuları ve ipuçları gibi, genellikle belirli öğelere bağlanması gereken öğelerde de kullanılır. Aşağıdaki etkinliği örnek olarak 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 ankrajdır ve pop-up, etkinlik ayrıntılarını gösteren iletişim kutusudur.

anchor() işlevini kullanarak, sabitlemenin x konumunun %50'sinde konumlandırmak için sabitlemeden itibaren genişliği kullanarak merkezlenmiş bir ipucu oluşturabilirsiniz. Ardından, yerleşim stillerinin geri kalanını uygulamak için mevcut konumlandırma değerlerini kullanın.

Ancak pop-up, konumlandırdığınız şekilde görüntü alanına sığmazsa ne olur?

popover görüntü alanının dışına çıkıyor

Bu sorunu çözmek için sabitleme konumlandırma API'si, özelleştirebileceğiniz yedek konumlar içerir. Aşağıdaki örnekte "üstten-aşağıya" adlı bir yedek konum oluşturulmaktadır. Tarayıcı, ilk olarak ipucu öğesini en üstte konumlandırmayı dener. Bu konum görüntü alanına sığmazsa tarayıcı, ipucu öğesini sabitleme öğesinin altında, alt tarafta 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);
  }
}

kalemine bakın.

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

`<selectmenu>`

Hem pop-up hem de çapa konumlandırmasıyla, tamamen özelleştirilebilir selectmenu'lar oluşturabilirsiniz. OpenUI topluluk grubu, bu menülerin temel yapısını araştırıyor ve bunlardaki içeriklerin özelleştirilmesine olanak tanıyacak yöntemler arıyor. Şu görsel örnekleri ele alalım:

Seçim menüsü örnekleri

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>

belgesine bakın.

Ayrık mülk geçişleri

Tüm bunların, pop-up'ların sorunsuz bir şekilde açılıp kapanması için web'in ayrı mülkleri canlandırmasının bir yolu olmalıdır. Bunlar, geçmişte genellikle canlandırması mümkün olmayan özelliklerdir. Örneğin, üst katmana veya katmana animasyon ekleme ve display: none ile başka bir katman arasında animasyon oluşturma gibi.

Pop-up'lar, seçim menüleri 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ın bir parçası olarak tarayıcılar, bu animasyonları desteklemek için yeni altyapılar etkinleştiriyor.

Aşağıdaki pop-up demosu, açık durum için :popover-open, açılma öncesi durum için @starting-style kullanarak içeri ve dışarı açılır pencerenin animasyonunu yapıyor ve açılıştan sonra kapanma durumu için doğrudan öğeye bir dönüşüm değeri uygular. Tüm bunların görüntüleme ile çalışması için transition mülküne 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

Bu da bizi web kullanıcı arayüzü özelliklerini kapsayan bu turumuzun son durağı olan etkileşimlere getiriyor.

Ayrık mülklere animasyon eklemekten bahsetmiştik, ancak Chrome'da kaydırmaya dayalı animasyonlar ve görüntüleme geçişleriyle ilgili bazı heyecan verici API'ler de var.

Kaydırmayla çalışan animasyonlar

Tarayıcı desteği

Kaynak

Kaydırma odaklı animasyonlar, bir animasyonu oynatmayı kaydırma kapsayıcısının kaydırma konumuna göre kontrol etmenize olanak tanır. Bu, siz yukarı veya aşağı kaydırırken animasyonun ileri veya geri sarmalandığı anlamına gelir. Buna ek olarak, kaydırmaya dayalı animasyonlarla bir öğenin kaydırma kapsayıcısı içindeki konumuna göre bir animasyonu da kontrol edebilirsiniz. Bu sayede paralaks arka plan resmi, kaydırma ilerleme çubukları ve görüntüye geldikçe ortaya çıkan resimler gibi ilginç efektler oluşturabilirsiniz.

Bu API, kaydırmayla çalışan açıklayıcı animasyonlar oluşturmanıza olanak tanıyan bir dizi JavaScript sınıfını ve CSS özelliğini destekler.

Kaydırarak CSS Animasyonu oluşturmak için yeni scroll-timeline, view-timeline ve animation-timeline özelliklerini kullanın. JavaScript Web Animasyonları API'sini kullanmak için Element.animate() işlevine timeline seçeneği olarak bir ScrollTimeline veya ViewTimeline örneği iletin.

Bu yeni API'ler, mevcut Web Animasyonları ve CSS Animasyonları API'leriyle birlikte çalışır. Bu sayede, bu API'lerin avantajlarından yararlanabilirler. Bu animasyonların ana iş parçacığında çalıştırılmasına olanak tanır. Evet, bunu doğru okuyun: Artık yalnızca birkaç satır ek kodla ana iş parçacığının ilerlemesiyle kaydırmayla yönlendirilen ve sorunsuz animasyonlara sahip olabilirsiniz. Neleri beğenmeyebilirsiniz?

Kaydırmayla çalışan bu animasyonlar nasıl oluşturulur? Konuyla ilgili ayrıntılı bir kılavuz için lütfen kaydırmayla çalışan animasyonlarla ilgili bu makaleyi inceleyin.

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

Tarayıcı desteği

Kaynak

View Transition API, iki durum arasında animasyonlu bir geçiş oluştururken DOM'u tek 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ş yapması gerektiğini de kontrol edebilirsiniz.

Görüntü Geçişleri, aşamalı iyileştirme olarak kullanılabilir: DOM'u herhangi bir yöntemle güncelleyen kodunuzu alın ve özelliği desteklemeyen tarayıcılar için yedek bir yöntemle görüntü 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 aracılığıyla 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 tarafından hazırlanan bu harika demoda gösterildiği gibi, görüntü geçişi sırasında oynatılan video gibi diğer sayfa etkileşimleri çalışmaya devam eder.

Görüntüleme Geçişleri şu anda Chrome 111'den itibaren Tek Sayfalı Uygulamalar (SPA'lar) ile çalışır. Çok sayfalı uygulama desteği üzerinde çalışıyoruz. Daha fazla bilgi edinmek isterseniz görünüm geçişi rehberimizi inceleyerek her adımda size yol gösterebilirsiniz.

Sonuç

CSS ve HTML'deki en son gelişmeleri developer.chrome.com adresinden takip edin. Daha fazla web lansmanı için I/O videolarına göz atın.