CSS'de ortalama

Değişikliğe karşı en dayanıklı olanı bulmak için bir dizi testten geçen 5 merkezleme tekniğini takip edin.

Adam Argyle

CSS'de ortalama, şakalar ve alay konusu olan kötü şöhretli bir zorluktur. 2020 CSS büyüdü ve artık bu şakalara dişlerimizi sıkarak değil, içtenlikle gülebiliyoruz.

Video tercih ediyorsanız bu yayının YouTube versiyonunu aşağıda bulabilirsiniz:

Yarışma

Farklı ortalama türleri vardır. Farklı kullanım alanları, ortalanacak öğe sayısı vb. "Kazanan" bir ortalama tekniğinin mantığını göstermek için The Resilience Ringer'ı oluşturdum. Bu, her merkezleme stratejisi için bir dizi stres testidir. Bu testler, dengeyi korumanıza ve performanslarını gözlemlemenize yardımcı olur. Sonunda, en yüksek puanı alan tekniği ve "en değerli" tekniği açıklıyorum. Umarız bu oturumdan yeni merkezleme teknikleri ve çözümleriyle ayrılırsınız.

The Resilience Ringer

Resilience Ringer, merkezleme stratejisinin uluslararası düzenlere, değişken boyutlu görüntü alanlarına, metin düzenlemelerine ve dinamik içeriğe karşı dirençli olması gerektiği yönündeki inançlarımı temsil ediyor. Bu ilkeler, aşağıdaki dayanıklılık testlerinin şekillenmesine yardımcı oldu. Bu testler, merkezleme tekniklerinin dayanıklılığını ölçmek için yapıldı:

  1. Sıkıştırılmış: Ortalama, genişlikteki değişiklikleri işleyebilmelidir.
  2. Sıkıştırılmış: Ortalama, yükseklik değişikliklerini işleyebilmelidir.
  3. Yinelenen: Ortalama, öğe sayısına göre dinamik olmalıdır.
  4. Düzenleme: Ortalama, içeriğin uzunluğuna ve diline göre dinamik olmalıdır.
  5. Flow: Ortalama, belge yönünden ve yazma modundan bağımsız olmalıdır.

Kazanan çözüm, içerikleri sıkıştırılırken, ezilirken, kopyalanırken, düzenlenirken ve çeşitli dil modlarına ve yönlerine göre değiştirilirken ortada tutarak dayanıklılığını göstermelidir. Güvenilir ve esnek bir merkez, güvenli bir merkez.

Açıklama

Bazı meta bilgileri bağlam içinde tutmanıza yardımcı olmak için görsel renk ipuçları ekledim:

  • Pembe kenarlık, ortalama stillerinin sahipliğini gösterir.
  • Gri kutu, öğeleri ortalamaya çalışan kapsayıcının arka planıdır.
  • Her çocuğun beyaz bir arka plan rengi vardır. Böylece ortalama tekniğinin çocuk kutusu boyutları üzerindeki etkilerini (varsa) görebilirsiniz.

5 Yarışmacı

5 merkezleme tekniği Resilience Ringer'a giriyor, yalnızca biri Resilience Crown'u 👸 alacak.

1. İçerik Merkezi

VisBug ile içerik düzenleme ve içerik kopyalama
  1. Squish: Harika!
  2. Squash: Harika!
  3. Kopyala: Harika!
  4. Düzenle: Harika!
  5. Akış: Harika!

display: grid ve place-content kısaltmasının kısa ve öz olmasını geçmek zor olacak. Çocukları toplu olarak ortalayıp yasladığı için okunması amaçlanan öğe grupları için sağlam bir ortalama tekniğidir.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Artıları
  • İçerik, sınırlı alan ve taşma durumunda bile ortalanır.
  • Ortalama düzenlemeleri ve bakım işlemleri tek bir yerde
  • Boşluk, n çocuk arasında eşit aralık olmasını sağlar.
  • Izgara, varsayılan olarak satır oluşturur
Eksileri
  • En geniş alt öğe (max-content), diğer tüm öğelerin genişliğini belirler. Bu konu, Gentle Flex'te daha ayrıntılı olarak ele alınacaktır.

Paragraflar ve başlıklar içeren makro düzenler, prototipler veya genel olarak okunabilir şekilde ortalanması gereken öğeler için idealdir.

2. Gentle Flex

  1. Squish: Mükemmel.
  2. Kabak: Mükemmel!
  3. Kopyalama: Harika!
  4. Düzenle: Harika!
  5. Flow: Harika!

Esnek hedefleme, yalnızca daha doğru bir merkezleme stratejisidir. place-content: center'dan farklı olarak ortalama sırasında çocuk kutusu boyutları değiştirilmediği için yumuşak ve nazik bir şekilde ortalanır. Tüm öğeler mümkün olduğunca nazik bir şekilde üst üste yerleştirilir, ortalanır ve aralarında boşluk bırakılır.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Artıları
  • Yalnızca hizalama, yön ve dağıtımı işler.
  • Düzenlemeler ve bakım tek bir yerde
  • Boşluk, n çocuk arasında eşit aralık olmasını sağlar.
