2015'te CSS Yerleşimini Titiz Bir Yaklaşımla Öğrenmek

 (book.mixu.net)
6 puan yazan GN⁺ 2024-03-01 | 1 yorum | WhatsApp'ta paylaş
  • CSS yerleşimini daha önce kullanmış okuyucuların yerleşim algoritmasını ayrıntılı kurallarına kadar anlaması için hazırlanmış, bölümler hâlinde bir öğrenme materyali
  • inline, block, z-index ve kutu modelini basit kullanım biçimleri olarak değil, formatting context ve stacking context gibi karar kuralları üzerinden yeniden açıklar
  • Normal akışta blok ve inline öğelerin göreli konumu yalnızca display ile belirlenmez; kardeş öğeler ve bağlam da birlikte etkili olur
  • Kutu modelinde boyut ve margin: auto hesaplamaları konumlandırma biçimine göre değiştiğinden, tek bir kural olarak ezberlemek zordur
  • Normal akış, float, mutlak konumlandırma, margin collapsing, overflow, z-index, pseudo-element’ler ve Flexbox’tan geçerek ortalama ve grid framework’leri gibi pratik yerleşim sorunlarına uzanır

CSS yerleşimini kurallar üzerinden anlamak

  • Bu materyal, CSS yerleşimini ipuçları koleksiyonu olarak değil kural tabanlı bir sistem olarak ele alır ve her kuralı bölümler hâlinde takip ederek açıklar
  • “pedantic” ifadesinde olduğu gibi, önemsiz görünebilecek ayrıntıları ve biçimsel kuralları bile sorgulayan bir yaklaşım benimser
  • Hedef okuyucu CSS’yi ilk kez öğrenenler değil; hâlihazırda CSS kullanan ama yerleşim davranışını daha kesin biçimde anlamak isteyenlerdir
  • Web siteleri genellikle aşamalı olarak geliştiği için yerleşimi küçük ipuçları ve hilelerle öğrenmek kolaydır; bu süreçte yerleşim algoritmasının kendisi gözden kaçabilir
  • Temel kavramları sırasıyla ele alır ve her kavramı doğrulayabileceğiniz uygulamalı örnekler de sunar

Bölüm yapısı

  • Chapter 1: Box positioning in CSS, HTML öğelerinin oluşturduğu kutuların birbirine göre nasıl yerleştirildiğini ele alır
    • CSS’nin üç ana konumlandırma biçimi: normal akış, float ve mutlak konumlandırma
    • Normal akışta anonymous box generation, formatting context, line box ve line box içindeki hizalama
    • float order, clearfix, float ile ebeveyn yüksekliği arasındaki etkileşim
  • Chapter 2: Box sizing in CSS, kutu modelini ve konumlandırma biçimine göre ortaya çıkan farkları ele alır
    • height, width ve margin hesaplamaları birbirinden farklı mekanizmalar kullanır
    • Hesaplama biçimini anlamak için o anda kullanılan konumlandırma biçimini ve hesaplama mekanizmasını birlikte değerlendirmek gerekir
  • Chapter 3: Additional properties that influence positioning, kutu yerleşimini etkileyen ek özellikleri ve mekanizmaları özetler
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • stacking context ve z-index
    • Pseudo-element’lerin yerleşime etkisi
    • CSS3 box-sizing özelliği
  • Chapter 4: Flexbox, CSS 3 Flexbox yerleşim modunu açıklar
  • Chapter 5: CSS layout - tricks and layout techniques, önceki bölümlerdeki içeriği gerçek sorunlara uygular
    • Yatay ve dikey ortalama
    • CSS grid framework’lerinin çalışma biçimi
    • Çok sütunlu yerleşim
    • Yaygın tuzaklar ve yerleşim hileleri
  • reference index, belirli bir kavramı veya özelliği arayıp ilgili bölüm ve kısımlara gitmek için kullanılabilir

İlgili okumalar

