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

Una Kravets

Web platformu, CSS ve web kullanıcı arayüzü özelliklerinin ön planda olduğu bu heyecan verici evrimin merkezinde yer alıyor. Web kullanıcı arayüzü için altın bir çağda yaşıyoruz. Yeni CSS özellikleri, tarayıcılara daha önce hiç görmediğimiz bir hızda ekleniyor ve güzel ve ilgi çekici web deneyimleri oluşturmak için bir olasılıklar dünyası sunuyor. Bu blog yayınında, CSS'nin mevcut durumuna derinlemesine değinilecek ve Google I/O 2024'te canlı olarak gösterilen, web uygulamalarını geliştirme şeklimizi yeniden tanımlayan en yeni ve oyunun kurallarını değiştiren özelliklerden bazıları incelenecek.

Yenilikçi etkileşimli deneyimler

Web deneyimi temel olarak sizinle kullanıcılarınız arasında yapılan bir çağrı ve yanıttır. Bu nedenle, kaliteli kullanıcı etkileşimlerine yatırım yapmak çok önemlidir. Web sayfalarında içerisinde ve aralarında gezinme konusunda web'de daha önce hiç sahip olmadığımız özellikleri kullanıma sunacak büyük iyileştirmeler üzerinde çalışıyoruz.

Kaydırmayla çalışan animasyonlar

Tarayıcı desteği

• 115
• 115
• 
• x

Kaynak

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ırmayla çalışan 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. İleriye doğru 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 sayede, dinamik görsel etki için görüntü alanında ve görüntü alanında animasyonlu öğeler içeren kısmi veya tam sayfa görseller oluşturabilirsiniz. Bu yönteme scrollytelling (kaydırmayla hikaye anlatma) denir.

Kaydırmayla çalışan animasyonlar, önemli içerikleri vurgulamak, kullanıcıları bir hikayede yönlendirmek veya web sayfalarınıza dinamik bir dokunuş eklemek için kullanılabilir.

Kaydırmayla çalışan animasyon görseli

Canlı demo

@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 çalışı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. Bu nedenle, tarayıcının kaydırmayla çalışan animasyonları destekleyip desteklemediğini kontrol etmek için @supports kuralını kullanın ve kullanıcıların hareket tercihlerine saygı göstermek için kaydırmayla çalışan animasyonunuzu @media (prefers-reduced-motion: no-preference) gibi bir kullanıcı tercihi sorgusuna sarı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ırmayla çalışan animasyonlar, tam sayfa kaydırmayla anlatım deneyimleri anlamına gelebilir ancak bir web uygulamasında kaydırırken başlık çubuğunun küçültülmesi ve gölge göstermesi gibi daha ince animasyonlar da olabilir.

Kaydırmayla çalışan animasyon görseli

Canlı demo

@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 (başlık, metin, gezinme çubuğu ve arka plan) kullanılıyor ve ardından her birine kaydırmayla çalışan ilgili animasyon uygulanıyor. Her birinin farklı bir animasyon stili olsa da hepsinin animasyon zaman çizelgesi, en yakın kaydırma çubuğu ve animasyon aralığı (sayfanın üst kısmından 150 piksele kadar) aynıdır.

Kaydırmayla çalışan animasyonlardan elde edilen performans avantajları

Bu yerleşik API, yazdığınız özel komut dosyası veya ek bir üçüncü taraf bağımlılığının eklenmesi olsun, sürdürmeniz gereken kod yükünü azaltır. Ayrıca çeşitli kaydırma gözlemcileri gönderme ihtiyacını ortadan kaldırır. Bu da oldukça önemli performans avantajları sağlar. Bunun nedeni, yeni API'yi doğrudan CSS'de mi yoksa JavaScript kancalarını kullanarak mı kullandığınıza bakılmaksızın, kaydırma odaklı animasyonların, dönüştürme ve opaklık gibi, birleştiricide animasyon uygulanabilen özellikleri animasyona dönüştürürken ana iş parçacığında çalışmasıdır.

Tokopedia, yakın zamanda kaydırmayla çalışan animasyonlar kullanarak ürün gezinme çubuğunun kaydırırken görünmesini sağladı. Bu API'yi kullanmanın hem kod yönetimi hem de performans açısından bazı ciddi avantajları oldu.

Aşağı kaydırdığınızda Tokopedia'daki bu ürün gezinme çubuğu, kaydırma hareketine dayalı animasyonlarla hareket eder.

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

