Sitenizin CSS ve kullanıcı arayüzü tasarımını iyileştirmek için Chrome'daki araçları ve teknikleri keşfedin.

Kullanıcı arayüzü geliştirme becerilerinizi geliştirin

Kaydırma çubuklarının stilini belirlemek için scrollbar-width ve scrollbar-color özelliklerini kullanın.
Dengeli metin blokları için satır sonlarını elle yazmaya yönelik klasik bir tipografi tekniği CSS'de kullanıma sunuluyor.
CSS Renk 4, web'e daha fazla renk, işleme işlevi ve daha iyi renk geçişleri gibi geniş renk gamı araçları ve özellikleri sunar.
CSS Yazılı Nesne Modeli (OM Türü), CSS değerleriyle çalışmaya türler, yöntemler ve esnek nesne modeli getirir.
@kapsayıcı kuralını kullanarak üst öğenin stil değerlerini sorgulayın.
Favori CSS ön işlemci özelliklerimizden biri artık dilin içinde yerleşik olarak bulunuyor: iç içe yerleştirme stili kuralları.
DOM'unuzun yalnızca bir alt ağacındaki öğeleri seçen kapsamlı stiller oluşturmayı öğrenin.
Doğrudan CSS'nizden, desteklenen renk alanlarında renkleri karıştırın.
Bir alt öğe grubuna An+B mantığı uygulamadan önce gruba önceden filtre uygulayın.
Aynı name değerine sahip birden fazla <details> öğesiyle özel bir akordeon oluşturun.
Eylemsiz özellik, bir öğeye ait kullanıcı giriş etkinliklerinin (odak etkinlikleri ve yardımcı teknolojilerden gelen etkinlikler dahil) kaldırılmasını ve geri yüklenmesini basitleştiren genel bir HTML özelliğidir.
Hızdan öncelikli olarak güzellik için optimize edilmiş metin kaydırmayı etkinleştirin.
Geliştirici Araçları'ndaki CSS Izgara aracı desteğini nasıl tasarladık ve uyguladık.
CSS-in-JS'nin Geliştirici Araçları'nda nasıl desteklendiği ve normal CSS'den farkı.

Gölge DOM

Gölge DOM'yi doğrudan HTML'de uygulamanın ve kullanmanın yeni bir yolu.
Yazar tanımlı adların ve gölge DOM'sinin mevcut birlikte çalışabilirlik durumu.

Düzen

Boyutlandırma birimlerinin bir karışımını kullanarak CSS'deki boyutları belirtin.
Mesajları günlüğe kaydedin ve JavaScript'i çalıştırın.
private=until-found bir özellik değeri keşfedildiğinde, akordeon bölümlerindeki içeriğin bulunabilmesini ve bunlara bağlantı verilebilmesini sağlayabilir.

CSS ve kullanıcı arayüzü örnek olayları

Web kullanıcı arayüzü özellikleri tam olarak nedir ve dönüşüm huninizi nasıl geliştirebilir? Bu özellikleri kullanmanın yararları nelerdir?
Policybazaar, redBus ve Tokopedia ile kaydırma destekli animasyonların avantajlarını keşfedin.
redBus, Policybazaar ve Tokopedia, View Transitions API'yi kullanıyor ve daha iyi performans ile sorunsuz bir kullanıcı arayüzünden yararlanıyor.
Tokopedia, uygulamasındaki kod miktarını azaltmak için Popover API'yi kullanıyor.

Web'de animasyonlar

Web Animasyonları API'si, JavaScript'teki zorunlu animasyonları açıklamak için güçlü temel öğeler sağlar.
Animasyon kompozisyonu özelliği, birden çok animasyon aynı özelliği aynı anda etkilediğinde ne olacağının kontrol edilmesini sağlar.
linear(), noktaları arasında doğrusal olarak etkileşim kuran bir CSS yumuşak geçiş işlevidir. Bu işlev, hemen çıkma ve yay efektlerini yeniden oluşturmanıza olanak tanır.
Bildirim temelli bir şekilde kaydırmaya dayalı animasyonlar oluşturmak için Kaydırma Zaman Çizelgeleri ve Zaman Çizgilerini Görüntüleme ile çalışın.
DERS
Duyarlı tasarımın tarihini okuyun ve duyarlı düzenlerle ilgili temel bilgileri öğrenin. Duyarlı resimler, yazı tipleri, erişilebilirlik ve daha fazlası hakkında bilgi edineceksiniz.
DERS
Kutu modeli, basamak ve belirginlik, flexbox, ızgara ve z-endeksi gibi CSS ile ilgili temel bilgileri öğreneceksiniz. Ayrıca, kullanıcı arabirimi geliştirici becerilerinizi tamamlamak için işlevler, mantıksal özellikler ve daha fazlası hakkında bilgi edineceksiniz.