CSS ve web kullanıcı arayüzündeki son yenilikler: I/O 2024 özeti

Web platformu, bu heyecan verici evrimin ön saflarında yer alan CSS ve web kullanıcı arayüzü özellikleriyle yeniliklerle hayat veriyor. Web kullanıcı arayüzü açısından altın bir çağdayız. Yeni CSS özellikleri, daha önce hiç görmediğimiz bir hızda farklı tarayıcılarda kullanıma sunuluyor. Bu yeni özellikler, birbirinden güzel ve ilgi çekici web deneyimleri oluşturmak için çok çeşitli olanaklar sunuyor. Bu blog yayınında CSS'nin mevcut durumunu derinlemesine ele alacağız. Bu blog yayınında, Google I/O 2024'te canlı olarak yayınlanacak ve web uygulaması geliştirme biçimimizi yeniden tanımlayan, çığır açacak yeni özelliklerden bazıları keşfedilecek.

Yeni etkileşimli deneyimler

Web deneyimi, temelde kullanıcılarınız ve sizin aranızda yapılan bir çağrı ve yanıttır. Bu nedenle, kaliteli kullanıcı etkileşimlerine yatırım yapmak çok önemlidir. Web sayfalarının içinde, sayfalar arasında gezinme konusunda daha önce hiç sahip olmadığımız, çok büyük geliştirmeler üzerinde çalışıyoruz.

Kaydırma odaklı animasyonlar

Adından da anlaşılacağı gibi, kaydırma odaklı animasyonlar API'si, kaydırma gözlemcilerine veya diğer yoğun komut dosyalarına gerek kalmadan dinamik kaydırmaya dayalı animasyonlar oluşturmanıza olanak tanır.

Kaydırma odaklı animasyonlar oluşturma

Zamana dayalı animasyonların platformda çalışmasına benzer şekilde, artık bir animasyonu başlatmak, duraklatmak ve geri almak için kaydırıcının kaydırma ilerleme durumunu kullanabilirsiniz. İleri kaydırdıkça animasyonun ilerlemesini görürsünüz. Geriye doğru kaydırdığınızda animasyonun tersine gittiğini görürsünüz. Bu, dinamik görsel etki için görüntü alanının içine ve içinde hareket eden öğelere sahip, kaydırma olarak da bilinen, kısmi veya tam sayfa görseller oluşturmanıza olanak tanır.

Kaydırma odaklı animasyonlar, önemli içeriği vurgulamak, kullanıcılara bir hikaye boyunca rehberlik etmek veya sadece web sayfalarınıza dinamik bir dokunuş eklemek için kullanılabilir.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Önceki kod, bir resmin opaklığını ve ölçeğini değiştirerek görüntü alanında görünen basit bir animasyon tanımlar. Animasyon, kaydırma konumuna göre yapılır. Bu efekti oluşturmak için önce CSS animasyonunu, ardından animation-timeline öğesini ayarlayın. Bu durumda, varsayılan değerleriyle view() işlevi, görüntüyü kaydırma noktasına (bu örnekte aynı zamanda görüntü alanı) göre izler.

Özellikle erişilebilirlik ihtiyaçları için tarayıcı desteğini ve kullanıcı tercihlerini göz önünde bulundurmak önemlidir. Dolayısıyla, tarayıcının kaydırmaya dayalı animasyonları destekleyip desteklemediğini kontrol etmek için @supports kuralını kullanın ve kaydırmaya dayalı animasyonunuzu, kullanıcıların hareket tercihlerine saygı gösterecek şekilde @media (prefers-reduced-motion: no-preference) gibi bir kullanıcı tercihi sorgusuna sarmalayın. Bu kontrolleri yaparak stillerinizin çalışacağını ve animasyonun kullanıcı için sorunlu olmadığını bilirsiniz.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Kaydırma odaklı animasyonlar, tam sayfa kaydırma açıklaması deneyimleri anlamına gelebilir. Ancak aynı zamanda, bir web uygulamasını kaydırırken bir gölgeyi simge durumuna küçülten ve gösteren bir başlık çubuğu gibi daha ince animasyonlar anlamına da gelebilir.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Bu demoda, birkaç farklı animasyon karesi animasyonu (başlık, metin, gezinme çubuğu ve arka plan) kullanılıyor ve ardından bu animasyonların her birine ilgili kaydırmaya dayalı animasyonu uyguluyoruz. Her birinin animasyon stili farklı olsa da tümü aynı animasyon zaman çizelgesine, en yakındaki kaydırma çubuğuna ve aynı animasyon aralığına (sayfanın üst kısmından 150 piksele kadar) sahiptir.

Kaydırmaya dayalı animasyonların performans avantajları

İster yazdığınız özel bir komut dosyası ister ilave bir üçüncü taraf bağımlılığı olsun, bu yerleşik API, ilgilenmeniz gereken bir kod yükünü azaltır. Ayrıca, çeşitli kaydırma gözlemcileri gönderme ihtiyacını da ortadan kaldırarak oldukça önemli performans avantajları sunar. Bunun nedeni, ister yeni API'yi doğrudan CSS'de ister JavaScript kancalarını kullanıyor olun, kaydırma odaklı animasyonlar birleştiricide animasyon eklenebilecek özellikler (ör. dönüşümler ve opaklık) canlandırırken ana iş parçacığının dışında çalışmasıdır.

Siz kaydırırken ürün gezinme çubuğunun görünmesi için Tokopedia yakın zamanda kaydırmaya dayalı animasyonlar kullandı. Bu API'yi kullanmanın hem kod yönetimi hem de performans açısından bazı ciddi avantajları oldu.

