Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
"CSS4" Yok: CSS Snapshot'ları, Baseline, Interop ve 2023–2026'da Gelenler
CSS'in sürüm numarası yok: module'ler kendi seviyelerini ayrı ayrı artırıyor ve W3C'nin CSS Snapshot 2025'i "CSS Level 4" olmadığını açıkça söylüyor. Bir özelliği kullanıp kullanmamaya Baseline (newly ve widely available), Interop ve @supports ile karar verilir; yazı 2023–2026 kronolojisini web-features'tan çıkarıyor ve Angular, Vite ve Tailwind'in tarayıcı hedeflerini Bookstore üzerinde karşılaştırıyor.
Anchor Positioning: JavaScript'siz Tooltip, Dropdown ve Popover Konumlandırma
Anchor positioning bir element'i başka bir element'e göre CSS ile yerleştirir; bir butonun açtığı popover o butonu kendiliğinden anchor alır, position-area ve flip-block ile JavaScript'siz menü ve önizleme yazılır. Çekirdeği Ocak 2026'da Firefox 147 ile Baseline oldu; web-features'ın bugün 'limited' göstermesinin sebebi position-visibility değerlerinin yeniden adlandırılması.
Scroll-driven Animation'lar ve View Transition'lar
animation-timeline ile scroll() ve view() animasyonun ilerlemesini zamandan değil scroll konumundan alır ve Ekim 2026'dan beri Baseline; view transition'lar ise bir DOM değişikliğini iki görüntü arasında canlandırır. Yazı Bookstore'a okuma ilerleme çubuğu, ekrana girerken beliren kartlar, sıralama animasyonu, Angular'da withViewTransitions() ve Firefox'ta olmayan cross-document geçiş ekliyor.
Transition ve Animation: @keyframes, Easing, @starting-style ve prefers-reduced-motion
Bir dialog display: none'dan açıldığı için önceki stili yoktur; transition'ı başlatmak için @starting-style ile başlangıç değeri, kapanışı canlandırmak için display ve overlay'e allow-discrete gerekir. Yazı transition ile animation farkını, linear() dahil easing'i, transform ve opacity'nin neden ucuz olduğunu ve prefers-reduced-motion ile hareketi kapatmadan azaltmayı Bookstore'un sepet dialog'unda ölçerek anlatıyor.
Native CSS Nesting ve @scope: Preprocessor'süz Component Stilleri
Native CSS nesting yazımı kısaltır ama hiçbir şeyi izole etmez; @scope ise bir kuralın scope root'tan limit'e kadar geçerli olmasını sağlar ve donut scope ile kullanıcı içeriğini dışarıda bırakır. Bookstore kartını nesting ile yeniden yazıp computed style hash'iyle değişmediğini kanıtlıyor, &'nin Sass'tan farkını, :is() kaynaklı specificity'yi, proximity'yi ve Angular, ASP.NET Core CSS isolation ve Shadow DOM karşılaştırmasını ölçüyoruz.
Modern Renk ve CSS Matematiği: oklch(), color-mix(), Relative Color, contrast-color() ve Math Function'ları
oklch() açıklığı insan gözünün algıladığı gibi ölçer; bu yüzden aynı L değerindeki sarı ve mavi aynı parlaklıkta görünür, HSL'de ise beyaz metnin kontrastı 1.07 ile 8.59 arasında değişir. Bookstore'un kategori renginden relative color, color-mix() ve alpha() ile tonlar türetiyor, contrast-color()'ın sınırını, round/mod/rem, progress() ve typed arithmetic'i ve Baseline olmayan if(), @function, random()'u ölçüyoruz.
Custom Property'ler ve Theming: var(), @property, light-dark() ile Dark Mode
Custom property'ler cascade ve inheritance içinde çalışma anında yaşar; koyu tema için renk token'larını light-dark() ile tanımlayıp color-scheme'i değiştirmek yeter. var() fallback'ini, invalid at computed-value time tuzağını, @property ile tipli ve animasyonlanabilir değişkenleri, kullanıcının seçimini localStorage ile hatırlayıp FOUC'u önleyen inline script'i ve CMS'ten gelen kategori rengini Bookstore üzerinde ölçüyoruz.
Container Query'ler: Size Query, Style Query ve Component Bazlı Responsive Tasarım
Container query, bir component'in viewport'a değil içine konduğu kutunun genişliğine göre düzen değiştirmesini sağlar; ama container-type subgrid'i kapatır, bu yüzden ikisi aynı element'te kullanılamaz. Bookstore kartını geniş bir bantta yatay, dar bir kolonda dikey gösteriyor; cq birimlerini, Mayıs 2026'da Baseline olan name-only ve style query'leri ve Angular'da host'u container yapmayı Chromium ve WebKit'te ölçüyoruz.
Responsive Design: Mobile-first, Media Query Range Syntax, clamp() ile Fluid Typography ve User Preference'lar
Responsive bir sayfa mobile-first yazılır, breakpoint'ler içeriğe göre rem ile seçilir ve font boyutu clamp() içinde rem ile vw toplamıyla verilir; yalnız vw kullanan başlık zoom'da hiç büyümez. Range syntax'ı, media query'deki rem'in neden sayfanın kök font boyutunu dinlemediğini, zoom ölçümünü, prefers-reduced-motion, prefers-contrast, prefers-color-scheme ve hover/pointer'ı Bookstore üzerinde Chromium ve WebKit'te ölçüyoruz.
CSS Grid 2: Subgrid, Alignment ve "Grid mi Flexbox mı?" Kararı
Subgrid, bir kartın satırlarını kendi hesaplamak yerine listenin satırlarından ödünç almasını sağlar; böylece farklı uzunlukta başlıkları olan kartlarda başlık, yazar ve fiyat satırları aynı hizaya gelir. Bookstore kataloğunu subgrid'e taşıyor, justify/align ve place-* property'lerini ölçüyor, Grid ile Flexbox arasındaki seçimi içerikten dışa ve layout'tan içe kuralıyla yapıyor, masonry için grid-lanes'in Kasım 2026 durumuna bakıyoruz.
CSS Grid 1: Track'ler, fr, repeat(auto-fill, minmax()) ve Named Grid Area'lar
repeat(auto-fill, minmax(14rem, 1fr)) container'a sığdığı kadar kolon açarak media query'siz responsive bir ızgara kurar; auto-fit ise boş kolonları sıfıra indirip item'ları yayar. Bookstore'un katalog ızgarasını ve sayfa iskeletini Grid ile kuruyor, fr ile minmax(0, 1fr) farkını, implicit grid'i, named line'ları, grid-template-areas'ı ve dense'in DOM sırasını nasıl bozduğunu Chromium ve WebKit'te ölçüyoruz.
Flexbox: Tek Boyutlu Layout, flex-grow/shrink/basis ve Gerçek Hayat Senaryoları
Flexbox boş alanı flex-grow oranında dağıtır, eksik alanı ise flex-shrink × flex-basis ağırlığıyla keser; yani büyük item daha çok küçülür. Bookstore'un header'ını, katalog kartlarını ve kupon alanını Flexbox ile diziyor, flex kısaltmalarının açılımını, uzun kitap başlığını satırdan dışarı iten min-width: auto tuzağını ve order'ın Tab sırasını değiştirmediğini Chromium ve WebKit'te ölçüyoruz.