Kaydırma efektlerinin geleceği

Bu efektlerin web'i daha ilgi çekici bir yer haline getirmeye devam edeceğinin farkındayız ve şimdiden sırada ne olabileceğini düşünüyoruz. 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, gelecekte kullanıma sunulacak bu özelliklerin bir kombinasyonu gösterilmektedir. Seçicilerdeki ilk tarih ve saati ayarlamak için CSS scroll-start-target'ü, üstbilgi tarihini güncellemek için JavaScript scrollsnapchange etkinliğini kullanır. Bu sayede verileri, yakalanan etkinlikle senkronize etmek çok kolaydır.

Canlı demoyu Codepen'de

inceleyin

JavaScript scrollsnapchanging etkinliğiyle bir seçiciyi gerçek zamanlı olarak güncellemek için bu temeli de kullanabilirsiniz.

Bu özellikler şu anda yalnızca Canary'da bir işaretin arkasındadır. Ancak daha önce platformda oluşturulması imkansız veya çok zor olan özellikleri kullanıma sunar ve kaydırma tabanlı etkileşim olanaklarının geleceğini vurgular.

Ekibimiz, kaydırmayla çalışan animasyonları kullanmaya başlama hakkında daha fazla bilgi edinmeniz için Chrome for Developers YouTube kanalında yeni bir video serisi yayınladı. Burada Bramus Van Damme'ın kaydırmaya dayalı animasyonlarına dair temel bilgileri öğreneceksiniz. Bu bilgiler arasında özelliğin işleyiş şekli, kelime hazinesi, efekt oluşturmanın çeşitli yolları ve zengin deneyimler oluşturmak için efektleri nasıl birleştireceğiniz açıklanmaktadır. Bu video serisini mutlaka incelemenizi öneririz.

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

Web sayfalarının içindeki güçlü ve yeni bir özellikten bahsettik. 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 daha var. Görünüm geçişleri, web'e yeni bir akışlılık düzeyi getirerek tek bir sayfadaki veya hatta farklı sayfalardaki farklı görünümler arasında sorunsuz geçişler oluşturmanıza olanak tanır.

Tarayıcı Desteği

• 111
• 111
• x
• 18

Kaynak

Airbnb, sorunsuz ve kesintisiz bir web gezinme deneyimi için görünüm geçişlerini kullanıcı arayüzüne entegre etme denemeleri yapan şirketlerden biridir. Bu sayede, giriş düzenleyici kenar çubuğundan fotoğrafları düzenleyebilir ve tesis ekleyebilirsiniz.

Airbnb'de görülen aynı belge görünümü geçişi.

Maxwell Barvian'ın, görüntüler arasındaki geçişleri gösteren portföy.

Bu tam sayfa efektleri güzel ve sorunsuz olsa da, kullanıcı etkileşimi üzerine liste görünümünüzün güncellendiği bu örnekte olduğu gibi mikro etkileşimler de oluşturabilirsiniz. Bu efekt, görüntü geçişleriyle kolayca elde edilebilir.

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 DOM düğümleri oluştururken JavaScript'i kullanarak geçiş yapan her öğenin view-transition-name değerine sahip olduğundan emin olmak kadar basittir.

Demo görsel

Canlı demo

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üleme

Görüntüleme geçişi adları, görüntüleme geçişinize özel animasyonlar uygulamak için kullanılabilir. Ancak bu, birçok öğenin geçiş yaptığı durumlarda can sıkıcı olabilir. Bu yıl görüntü geçişleriyle ilgili ilk yeni güncelleme bu sorunu basitleştiriyor ve özel animasyonlara uygulanabilecek görüntü geçişi sınıfları oluşturma olanağı sunuyor.

Tarayıcı desteği

• 125
• 125
• x
• 

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

Görüntüleme geçişlerinde yapılan bir diğer önemli iyileştirme, görüntüleme geçişi türleri için destektir. Görüntüleme geçiş türleri, sayfa görüntülemelerine gidip gelirken animasyon yaparken farklı bir tür görsel görüntüleme geçişi istediğinizde kullanışlıdır.

Tarayıcı Desteği

• 125
• 125
• x
• 18

Örneğin, bir ana sayfanın bir blog sayfasına animasyonla geçişinin, söz konusu blog sayfasının ana sayfaya animasyonla geri geçişinden farklı olmasını isteyebilirsiniz. Alternatif olarak, sayfaların bu örnekte olduğu gibi soldan sağa ve tam tersi şekilde farklı şekillerde açılıp kapanmasını da tercih edebilirsiniz. Daha önce bu işlemi yapmak karmaşıktı. Stilleri uygulamak için DOM'a sınıflar ekleyebilir ve daha sonra bu sınıfları kaldırmanız gerekirdi. Geçiş türlerini görüntüle seçeneği, yeni geçişleri başlatmadan önce bunu manuel olarak yapmanızı gerektirmek yerine, tarayıcının eski geçişleri temizlemesine olanak tanır.

Sayfalandırma demosunun kaydı. Türler, kullanılacak animasyonu belirler. Etkin geçiş türleri sayesinde stiller stil sayfasında ayrılır.

Artık bir nesne kabul eden document.startViewTransition işlevinizde türler ayarlayabilirsiniz. update, DOM'u güncelleyen geri çağırma işlevidir ve types, türleri içeren bir dizidir.

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

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

Web'i güçlü kılan, kapsamının geniş olmasıdır. Birçok uygulama tek sayfadan değil, birden fazla sayfa içeren güçlü bir kanvastan oluşur. Bu nedenle, Chromium 126'da çok sayfalı uygulamalar için belge arası görüntü geçişleri desteğini kullanıma sunduğumuzu duyurmaktan heyecan duyuyoruz.

Tarayıcı Desteği

• 126
• 126
• x
• 

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 gerekmemesidir. 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üntü geçişi nesnesine erişim sağlayan yeni pageswap veya pagereveal etkinlik dinleyicilerini kullanarak JavaScript'i bağlayabilirsiniz.

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

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

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

Çok sayfalı bir uygulamada görüntü geçişlerini gösterme. Demo bağlantısına bakın.

Gelecekte, görüntüleme geçişlerini aşağıdakiler de dahil olmak üzere genişletmeyi planlıyoruz:

• Kapsamlı geçişler: Bir geçişi DOM alt ağacıyla sınırlayarak sayfanın geri kalanının etkileşimli olmaya devam etmesini sağlar ve aynı anda çalışan birden fazla görüntüleme geçişini destekler.
• Hareketle kontrol edilen görünüm geçişleri: Web'de daha yerel deneyimler için doküman içi görünüm geçişini tetiklemek üzere 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üntü geçişinizi doğrudan CSS'nizde özelleştirin. Çok sayfalı uygulamalarda görüntü geçişleri hakkında daha fazla bilgi edinmek (ör. ön oluşturma ile en yüksek performansı nasıl elde edeceğiniz) için Bramus Van Damme'nin aşağıdaki konuşmasına göz atın:

Motor destekli 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 Topluluğu ve WHATWG (Web Hiper Metin Uygulama Teknolojisi Çalışma Grubu) gibi çeşitli önemli standart kuruluşları ve topluluk gruplarının ortak çalışmasıyla gerçekleştirilir.

Geliştiricilerin en büyük sorunlarından biri, basit görünen bir istektir: açılır menülere (select öğesi) stil uygulama özelliği. Bu sorun, yüzeyde basit görünse de düzen ve oluşturma, kaydırma ve etkileşim, kullanıcı aracısı stili ve CSS özellikleri ve hatta HTML'de yapılan değişiklikler gibi platformun birçok parçasına dokunuyor.

Seçilen bir öğenin parçalarını inceleme

