CSS'de ortalama

Değişime en dayanıklı olanı görmek için bir dizi testten geçen 5 merkezleme tekniğini takip edin.

Adam Argyle

CSS'de ortalama, şakalar ve alaylarla dolu, meşhur bir zorluktur. 2020 CSS artık tamamen büyüdü ve artık bu şakalara dürüstçe gülebiliriz, dişlerimizi sıkarak değil.

Video izlemeyi tercih ediyorsanız bu yayının YouTube versiyonunu izleyebilirsiniz:

Yarışma

Farklı ortalama türleri vardır. Farklı kullanım alanları, ortalanacak öğe sayısı vb. "Kazanan" ortalama tekniğinin arkasındaki mantığı göstermek için Resilience Ringer'ı oluşturdum. Bu, her bir merkezleme stratejisinin kendi içinde denge kurması ve sizin de performanslarını gözlemlemeniz için yapılan bir dizi stres testidir. Sonunda, en yüksek puanı alan tekniği ve "en değerli" tekniği açıklıyorum. Umarım yeni merkezleme teknikleri ve çözümleri öğrenmişsinizdir.

Dayanıklılık Şampiyonu

Resilience Ringer, ortalama stratejisinin uluslararası düzenlere, değişken boyutlu görüntü alanlarına, metin düzenlemelerine ve dinamik içeriklere karşı dayanıklı olması gerektiğine dair inancımı temsil ediyor. Bu ilkeler, merkezleme tekniklerinin dayanıklılığını ölçmek için aşağıdaki dayanıklılık testlerinin şekillendirilmesine yardımcı oldu:

  1. Sıkıştırılmış: Ortalama, genişlikteki değişiklikleri işleyebilmelidir.
  2. Sıkıştırılmış: Ortalama, yükseklikteki değişiklikleri işleyebilmelidir.
  3. Kopyala: Ortalama, öğe sayısına göre dinamik olmalıdır.
  4. Edit: centering should be dynamic to length and language of content
  5. Flow: Ortalama, doküman yönünden ve yazma modundan bağımsız olmalıdır.

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

Legend

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

  • Pembe kenarlık, ortalama stillerinin sahipliğini gösterir.
  • Gri kutu, öğeleri ortalamaya çalışan kapsayıcının arka planıdır.
  • Her alt öğenin arka plan rengi beyazdır. Böylece ortalama tekniğinin alt kutu boyutları üzerinde herhangi bir etkisi olup olmadığını görebilirsiniz.

5 yarışmacı

Psikolojik Direnç Ringi'ne 5 merkezleme tekniği giriyor, yalnızca biri Psikolojik Direnç Tacı'nı 👸 alacak.

1. İçerik Merkezi

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

display: grid ve place-content kısaltmasının kısalığını geçmek zor olacak. Alt öğeleri toplu olarak ortalayıp hizaladığı için okunması gereken öğ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.
  • Düzenleme ve bakım işlemlerini tek bir yerden yapabilirsiniz.
  • Boşluk, n alt öğe arasında eşit boşluk 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 konuyu Hafif Esneme bölümünde daha ayrıntılı ele alacağız.

Paragraf ve başlık içeren makro düzenler, prototipler veya genellikle okunaklı ortalama gerektiren öğeler için idealdir.

2. Hafif Esneme

  1. Squish: Harika.
  2. Squash: Harika.
  3. Kopya: Harika.
  4. Düzenleme: Harika.
  5. Flow: Harika.

Gentle Flex, yalnızca ortalamaya odaklanan daha gerçekçi bir stratejidir. place-content: center öğesinin aksine, ortalama sırasında alt kutu boyutları değiştirilmediğinden yumuşak ve nazik bir geçiş sağlar. Tüm öğeler mümkün olduğunca nazik bir şekilde üst üste yerleştirilir, ortalanır ve aralıklı olarak dizilir.

.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ı yönetir
  • Düzenlemeler ve bakım tek bir yerde
  • Boşluk, n alt öğe arasında eşit boşluk olmasını sağlar.
Eksileri
  • En çok kod satırı

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

