Kenardan kenara web deneyimleri oluşturma

Android'de Chrome 135'ten itibaren tam ekran modu kullanıma sunulacak.

Artık özel özellikler dahil olmak üzere herhangi bir CSS özelliğiyle attr() işlevini kullanabilirsiniz. Bu işlev, değerleri dize dışındaki veri türlerine ayrıştırabilir.

Chrome DevRel ekibine ve kaykay yapan Chrome Dino'ya katılarak 2024'te Chrome ve web platformu için kullanıma sunulan en yeni CSS'yi keşfedin.

Chrome 131 kullanıma sunuldu. Ayrıntılar öğesi için daha fazla CSS stili, sayfa kenar boşluğu kutularıyla daha kolay baskı düzeni ve daha fazlası.

Artık yeni ::details-content sözde öğesini kullanarak görüntüleme türünü ayarlayabilir ve genişleyen ve daralan kısım için kapsayıcıya stil uygulayabilirsiniz.

Chrome 130 kullanıma sunuluyor! Doküman içinde pencere özelliği, pencere içinde pencere üzerinde daha fazla kontrol sahibi olmanızı sağlar. CSS iç içe yerleştirilmiş bildirimleri, bazı zorlu uç durumları düzeltir ve birden çok satıra bölünen öğelerdeki süslemelerin nasıl davranacağını belirleyebilirsiniz. Pete LePage, Chrome 130'da geliştiriciler için sunulan yeniliklerle ilgili tüm ayrıntıları paylaşıyor.

Tek sayfalık uygulamanızda kullanmak üzere aynı doküman görünümü geçişlerini kullanmaya başlayın.

"interpolate-size" ve "calc-size(" ile doğal boyutlandırma anahtar kelimeleri arasında animasyonlu geçiş

İki yeni JavaScript etkinliğiyle tanışın: ScrollSnapChange ve slideSnapSwap.

View Transition API'yi inceleyen kullanıcıların sayısı arttıkça bazı yanlış kanıları çürütmenin zamanı geldi.

Google I/O 2024'te yayınlanan tüm CSS ve web kullanıcı arayüzü duyurularını okuyun.

MPA için dokümanlar arası görüntüleme geçişleri, etkin türlerle seçmeli görünüm geçişleri ve görüntüleme geçiş sınıfıyla animasyon stillerini paylaşma duyurusu.

Policybazaar, redBus ve Tokopedia ile kaydırma destekli animasyonların avantajlarını keşfedin.

E-ticaret sitelerinin en yeni CSS ve kullanıcı arayüzü özelliklerini (Görüntüleme Geçişleri, Kaydırma tabanlı animasyonlar, Popover API vb.) uygulayarak nasıl avantaj sağladığını öğrenin.

Kaydırma tabanlı animasyonlar hakkında her şeyi öğrenebileceğiniz 10 bölümlük video kursu

Duvar işçiliğini ve ızgarayı farklı özelliklerde tanımlama teklifi.

View Transition API, bir web sitesinin görünümleri arasında geçişler eklemenize olanak tanır.

Çok sayfalı uygulamanızda (MPA) kullanmak üzere dokümanlar arası görünüm geçişlerini kullanmaya başlayın.

Chrome 122 sürümünden itibaren "::backdrop" öğesi, özellikleri kaynak öğesinden devralmaktadır.

Kaydırma çubuklarının stilini belirlemek için "scrollbar-width" ve "scrollbar-color" özelliklerini kullanın.

Aynı "name"e sahip birden fazla "" öğesi ile özel bir akordeon oluşturun.

2023 CSS için büyük bir yıldı. Bu yıl Chrome'da ve web platformu genelinde kullanıma sunulanlar hakkında bilgi edinin.

DOM'unuzun yalnızca sınırlı bir alt ağacındaki öğeleri seçmek için @scope'u kullanmayı öğrenin.

CSS'deki yumuşak geçiş işlevini kullanıma sunuyoruz. Bu yumuşatma işlevi, noktaları arasında doğrusal etkileşim kurarak hemen çıkma ve ilkbahar efektlerini yeniden oluşturmanıza olanak tanır.

Google I/O 2023'te öne çıkarılan, kaçırmak istemediğiniz en popüler 20 CSS ve kullanıcı arayüzü özelliği.

Bildirim temelli bir şekilde kaydırmaya dayalı animasyonlar oluşturmak için Kaydırma Zaman Çizelgeleri ve Zaman Çizgilerini Görüntüleme ile nasıl çalışacağınızı öğrenin.

Favori CSS ön işlemci özelliklerimizden biri artık dilin içinde yerleşik olarak bulunuyor: iç içe yerleştirme stili kuralları.

CSS Çalışma Grubu, CSS'de iç içe yerleştirmeyi tanımlamanın en iyi yolu üzerine tartışmaya devam etmektedir. CSS yazarsanız yardımınıza ihtiyacımız var.

Chrome 108'de görüntü alanı yeniden boyutlandırma davranışında yapılacak değişiklikler, Chrome'un bu değişikliği neden yaptığı ve hazırlanmak için neler yapabileceğiniz.

Chrome 106 kullanıma sunulmaya başladı. Sayıları biçimlendirirken daha fazla kontrol sahibi olmanızı sağlayan yeni Uluslararası API'ler var. Kritik içerikleri kullanıcıya göstermeyi kolaylaştıran yeni Pop-up API için bir kaynak denemesi var. CSS ile ilgili birkaç iyileştirme mevcuttur. Dahası da var.

Chrome Geliştirici Araçları ve Angular ekipleri, test pilotu olarak Angular'ı kullanarak size daha iyi bir hata ayıklama deneyimi sunmak için iş birliği yaptı. Diğer çerçeveler de benzer değişiklikler sağlayabilir.

Chrome Geliştirici Araçları'nda yapılan ve paketleyiciler, çerçeveler ve üçüncü taraf kodlarla çalışırken hata ayıklama ve profil oluşturma deneyiminizi iyileştiren son değişikliklerden bazılarına göz atın.

"Basamaklı katmanlar, kodunuzun basamak önceliğini yönetmenize yardımcı olacak yeni bir CSS API'sidir ve yakında tüm modern tarayıcılarda kullanıma sunulacaktır."

Chrome 89 kullanıma sunuluyor! WebHID, WebNFC ve Web Serial, kaynak denemelerinden kaldırıldı ve artık kararlı olarak kullanılabilir. Birkaç geliştiricinin PWA yüklenebilirlik kontrollerini atlatmak için kullandığı güvenlik açığını kapatıyoruz. Web Paylaşımı ve Web Paylaşımı Hedefi masaüstüne geliyor. Dahası da var!

Learn how scroll-driven and scroll-triggered animations enhance storytelling articles

When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?

Pre-filter a set of child elements before applying An+B logic on it.