- Son dönemde web sitelerindeki performans düşüşünün başlıca nedenleri aşırı JavaScript kullanımı ve izleme betikleridir; çoğu durumda bunların yerini yalnızca HTML/CSS ile doldurmak mümkündür
- CSS nesting, relative colors, yeni viewport birimleri (lvh, svh, dvh) gibi yakın zamanda eklenen özellikler, geçmişte JS veya önişleyicilere bağlı olunan işleri basitçe çözebilir hale getiriyor
- CSS, yalnızca basit bir stil aracı değil; animasyonlar, girdi doğrulama, karanlık mod teması, akordeon menüler de oluşturabilen güçlü bir dildir
- Performans açısından da CSS, GPU hızlandırması ve ayrı bir iş parçacığında çalışması sayesinde animasyonlar ve geçiş efektlerinde JS'den daha akıcı ve verimlidir
- Yazar, CSS'i yalnızca pratik bir araç olmanın ötesinde ifade ve sanatın bir aracı olarak vurguluyor ve web geliştiricilere modern CSS'in potansiyelinden daha fazla yararlanmalarını öneriyor
Giriş: Web'in karmaşıklığı ve yeni denemeler
- Birçok web sitesi, JavaScript framework'lerinin aşırı kullanımı nedeniyle performans düşüşü ve karmaşıklık yaşıyor
- React uygulamaları birkaç saniyede yükleniyor, NextJS ise hydration hataları üretiyor
node_modules klasörü birkaç gigabayt yer kaplıyor
- JavaScript olmadan da yalnızca HTML ve CSS ile güçlü özellikler hayata geçirilebilir
- E-ticaret sitelerindeki karmaşık alışveriş sepetleri veya dashboard'lar dışında JavaScript zorunlu olmayabilir
- Bu yazı, CSS'in en yeni özelliklerini tanıtıyor ve geliştiricileri yalnızca JavaScript'e bağımlı kalmadan farklı olanakları keşfetmeye yönlendiriyor
CSS hakkındaki yanlış algılar ve bakış açısı
CSS gerçekten zor ve kullanışsız mı?
- CSS'e yönelik olumsuz algı, temel öğrenimin eksikliğinden kaynaklanıyor
- Pek çok geliştirici CSS temellerini atlayıp JavaScript veya TypeScript'e odaklanıyor
- CSS, basit bir stillendirme aracı değil; güçlü yetenekler sunan alan odaklı bir dil
- CSS, flexbox gibi araçlarla karmaşık düzenleri kolayca kurabiliyor
- Örnek:
display: flex ve justify-content: center ile bir div'i ortalamak kolaydır
- Tarayıcı geliştirici araçları, flexbox özelliklerini görsel olarak ayarlamaya yarayan bileşenler sunar
- Yalnızca tek bir alanı (ör. JS) derinlemesine öğrenip CSS'i ihmal ederseniz, bunun yük gibi gelmesi doğaldır
CSS yazmanın sancısı ve değişim
- Eskiden CSS pek rahat değildi; bu yüzden Sass, Tailwind gibi araçlar ortaya çıktı
- Örnek:
.post > .buttons .like:hover gibi uzun seçici zincirlerini yönetmek gerekiyordu
- Son dönemde kaliteyi artıran özellikler (nesting vb.) eklendiği için artık yalnızca temel CSS ile de rahat geliştirme yapılabiliyor
- CSS nesting, ilgili stilleri tek yerde toplayarak okunabilirliği artırır
- Örnek:
.post { & > .buttons { .like { &:hover { ... } } } }
- Ebeveyn-çocuk ilişkisi netleştiğinden daha kısa ve basit sınıf adları kullanılabilir
- Relative colors, renk ayarlamayı kolaylaştırır
hsl(from #123456 h s calc(l + 10)) ile parlaklık ayarlanabilircolor-mix() ile iki renk karıştırılarak dinamik renk üretilebilir
- Media query aralık sözdizimi,
(width <= 768px) gibi sezgisel koşullar tanımlamayı sağlar
- lh birimi, satır yüksekliğine göre stillendirmeyi destekler
- scrollbar-gutter özelliği, scrollbar nedeniyle oluşan layout kayması sorununu çözer
- Baseline, temel tarayıcılarda özellik uyumluluğunu garanti eder
- newly available, modern tarayıcılarda çalışır
- widely available, 2,5 yıl önceki tarayıcılara kadar desteklenir
- Örnek: CSS nesting, Aralık 2023'ten beri tüm tarayıcılarda destekleniyor
Neden yalnızca CSS/HTML ile geliştirme yapılmalı?
- Bazı kullanıcılar JavaScript'i varsayılan olarak devre dışı bırakır (güvenlik, gizlilik vb. nedenlerle)
- Web sitesini saf CSS/HTML ile sunarsanız, bu kullanıcıların da siteyi kullanabilme olasılığı artar
- Hem geliştirme hem de kullanıcı tarafında, yalnızca CSS/HTML kullanmanın hız, erişilebilirlik, CPU/pil kullanımı açısından avantajları büyüktür
- CSS animasyonları compositor thread üzerinde çalıştığı için CPU yükünü azaltır
- JavaScript event loop üzerinden çalışır; bu da küçük gecikmelere yol açabilir
- Erişilebilirlik ve kullanım kolaylığı artar
- Buton hover efektleri, toast animasyonları, girdi doğrulama gibi işler CSS ile kolayca yapılabilir
CSS'in pratik örnekleri ve başlıca özellikleri
@starting-style ile doğal başlangıç animasyonları oluşturma
- Önceden bir öğenin giriş animasyonunu yapmak için keyframes, JS tetikleyicileri gibi karmaşık yapılara ihtiyaç duyuluyordu
- @starting-style ile başlangıç durumunu tanımlamak kolaylaştı. Öğenin ilk durum animasyonu (ör. fade-in) artık rahatça yapılabiliyor
transition: opacity 1s; @starting-style { opacity: 0; } şeklinde ayarlanabilir- Ayrı bir
@keyframes ya da JavaScript olmadan da çalışır
- Yalnızca transition ile birlikte başlangıç durumunu belirtmek, animasyonun doğal biçimde uygulanmasını sağlar
- Örnek: toast mesajlarının opaklık ve konum geçişlerini yumuşak hale getirmek
Karanlık/aydınlık mod için kolay tema ayarı
- color-scheme: light dark, kullanıcı tercihine göre temayı otomatik değiştirir
- light-dark(#000, #FFF) fonksiyonu, açık/koyu moda uygun renkleri belirler
- Radio button'lar ve :has seçicisiyle kullanıcı tema seçimi desteklenebilir
- JavaScript olmadan yalnızca CSS ile tema değişimi mümkündür
- İstenirse temayı kaydetme/yükleme için JavaScript sonradan isteğe bağlı eklenebilir
Radio/checkbox ve :has, :checked ile özel UI oluşturma
- Sekmeler, akordeonlar, toggle'lar gibi karmaşık etkileşimler bile JavaScript olmadan uygulanabilir
- Radio button'lar, :checked ve :has ile özel biçimde stillendirilebilir
- Örnek:
label:has(input:checked) ile seçilmiş buton stili verilebilir
- Girdi öğesi
opacity: 0 ile gizlenirken ekran okuyucu erişilebilirliği korunur
- details öğesi, SSS benzeri akordeon menüler oluşturmak için uygundur
name niteliğiyle yalnızca tek bir bölümün açık kalması kontrol edilebilir[open] durumuna göre animasyon eklenebilir
Girdi doğrulama ve durumun yansıtılması
- pattern, required gibi HTML nitelikleri ile CSS sözde sınıflarının (
:valid, :invalid, :user-valid vb.) birleşimi, gerçek zamanlı doğrulama ve görsel geri bildirim sağlar
- Girdi alanlarının outline/border stilini değiştirerek kullanıcı deneyimi iyileştirilebilir
- HTML'in pattern niteliği, girdi alanı doğrulaması için kullanılabilir
- Örnek:
\w{3,16} ile 3-16 karakterlik harf/rakam/alt çizgi kabul edilebilir
- CSS'in :valid ve :invalid durumları, geçerliliğe göre stillendirme yapar
- :user-valid ve :user-invalid, stilleri yalnızca kullanıcı giriş yaptıktan sonra uygular
- :has seçicisiyle girdi durumuna göre başka öğeler de stillendirilebilir
- Bazı durumlarda (ör. karmaşık girdi koşulları) JS gerekebilir; ancak çoğu durumda CSS/HTML yeterlidir
Viewport birimlerini doğru kullanmak
- vw/vh birimleri, mobilde adres (navigasyon) çubuğunun görünmesi/gizlenmesi nedeniyle doğruluk sorunları yaşar
- lvh/svh/dvh (largest/smallest/dynamic viewport height) gibi yeni viewport birimlerinin kullanılması önerilir
- lvh: tam ekran kullanım için (ör. tam ekran arka plan)
- svh: her zaman ekranda görünmesi gereken butonlar, bağlantılar vb. için
- dvh: kaydırma gibi değişimlere göre alanı dinamik biçimde ayırmak için
- Klavye kaplaması, interactive-widget niteliği veya VirtualKeyboard API ile ele alınabilir
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content">- Chromium tabanlı tarayıcılarda
navigator.virtualKeyboard.overlaysContent = true
CSS istek listesi (eksik kalan veya arzu edilen özellikler)
- Yeniden kullanılabilir bloklar: Bir sınıf içinde başka bir sınıfı uygulayabilme (ör.
@apply border)
- Birleştirilmiş media query seçicileri:
@media ile sınıf seçicisinin birleşimi
- nth-child değişkeni:
span { --nth: nth-child(); } ile dinamik stillendirme
- nth-letter seçicisi: Belirli bir harfi stillendirme (ör.
p::nth-letter(2))
- Birim kaldırma:
calc(100vw / 1px) ile birimsiz değer üretmek
- image() fonksiyonu: Yedek renk ve görsel parçaları desteği
- body içinde style etiketi: FOUC sorununu hafifletmek için resmî standart desteği
Sonuç: CSS ve web'in sanatsal yönü
- CSS, yalnızca bir araç değil; yaratıcı ifadenin bir aracıdır
- Yapay zeka araçları veya build zinciri (linter, minify araçları) yaratıcılığı sınırlayabilir
- CSS, performans, erişilebilirlik ve sanatsal ifadeyi aynı anda karşılar
- Bu yazı, yaklaşık 49kB'lık JavaScript'siz HTML/CSS ile yazılmıştır
- Tüm etkileşimli bileşenler ve görsel unsurlar elle uygulanmıştır
- Örnek: CSS tıklama oyunu, CSS'in programlama dili benzeri olanaklarını kanıtlıyor
Henüz yorum yok.