"Geleneksel JS kaydırma etkinliklerini kullanmaya kıyasla kod satırlarımızı% 80'e kadar azaltmayı başardık. Ayrıca, kaydırma sırasında ortalama CPU kullanımının% 50'den% 2'ye düştüğünü gördük. - Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia"

Kaydırma efektlerinin geleceği

Bu efektlerin web'i daha ilgi çekici bir yer hâline getirmeye devam edeceğini biliyoruz ve gelecekte neler olacağına çoktan kafa yoruyoruz. Bu, yalnızca yeni animasyon zaman çizelgelerini kullanabilmeyi değil, aynı zamanda kaydırma tarafından tetiklenen animasyonlar olarak adlandırılan bir animasyonun başlangıcını tetiklemek için bir kaydırma noktası kullanabilme olanağını da içerir.

Gelecekte tarayıcılar için daha da fazla kaydırma özelliği olacak. Aşağıdaki demoda, ileride kullanıma sunulacak bu özelliklerin bir kombinasyonu gösterilmektedir. Seçicilerde ilk tarihi ve saati ayarlamak için CSS scroll-start-target 'yi ve başlık tarihini güncellemek için JavaScript scrollsnapchange etkinliğini kullanır. Bu nedenle, verilerin tutturulan etkinlikle senkronize edilmesini önemsiz hale getirir.

Seçiciyi JavaScript scrollsnapchanging etkinliğiyle gerçek zamanlı olarak güncellemek için bunu temel alabilirsiniz.

Bu belirli özellikler şu anda yalnızca Canary'de bir bayrağın arkasında bulunuyor. Bununla birlikte, platformda oluşturulması imkansız veya çok zor olan özelliklerin kilidini açıyor ve kaydırmaya dayalı etkileşim olasılıklarının geleceğini vurguluyor.

Kaydırma odaklı animasyonları kullanmaya başlama hakkında daha fazla bilgi edinmek için ekibimiz, Chrome for Developers YouTube kanalında bulabileceğiniz yeni bir video serisi başlattı. Burada Bramus Van Damme'ın kaydırmaya dayalı animasyonlarına dair temel bilgileri öğreneceksiniz. Bu animasyonda özelliğin işleyiş şekli, kelime hazinesi, çeşitli efekt yöntemleri ve zengin deneyimler oluşturmak için efektleri nasıl birleştireceğiniz açıklanmaktadır. İzlemeniz gereken harika bir video serisi.

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

Web sayfalarının içindeki güçlü ve yeni bir özelliği ele aldık. Ancak, sorunsuz bir kullanıcı deneyimi oluşturmak için sayfa görüntülemeleri arasında animasyonlar sunan görüntüleme geçişleri adlı yeni bir özellik de bulunuyor. Görünüm geçişleri, web'de yeni bir akıcılık düzeyi sağlar. Bu sayede, tek bir sayfadaki veya hatta farklı sayfalardaki farklı görünümler arasında sorunsuz geçişler oluşturabilirsiniz.

Airbnb, sorunsuz ve sorunsuz bir web gezinme deneyimi için görünüm geçişlerini kullanıcı arayüzlerine entegre etme konusunda halihazırda denemeler yapan şirketlerden biri. Giriş düzenleyici kenar çubuğu, doğrudan fotoğrafları düzenleme ve imkanlar ekleme işlemlerini akıcı bir kullanıcı akışı içinde gerçekleştirir.

Bu tam sayfa efektleri güzel ve kusursuz olsa da, kullanıcı etkileşiminin liste görünümünün güncellendiği bu örnekteki gibi mikro etkileşimler de oluşturabilirsiniz. Bu efekt, görüntüleme geçişleriyle kolayca sağlanabilir.

Tek sayfalık uygulamanızda görünüm geçişlerini hızlı bir şekilde etkinleştirmenin yolu, document.startViewTransition kullanarak bir etkileşimi sarmalamak ve geçiş yapan her öğenin bir view-transition-name öğesi içerdiğinden, satır içi olarak veya DOM düğümleri oluştururken dinamik olarak JavaScript kullandığından emin olmaktır.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Geçiş sınıflarını görüntüleyin

Görünüm geçiş adları, görünüm geçişinize özel animasyonlar uygulamak için kullanılabilir ancak birçok öğenin geçişi nedeniyle bu işlem zahmetli olabilir. Bu yılki geçişleri görüntülemek üzere yapılan ilk yeni güncellemeyle bu sorun basitleştirildi ve özel animasyonlara uygulanabilecek görünüm geçişi sınıfları oluşturma özelliği eklendi.

Geçiş türlerini görüntüle

Görüntüleme geçişleriyle ilgili bir başka büyük iyileştirme de görünüm geçişi türleri desteğidir. Görünüm geçişi türleri, sayfa görüntüleme ve sayfa görüntülemelerinden animasyon oluştururken farklı türde bir görsel görünüm geçişi istediğinizde kullanışlıdır.

Örneğin, bir ana sayfanın blog sayfasına geri dönen animasyondan farklı bir şekilde animasyonla yürütülmesini isteyebilirsiniz. Alternatif olarak, bu örnekte sayfaları soldan sağa veya tam tersi şekilde değiştirebilir veya değiştirebilirsiniz. Eskiden bu işlem karmaşıktı. Stilleri uygulamak için DOM'ye sınıflar ekleyebiliyor ve daha sonra sınıfları kaldırabiliyordunuz. Geçiş türlerini görüntüle seçeneği, yeni geçişleri başlatmadan önce bunu manuel olarak yapmanıza gerek kalmadan tarayıcının eski geçişleri temizlemesine olanak tanır ve bu işlemi sizin yerinize yapar.

Artık nesne kabul eden document.startViewTransition işlevinizde türler ayarlayabilirsiniz. update, DOM'yi güncelleyen geri çağırma işlevidir. types ise türlere sahip bir dizidir.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Çok sayfalı görüntüleme geçişleri

Web'i güçlü kılan, çok geniş olmasıdır. Birçok uygulama yalnızca tek bir sayfa değil, aynı zamanda birden çok sayfa içeren sağlam bir duvar kilimidir. Bu nedenle, Chromium 126'da çok sayfalı uygulamalar için belgeler arası görüntüleme geçişleri desteği sunduğumuzu duyurmaktan büyük heyecan duyuyoruz.

Bu yeni belgeler arası özellik grubu, web.dev'den web.dev/blog'a gitme gibi aynı kaynakta bulunan web deneyimlerini içerir ancak web.dev'den blog.web.dev'e veya google.com gibi başka bir alan adına gitme gibi kaynaklar arası gezinmeyi içermez.

Aynı doküman görünümü geçişlerindeki önemli farklılıklardan biri, geçişinizi document.startViewTransition() ile sarmalamanızın gerekli olmamasıdır. Bunun yerine, CSS @view-transition kuralını kullanarak görüntüleme geçişine dahil olan her iki sayfayı da etkinleştirin.

@view-transition {
  navigation: auto;
}

Daha özel bir efekt için, görünüm geçişi nesnesine erişmenizi sağlayan yeni pageswap veya pagereveal etkinlik işleyicilerini kullanarak JavaScript'i bağlayabilirsiniz.

pageswap ile eski anlık görüntüler alınmadan önce giden sayfada bazı son dakika değişiklikleri yapabilir ve pagereveal ile yeni sayfa başlatıldıktan sonra oluşturulmaya başlamadan önce sayfayı özelleştirebilirsiniz.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Gelecekte, aşağıdakiler de dahil olmak üzere görüntüleme geçişlerini daha ayrıntılı olarak ele almayı planlıyoruz:

• Kapsamlı geçişler: Bir DOM alt ağacına geçişi sınırlamanıza olanak tanır, böylece sayfanın geri kalanının etkileşimli olmaya devam etmesini sağlar ve aynı anda çalışan birden fazla görünüm geçişini destekler.
• Harekete dayalı görünüm geçişleri: Web'de daha yerel deneyimlere sahip olmak üzere dokümanlar arası görünüm geçişini tetiklemek için sürükleme veya kaydırma hareketlerini kullanın.
• CSS'de gezinme eşleştirme: JavaScript'te pageswap ve pagereveal etkinliklerini kullanmaya alternatif olarak belgeler arası görünüm geçişinizi doğrudan CSS'nizde özelleştirin Çok sayfalı uygulamalarda görünüm geçişleri ve ön oluşturma ile en iyi performansı nasıl ayarlayacağınız hakkında daha fazla bilgi için Bramus Van Damme'ın aşağıdaki konuşmasına göz atın:

Motor tarafından etkinleştirilen kullanıcı arayüzü bileşenleri: Karmaşık etkileşimleri basitleştirme

Karmaşık web uygulamaları derlemek kolay bir iş değildir ancak CSS ve HTML, bu süreci çok daha yönetilebilir hale getirmek için gelişmektedir. Yeni özellikler ve geliştirmeler, kullanıcı arayüzü bileşenlerinin oluşturulmasını basitleştirerek muhteşem deneyimler oluşturmaya odaklanmanızı sağlıyor. Bu, CSS Çalışma Grubu, Open UI topluluk Grubu ve whatWG (Web Köprü Metni Uygulama Teknolojisi Çalışma Grubu) dahil olmak üzere çeşitli temel standartların ve topluluk gruplarının dahil olduğu ortak bir çalışmayla gerçekleştirilir.

Geliştiricilere yönelik büyük bir sorun, görünüşte basit bir istektir: açılır menülerin stilini belirleyebilmek (seçme öğesi). İlk bakışta basit gibi görünse de bu, platformun düzen ve oluşturmadan, kaydırma ve etkileşime, kullanıcı aracısı stiline, CSS özelliklerine ve hatta HTML'nin kendisinde yapılan değişikliklere kadar pek çok parçaya karşılık gelen karmaşık bir sorundur.

Açılır liste birçok parçadan oluşur ve hesaba katılması gereken birçok durumu içerir. Örneğin:

