CSS'de ortalama

Hangisinin değişime karşı en dirençli olduğunu görmek için bir dizi testten geçerken 5 ortalama tekniğini kullanın.

Adam Argyle

CSS'yi ortalamak, kötü şakalar ve alaylarla dolu, kötü bir iştir. 2020 CSS artık büyüdü ve artık o şakalara diş sıkarak değil, dürüstçe gülebiliriz.

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Yarışma

Farklı ortalamanın türleri vardır. Farklı kullanım alanları, objelerin sayısı gibi unsurları merkeze almak gibi şeylerden "kazandıran" bir merkezleme tekniğinin ardında yatan mantığı göstermek için Dirençli Halka'yı yarattım. Bu, her bir merkezleme stratejisi için dengeyi kurmak ve performanslarını gözlemlemek üzere uygulayabileceğiniz bir dizi stres testidir. Son olarak, en yüksek puanlama tekniğinin yanı sıra "en değerli" olanı da buluyorum. Umarız yeni merkezleme tekniklerini ve çözümlerini kullanmayı sürdürürsünüz.

Direnç Yüzük

Dayanıklılık Halkası, bir merkezleme stratejisinin uluslararası düzenler, değişken boyutlu görüntü alanları, metin düzenlemeleri ve dinamik içeriğe karşı dayanıklı olması gerektiğine olan inancımın bir temsili. Bu ilkeler, merkezleme tekniklerinin devam etmesi 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 kaldırabilmelidir
2. Eğik: Ortalama, yükseklikteki değişiklikleri kaldırabilmelidir
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. Akış: Ortalama, belge yönü ve yazma modundan bağımsız olmalıdır

Kazanan çözüm, sıkıştırılan, sıkıştırılan, kopyalanan, düzenlenen ve çeşitli dil modlarına ve yönlere geçerken içerikleri ortada tutarak direncini göstermelidir. Güvenilir ve dayanıklı bir merkez, güvenli bir merkez.

Açıklama

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

• Pembe kenarlık, ortalama stillerinin sahibi olduğunu gösterir
• Gri kutu, öğeleri ortalanmış şekilde yerleştirmeye çalışan kapsayıcının arka planıdır.
• Her alt çocuğun arka planı beyazdır, böylece ortalama tekniğinin alt kutu boyutları (varsa) üzerindeki etkilerini görebilirsiniz

5 Yarışmacı

5 ortalama tekniğiyle Reilience Ringer'a giriyor ve yalnızca bir tanesi Resilience Crown 👸 kazanır.

1. İçerik Merkezi

1. Squish: Harika!
2. Squash: Müthiş!
3. Yinelenen: harika!
4. Düzenleme: harika!
5. Akış: Harika!

display: grid ve place-content kısaltmasını alt etmekte zorlanabilirsiniz. Çocukları toplu olarak merkeze yerleştirip gerekçelendirdiği için okunması gereken öğe grupları açısından önemli bir merkezleme tekniğidir.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Paragraflar ve başlıklar, prototipler veya genellikle okunaklı ortalama gereken öğeler içeren makro düzenleri için idealdir.

2. Nazik Esnek

1. Squish: Harika!
2. Squash: Müthiş!
3. Yinelenen: çok güzel!
4. Düzenleme: harika!
5. Akış: harika!

Gentle Flex, yalnızca odaklamaya yönelik daha doğru bir stratejidir. place-content: center ürününün aksine, yumuşak ve yumuşaktır çünkü ortalama işlemi sırasında çocuklar için kutu boyutları değiştirilmez. Tüm öğeler mümkün olduğunca nazik bir şekilde gruplanır, ortalanır ve aralıklı olarak yerleştirilir.

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

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

3. Otomatik Bot

1. Squish: harika
2. Squash: harika
3. Yinelenen: Sorun değil
4. Düzenleme: harika
5. Akış: harika

Kapsayıcı, hizalama stilleri olmadan esnek olacak şekilde ayarlanırken doğrudan alt öğelerin stili otomatik kenar boşlukları kullanılarak belirlenir. Bu öğenin her yönünde çalışması margin: auto, nostaljik ve harika bir şey yaratıyor.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

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

4. Fluffy Merkezi

1. Squish: kötü
2. Squash: kötü
3. Yinelenen: bozuk
4. Düzenleme: harika!
5. Akış: harika! (mantıksal özellikler kullandığınız sürece)

Yarışmacı "pofuduk merkezi", açık arayla en lezzetli yarışmacımızdır ve tamamen öğeye/çocuğa ait olan tek merkezleme tekniğidir. İçimizdeki yalnız pembe kenarlığı görüyor musunuz?

.fluffy-center {
  padding: 10ch;
}

Kelime veya ifade merkezli, etiketler, haplar, düğmeler, çipler ve daha fazlası için idealdir.

5. Pop ve Plop

1. Squish: tamam
2. Squash: tamam
3. Yinelenen: bozuk
4. Düzenleme: uygun
5. Akış: iyi

Mutlak konumlandırma, öğeyi normal akışın dışına çıkardığı için bu "çıkar". Adların "plop" kısmı, en faydalı bulduğum zaman gelir: yani diğer öğelerin üzerine yerleştirme. İçerik boyutu için esnek ve dinamik olan, klasik ve kullanışlı bir yer paylaşımı ortalama tekniğidir. Bazen kullanıcı arayüzünü diğer kullanıcı arayüzünün üzerine yerleştirmeniz gerekir.

Kalıcı iletişimler, kısa mesaj ve mesajlar, yığınlar, derinlik efektleri ve pop-up'lar için idealdir.

Kazanan

Bir adada olsaydım ve sadece 1 ortalama tekniğim olsaydı...

[davul zarı]

Hafif Esnek 🎉

.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 aracı istediğiniz zaman stil sayfalarımda bulabilirsiniz. Beklentilerimle eşleşen sonuçlar sunan, her yönüyle güvenilir bir çözüm. Ben doğuştan gelen bir boyut meraklısı olduğum için bu çözüme geçiş yapmayı tercih ediyorum. Doğru, yazmak çok zordur ama sağladığı avantajlar ekstra koddan ağır basar.

En Değerli Oyuncu

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center o kadar mikrodur ki ortalama bir teknik olarak gözden kaçabilir, ancak merkezleme stratejilerimin temelini oluşturuyor. O kadar atomlu ki bazen kullanmayı unutuyorum.

Sonuç

Ne tür şeyler merkezleme stratejilerinizi bozar? Esneklik direncine başka hangi zorluklar eklenebilir? Çeviriyi ve kapsayıcıdaki otomatik yüksekliği değiştirmeyi düşündüm. Başka ne olmuş?

Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Bu yayındakiler gibi kendi ortalama örneğinizi oluşturmak için bu yayınla birlikte codelab'i takip edin. Bu sürümü tweet'lediğinizde aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.

Topluluk remiksleri

• Bir blog yayını ile CSS Püf Noktaları