Eksileri
  • En fazla kod satırı

Hem makro hem de mikro düzenler için idealdir.

3. Autobot

  1. Sıkıştırma: Mükemmel
  2. Squash: Mükemmel
  3. Kopya: iyi
  4. Düzenleme: Harika
  5. Akış: Mükemmel

Kapsayıcı, hizalama stili olmadan esnek olacak şekilde ayarlanmışken doğrudan alt öğeler otomatik kenar boşluklarıyla stillendirilmiştir. Öğenin her tarafında çalışmak nostaljik ve harika bir deneyim.margin: auto

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Artıları
  • Eğlenceli numara
  • Hızlı ve basit
Eksileri
  • Taşma durumunda garip sonuçlar
  • Boşluk yerine dağıtıma güvenilmesi, çocukların yan yana durduğu düzenlerin oluşmasına neden olabilir.
  • Konuma "zorlanmak" ideal görünmüyor ve çocuğun kutu boyutunda değişikliğe neden olabilir.

Simgeleri veya sözde öğeleri ortalamak için idealdir.

4. Fluffy Center

  1. Ezme: kötü
  2. Squash: kötü
  3. Kopya: kötü
  4. Düzenle: Harika!
  5. Flow: Harika! (mantıksal özellikleri kullandığınız sürece)

"Fluffy center" yarışmacısı, en lezzetli görünen yarışmacımız ve tamamen öğe/alt öğe tabanlı tek merkezleme tekniği. Pembe iç kenarlığımızı görüyor musunuz?

.fluffy-center {
  padding: 10ch;
}
Artıları
  • İçeriği korur
  • Atomik
  • Her test gizlice bu ortalama stratejisini içeriyor
  • Kelime boşluğu, boşluktur
Eksileri
  • Faydalı olmama yanılsaması
  • Konteyner ile öğeler arasında bir çakışma var. Bunun nedeni, her birinin boyutlandırma konusunda çok katı olmasıdır.

Kelime veya ifade odaklı ortalama, etiketler, haplar, düğmeler, çip ve daha fazlası için idealdir.

5. Pop & Plop

  1. Squish: Tamam
  2. Squash: Tamam
  3. Kopya: kötü
  4. Düzenle: iyi
  5. Flow: fine

Mutlak konumlandırma, öğeyi normal akışın dışına çıkardığı için bu "patlama" oluşur. Adlardaki "plop" kısmı, bu yöntemi en çok kullandığım zamanlardan geliyor: Diğer şeylerin üzerine "plop" diye bırakmak. İçerik boyutuna göre esnek ve dinamik olan bu teknik, klasik ve kullanışlı bir yerleştirme tekniğidir. Bazen kullanıcı arayüzünü başka bir kullanıcı arayüzünün üzerine yerleştirmeniz yeterli olur.

Artıları
  • Yararlı
  • Güvenilir
  • İhtiyacınız olduğunda paha biçilmezdir.
Eksileri
  • Negatif yüzde değerleri içeren kod
  • Kapsayan bir bloğu zorlamak için position: relative gerektirir.
  • Erken ve tuhaf satır sonları
  • Ek çaba gerektirmeden kapsayan blok başına yalnızca 1 tane olabilir.

Aşağıdakiler için idealdir: Modallar, bildirimler ve mesajlar, yığınlar ve derinlik efektleri, pop-over'lar.

Kazanan

Issız bir adada olsam ve yalnızca bir odaklanma tekniği kullanabilsem tercihim…

[davul sesi]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Hem makro hem de mikro düzenler için faydalı olduğundan bu özelliği her zaman stil sayfalarımda bulabilirsiniz. Beklentilerimi karşılayan sonuçlar sunan, her açıdan güvenilir bir çözüm. Ayrıca, doğal boyutlandırma bağımlısı olduğum için bu çözüme geçme eğilimindeyim. Evet, çok fazla kod yazmanız gerekiyor ancak sağladığı avantajlar bu ekstra kodu telafi ediyor.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center, merkezleme tekniği olarak gözden kaçırılması kolay olacak kadar küçük olsa da merkezleme stratejilerimin temelini oluşturur. O kadar küçük birimlere ayrılmış ki bazen kullandığımı unutuyorum.

Sonuç

Hangi tür şeyler ortalama alma stratejilerinizi bozar? Dayanıklılık zil sesine başka hangi zorluklar eklenebilir? Çeviri ve kapsayıcıda otomatik yükseklik anahtarını düşündüm. Başka ne olabilir?

Benim nasıl yaptığımı öğrendiğinize göre siz nasıl yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de içerik oluşturmanın tüm yollarını öğrenelim. Bu yayındaki örnekler gibi kendi ortalama örneğinizi oluşturmak için bu yayını okuyup codelab'i uygulayın. Kendi versiyonunuzu Tweetleyin. Ben de bu versiyonu aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri