Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
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.