• Klavye bağlamaları (etkileşime girmek/etkileşimden çıkmak için)
• Kapatmak için tıklayın
• Etkin pop-up yönetimi (biri açıldığında diğer pop-up'ları kapat)
• Sekme odağı yönetimi
• Belirlenen seçeneğin değerini görselleştirme
• Ok etkileşim stili
• Eyalet yönetimi (açık/kapalı)

Şu anda tüm bu durumu kendiniz yönetmek zor olsa da platform da bunu kolaylaştırmıyor. Bu sorunu düzeltmek için bu parçaların parçalarını parçalara ayırdık ve stil açılır listelerini etkinleştirecek, ancak çok daha fazlasını yapacak birkaç temel özelliği kullanıma sunacağız.

Popover API'sı

İlk olarak popover adlı genel bir özelliği gönderdik. Bu özelliğin birkaç hafta önce "Referans değer" yeni kullanılabilir hâle geldiğini duyurmaktan mutluluk duyuyorum.

Pop-up öğeleri, düğme gibi bir çağrıcı veya JavaScript ile açılana kadar display: none ile gizlenir. Temel bir pop-up oluşturmak için öğenin pop-up özelliğini ayarlayın ve popovertarget kullanarak öğenin kimliğini bir düğmeye bağlayın. Şimdi düğme çağrıcı,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Popover özelliği artık etkinleştirildiğinde tarayıcı, aşağıdakiler de dahil olmak üzere herhangi bir ek komut dosyası olmadan birçok önemli davranışı işler:

• En üst katmana tanıtım.: Sayfanın geri kalanının üzerinde ayrı bir katman. Böylece z-index ile uğraşmanıza gerek kalmaz.
• Işık kapatma işlevi.: Pop-up'ın dışını tıkladığınızda pop-up kapatılacaktır ve tekrar odaklanılacaktır.
• Varsayılan sekme odak yönetimi.: Pop-up'ın açılması, sonraki sekmenin pop-up'ın içinde durmasına neden olur.
• Yerleşik klavye bağlamaları: esc tuşuna basmak veya iki kez açıp kapatmak, pop-up'ı kapatır ve odağı geri getirir.
• Varsayılan Bileşen bağlamaları. : Tarayıcı, bir pop-up'ı tetikleyicisine anlamsal olarak bağlar.

Bugün bu popover API'sını fark etmeden kullanıyor bile olabilirsiniz. GitHub, ana sayfasındaki "new" (yeni) menüsünde ve pull isteği incelemesine genel bakış bölümünde pop-up'ı uyguladı. Eski tarayıcıları desteklemek için, Oddbird'ün GitHub'ın kendi Keith Cirkel'inden alınan önemli bir destekle geliştirilmiş popover polyfill'i kullanarak bu özelliği kademeli olarak iyileştirdiler.

"Popover'a geçiş yaparak binlerce kod satırını kullanımdan kaldırmayı başardık. Popover, sihirli z-endeksi sayılarıyla savaşma ihtiyacını ortadan kaldırarak bize yardımcı olur. Bildirime dayalı düğme davranışıyla doğru erişilebilirlik ağacı ilişkisine sahip olmak ve odaklanma davranışı yerleşik olarak Tasarım Sistemimizin kalıpları doğru şekilde uygulamasını çok daha kolay hale getirir.-Keith Cirkel, Yazılım Mühendisi, GitHub”

Giriş ve çıkış efektlerini canlandırma

Pop-up'lar olduğunda etkileşim eklemek isteyebilirsiniz. Animasyonlu pop-up'ları desteklemek için geçen yıl kullanıma sunulan dört yeni etkileşim özelliği var. Bunlardan bazıları:

Animasyon karesi zaman çizelgesinde display ve content-visibility animasyonlarını ekleyebilme.

display gibi ayrı mülklerin geçişlerini etkinleştirmek için allow-discrete anahtar kelimesini içeren transition-behavior özelliği.

display: none öğesinden ve üst katmana giriş efektlerini canlandırmak için @starting-style kuralı.

Bir animasyon sırasında üst katman davranışını kontrol etmek için kullanılan yer paylaşımı özelliği.

Bu özellikler, ister bir pop-up ister bir iletişim kutusu olsun, üst katmana animasyon uyguladığınız tüm öğeler için çalışır. Arka planı olan bir iletişim kutusu topluca şu şekilde görünür:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

İlk olarak, tarayıcının bu öğenin DOM'de hangi stillere animasyon uygulayacağını bilmesi için @starting-style'ı ayarlayın. Bu işlem hem iletişim hem de arka plan için yapılır. Ardından, hem iletişim hem de arka plan için açık durumun stilini belirleyin. Bu, iletişim kutusu için open özelliğini, pop-up için ::popover-open sözde öğesini kullanır. Son olarak, ayrı özelliklerin geçiş yapabileceği animasyon modunu etkinleştirmek için allow-discrete anahtar kelimesini kullanarak opacity, display ve overlay öğelerini canlandırın.

Çapa konumlandırma

Pop-up reklamlar bu hikayenin sadece başlangıcıydı. Heyecan verici bir güncelleme olan sabit konumlandırma desteğinin artık Chrome 125'ten kullanıma sunulması.

Tarayıcı, yalnızca birkaç satır kodla çapa konumlandırmasını kullanarak, konumlandırılmış bir öğeyi bir veya daha fazla bağlantı öğesine bağlama mantığını işleyebilir. Aşağıdaki örnekte her düğmeye sabitlenmiş, alt orta kısma yerleştirilmiş basit bir ipucu verilmiştir.

Sabitleme öğesinde (bu örnekte düğme) anchor-name özelliğini ve konumlandırılmış öğede (bu örnekte ipucu) position-anchor özelliğini kullanarak CSS'de sabit konumlu bir ilişki oluşturun. Ardından, anchor() işlevini kullanarak çapa göre mutlak veya sabit konumlandırma uygulayın. Aşağıdaki kod, ipucunun üst kısmını düğmenin altına konumlandırır.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Alternatif olarak, doğrudan bağlantı işlevinde bağlantı adını kullanın ve position-anchor özelliğini atlayın. Bu, birden fazla öğeye sabitleme yaparken yararlı olabilir.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Son olarak, konumlandırılan öğeyi sabitine ortalamak üzere justify ve align özellikleri için yeni anchor-center anahtar kelimesini kullanın.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Pop-up ile çapa konumlandırmasını kullanmak çok kolay olsa da, çapa konumlandırmasını kullanmak için pop-up'ın kullanılması kesinlikle gerekli değildir. Sabit konum, görsel bir ilişki oluşturmak için herhangi iki (veya daha fazla) öğeyle birlikte kullanılabilir. Roman Komarov'daki bir makaleden esinlenilerek hazırlanan aşağıdaki demoda, fareyle öğelerin üzerine geldiğinizde veya sekmelerin üzerine geldiğinizde gösterilen alt çizgi stili gösterilmektedir.

Bu örnekte left, right ve bottom fiziksel özelliklerini kullanarak sabitleme konumunu ayarlamak için çapa işlevi kullanılmaktadır. Bağlantılardan birinin üzerine geldiğinizde, hedef sabit değişir ve tarayıcı, konumlandırmayı uygulamak için hedefi kaydırır ve aynı zamanda düzgün bir efekt oluşturmak için rengi canlandırır.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area konumlandırması

Muhtemelen daha önce kullandığınız varsayılan yönlü mutlak konumlandırmaya ek olarak, iç içe geçmiş alan adı verilen çapa konumlandırma API'sinin bir parçası olarak kullanıma sunulan yeni bir düzen mekanizması var. İçe aktarılan alan, konumlandırılmış öğelerin ilgili çapalarına göre yerleştirilmesini kolaylaştırır ve sabitleme öğesi ortada olacak şekilde 9 hücreli ızgara üzerinde çalışır. Örneğin, inset-area: top konumlandırılan öğeyi üste, inset-area: bottom öğesi de en alta yerleştirir.

İlk sabit demonun basitleştirilmiş bir sürümü inset-area ile aşağıdaki gibi görünür:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Orta konumdan başlamak ve sola doğru kapsayabilir, sağa doğru kapsayabilir ya da tümünü kaplayarak kullanılabilir sütun veya satır kümesinin tamamını kullanmak için span anahtar kelimeleriyle bu konumsal değerleri birleştirebilirsiniz. Mantıksal özellikleri de kullanabilirsiniz. Bu düzen mekanizmasını görselleştirmeyi ve kavramayı kolaylaştırmak için Chrome 125 ve sonraki sürümlerde bu araca göz atın:

Bu öğeler sabit olduğundan, konumlandırılan öğe, sabitliği hareket ettikçe sayfanın etrafında dinamik bir şekilde hareket eder. Bu örnekte, kapsayıcı sorgu stilinde kart öğelerimiz var. Bunlar içsel boyutlarına (medya sorgularıyla yapamayacağınız bir şey) göre yeniden boyutlandırılıyor ve bağlı menü, kart kullanıcı arayüzü değiştikçe yeni düzenle birlikte değişecek.

position-try-options ile dinamik sabit konumlar

Pop-up ve sabit konumlandırmanın bir kombinasyonu sayesinde menüleri ve alt menüde gezinmeyi oluşturmak çok daha kolaydır. Sabit öğenizle bir görüntü alanının kenarına ulaştığınızda, konumlandırma değişikliğini tarayıcının da sizin için yapmasına izin verebilirsiniz. Bunu birkaç şekilde yapabilirsiniz. İlki, kendi konumlandırma kurallarınızı oluşturmaktır. Bu örnekte, alt menü başlangıçta "vitrin" düğmesinin sağında bulunur. Ancak menünün sağında yeterli alan olmadığında bir @position-try bloku oluşturarak bu öğeye --bottom özel tanımlayıcısı sağlayabilirsiniz. Ardından, position-try-options kullanarak bu @position-try bloğunu bağlayıcıya bağlarsınız.

Şimdi, tarayıcı bu sabit durumlar arasında geçiş yaparak önce doğru konumu dener, ardından alta geçer. Bu da güzel bir geçişle yapılabilir.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Bağlayıcınızı bloka veya satır içi yönlere çevirme gibi bazı temel etkileşimler istiyorsanız tarayıcının açık konumlandırma mantığının yanı sıra birkaç anahtar kelime de vardır.

position-try-options: flip-block, flip-inline;

Basit bir çevirme deneyimi için bu döner anahtar kelime değerlerinden yararlanın ve position-try tanımı yazmayı tamamen atlayın. Böylece artık yalnızca birkaç satır CSS kullanarak tamamen işlevsel bir konuma duyarlı sabit konumlandırılmış öğenize sahip olabilirsiniz.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Sabit konumlandırma hakkında daha fazla bilgi edinin.

Katmanlı kullanıcı arayüzünün geleceği

Her yerde birbirine bağlı deneyimler görüyoruz. Bu yayında gösterilen özellikler, yaratıcılığı ortaya çıkarmak ve sabit yerleştirilmiş öğeler ile katmanlı arayüzler üzerinde daha iyi kontrol sağlamak için mükemmel bir başlangıç. Ancak bu daha başlangıç. Örneğin, şu anda popover yalnızca çağrı öğesi olarak düğmelerle veya JavaScript ile çalışmaktadır. Vikipedi tarzı önizlemeler (web platformunun her yerinde görülen bir kalıp) gibi şeyler için, etkileşimde bulunulabilmesi ve ayrıca bir bağlantıdan ve kullanıcının fareyle üzerine gelme veya sekme odağı gibi ilgilenmeye gerek kalmadan ilgi gösteren bir pop-up'ı tetikleyebilmesi gerekir.

Popover API'sinin bir sonraki adımı olarak, bu ihtiyaçları çözmek ve bu deneyimlerin yerleşik erişilebilirlik kancalarıyla yeniden oluşturulmasını kolaylaştırmak için interesttarget üzerinde çalışıyoruz. İdeal davranışlarla ilgili birçok açık soru içeren bu, çözülmesi zor bir erişilebilirlik sorunudur. Ancak bu işlevi platform düzeyinde çözmek ve normalleştirmek, bu deneyimleri herkes için iyileştirecektir.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Ayrıca, iki üçüncü taraf geliştirici olan Keith Cirkel ve Luke Warlow'un çalışmaları sayesinde Canary'de test edilebilecek başka bir genel çağrıcı da (invoketarget) daha var. invoketarget, popovertarget ürününün <dialog>, <details>, <video>, <input type="file"> ve diğer öğeler de dahil olmak üzere tüm etkileşimli öğeler için normalleştirilmiş pop-up'lar sağladığı bildirim temelli geliştirici deneyimini destekler.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Henüz bu API'nin kapsamına girmeyen kullanım alanları olduğunu biliyoruz. Örneğin, sabit bir öğeyi çapasına bağlayan okun stilinin ayarlanması (özellikle sabit öğenin konumu değiştiğinde) ve bir öğe sınırlayıcı kutusuna ulaştığında ayarlanan başka bir konuma tutturmak yerine "kayarak" ve görüntü alanının içinde kalmasına olanak tanıyabilir. Bu güçlü API'yi kullanıma sunmaktan heyecan duyuyoruz ancak gelecekte bu API'nin özelliklerini daha da artırmak için sabırsızlanıyoruz.

Stil seçimi

popover ve anchor ürünlerini birlikte kullanan ekip, özelleştirilebilir bir seçim açılır menüsünü etkinleştirme konusunda ilerleme kaydetti. Neyse ki epey ilerleme kaydedildi. Kötü haber, bu API şu anda hâlâ büyük ölçüde deneysel durumda. Ancak kaydettiğimiz ilerlemeyle ilgili canlı demolar ve güncellemeler paylaşacak ve sizin de geri bildirimlerinizi almayı heyecanla bekliyorum. İlk olarak, kullanıcıları yeni ve özelleştirilebilir seçim deneyimine dahil etme konusunda ilerleme kaydedildi. Bunu yapmanın şu anki yolu, CSS'de appearance: base-select olarak ayarlanmış bir görünüm özelliği kullanmaktır. Görünüm ayarlandıktan sonra yeni ve özelleştirilebilir seçim deneyimini etkinleştirirsiniz.

select {
  appearance: base-select;
}

appearance: base-select'a ek olarak birkaç yeni HTML güncellemesi yapıldı. Bunlar arasında, özelleştirme için seçeneklerinizi bir datalist içinde sarmalama ve seçeneklerinize resimler gibi rastgele etkileşimli olmayan içerikler ekleme olanağı bulunur. Ayrıca, seçeneklerin içeriğini yansıtan yeni <selectedoption> öğesine de erişebileceksiniz. Bu öğeyi kendi ihtiyaçlarınıza göre özelleştirebilirsiniz. Bu öğe gerçekten çok kullanışlı.

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Aşağıdaki kod, Gmail kullanıcı arayüzünde <selectedoption> özelleştirme işlemini göstermektedir. Burada, yerden tasarruf etmek için seçilen yanıtın türünü görsel bir simge temsil etmektedir. Seçenek stilini önizleme stilinden ayırt etmek için selectedoption içinde temel görüntüleme stillerini kullanabilirsiniz. Bu durumda, seçenekte gösterilen metin, selectedoption içinde görsel olarak gizlenebilir.

selectedoption .text {
  display: none;
}

Bu API için <select> öğesini yeniden kullanmanın en büyük avantajlarından biri, geriye dönük uyumluluktır. Bu ülke seçiminde, içeriğin kullanıcılar tarafından daha kolay ayrıştırılabilmesi için seçeneklerde bayrak resimleriyle özelleştirilmiş bir kullanıcı arayüzü görebilirsiniz. Desteklenmeyen tarayıcılar anlamadıkları satırları (ör. özel düğme, veri listesi, seçili seçenek ve seçenekler içinde yer alan resimler) yoksayacaklarından, yedek, geçerli varsayılan seçim kullanıcı arayüzüne benzer.

Özelleştirilebilir seçimler sayesinde sınırsız sayıda seçenekten yararlanabilirsiniz. Özellikle bu Airbnb tarzı ülke seçiciyi seviyorum. Çünkü duyarlı tasarımda zekice oluşturulmuş bir tarz var. Yakın zamanda kullanıma sunulacak stylable seçimiyle bunu ve daha fazlasını yapabiliyorsunuz. Bu da web platformuna çok ihtiyaç duyulan bir ek özellik sunuyor.

Özel akordeon

Chrome ekibinin odaklandığı tek kullanıcı arayüzü bileşeni, belirli stilleri (ve onunla birlikte gelen tüm parçaları) çözmek değil. İlk ek bileşen güncellemesi, özel akordeonlar oluşturma özelliğidir. Bu akordeondaki öğelerden yalnızca birinin aynı anda açılabileceği

Bunu etkinleştirmenin yolu, birden çok ayrıntı öğesine aynı ad değerini uygulamak ve böylece bir grup radyo düğmesi gibi bağlantılı bir ayrıntı grubu oluşturmaktır

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid ve :user-invalid

Diğer bir kullanıcı arayüzü bileşeni iyileştirmesi de :user-valid ve :user-invalid sözde sınıflarıdır. Yakın zamanda tüm tarayıcılarda stabil olan :user-valid ve :user-invalid sözde sınıfları, :valid ve :invalid sözde sınıflarına benzer şekilde davranır ancak yalnızca kullanıcı girişle önemli ölçüde etkileşimde bulunduktan sonra bir form denetimiyle eşleşir. Bu sayede, bir form değeriyle etkileşimde bulunulup bulunulmadığını veya "kirli" hale gelip gelmediğini belirlemek için önemli ölçüde daha az koda ihtiyaç duyulur. Bu işlem, kullanıcı geri bildirimi sağlamak açısından son derece faydalı olabilir ve geçmişte bu işlemi yapmak için gereken komut dosyası sayısını azaltır.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

User-* form doğrulama sözde öğelerini kullanma hakkında daha fazla bilgi edinin.

field-sizing: content

Son zamanlarda kullanıma sunulan bir başka kullanışlı bileşen güncellemesi de, giriş ve metin alanları gibi form kontrollerine uygulanabilecek field-sizing: content. Bu, girişin boyutunun içeriğine bağlı olarak büyümesini (veya küçülmesini) sağlar. field-sizing: content, metin alanları için özellikle kullanışlıdır. Çünkü artık isteminizin önceki bölümlerinde yazdıklarınızı çok küçük bir giriş kutusunda görmek için ekranı yukarı kaydırmanız gerekebileceği sabit boyutlara çözümlemezsiniz.

textarea, select, input {
  field-sizing: content;
}

Alan boyutlandırma hakkında daha fazla bilgi edinin.

<hr> <select> içinde başlıyor

Seçimlerde <hr> veya yatay kural öğesini etkinleştirebilme imkanı da küçük ama kullanışlı başka bir bileşen özelliğidir. Bunun çok fazla anlamsal kullanımı olmasa da, özellikle bir optimizasyon grubuyla (yer tutucu değer gibi) gruplandırmak istemeyeceğiniz içeriği seçkin bir liste içinde güzel bir şekilde ayırmanıza yardımcı olur.

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Seçimde saat özelliğini kullanma hakkında daha fazla bilgi

Yaşam kalitesi iyileştirmeleri

Yaptığımız geliştirmeler yalnızca etkileşimler ve bileşenlerden ibaret değil. Geçtiğimiz yıl, yaşam kalitesiyle ilgili gelişmelere yer veren başka gelişmeler de var.

İleriye dönük bakışla iç içe yerleştirme

Yerel CSS iç içe yerleştirmesi geçen yıl tüm tarayıcılarda kullanılmaya başlandı ve daha sonra ileriye dönük desteği destekleyecek şekilde iyileştirildi. Yani öğe adlarından önceki & kullanımı artık gerekli değildir. Bu şekilde yuvalama çok daha ergonomik ve geçmişte yaptığıma benzer bir his veriyor.

CSS iç içe yerleştirmenin en sevdiğim yanlarından biri, bileşenleri görsel olarak engellemenize olanak tanıması. Bu bileşenlerin içinde kapsayıcı sorguları ve medya sorguları gibi durumlar ve değiştiriciler yer alır. Daha önce, belirli bir soru sorabilmek için tüm bu sorguları dosyanın altında gruplandırma alışkanlığım vardı. Artık bunları kodunuzun geri kalanının hemen yanına anlamlı bir şekilde yazabilirsiniz

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Blok düzeni için içeriği hizalama

Bir başka güzel değişiklik de blok düzeninde align-content gibi ortalama mekanizmalarının kullanılabilmesidir. Bu, artık esnek veya ızgara düzeni uygulamanıza gerek kalmadan bir div içinde dikey ortalama gibi işlemler yapabileceğiniz ve kenar boşluğunun daraltılmasını engelleme gibi yan etkiler olmadan bu düzen algoritmalarında istemeyebileceğiniz anlamına gelir.

div {
  align-content: center;
}

Metin kaydırma: dengeli ve güzel

Düzenden bahsetmişken, text-wrap: balance ve pretty eklenerek metin düzeni iyi bir şekilde iyileştirildi. text-wrap: balance daha tek tip bir metin bloku için kullanılır, text-wrap: pretty ise metnin son satırındaki single'ları azaltmaya odaklanır.

h1 {
  text-wrap: balance;
}

text-Wrap: Bakiye hakkında daha fazla bilgi edinin.

Uluslararası tipografi güncellemeleri

Geçtiğimiz yıl, doğal ifade sınırında çizgiyi sarmalayan word-break: auto-phrase özelliği gibi CJK metin özellikleri için tipografik düzen güncellemeleri çok başarılı oldu.

Çince, Japonca ve Korece yazıların okunabilirliğini artırmak için noktalama işaretleri arasına aralıklama uygulayan text-spacing-trim özelliği de görsel açıdan daha ilgi çekici sonuçlar veriyor.

Göreli renk söz dizimi

Renk teması belirleme dünyasında, göreli renk söz dizimiyle büyük bir güncelleme yaptık.

Bu örnekte, buradaki renkler için Oklch tabanlı tema kullanılmıştır. Ton değeri, kaydırma çubuğuna göre ayarlandıkça temanın tamamı değişir. Bu, göreli renk söz dizimiyle elde edilebilir. Arka plan, tona bağlı olarak birincil rengi kullanır ve değerini ayarlamak için açıklık, renk ve ton kanallarını ayarlar. --i, değerlerin derecelendirilmesi listesindeki kardeş dizindir ve tema oluşturmak için adımı özel özelliklerle ve göreli renk söz dizimiyle nasıl birleştirebileceğinizi gösterir.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() işlevi

light-dark() işleviyle birlikte tema oluşturma işlemi çok daha dinamik ve basitleştirilmiş hale geldi.

light-dark() işlevi, Adam Argyle'ın bu görsel şemasında çok güzel bir şekilde gösterildiği gibi, tema stillerini daha kısa ve öz bir şekilde yazabilmeniz için renk teması seçeneklerini basitleştiren ergonomik bir iyileştirmedir. Eskiden, tema seçeneklerini ayarlamak için iki farklı kod bloğuna (varsayılan temanız ve bir kullanıcı tercihi sorgusu) ihtiyacınız vardı. Artık light-dark() işlevini kullanarak aynı CSS satırında hem açık hem de koyu temalar için bu stil seçeneklerini yazabilirsiniz.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Kullanıcı açık bir tema seçerse düğmenin arka planı açık mavi olur. Kullanıcı koyu bir tema seçerse düğmenin arka planı koyu mavi olur.

:has() seçici

Ayrıca, geçen yılın en etkili birlikte çalışabilirlik özelliklerinden birine değinmeme rağmen modern kullanıcı arayüzü hakkında konuşmama izin vermemiştim. Bu, geçen yılın Aralık ayında tüm tarayıcılara sunulan :has() seçicisi olmalı. Bu API, mantıksal stiller yazmak için çığır açan bir özelliktir.

:has() seçici, bir alt öğenin belirli alt öğelere sahip olup olmadığını ya da bu alt öğelerin belirli bir durumda olup olmadığını kontrol etmenizi sağlar. Ayrıca, temel seçici olarak da işlev görebilirler.

:has(), birçok şirket için özellikle yararlı olduğu görülmüştür. PolicyBazaar da dahil olmak üzere, blokların stilini karşılaştırma bölümünde (ör. blokta karşılaştırma planı olup olmadığı veya boş olup olmadığına göre) uyarlanan karşılaştırma bölümünde, blokların stilini belirlemek için :has() kullanılır.

“:has() seçici sayesinde, kullanıcı seçiminin JavaScript tabanlı doğrulanmasını ortadan kaldırıp bunun yerine, bizim için öncekiyle aynı deneyimle sorunsuz çalışan bir CSS çözümü ekledik.–Aman Soni, Teknoloji Lideri, PolicyBazaar”

Kapsayıcı sorguları

Web'e yeni eklenen ve giderek daha fazla kullanılan bir başka önemli özellik de, stilleri uygulamak için bir öğe üst öğesinin gerçek boyutunu sorgulama olanağı sağlayan kapsayıcı sorgularıdır. Bu sorgu, yalnızca görüntü alanı boyutunu sorgulayan medya sorgularına kıyasla çok daha incelikli bir taçtır.

Angular kısa süre önce angle.dev'de başlık bloklarının sayfadaki mevcut alanlarına göre biçimlendirilmesi için kapsayıcı sorguları kullanarak güzel bir yeni doküman sitesini kullanıma sundu. Böylece düzen değişse ve çok sütunlu bir kenar çubuğu düzeninden tek sütunlu bir düzene geçse bile başlık blokları kendi kendine ayarlanabilir.

Kapsayıcı sorguları olmadan böyle bir şeyi yapmak oldukça zordu. Yeniden boyutlandırma gözlemcileri ve öğe gözlemcileri gerektiğinden bunun performansa zarar vermesi de gerekiyordu. Artık bir öğenin üst boyutuna göre stil belirlemek çok önemlidir.

@property

Son olarak, çok yakında @property özelliğinin Baseline'da yer alacağını görmekten heyecan duyuyoruz. Bu, CSS özel özelliklerine (CSS değişkenleri olarak da bilinir) anlamsal anlam sağlamak için önemli bir özelliktir ve çok sayıda yeni etkileşim özelliği sağlar. @property ayrıca CSS'de bağlamsal anlam, yazım denetimi, varsayılanlar ve yedek değerleri etkinleştirir. Aralık stilinde sorgular gibi daha etkili özelliklerin kapılarını açıyoruz. Daha önce hiç mümkün olmayan bir özellik olan bu özellik artık CSS'nin dilini büyük ölçüde daha iyi hale getiriyor.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Sonuç

Farklı tarayıcılarda kullanıma sunulan bu yeni ve güçlü kullanıcı arayüzü özellikleriyle, olanaklar sınırsızdır. Kaydırma odaklı animasyonlara ve görünüm geçişlerine sahip yeni etkileşimli deneyimler, web'i daha önce hiç görmediğimiz şekilde daha akıcı ve etkileşimli hale getiriyor. Üst seviye kullanıcı arayüzü bileşenleri ise yerel deneyimin tamamını bozmadan güçlü ve güzel bir şekilde özelleştirilmiş bileşenler oluşturmayı her zamankinden daha kolay hale getiriyor. Son olarak, mimari, düzen, tipografi ve duyarlı tasarımdaki yaşam kalitesi iyileştirmeleri yalnızca küçük sorunları çözmekle kalmıyor, aynı zamanda geliştiricilere çeşitli cihazlar, form faktörleri ve kullanıcı ihtiyaçları üzerinde çalışan karmaşık arayüzler oluşturmak için ihtiyaç duydukları araçları da sağlıyor.

Bu yeni özelliklerde, kaydırma biçimlendirme ve tethering gibi performans odaklı özelliklerin birbirine bağlanması için üçüncü taraf komut dosyalarını kaldırabilmeniz gerekir. Ayrıca, sabit konumlandırma ile, değişken sayfa geçişleri oluşturabilir, son olarak stil açılır menüleri oluşturabilir ve kodunuzun genel yapısını yerel olarak geliştirebilirsiniz.

Web geliştiricisi olmanın tam zamanı. CSS3'ün duyurulmasından bu yana pek enerji ve heyecan duymadık. İhtiyacımız olan ancak gerçekten geçmişte görmeyi hayal ettiğimiz özellikler, sonunda gerçeğe dönüşüyor ve platformun bir parçası haline geliyor. Görüşleriniz sayesinde bu özelliklere öncelik verebilir ve bunları hayata geçirebiliyoruz. Markanızı diğerlerinden ayıran temel özellikler ve tasarım ayrıntıları gibi önemli şeyleri geliştirmeye daha fazla zaman ayırabilmeniz için, zorlu ve yorucu işleri yerel olarak yapmayı kolaylaştırmak için çalışıyoruz.

Kullanıma sunuldukça bu yeni özellikler hakkında daha fazla bilgi edinmek için, ekibimizin web teknolojileriyle ilgili en son haberleri paylaştığı developer.chrome.com ve web.dev adreslerini takip edin. Kaydırma odaklı animasyonları, görüntüleme geçişlerini, sabit konumlandırmayı ve hatta stil seçme özelliğini deneyip düşüncelerinizi bizimle paylaşın. Size yardımcı olmaya hazırız.