Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Sass Temelleri: Variable, Nesting, Parent Selector (&), Interpolation ve Placeholder
Sass değişkeni derleme anında bir değerdir ve derleme bitince yok olur; custom property ise runtime'da yaşar, bu yüzden ikisini birlikte kullanırken değeri #{} ile aktarmak gerekir, yoksa tarayıcıya "$brand" metni gider. Bookstore kartını & ile BEM'e çeviriyor, Sass nesting'inin native nesting'den farklı specificity ürettiğini iki motorda ölçüyor ve derin nesting'in çıktıyı nasıl şişirdiğini gösteriyoruz.
Sass 2026'da Hâlâ Gerekli mi? Native CSS ile Karşılaştırma ve Dart Sass Kurulumu
Evet, ama eskisi kadar her yerde değil: değişken, nesting ve renk/matematik artık native CSS'te var; mixin, döngüyle kural üretme, map'ler, module sistemi ve derleme zamanı hataları ise hâlâ yalnız Sass'ta. Ham SCSS'in tarayıcıda neden tek kural bırakmadığını ölçüyor, sass ile sass-embedded'i karşılaştırıyor ve Sass'ı Angular, Vite ve ASP.NET Core'a ekliyoruz.
"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.