3. Autobot

  1. Squish: harika
  2. Squash: harika
  3. Yinelenen: iyi
  4. Düzenleme: mükemmel
  5. Akış: mükemmel

Kapsayıcı, hizalama stilleri olmadan flex olarak ayarlanır. Doğrudan alt öğeler ise otomatik kenar boşluklarıyla stillendirilir. Öğenin her tarafında çalışmak nostaljik ve harika bir his.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üvenmek, düzenlerin kenarlara dokunan alt öğelerle oluşturulabileceği anlamına gelir.
  • Konuma "itilmek" 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. Sıkıştırma: kötü
  2. Squash: kötü
  3. Yinelenen: kötü
  4. Düzenleme: Harika.
  5. Flow: Harika. (mantıksal özellikler kullandığınız sürece)

"Fluffy center" yarışmacısı, açık ara en lezzetli görünen yarışmacımız ve tamamen öğeye/alt öğeye ait olan tek ortalama tekniği. Tekli iç pembe kenarlığımızı gördünüz mü?

.fluffy-center {
  padding: 10ch;
}
Artıları
  • İçeriği korur
  • Atomik
  • Her testte bu merkezleme stratejisi gizlice uygulanıyor.
  • Kelime boşluğu, boşluktur
Eksileri
  • Faydalı olmadığı yanılsaması
  • Kapsayıcı ile öğeler arasında bir çakışma var. Her ikisi de boyutlandırma konusunda çok katı olduğu için bu durum normal.

Kelime veya kelime öbeği odaklı ortalama, etiketler, haplar, düğmeler, çipler ve daha fazlası için idealdir.

5. Pop & Plop

  1. Squish: Tamam.
  2. Squash: Uygun
  3. Yinelenen: kötü
  4. Düzenleme: iyi
  5. Akış: iyi

Mutlak konumlandırma, öğeyi normal akışın dışına çıkardığı için bu "pop" olur. Adlarındaki "plop" (bırakma) kelimesi, en çok işe yaradığı durumdan geliyor: Diğer şeylerin üzerine bırakmak. Bu, içerik boyutuna göre esnek ve dinamik olan klasik ve kullanışlı bir yer paylaşımı ortalama tekniğidir. Bazen bir kullanıcı arayüzünü diğerinin üzerine yerleştirmeniz gerekir.

Artıları
  • Yararlı
  • Güvenilir
  • İhtiyacınız olduğunda paha biçilmezdir
Eksileri
  • Negatif yüzde değerleri içeren kod
  • Kapsayıcı bir blok oluşturmak için position: relative gerekir
  • Erken ve tuhaf satır sonları
  • Ek çaba harcamadan, her kapsayıcı blokta yalnızca 1 tane olabilir.

Kullanım alanları: Modallar, toast'lar ve mesajlar, yığınlar ve derinlik efektleri, popover'lar.

Kazanan

Bir adada olsaydım ve yalnızca bir odaklanma tekniği kullanabilseydim bu teknik… olurdu.

[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 kullanışlı 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, içsel boyutlandırma bağımlısı olduğum için bu çözüme geçme eğilimindeyim. Evet, yazması biraz uzun sürüyor ama sağladığı avantajlar bu ekstra koda değer.

En Değerli Oyuncu

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center o kadar küçük bir teknik ki ortalama tekniği olarak gözden kaçması kolay, ancak benim ortalama stratejilerimin temelini oluşturuyor. O kadar atomik ki bazen kullandığımı unutuyorum.

Sonuç

Merkezleme stratejilerinizi bozan şeyler nelerdir? Dayanıklılık çemberine başka hangi zorluklar eklenebilir? Çeviri ve kapsayıcıda otomatik yükseklik anahtarı kullanmayı düşündüm… Başka ne olabilir?

Benim nasıl yaptığımı öğrendiniz. Peki siz nasıl yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Bu yayındaki örnekler gibi kendi ortalama örneğinizi oluşturmak için bu yayındaki codelab'i uygulayın. Kendi versiyonunuzu bana tweetleyin, ben de aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri