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 sunuluyor 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 bir çağrı ve yanıt ilişkisidir. 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
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 kaydırma tabanlı dinamik animasyonlar oluşturmanıza olanak tanır.
Kaydırmayla çalışan animasyonlar oluşturma
Platformda zamana dayalı animasyonların işleyişine benzer şekilde, artık bir animasyonu başlatmak, duraklatmak ve geri almak için kaydırma çubuğunun kaydırma ilerleme durumunu kullanabilirsiniz. Dolayısıyla, ileri doğru kaydırırken bu animasyonun ilerlediğini, geri doğru kaydırırken ise tam tersini göreceksiniz. 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 hareket eder. 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, resmi kaydırma alanı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 bulundurmanız ö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 yaptıktan sonra, stillerinizin çalışacağını ve animasyonun kullanıcı için sorun oluşturmayacağı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ırmalı hikaye 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ır ve ardından her birine kaydırmayla çalışan ilgili animasyon uygulanır. 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ızdan bağımsız olarak, 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'nin kullanılması hem kod yönetimi hem de performans açısından ciddi avantajlar sağladı.
"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. Buna, yalnızca yeni animasyon zaman çizelgelerini değil, aynı zamanda bir animasyonu başlatmak için kaydırma noktasını kullanma olanağı da (kaydırmayla tetiklenen animasyonlar) dahildir.
Gelecekte tarayıcılarda daha da fazla kaydırma özelliği kullanıma sunulacak. 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.
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 geliştirilmesi 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ı. Bu eğitimde, Bramus Van Damme'den kaydırmayla çalışan animasyonlarla ilgili temel bilgileri (özelliğin işleyiş şekli, kelime dağarcığı, efekt oluşturmanın çeşitli yolları ve zengin deneyimler oluşturmak için efektleri nasıl birleştireceğiniz) öğreneceksiniz. Bu video serisini mutlaka incelemenizi öneririz.
Geçişleri görüntüleme
Web sayfalarında içeriden animasyon oluşturmaya yönelik güçlü bir yeni özellikten bahsettik. Bununla birlikte, sorunsuz bir kullanıcı deneyimi oluşturmak için sayfa görüntülemeleri arasında animasyon oluşturmaya yönelik görüntü geçişleri adlı güçlü bir yeni özellik de mevcuttur. 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.
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üzenlemeye ve olanaklar eklemeye kadar tüm işlemleri sorunsuz bir kullanıcı akışında yapabilirsiniz.
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örseli
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
Geçiş türlerini görüntüleme
Görüntüleme geçişlerinde yapılan bir diğer büyük 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
Ö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 farklı şekillerde (soldan sağa ve tam tersi) 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. view-transition-types, yeni geçişleri başlatmadan önce bunu manuel olarak yapmanızı gerektirmek yerine tarayıcıda eski geçişlerin temizlenmesini sağlar ve bu işi sizin için yapar.
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ünüm geçişleri desteğini kullanıma sunduğumuzu duyurmaktan heyecan duyuyoruz.
Tarayıcı desteği
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 alana gitme gibi kaynakta geçişi içermez.
Aynı doküman görünümü geçişleriyle arasındaki en önemli fark, geçişinizi document.startViewTransition()
ile sarmamanız gerektiğidir. Bunun yerine, CSS @view-transition
at-kuralı'nı kullanarak görüntü geçişinde yer alan 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) => {
// ...
});
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
vepagereveal
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ı oluşturmak kolay bir iş değildir ancak CSS ve HTML, bu süreci çok daha yönetilebilir hale getirmek için gelişiyor. Yeni özellikler ve iyileştirmeler, kullanıcı arayüzü bileşenlerinin oluşturulmasını basitleştirerek harika deneyimler oluşturmaya odaklanmanıza olanak tanır. 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.

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ğını yönetme
- Seçilen seçenek değerini görselleştirme
- Ok etkileşim tarzı
- Durum yönetimi (açık/kapalı)
Şu anda bu durumun tümünü kendiniz yönetmek zordur ancak platform da bunu kolaylaştırmaz. Bu sorunu düzeltmek için bu parçaları ayırdık ve stil açılır listelerini etkinleştirecek ancak çok daha fazlasını yapacak birkaç basit özellik kullanıma sunuyoruz.
Popover API
İ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.
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 öğede pop-up özelliğini ayarlayın ve kimliğini popovertarget
kullanarak 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ğinden tarayıcı, aşağıdakiler de dahil olmak üzere birçok önemli davranışı ek komut dosyası olmadan 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 odağı 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 açma/kapatma düğmesini iki kez tıklamak pop-up'ı kapatır ve odağı geri verir. - Varsayılan bileşen bağlamaları. : Tarayıcı, bir pop-up'ı tetikleyicisine anlamsal olarak bağlar.

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ı. Daha eski tarayıcıları desteklemek için Oddbird tarafından GitHub'ın Keith Cirkel'inden önemli ölçüde destek alınarak geliştirilen popover polyfill'i kullanarak bu özelliği kademeli olarak geliştirdiler.
"Pop-up'a geçerek binlerce satır kodun desteğini sonlandırdı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 animasyonlu hale getirme
Pop-up'larınız olduğunda muhtemelen etkileşim eklemek istersiniz. Geçtiğimiz yıl, animasyonlu pop-up'ları desteklemek için dört yeni etkileşim özelliği kullanıma sunuldu. 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ü.
display: none
'dan üst katmana giriş efektlerini canlandıran @starting-style
kuralı.
Animasyon sırasında üst katman davranışını kontrol etmek için kullanılan yer paylaşımı özelliği.
Bu özellikler, pop-up veya iletişim kutusu fark etmeksizin en üst katmanda animasyonlu olarak gösterdiğiniz tüm öğeler için geçerlidir. 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;
}
}
Öncelikle, @starting-style
öğesini ayarlayın. Böylece tarayıcı, bu öğenin DOM'de hangi stillerde animasyonlu olacağını bilir. 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ık ö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ı
Popover, hikayenin yalnızca başlangıcıydı. Yer işareti konumlandırma desteği artık Chrome 125'te kullanıma sunuldu.
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 anchor işlevinde anchor-name özelliğini 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. Aslında, Roman Komarov'un makalesinden esinlenilen aşağıdaki demoda, fareyle üzerine geldiğinizde veya Sekme tuşuna bastığınızda liste öğelerine sabitlenen bir 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 olarak değiştirir.
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, ankraj konumlandırma API'sinin bir parçası olarak eklenen ve iç içe yerleştirilmiş alan adı verilen yeni bir düzen mekanizması da mevcuttur. İç 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;
}
Bu konumsal değerleri, merkez konumda başlayıp sola, sağa veya tüm sütunları ya da satırları kaplayacak şekilde yayılacak şekilde span anahtar kelimeleriyle birleştirebilirsiniz. Mantıksal özellikleri de kullanabilirsiniz. Bu düzen mekanizmasını görselleştirmeyi ve kullanmayı kolaylaştırmak için Chrome 125 ve sonraki sürümlerdeki 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örseli
Canlı demo
position-try-options
ile dinamik sabitleme konumları
Menülerin ve alt menü gezinmesinin oluşturulması, pop-up ve ankraj yerleşimi kombinasyonuyla çok daha kolaydır. Ayrıca, sabitlenmiş öğenizle bir görüntü alanının kenarına ulaştığınızda, konumlandırma değişikliğini tarayıcının sizin için halletmesine izin verebilirsiniz.
Bunu birkaç şekilde yapabilirsiniz. İlk olarak kendi yerleşim kurallarınızı oluşturmanız gerekir. Bu durumda, alt menü başlangıçta "mağaza" düğmesinin sağına yerleştirilir. 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.
Artık tarayıcı, bu sabitlenmiş durumlar arasında geçiş yaparak önce sağ konumu dener, ardından aşağıya kayar. Bu, 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);
}
Açık konumlandırma mantığının yanı sıra, sabitlemenizin blokta veya satır içi yönlerde dönmesi gibi bazı temel etkileşimleri istiyorsanız tarayıcı birkaç anahtar kelime sağlar.
position-try-options: flip-block, flip-inline;
Basit bir çevirme deneyimi için bu çevirme anahtar kelime değerlerinden yararlanın ve position-try
tanımı yazma işlemini tamamen atlayın. Böylece, yalnızca birkaç satır CSS ile tam işlevli, konuma duyarlı bir ankraj konumlandırılmış öğeye 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 yayında 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, şu anda popover
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 gerekmeden (ö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 sorununu çözmek 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
'un <dialog>
, <details>
, <video>
, <input type="file">
ve daha fazlası dahil tüm etkileşimli öğeler için normalleştirilmiş pop-up'lar sağladığı açıklayıcı 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 de 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 uygulanabilir seçim
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, ilerleme durumumuzla ilgili bazı canlı demoları ve güncellemeleri paylaşmak ve sizden geri bildirim almak için sabırsızlanıyorum.
Öncelikle, kullanıcıların yeni, özelleştirilebilir seçim deneyimine nasıl dahil edileceği konusunda ilerleme kaydedildi. Bunu yapmanın şu anda devam eden 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, özelleştirilebilir bir seçim deneyimine kaydolursunuz.
select {
appearance: base-select;
}
appearance: base-select
'e ek olarak birkaç yeni HTML güncellemesi de var. Bu özellikler arasında, özelleştirme için seçeneklerinizi datalist
içine sarmalama ve seçeneklerinize resim gibi etkileşimli olmayan içerikler ekleme olanağı yer alır. 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.

Özelleştirilebilir seçimlerle olasılıkların sınırı yoktur. 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
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.
<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 çalışı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.
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
Yakın zamanda kullanıma sunulan kullanışlı bir bileşen güncellemesi de field-sizing: content
. Bu bileşen, girişler ve metin alanları gibi form denetimlerine uygulanabilir. 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 ilk 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.
Demo Ekran Kaydı
Canlı Demo
textarea, select, input {
field-sizing: content;
}
Alan boyutlandırması 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 faydalı bir bileşen özelliğidir. Bu, semantik açıdan pek bir kullanıma sahip olmasa da, özellikle yer tutucu değer gibi bir gruplandırma grubuyla gruplandırmak istemeyebileceğiniz içerikleri seçtiğiniz bir listede güzelce 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 hr kullanma hakkında daha fazla bilgi edinin.
Yaşam kalitesini artıran iyileştirmeler
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.
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 durum ve değiştiriciler eklemenize olanak tanımasıdır. Daha önce, belirlilik amacıyla bu sorguların tümünü dosyanın alt kısmı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. Yani artık bir div içinde dikey olarak ortalama gibi işlemleri, esnek veya ızgara düzeni uygulamak zorunda kalmadan ve bu düzen algoritmalarından istemeyebileceğiniz kenar boşluğu daraltmayı önleme gibi yan etkiler olmadan yapabilirsiniz.
Tarayıcı desteği
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
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
CJK metin özellikleri için yazı düzeni güncellemeleri, geçen yıl doğal ifade sınırında satırı sarmalayan word-break: auto-phrase
özelliği gibi birçok güzel güncelleme aldı.
Tarayıcı desteği

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.

Göreceli renk söz dizimi
Renk temaları dünyasında, göreli renk söz diziminde büyük bir güncelleme yapıldı.
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 dizimi ile yapılabilir. Arka plan, tona göre birincil rengi kullanır ve değerini ayarlamak için açıklık, renk ve ton kanallarını ayarlar. --i, değerlerin gradyanı 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
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.
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 görsel diyagramda Adam Argyle tarafından bu konu çok güzel bir şekilde açıklanmıştır. 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 hem açık hem de koyu temalar için bu stil seçeneklerini 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 bir 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çicisinden 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.
: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ırıp bunu, önceki deneyimle aynı şekilde sorunsuz çalışan bir CSS çözümüyle değiştirebildik." –Aman Soni, Teknik Lider, PolicyBazaar
Container sorguları
Web'e eklenen ve kullanım alanı giderek genişleyen bir diğer önemli özellik de kapsayıcı sorgularıdır. Bu özellik, stilleri uygulamak için bir öğenin üst öğesinin doğal boyutunu sorgulama olanağı sunar. Yalnızca ekran boyutunu sorgulayan medya sorgularından çok daha hassas bir yaklaşımdır.
Angular kısa süre önce angular.dev adresinde, başlık bloklarına sayfadaki mevcut alanlarına göre stil vermek için kapsayıcı sorguları kullanan yeni ve güzel bir doküman sitesi kullanıma sundu. Bu sayede, düzen değişip çok sütunlu kenar çubuğu düzeninden tek sütunlu düzene geçse bile başlık blokları kendi kendine ayarlanabilir.
Kapsayıcı sorguları olmadan bu tür bir şey yapmak oldukça zordu ve performans açısından zararlıydı. Bu işlem için yeniden boyutlandırma gözlemcileri ve öğe gözlemcileri gerekiyordu. Artık bir öğeye üst öğesinin boyutuna göre stil uygulamak çok kolay.
Demo Ekran Kaydı
Canlı Demo
@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 kazandırmak için önemli bir özelliktir ve bir dizi yeni etkileşim özelliğini etkinleştirir. @property
, CSS'de bağlamsal anlam, tür denetimi, varsayılan değerler ve yedek değerlere de olanak tanır. Aralık stili sorgular gibi daha da güçlü özelliklere kapı açar. Daha önce hiç mümkün olmayan bu özellik, CSS diline çok fazla derinlik katıyor.
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, 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. İhtiyacımız olan 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çim özelliğini deneyin ve görüşlerinizi bizimle paylaşın. Size yardımcı olmaya ve görüşlerinizi dinlemeye hazırız.