Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Font'lar ve @font-face: font Shorthand'i, font-family Stack'i, Variable Font'lar ve font-variation-settings
Self-host bir variable font'u @font-face ile ağırlık aralığı (font-weight: 100 900), ayrı italik face ve unicode-range ile tanımlarsın; ağırlığı font-weight ile verir, font-variation-settings'i yalnız özel eksenler için kullanırsın. Bookstore başlıklarında Fraunces ile font shorthand'inin line-height'ı sıfırlamasını, tek değerli descriptor'ın 700'ü bozmasını, sahte italiği ve ğ, ş, İ harflerinin hangi dosyadan geldiğini Chromium ve WebKit'te ölçüyoruz.
Metin Stilleri: text-decoration Ailesi, text-underline-offset, text-shadow, letter-spacing, text-indent ve vertical-align
Okunur bir link alt çizgisi longhand'lerle yazılır (text-decoration-thickness, text-underline-offset em ile), letter-spacing em ya da yüzdeyle verilir, inline ikon ise vertical-align ile rakamlara hizalanır. Bookstore kataloğunda text-decoration shorthand'inin kalınlığı sıfırlamasını, em'in px olarak kalıtılmasını, lang="tr" ile text-transform'u, img altındaki boşluğu ve initial-letter desteğini Chromium ve WebKit'te ölçüyoruz.
Satır Kırma ve Taşma: white-space, overflow-wrap, word-break, hyphens, text-wrap: balance/pretty ve Çok Satırlı Kesme
Uzun URL ve ISBN için overflow-wrap: anywhere, kullanıcı metninde white-space: pre-line, başlıkta text-wrap: balance, çok satırlı kesmede ise hâlâ -webkit-line-clamp kalıbı kullanılır; Türkçe metinde hyphens: auto'ya güvenilmez. Bookstore'un kitap detayında break-word ile anywhere'in min-content farkını, Türkçe hecelemenin iki motorda da çalışmadığını, balance ve pretty sonuçlarını ve WebKit'in clamp'li kutuda ::first-letter çizmemesini ölçüyoruz.
Background ve Gradient'ler: background-image, size, position, Çoklu Katman, linear/radial/conic-gradient ve image-set()
Bir görselin üstündeki metni okunur kılmak için background-image'a görselden önce yarı saydam bir gradient katmanı yazılır, görsel image-set() ile 1x/2x ve AVIF olarak seçilir, background shorthand'i ise background-color'ı da sıfırladığı için dikkatli kullanılır. Bookstore'un kampanya banner'ında contrast oranını piksel okuyarak ölçüyor, sRGB'deki gri orta noktayı in oklch ile düzeltiyor, conic-gradient ile puan halkası ve reduced-motion'a uyan bir skeleton yazıyoruz.
Border, border-radius, outline ve box-shadow: Kenarlar, Gölgeler ve Focus Halkası
Seçili ya da hover durumunu kenarlık kalınlığıyla değil renk, inset box-shadow veya outline ile gösterirsin; focus halkasını :focus-visible ve outline ile çizersin, çünkü box-shadow forced colors modunda kaybolur. Bookstore'un checkout ve kataloğunda kenarlığın içeriği kaydırmasını, border shorthand'inin border-image'ı silmesini, 50% ile 9999px pill farkını, border-radius'u takip etmeyen border-image'ı ve forced colors'da kaybolan gölgeyi ölçüyoruz.
Transform'lar: translate, rotate, scale, Bağımsız Transform Property'leri, transform-origin ve 3D
Transform function'ları soldan sağa uygulanır ve her biri bir sonrakinin koordinat sistemini değiştirdiği için sıra sonucu değiştirir; bağımsız translate, rotate ve scale property'leri ise yazım sırasından bağımsız olarak hep bu sırayla ve transform'la birleşerek uygulanır. Yazı transform-origin'i, SVG'de transform-box'ı, layout'a etkisizliği ve Bookstore'da kapak hover'ı, 3D kapak çevirme ve sepet ikonunu ölçümlerle anlatır.
filter, backdrop-filter ve Blend Mode'lar: Görselleri ve Arka Planı CSS ile İşlemek
filter element'i bütün çocuklarıyla tek bir resim gibi soldan sağa function function işler, backdrop-filter ise arkasında kalanı; blend mode'lar katmanların renklerini birleştirir ve isolation: isolate bu birleşmeyi bileşenle sınırlar. Yazı drop-shadow ile box-shadow farkını, Bookstore'da stokta olmayan kapağı, yedek arka planlı buzlu cam filtre çubuğunu ve background-blend-mode ile duotone banner'ı ölçümlerle anlatır.
clip-path, mask ve shape-outside: Element'leri Kırpmak, Maskelemek ve Metni Şeklin Etrafından Akıtmak
clip-path element'in yalnız bir şeklin içini çizer ve hit testing'i de o şekle göre yapar, mask-image bir görselin alfa kanalıyla kısmi görünürlük verir, shape-outside ise float edilmiş bir element'in çevresindeki metni bir şekle göre akıtır; üçü de layout'taki kutuyu değiştirmez. Yazı shape() ile path() farkını, forced colors'da maskeli ikonu ve Bookstore'da yuvarlak yazar fotoğrafı, kenarı solan kapak şeridi ve eğik kitabın çevresinden akan metni ölçümlerle anlatır.
Görselleri ve SVG İkonları Stillemek: img Reset'i, object-position, image-rendering, fill, stroke ve currentColor
Görsellerin altındaki boşluk img'nin inline olmasından gelir; display: block, max-inline-size: 100% ve block-size: auto'dan oluşan reset bu boşluğu kaldırır, oranı korur ve width/height attribute'larıyla yer ayırmayı bozmaz. Yazı object-position ile odak noktasını, image-rendering ve image-orientation'ı, inline SVG'de fill, stroke ve currentColor'ı, Bookstore'un tek sprite'lık ikon setini ve dark mode'da light-dark() ile logo rengini ölçümlerle anlatır.
Pseudo-element'ler ve Üretilmiş İçerik: ::before/::after, content, Counter'lar, @counter-style, ::marker ve list-style
::before ve ::after yalnız content property'si none dışında bir değer aldığında oluşur; üretilen içerik screen reader'a ulaşır ama kopyalanmaz ve aranmaz, bu yüzden süs ve sayı için kullanılır, bilgi HTML'de kalır. Yazı alternatif metni (content: "★" / ""), counters() ile iç içe numaralamayı, Türk alfabesiyle @counter-style'ı, string marker ve ::marker'ın Safari sınırını ve Bookstore'un checkout adımlarını ölçümlerle anlatır.
Overflow ve Scroll Davranışı: overflow: clip, scroll-snap, scroll-padding, overscroll-behavior, touch-action ve Scrollbar Stilleri
overflow: hidden kutuyu yine scroll container yapar, overflow: clip yapmaz; kaydırılan bir şerit için scroll-snap-type ile scroll-snap-align, sticky çubuğun altında kalan anchor hedefi için scroll-padding yeterli. Yazı Bookstore'un Recommended şeridini, sepet drawer'ındaki overscroll-behavior ve scroll lock'u, touch-action'ı ve scrollbar-gutter/scrollbar-color'ı Chromium ve WebKit ölçümleriyle anlatır.
Form Kontrolleri ve Etkileşim Property'leri: accent-color, appearance, caret-color, field-sizing, cursor, pointer-events ve user-select
Form kontrollerini önce font: inherit ve color-scheme ile sayfaya bağla, rengi accent-color ile ver; appearance: none ile yapılan özel kontrolde durumu renkle değil şekille göster. Yazı Bookstore'un checkout form'unu (stepper, Gift wrap checkbox'ı, field-sizing ile büyüyen not) ve pointer-events, user-select, cursor ile interactivity'yi Chromium ve WebKit ölçümleriyle anlatır.