Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
CSS Nasıl Karar Verir? Cascade, Specificity, Inheritance ve Cascade Layers (@layer)
Bir element'e yazılan değerlerden hangisinin kazanacağına cascade karar verir ve sıra şöyledir: origin ve importance, context, style attribute, layer, specificity, kaynak sırası; layer specificity'den önce gelir. Bookstore'un "neden bu buton kırmızı değil?" hatasını DevTools'un kullandığı CDP ile adım adım çözüyor, @layer ile üçüncü parti CSS'i kendi stillerimizin altına alıyor ve inherit/initial/unset/revert/revert-layer farkını iki tarayıcı motorunda ölçüyoruz.
Modern Selector'ler: :is(), :where(), :has(), :not() ve State Pseudo-class'ları
:is() specificity'yi en spesifik argümanından alır, :where() ise her zaman sıfırdır; :not() ve :has() da :is() gibi hesaplanır. Bookstore'un katalog ve checkout sayfalarında specificity'yi DevTools'un protokolüyle ölçüyor, :has() ile kapaksız kitap kartını, :user-invalid ile hatalı form satırını JavaScript'siz stillendiriyor, :focus-visible, :open, :nth-child(of S) ve :empty'nin gerçek davranışını Chromium ve WebKit'te gösteriyoruz.
Box Model, Sizing ve Logical Property'ler: box-sizing, Margin Collapse, Intrinsic Size ve Birimler
box-sizing: border-box ile width kutunun tamamını ölçer; normal akışta alt alta gelen dikey margin'ler toplanmaz, büyük olan kalır, flex ve grid'de ise toplanır. Bookstore'un kitap kartı ve detay sayfasında box model'i, margin collapse'ın olduğu ve olmadığı durumları, min-content/max-content/fit-content'i, aspect-ratio ile kapak oranını, rem/em/ch ve svh/lvh/dvh birimlerini ve RTL'ye hazır logical property'leri Chromium ve WebKit'te ölçüyoruz.
Normal Flow, display ve Positioning: sticky, z-index, Stacking Context ve Top Layer
z-index yalnız aynı stacking context içindeki kardeşler arasında karşılaştırılır; sticky ise en yakın scroll container'a göre yapışır, bu yüzden bir atadaki overflow: hidden onu bozar. Bookstore'un katalog sayfasında flow-root ile float'ı kutuda tutuyor, display'in iki değerli syntax'ını ölçüyor, overflow-x: clip ile sticky toolbar'ı onarıyor, isolation: isolate ile rozeti header'ın altına alıyor ve modal dialog'un top layer'da her z-index'i yendiğini Chromium ve WebKit'te gösteriyoruz.
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.
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.
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.
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.
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.
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.
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.
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.