Açılır listeler birçok parçadan oluşur ve dikkate alınması gereken birçok durum 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 (bir pop-up açıldığında diğer pop-up'ları kapatma)
• Sekme odağı yönetimi
• Seçilen seçenek değerini görselleştirme
• Ok etkileşim tarzı
• Durum 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ı bir genel özellik kullanıma sunduk. Bu özelliğin, birkaç hafta önce yeni kullanıma sunulmuş temel düzeye ulaştığını duyurmaktan memnuniyet duyuyoruz.

Tarayıcı desteği

• 114
• 114
• 125
• 17

Kaynak

Pop-up öğeleri, bir düğme gibi bir başlatıcıyla 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, tetikleyicidir.

Demo görseli

Canlı demo

<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:

• Üst katmana promosyon.: Sayfanın geri kalanının üzerinde ayrı bir katman olduğundan z-index ile uğraşmanız gerekmez.
• Işık kapatma işlevi: Pop-up alanının dışındaki bir yeri tıkladığınızda pop-up kapatılır ve odak geri döner.
• Varsayılan sekme odak yönetimi: Pop-up açıldığında bir sonraki sekme, pop-up'ın içinde durur.
• 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.

Önemli: Pop-up özelliği, doğası gereği herhangi bir semantik anlam içermez. Bu nedenle, pop-up öğesine daha fazla bağlamsal anlam sağlamak için uygun HTML veya ARIA'yı kullanmanız gerekir. Ayrıca pop-up, sayfanın geri kalanını etkileşimsiz hale getirmek veya kullanıcının dikkatini başka bir yere çekmek için sayfanın geri kalanını etkisiz hale getirmez. Bu tür bir deneyim istiyorsanız <dialog> öğesi muhtemelen daha uygundur.

GitHub ana sayfasındaki menü.

Hatta bu pop-up API'yi farkında olmadan şu anda kullanıyor olabilirsiniz. GitHub, ana sayfadaki "yeni" menüsünde ve pull istek incelemesi genel bakış sayfasında 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-dizin numaralarıyla uğraşma ihtiyacını ortadan kaldırarak bize yardımcı oluyor. Beyan edilen düğme davranışıyla doğru erişilebilirlik ağacı ilişkisinin kurulmasını ve yerleşik odak davranışlarının kullanılmasını sağlamak, Tasarım Sistemimizin kalıpları doğru şekilde uygulamasını önemli ölçüde kolaylaştırıyor. -Keith Cirkel, Yazılım Mühendisi, GitHub"

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

Pop-up'larınız olduğunda muhtemelen etkileşim eklemek istersiniz. 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 öğelerini animasyon haline getirme özelliği.

display gibi ayrı mülkler arasında geçişleri etkinleştirmek için allow-discrete anahtar kelimesini içeren transition-behavior mülkü.

Tarayıcı Desteği

• 117
• 117
• 129
• 17,4

Kaynak

display: none'dan üst katmana giriş efektlerini canlandıran @starting-style kuralı.

Tarayıcı desteği

• 117
• 117
• 129
• 17,5

Kaynak

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

Tarayıcı desteği

• 117
• 117
• x
• x

Kaynak

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 kutusunun tamamı şu şekilde görünür:

Demo görseli

Canlı demo

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 diyalog hem de arka plan için yapılır. Ardından, hem iletişim kutusunun hem de arka planın açık durumunu biçimlendirin. Bu işlem, iletişim kutuları için open özelliğini, pop-up'lar için ise ::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.

Sabitleme konumlandırması

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

Tarayıcı desteği

• 125
• 125
• x
• x

Kaynak

Tarayıcı, ankraj konumlandırmayı kullanarak yalnızca birkaç satır kodla konumlandırılmış bir öğeyi bir veya daha fazla ankraj öğesine bağlama mantığını yönetebilir. Aşağıdaki örnekte, her düğmeye basit bir ipucu sabitlenmiş ve bu ipucu alt ortada konumlandırılmıştır.

Demo görseli

Canlı demo

Yerleşim öğesindeki anchor-name mülkünü (bu örnekte düğme) ve konumlandırılmış öğedeki position-anchor mülkünü (bu örnekte ipucu) kullanarak CSS'de bir ankraj konumlandırma ilişkisi oluşturun. Ardından, anchor() işlevini kullanarak ankara göre mutlak veya sabit konumlandırma uygulayın. Aşağıdaki kod, ipucu üst kısmını düğmenin alt kısmına yerleştirir.

.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ılmış öğeyi ankrajına hizalamak için justify ve align mülkleri 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;
}

Yer işareti konumlandırmayı pop-up ile kullanmak çok kullanışlı olsa da yer işareti konumlandırmayı kullanmak için pop-up kesinlikle gerekli değildir. Sabitleme konumlandırması, görsel bir ilişki oluşturmak için herhangi iki (veya daha fazla) öğeyle 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.

Demo görseli

Canlı demo

Bu örnekte, left, right ve bottom öğelerinin fiziksel özelliklerini kullanarak sabitleme konumunu ayarlamak için sabitleme işlevi kullanılmaktadır. İmleci bağlantılardan birinin üzerine getirdiğinizde hedef ankrajı değişir ve tarayıcı, konumlandırmayı uygulamak için hedefi kaydırır. Aynı zamanda, şık bir efekt oluşturmak için rengi de animasyonlu hale getirir.

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ırma

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