1 yorum

 
GN⁺ 2024-03-01
Hacker News görüşleri

  • CSS düzenini açıklarken ilk söylenmesi gereken şey, birbirinden farklı dört düzen sistemi olduğudur: e-postalarda hâlâ kullanılan en eski table, metin içi görseller için float, bugün en çok kullanılan flexbox ve table'ın modern alternatifi olan grid
    absolute ve fixed konumlandırma da düzeni “baypas eden” hack'ler gibi kullanılabilir

    • absolute ve fixed ne hack'tir ne de düzeni “baypas eder”
      İkisi de bir öğenin belge akışı içinde veya belirli bir kapsayıcı içinde nasıl yerleştirileceğini ve davranacağını belirleyen beş konumlandırma seçeneğinden ikisidir: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • İlk iki tanesi, flexbox ve grid'den önce kullanılan alternatif düzen sistemlerine daha yakındır
      float özelliği Grid ile birlikte de kullanılabilir. En kolay ve en temel düzen sistemi olan normal akış bu listede yok: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • “table en eski CSS düzen sistemidir ve e-postada hâlâ kullanılır” sözü tam doğru değil
      Gerçek HTML table işaretlemesi, web sayfasının bazı kısımlarını yan yana yerleştirmek için kullanılan en eski yöntemlerden biridir ve e-postada da kullanılır, ama bu CSS'ten ayrı bir konudur
      CSS'te display: table ve ilişkili değerler vardır ama hatırladığım kadarıyla eski IE'de float'tan daha zor kullanılıyordu ve kullanımı da sınırlıydı. Modern web'de de çok kullanıldığını neredeyse hiç görmedim; belki de çevresindeki işaretleme gereksinimleri fazla katı olduğu içindir. Örneğin sırayı değiştirmenin bir yolu yoktur ve birden fazla satır gerekiyorsa HTML içine bunun görevini görecek öğeler eklemek gerekir
    • Ayrıca, flex öğrenmenin en iyi yolu Flexbox Froggy ve CSS yazmadan önce başkasının hazırladığı bir css-reset kural setini almak iyi olur
      Çünkü eski geriye dönük uyumluluk davranışlarını mantıklı varsayılanlara çevirir. Örn: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table en eski CSS düzen sistemi değildir. Bu akış düzenidir ve garip şekilde bu listede hiç yok

  • float'un “kutuları kapsayıcı kutunun sol ve sağ kenarlarına yerleştirmek için kullanıldığı” açıklaması doğru değil
    float ile bu yapılabilir ama flexbox ve grid çıktıktan sonra artık bunun için kullanılmıyor. Öğeyi normal akıştan çıkardığı için CSS öğrenenler açısından düzen kurmayı kafa karıştırıcı hâle getirir
    float, bir düzen aracından çok dizgi aracına yakındır. Metin kendini pedantic diye tanımlıyorsa daha titiz olmalı

    • HTML/CSS girişinde, bu tekniklerin ilk oluşturulduklarında yalnızca çevrimiçi belge render etme amacı taşıdığını mutlaka anlatmak gerekir
      Temelde başkasının bilgisayarındaki dosyalar için yapılmış bir Microsoft Word gibiydi; bu yüzden float gibi ilk özelliklerin çoğu dizgi düzeni içindi
    • Bir kapsayıcı içindeki tüm öğeler, kapsayıcının üstüne doğru ve metin yönü ltr mi rtl mi olduğuna göre önceki öğenin sağına ya da soluna doğru yüzer
      Yer kalmazsa önceki öğelerin altına iner. Öğenin display: block olması hâlinde yatay alanın tamamını kaplar, bu yüzden ondan sonraki tüm öğeler altına doğru yüzer. Adının float olmasının sebebi ve öğe konumlarını hesaplama biçimi budur
      float:left|right kullanıldığında aynı kapsayıcıdaki diğer öğelerden önce o öğe sola ya da sağa zorla yüzdürülür. Elbette kapsayıcı flex veya grid kullanıyorsa artık böyle çalışmaz
      1. bölümün büyük bir kısmı(https://book.mixu.net/css/1-positioning.html#float-positioni...) float'un karmaşıklığını ve özel akışını ele alıyor, ayrıca bu davranışın başka amaçlar için dikkatle yeniden kullanılması ve uygulanmasını açıklıyor
        Özellikle yazıldığı sırada flexbox/grid düzenlerinin henüz olmadığını düşününce, bunu yeterince titiz bir açıklama olarak görüyorum
    • flexbox düzeninde bu araç süreci basitleştiriyor
      Birçok özelliği düşünme ihtiyacını azaltıyor: https://flexboxcss.com
    • float kullanmadan sidenote veya marginal note'u nasıl yerleştireceğimi pek bilmiyorum
      Özellikle notun paragrafın ortasındaki referans konumuna hizalanması gerekiyorsa daha da zor

  • Böyle yazılar, CSS Grid öncesi döneme ait olsa bile göz korkutucu geliyor. CSS Grid geldikten sonra CSS yerleşimi daha da karmaşıklaştı; 10 yıldır web geliştirme yapıyor olsam da CSS’in hâlâ ne kadar derin olduğunu kavrayamadığımı hissediyorum
    Çalışma biçimi, nadir görülen istisna durumları, iç işleyişi ve inanılmaz sayıdaki özelliği böyle hissettiriyor; yakın zamanda bununla ilgili bir yazı da yazmıştım
    Grid Layouting’in tüm ayrıntılarını daha yakalayamadan subgrid ve container queries çıktı. Yeni eklenen birçok özellik o kadar özel durumlara hitap ediyor ki gerçekten kullanır mıyım diye şüpheleniyorum (hanging-punctuation, font-palette gibi)
    Yalnızca paragraf tireleme ile ilgili en az üç özellik var ve filter özelliğinin SVG kullanan tamamen farklı türde filtreleri de desteklediğini fark etmeyebilirsiniz. Görüntü ölçekleme algoritmasını da ayarlayabiliyorsunuz ve border-radius eliptik köşeleri de destekliyor
    Bunu her teknoloji için söylemek mümkün ama CSS farklı. Çok fazla şeyi çok fazla yolla yapıyor ve çok fazla, çok hızlı değişiyor: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • “10 yıldır web geliştirme yapıyorum ama CSS’in hâlâ ne kadar derin olduğunu bilmiyorum” derken tam olarak ne kastedildiğini merak ediyorum
      CSS ile çok daha uzun süredir uğraşıyorum ama align-items mıydı justify-content miydi ezberlemeye bile çalışmadığım için aklımda kalmıyor. Flexbox kullanacağım zaman https://css-tricks.com/snippets/css/a-guide-to-flexbox/ sayfasını açıyorum
      Grid’i daha da az hatırlıyorum. Yine de biraz söylenip WTF dedikten sonra istediğim şeyi yeterince kolay yapabildiğim için onun derinliğini bilmediğimi hissetmiyorum. CSS hakkında bunu çok duydum ama çoğu durumda büyük bir çaba harcamadan istediğim yerleşimi kurmanın oldukça kolay olduğunu düşünüyorum. Sadece CSS’i JS gibi aklımda tutamıyorum
    • CSS yerleşimiyle ilgileniyorsanız önce Flexbox ve CSS Grid öğrenmenizi tavsiye ederim
      İkisinin de dokümantasyonu iyi ve nispeten sezgisel; özellikle grid’in tuhaf davranışları daha az
      Artık akış yerleşimini çok iyi bilmek zorunda değilsiniz ve float ile table layout’u tamamen atlayabilirsiniz. Bunları sadece asıl amaçları için, yani metin içindeki kayan görseller ve gerçek tablolar için kullanmanız yeterli
    • Frontend işlerinde sürekli yaşadığım sorun şu: bütün yazılar, son 15 yıldaki en güncel gelişmeleri kesintisiz takip etmiş insanları okur olarak varsayıyor
      İlk kez gerçek bir frontend işi yapıp bunun için dolar aldığımda, doğrudan perl içinden DHTML üretiyordum. O kısaltmayı yazmak bile kas hafızamın önbelleğinden o kadar uzaklaşmış ki parmaklarım tökezliyor
      Frontend, sanki altı yaşında bir çocuğun diferansiyel hesabı biliyor olması gereken bir alan gibi; artık yetişmenin yolu yokmuş gibi geliyor
    • Ben de benzer durumdayım. Sadece her yere grid koymaya başlayınca çoğu zaman düzgün çalışıyor
      Tabii düz CSS kullanmam ve genelde global stylesheet de tutmamam bunda epey yardımcı oluyor
    • Daha da kötü olabilirdi. LaTeX de olabilirdi sonuçta

  • Çok fazla UI uygulaması geliştiriyorum ve çoğunlukla Angular kullanıyorum; bugünlerde genelde Bootstrap ya da Foundation gibi framework’ler kullanıyorum
    Saf CSS’in sayısız yerleşim seçeneği, özellikle responsive design tarafında, bunaltıcı ve baş ağrıtıcı. Saf CSS denedim ama sonunda yine çok fazla boilerplate kullanıp mini bir framework benzeri şey üretmiş oldum
    Özel tasarımlı bir tasarımcı web sitesi yapmıyorsanız, kişisel olarak sürekli tekerleği yeniden icat etmeye gerek görmüyorum

    • Hâlâ biraz boilerplate var ama Open Props’u hibrit bir yaklaşım olduğu için seviyorum
      CSS mutlaka tekerleği yeniden icat etmek anlamına gelmiyor; zor yerleşimleri ya da eskiden JS gerektiren işleri daha kolay ve daha güçlü hâle getirebiliyor
      Bootstrap da fena değil ama ileri seviye yerleşim problemlerini çözmek için gerçekte hangi stillerin uygulandığını görmek adına sık sık öğe denetimine başvuruyorum. En azından benim deneyimim buydu; bu yüzden kişisel olarak tercihim CSS olurdu
      Beklediğim yeni özellik @scope kuralı; scoped stiller yazmayı çok daha kolaylaştıracak gibi görünüyor
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • flexbox, grid, media query gibi modern CSS özellikleri, Bootstrap gibi framework’lere olan ihtiyacı azaltmak için eklendi

  • Bu yazı CSS Grid ve CSS columns öncesinde mi yazılmış?
    z-index ile ilgili bir yazı da var: https://philipwalton.com/articles/what-no-one-told-you-about...

    • Evet. https://book.mixu.net/ kaynağına göre 2015’te yazılmış; 9 yıllık bir yazının modern CSS için pek faydalı olmayabileceğinden endişeleniyorum
    1. bölümde margin collapsing ve negative margins ele alındığına göre, bu yazı eski yerleşim tekniklerini anlamaya öncelik veriyor
      Legacy codebase’lerle uğraşırken değerli olabilir ama yeni projelerde bunlardan kaçınmak daha iyi

  • CSS’yi derinlemesine öğrenmenin en iyi yolu nedir? Resmî dokümanlar, neyin şu anda geçerli olup neyin olmadığını anlatma konusunda biraz garip hissettiriyor

    • “actual”ı “current” anlamında kullanmak konudan sapıyor ama sevdiğim AB İngilizcesi ifadelerinden biri
      Hollandacada current’ın actueel, actual’ın ise daadwerkelijk diye çevrildiğini düşününce oldukça anlaşılır geliyor. Ana dili İngilizce olanlar için kafa karıştırıcıysa bu belki tersine faydalı bile olabilir
    • Bence en iyi yöntem, tekrar tekrar bir şeyler yapıp üretmek
      Bu, belli bir öğrenme tarzına uygun bir tavsiye olabilir ama gerçekten stil ve düzenle oynadığınızda nasıl çalıştığının pratik yönü iyice yerleşiyor
      CSS yazarken hedefim mümkün olduğunca az yazmak. CSS’den nefret ettiğim için değil; aksine haksız yere kötü bir üne sahip olduğunu düşünüyorum. Ama bu sayede deklarasyonları gereksiz yere üst üste bindirmeden düzeni daha etkili biçimde stillendirmeyi öğreniyorsunuz
    • Bu hafta frontend teknolojilerini yeniden öğrenirken biraz da piyasa araştırması yaptım
      CSS temelleri için en iyi kaynak https://web.dev/learn/css oldu; flexbox ve grid de dahil
      Tasarım yönergeleri için Refactoring UI’ı öneririm. The UX Book gibi kitaplarda eksik kalan, uygulanabilir çok sayıda tavsiye içeriyor
      Kendi projelerimde Refactoring UI yazarlarının TailwindCSS ve Daisy UI bileşenlerini kullanıyorum; bu yüzden pratikte raw CSS yazmıyorum. Başta TailwindCSS, inline CSS’ye geri dönüş gibi hissettirebilir ama alternatiflerden düpedüz daha iyi. Bir kez denemenizi tavsiye ederim
    • Burada “resmî dokümanlar” ile neyin kastedildiğini merak ediyorum. Spesifikasyonlar mı[1], yoksa MDN mi[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      İlki yeni web geliştiricileri için bir öğrenme kaynağı değil. İkincisi de resmî ya da otoritatif bir belge değil ama genellikle Baseline desteği ve tarayıcı uyumluluk tabloları hakkında bilgi içeriyor
    • flexbox öğrenin, kutu modelini öğrenin ve özellikle margin ile paddingi ne zaman kullanacağınızı kavrayın
      Stil katmanlılığının nasıl çalıştığını öğrenmek de iyi olur; böylece neden SCSS ve bileşen geliştirme kullanıp bunun çoğunu düşünmemeye çalıştığımızı da anlarsınız
      Media query’leri ve ekran boyutuna göre hedefleme yapmayı da öğrenin. Her şeyden önce, web’de “CSS’te x nasıl yapılır” diye aramaktan utanmayın. Spesifikasyonlar devasa ve ezberlenecek şey çok fazla; uzun süre sık kullanmayınca hepsini akılda tutmak mümkün değil