Modern CSS: :has, kapsayıcı sorgular, renk uzayları
:has seçicisi, kapsayıcı birimleri, yeni renk işlevleri, mantıksal özellikler ve çapa konumlandırma gibi yeni CSS özelliklerini eski tarayıcılar için yedekleriyle birlikte kullanırsın.
Seviye 401 · 14 ders · 12 pratik lab
Dersler
Seçiciler ve mantık
- :has ile üst öğeyi seçmek
- :is ve :where ile özgüllük denetimi
- @supports ile özellik sorguları
- Kısa görev: yalnız CSS ile durumuna göre değişen form
Düzen ve yerleşim
- Kapsayıcı birimleri ve stil sorguları
- Mantıksal özellikler ve sağdan sola yazılan diller
- Çapa konumlandırma ile açılır öğeler
- popover ve dialog’u biçimlendirmek
- Kısa görev: bir sayfayı sağdan sola yazılan bir dile uyarla
Renk ve yazı
- oklch ve color-mix ile renk
- Göreli renk sözdizimiyle palet türetmek
- Değişken yazı tipleri ve text-wrap
- Aşamalı iyileştirme ve yedekler
- Bitirme görevi: eski bir arayüzü modern CSS ile yenile
Pratik lablar
- Ebeveyni :has ile seç: İçinde görsel olan kartlara farklı düzen vermek için :has kullan.
- Durumuna tepki veren form yaz: Hatalı alan içeren fieldset'i ve onay kutusu işaretlenince açılan bölümü yalnızca CSS ile yönet.
- Özgüllüğü :where ile sıfırla: Kütüphane taban stillerini :where ile sarıp kullanıcı stillerinin kolayca ezebilmesini sağla, :is ile farkını göster.
- @supports ile yedek yaz: Eski tarayıcıda Grid desteklenmezse Flexbox düzenine düşen bir sayfa kur.
- Aşamalı geliştirme uygula: Yeni renk ve düzen özelliklerini kullanan sayfanın eski tarayıcılarda da kullanılabilir kaldığını test et.
- Eski arayüzü modern CSS ile yenile: Tablo düzenli eski yönetim panelini :has, kapsayıcı sorguları ve modern renklerle yeniden yaz.
- Fiziksel özellikleri mantıksala çevir: margin-left ve padding-right kullanımlarını margin-inline-start gibi mantıksal karşılıklarına çevir.
- Sayfayı sağdan sola dile uyarla: Arapça sürümde simgeler, oklar ve hizalama ters kalıyor; dir ve mantıksal özelliklerle düzelt.
- Kapsayıcı birimleriyle yazı ölçekle: Bileşen içi başlıkları cqi birimleriyle ölçekle ve stil sorgusuyla tema değişimine tepki ver.
- Açılır pencereyi popover ile yap: Yardım ipucunu JavaScript yazmadan popover özniteliğiyle aç-kapat.
- İpucunu düğmeye sabitle: Anchor positioning ile ipucunu düğmenin üstüne yerleştir ve ekran kenarında otomatik yer değiştirsin.
- dialog'u baştan biçimlendir: Onay penceresini dialog ile kur, ::backdrop ve giriş-çıkış animasyonlarını ekle, odak davranışını test et.
Kurs hakkında
:has seçicisi, kapsayıcı birimleri, yeni renk işlevleri, mantıksal özellikler ve çapa konumlandırma gibi yeni CSS özelliklerini eski tarayıcılar için yedekleriyle birlikte kullanırsın.
Ne öğreneceksin
- Seçiciler ve mantık
- Düzen ve yerleşim
- Renk ve yazı
Ön koşullar
Aynı yolun 301 düzeyine kadar olan konularını uygulamış olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 401 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.