İlk ana sayfa örneğinin basitleştirilmiş sürümü, inset-area ile şu şekilde 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 sabitlendiğinden, sabit öğe hareket ettikçe konumlandırılmış öğe de sayfa üzerinde dinamik olarak hareket eder. Bu durumda, doğal boyutlarına göre yeniden boyutlandırılan kapsayıcı sorgusu tarzında kart öğelerimiz var (medya sorgularıyla yapamadığınız bir şey). Kart kullanıcı arayüzü değiştikçe sabitlenmiş menü de yeni düzene göre kaydırılır.

Demo görsel

Canlı demo

position-try-options ile dinamik ana konumlar

Menülerin ve alt menü gezinmesinin oluşturulması, pop-up ve ankraj yerleşimi kombinasyonuyla ç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ğ tarafında yeterli alan olmadığında @position-try bloğu oluşturabilir ve bu bloğa --bottom özel tanımlayıcısını atayabilirsiniz. Ardından, bu @position-try bloğunu position-try-options kullanarak ankraja 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.

Demo görseli

Canlı demo

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

Demo görseli

Canlı demo

.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 bağlı deneyimler görüyoruz. Bu gönderide gösterilen özellik grubu, yaratıcılığınızı ortaya çıkarmak ve ana konumlandırılmış öğeler ile katmanlı arayüzler üzerinde daha iyi kontrol sahibi olmak için mükemmel bir başlangıçtır. Ancak bu daha başlangıç. Örneğin, popover şu anda yalnızca çağıran öğe olarak düğmelerle veya JavaScript ile çalışmaktadır. Web platformunun her yerinde görülen bir model olan Wikipedia tarzı önizlemeler gibi öğelerle etkileşim kurulabilmesi ve ayrıca bir bağlantıdan ve kullanıcının ilgi gösterdiği durumlarda tıklama gerektirmeden (ör. fareyle üzerine gelme veya sekme odak noktası) pop-up'ın tetiklenebilmesi gerekir.

Popover API'nin bir sonraki adımı olarak, bu ihtiyaçları karşılamak ve bu deneyimleri yerleşik uygun erişilebilirlik kancalarıyla yeniden oluşturmayı kolaylaştırmak için interesttarget üzerinde çalışıyoruz. İdeal davranışlarla ilgili birçok açık soru bulunan bu erişilebilirlik sorununun çözümü zordur 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, Keith Cirkel ve Luke Warlow adlı iki üçüncü taraf geliştiricinin çalışmaları sayesinde Canary'da test edebileceğiniz, geleceğe yönelik başka bir genel çağırıcı (invoketarget) da mevcuttur. 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, sabitlenmiş bir öğeyi sabitleyicisine bağlayan oku, özellikle sabitlenmiş öğenin konumu değiştikçe biçimlendirme ve bir öğenin, sınırlayıcı kutusuna ulaştığında ayarlanan başka bir konuma sabitlenmek yerine "kaydırılmasını" ve görüntü alanında kalmasını sağlama. Bu güçlü API'yi kullanıma sunmaktan heyecan duyuyoruz. Gelecekte API'nin özelliklerini daha da genişletmeyi planlıyoruz.

Stil seçimi

Ekip, popover ve anchor'ü birlikte kullanarak özelleştirilebilir bir seçim açılır menüsünü etkinleştirme konusunda ilerleme kaydetti. İyi bir haberimiz var. Bu konuda çok ilerleme kaydettik. Maalesef bu API şu anda deneme aşamasındadır. 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;
}

Not: Bu API'nin şu anda deneme aşamasında olduğunu ve bu nedenle söz konusu söz dizimi muhtemelen değişeceğini unutmayın.

appearance: base-select'e ek olarak birkaç yeni HTML güncellemesi de var. Özelleştirme için seçeneklerinizi datalist içine sarmalama ve seçeneklerinize resim gibi etkileşimli olmayan içerikler ekleme gibi özelliklerden yararlanabilirsiniz. Ayrıca, seçeneklerin içeriğini kendi içine yansıtacak ve kendi ihtiyaçlarınıza göre özelleştirebileceğiniz yeni bir öğeye (<selectedoption>) de erişebilirsiniz. Bu öğe gerçekten kullanışlıdır.

Demo görseli

Canlı demo

<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 kodda, Gmail kullanıcı arayüzünde <selectedoption> öğesinin özelleştirilmesi gösterilmektedir. Bu örnekte, görsel bir simge, yer kazanmak için seçilen yanıt türünü temsil etmektedir. Seçenek stilini önizleme stilinden ayırmak 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.

