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