Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
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.
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.
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.
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.
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.
HTML'de 2023–2026 Arası Gelenler: search, popover, Invoker Commands, Customizable Select ve Ufuktakiler
HTML'de sürüm yok, Baseline tarihi var: 2023–2026 arasında search, inert, exclusive details, popover, requestClose, Invoker Commands, :open ve autocorrect Baseline oldu; ama Angular 22 widely available'ı hedeflediği için bunlardan yalnız search ve inert onun desteklediği her tarayıcıda var. Bu yazıda kronolojiyi, henüz Baseline olmayanları, Interop 2026'yı ve web-features verisiyle Bookstore için bir karar tablosunu çıkarıyoruz.
Accessible Markup Temelleri ve Framework'lerde HTML: Native Önce, Accessibility Tree, Angular Host Element'leri ve Razor
Erişilebilir markup'ın temeli önce native element kullanmak, gizlemek için hidden ya da inert seçmek, pozitif tabindex'ten kaçınmak, lang ve dir'i doğru vermek ve framework'ün ürettiği HTML'i tarayıcıdaki çıktıdan okumaktır. Bu yazıda aria-hidden içindeki odaklanabilir butonu, lang="tr" ile değişen büyük İ'yi, Angular'da ul içinde listitem'sız host element'leri ve aria-invalid üretmeyen Razor Tag Helper'larını ölçüp angular-eslint ve Nu Html Checker'ı CI'a alıyoruz.
Table'lar ve Tabular Data: caption, thead, th scope, colgroup ve Responsive Table
Veri tablosunun adı caption'dan, satır ve sütun ilişkisi th scope'tan gelir; dar ekranda tablo tabindex, role="region" ve adı olan kaydırılabilir bir wrapper'a konur. Bu yazıda Bookstore'un sipariş geçmişini accessibility tree'de okuyor, col'a verilen text-align'ın işlemediğini, headers/id hatasını, WebKit'in düz wrapper'a odak vermediğini ve Angular'da tr yerine host element kullanan satırın tabloyu nasıl boşalttığını ölçüyoruz.
head ve Meta Tag'ler: charset, viewport, title, description, Open Graph, theme-color ve link rel'leri
İyi bir head meta charset ile başlar, zoom'u kapatmayan tek bir viewport, sayfaya özel title ve tek bir description taşır, Open Graph tag'lerini de sunucudan gelen HTML'de verir. Bu yazıda charset'siz sayfanın Türkçe karakterleri bozduğunu, viewport'suz telefonun 980 piksel çizdiğini, JavaScript ile eklenen Open Graph'ı botun görmediğini, color-scheme'i ve Razor layout'ta tekrar eden meta'ları Nu Html Checker ve axe ile ölçüyoruz.
Image ve Media: img, picture, srcset/sizes, video, audio, track ve iframe
Her img'e width ve height yaz, alt'ı görselin sayfadaki işine göre seç, ekran boyutu değişen görselde srcset'i sizes ile ver ve ilk ekrandaki görsele asla loading="lazy" koyma. Bu yazıda bu kuralları Chromium ve WebKit'te ölçüyoruz: boyutsuz görselin 0.14'lük layout shift'i, sizes="auto", picture'da AVIF/WebP/JPEG XL sırası, lazy LCP görselinin yarım saniyelik gecikmesi, track ile altyazı ve iframe title.
Native Interaktif Element'ler 2: select, datalist, Customizable Select ve output/progress/meter
Seçim için select, öneri için datalist kullanılır: datalist listede olmayan değeri de gönderir, required select ise yalnız value="" olan ilk option'ı placeholder sayar. Bu yazıda katalog filtresini, appearance: base-select ile kapak görselli customizable select'i (Chrome 135 ve Safari 27, Firefox yok) ve output/progress/meter'ı Chromium ve WebKit'te ölçüyor, disabled placeholder tuzağını ve submit edilmeyen output'u gösteriyoruz.