Demo görseli

Canlı demo

selectedoption .text {
  display: none;
}

Bu API için <select> öğesini yeniden kullanmanın en büyük avantajlarından biri geriye dönük uyumluluktur. Bu ülke seçiminde, kullanıcıların içeriği daha kolay ayrıştırması için seçeneklerde bayrak resimleri içeren özelleştirilmiş bir kullanıcı arayüzü görebilirsiniz. Desteklenmeyen tarayıcılar, anlayamadıkları satırları (ör. özel düğme, veri listesi, seçili seçenek ve seçeneklerdeki resimler) yoksayar. Bu nedenle, yedek seçenek mevcut varsayılan seçim kullanıcı arayüzüne benzer olacaktır.

Soldaki desteklenen tarayıcı görseli ve sağdaki desteklenmeyen tarayıcı yedeği.

Özelleştirilebilir seçimler sayesinde sınırsız sayıda seçenekten yararlanabilirsiniz. Airbnb tarzındaki bu ülke seçiciyi, duyarlı tasarım için akıllı bir stil kullanması nedeniyle özellikle seviyorum. Yakında kullanıma sunulacak stillenebilir seçeneğiyle bunu ve daha fazlasını yapabilirsiniz. Bu özellik, web platformuna çok ihtiyaç duyulan bir katkı sunar.

Demo görseli

Canlı demo

Özel akordeon

Chrome ekibinin odaklandığı tek kullanıcı arayüzü bileşeni, belirli bir stilin (ve bununla birlikte gelen tüm parçaların) çözülmesi değil. İlk ek bileşen güncellemesi, akordeondaki öğelerden yalnızca birinin aynı anda açılabileceği özel akordeonlar oluşturma olanağıdır.

Tarayıcı desteği

• 120
• 120
• 130
• 17.2

Bunu etkinleştirmenin yolu, birden fazla ayrıntı öğesi için aynı ad değerini uygulamaktır. Böylece, radyo düğmeleri grubuna benzer şekilde bağlı bir ayrıntı grubu oluşturulur.

Özel akordeon demosu

<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

Kullanıcı arayüzü bileşenleriyle ilgili bir diğer iyileştirme de :user-valid ve :user-invalid sözde sınıflarıdır. Son zamanlarda tüm tarayıcılarda kararlı 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 bir form denetimiyle yalnızca kullanıcı girişle önemli ölçüde etkileşime geçtikten sonra eşleşir. Bu, bir form değeriyle etkileşim kurulup kurulmadığını veya "kirli" hale gelip gelmediğini belirlemek için çok daha az kod gerektiği anlamına gelir. Bu durum, kullanıcı geri bildirimi sağlamak için çok yararlı olabilir ve geçmişte bunu yapmak için gerekli olan çok sayıda komut dosyasını azaltır.

Tarayıcı desteği

• 119
• 119
• 88
• 16,5

Kaynak

Demo Ekran Kaydı

Canlı Demo

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 sayede girişin boyutu, içeriğine göre büyüyebilir (veya küçülebilir). field-sizing: content, özellikle çok küçük bir giriş kutusunda isteminizi daha önceki kısımlarında yazdığınız metni görmek için yukarı kaydırmanız gerekebilecek sabit boyutlara çözümlenmediğiniz için metin alanları için özellikle kullanışlı olabilir.

Tarayıcı desteği

• 123
• 123
• x
• x

Kaynak

Demo Ekran Kaydı

Canlı Demo

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 çizgi öğesini etkinleştirme özelliği, küçük ancak kullanışlı 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.

Ekran Görüntüsü Seçin

Canlı Demo'yu seçin

<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

Yalnızca etkileşimler ve bileşenler için değil, sürekli olarak iterasyon yapıyoruz. Geçtiğimiz yıl kullanım kolaylığı sağlayan birçok güncelleme yaptık.

Ön izlemeyle iç içe yerleştirme

Yerleşik CSS iç içe yerleştirme özelliği geçen yıl tüm tarayıcılarda kullanıma sunuldu ve o zamandan beri önizlemeyi desteklemek için iyileştirildi. Bu da artık öğe adlarının önünde & kullanılmasının zorunlu olmadığı anlamına geliyor. Bu sayede, iç içe yerleştirme işlemi çok daha ergonomik ve geçmişte alıştığım gibi oluyor.

Tarayıcı desteği

• 120
• 120
• 117
• 17.2

Kaynak

CSS iç içe yerleştirmeyle ilgili en sevdiğim özelliklerden biri, bileşenleri görsel olarak engellemenize ve bu bileşenlere kapsayıcı sorguları ve medya sorguları gibi durumlar ve değiştiriciler eklemenize olanak tanımasıdır. Daha önce, kesinlik sağlamak adına tüm bu sorguları dosyanın altında gruplandırma alışkanlığım vardı. Artık bunları kodunuzun yanına mantıklı 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 Align-content

Blok düzeninde align-content gibi merkezleme mekanizmalarını kullanabilme özelliği de oldukça kullanışlı bir değişiklik. 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.

Tarayıcı Desteği

• 123
• 123
• 125
• 17,4

Ekran görüntüsü

Canlı Demo

div {
  align-content: center;
}

Metin kaydırma: denge ve güzellik

Düzenden bahsetmişken, metin düzeninde text-wrap: balance ve pretty eklenmesiyle güzel bir iyileştirme yapıldı. text-wrap: balance daha düzgün bir metin bloğu için kullanılırken text-wrap: pretty, metnin son satırındaki tekil kelimeleri azaltmaya odaklanır.

Demo Ekran Kaydı

Canlı Demo

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek balance ve pretty'nin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

h1 {
  text-wrap: balance;
}

text-wrap: balance hakkında daha fazla bilgi edinin.

Uluslararası yazım 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.

Tarayıcı desteği

• 119
• 119
• x
• x

word-break: normal ve word-break: auto-phrase karşılaştırması

Ayrıca, Çince, Japonca ve Korece yazı tiplerinin okunabilirliğini artırmak ve görsel açıdan daha ilgi çekici sonuçlar elde etmek için noktalama işaretleri arasındaki kerning'i uygulayan text-spacing-trim seçeneği de vardır.

Tarayıcı desteği

• 123
• 123
• x
• x

Kaynak

Noktalama işareti karakterleri bir satırda göründüğünde, CJK noktasının sağ yarısı kaldırılmalıdır.

Göreceli 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, renklerde 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ğerlerdeki tonlama için listedeki kardeş dizindir. Tema oluşturmak için adımlamayı özel özelliklerle ve göreli renk söz dizimini nasıl birleştirebileceğinizi gösterir.

Demo Ekran Kaydı

Canlı Demo

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek balance ve pretty'nin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

: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 çok daha dinamik ve basit hale geldi.

Tarayıcı desteği

• 123
• 123
• 120
• 17,5

Kaynak

light-dark() işlevi, renk temalandırma seçeneklerini basitleştiren ergonomik bir iyileştirmedir. Böylece, tema stillerini daha kısa bir şekilde yazabilirsiniz. Bu, Adam Argyle tarafından hazırlanan görsel şemada çok güzel bir şekilde gösterilmiştir. Daha önce, tema seçeneklerini ayarlamak için iki farklı kod bloğu (varsayılan temanız ve bir kullanıcı tercihi sorgusu) kullanmanız gerekiyordu. Artık light-dark() işlevini kullanarak bu stil seçeneklerini hem açık hem de koyu temalar için aynı CSS satırına yazabilirsiniz.

light-dark()'in görselleştirmesi. Daha fazla bilgi için demoya göz atın.

html {
  color-scheme: light dark;
}

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

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

:has() seçici

Modern kullanıcı arayüzünden bahsederken, geçtiğimiz yılın en etkili birlikte çalışabilirlik özelliklerinden biri olan :has() seçiciden bahsetmemek olmaz. Bu seçici, geçen yılın Aralık ayında tüm tarayıcılarda kullanıma sunuldu. Bu API, mantıklı stiller yazma konusunda devrim niteliğindedir.

Tarayıcı desteği

• 105
• 105
• 121
• 15.4

Kaynak

:has() seçici, bir alt öğenin belirli alt öğelerinin olup olmadığını veya bu alt öğelerin belirli bir durumda olup olmadığını kontrol etmenizi sağlar ve temel olarak üst öğe seçici olarak da işlev görebilir.

has()'in Tokopedia'daki karşılaştırma bloklarına stil uygulamak için kullanıldığı demo.

:has(), bloklara iç içeriklerine göre stil vermek için :has() kullanan PolicyBazaar da dahil olmak üzere birçok şirket için özellikle yararlı olduğunu kanıtlamıştır. Örneğin, karşılaştırma bölümünde stil, blokta karşılaştırılacak bir plan varsa veya blok boşsa ayarlanır.

":has() seçicisiyle, kullanıcının seçiminin JavaScript tabanlı doğrulamasını ortadan kaldırdık ve bunu, önceki deneyimle aynı şekilde sorunsuz bir şekilde çalışan bir CSS çözümüyle değiştirdik." –Aman Soni, Teknik Lider, PolicyBazaar

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

Tarayıcı desteği

• 105
• 105
• 110
• 16

Kaynak

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

Angular.dev sitesinde, başlık kartlarında kapsayıcı sorguları gösterilmektedir.

Kapsayıcı sorguları olmadan bu tür bir şey yapmak oldukça zordu ve yeniden boyutlandırma gözlemcileri ile öğe gözlemcileri gerektirdiği için performansa zarar veriyordu. Artık bir öğeye üst öğesinin boyutuna göre stil uygulamak çok kolay.

Demo Ekran Kaydı

Canlı Demo

Angular başlık kartı kapsayıcı sorgusunu yeniden oluşturma.

@property

Son olarak, @property özelliğini çok yakında temele eklemeyi planlıyoruz. 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 güçlü özelliklerin kapılarını açıyoruz. Daha önce hiç mümkün olmayan bu özellik, CSS diline çok fazla derinlik katıyor.

Tarayıcı desteği

• 85
• 85
• 128
• 16:4

Kaynak

Demo Ekran Kaydı

Canlı Demo

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

Sonuç

Tarayıcılara sunulan bu güçlü yeni kullanıcı arayüzü özelliklerinin tümüyle sınırsız olasılık elde edebilirsiniz. Kaydırmayla çalışan animasyonlar ve görüntü geçişleri içeren yeni etkileşimli deneyimler, web'i daha önce hiç görmediğimiz şekillerde daha akıcı ve etkileşimli hale getiriyor. Üst düzey kullanıcı arayüzü bileşenleri, yerel deneyimin tamamını değiştirmeden güçlü ve güzel bir şekilde özelleştirilmiş bileşenler oluşturmayı hiç olmadığı kadar kolaylaştırıyor. Son olarak, mimari, düzen, yazı tipi ve duyarlı tasarımda yapılan yaşam kalitesi iyileştirmeleri yalnızca küçük büyük sorunları çözmekle kalmaz, aynı zamanda geliştiricilere çeşitli cihazlarda, form faktörlerinde ve kullanıcı ihtiyaçlarına uygun çalışan karmaşık arayüzler oluşturmak için ihtiyaç duydukları araçları da sağlar.

Bu yeni özellikler sayesinde, kaydırmalı anlatım ve öğeleri birbirine bağlama gibi performans açısından ağır olan özellikler için üçüncü taraf komut dosyalarını kaldırabilir, ankraj konumlandırması ile öğeleri birbirine bağlayabilir, akıcı sayfa geçişleri oluşturabilir, açılır menülere stil verebilir ve kodunuzun genel yapısını doğal olarak iyileştirebilirsiniz.

Web geliştirici olmak için hiç bu kadar iyi bir zaman olmamıştı. CSS3'ün duyurulmasından bu yana bu kadar enerji ve heyecan görmedik. İhtiyaç duyduğumuz ancak geçmişte yalnızca hayal ettiğimiz özellikler nihayet gerçek oluyor ve platformun bir parçası haline geliyor. Öncelik verip bu özellikleri hayata geçirebilmemiz, sizin görüşleriniz sayesinde mümkün oldu. Zor ve sıkıcı işleri yerel olarak yapmayı kolaylaştırmak için çalışıyoruz. Böylece, markanızın öne çıkmasını sağlayan temel özellikler ve tasarım ayrıntıları gibi önemli konulara daha fazla zaman ayırabilirsiniz.

Bu yeni özellikler kullanıma sunulduğunda daha fazla bilgi edinmek için developer.chrome.com ve web.dev adreslerini takip edin. Ekibimiz, web teknolojileriyle ilgili en son haberleri bu adreslerde paylaşır. Kaydırmayla çalışan animasyonlar, görüntü geçişleri, ankraj konumlandırması ve hatta stil uygulanabilir seçimi deneyin ve görüşlerinizi bizimle paylaşın. Size yardımcı olmaya hazırız.