Kusurlu Olmak İçin Geliştirme: Geleceği Hazırlayan CSS Stilleri

Kusurlu Olmak İçin Geliştirme: Geleceği Hazırlayan CSS Stilleri

Sonsuz derecede cihaz ve kullanıcı yeteneği çeşitliliği olan bir dünyada geleceğe yönelik stilleri nasıl planlayacağız? İşlerin nasıl bozulabileceğini ve modern CSS’nin nasıl çözümler sunduğunu keşfedelim.

Bu bölüm aşağıdakiler için işlemeyi kapsayacaktır:

  • değişken içerik uzunluğu ve taşma
  • öngörülemeyen ortam boyutları
  • uluslararasılaşma
  • erişilebilirlikle ilgili kullanıcı ayarları

Sağlam bir yorum dizisi bileşeni oluşturmayı keşfedeceğiz. İşte başlangıç ​​noktamız – tasarımdan aldığınız yerleşimin tam bir taklidi, iyi iş!

“İlk Yorum Konusu” için CSS
.comment-list {
list-style: none;
padding: 0.5rem;
margin: 0;
display: grid;
gap: 1.5rem;
}

.comment .comment-list {
grid-column-start: 2;
grid-column-end: -1;
padding: 0;
}

.comment {
display: grid;
grid-template-columns: 64px 1fr;
gap: 1rem;
}

.comment-body {
display: grid;
gap: .5rem;
color: #444;
}

.comment-meta {
color: #767676;
font-size: .875rem;
}

.comment-body a {
color: inherit;
}

.comment-meta a {
color: mediumvioletred;
}

Ancak yeniden boyutlandırırsanız, özellikle taşma ile ilgili birkaç sorun fark edeceksiniz.

Avatar çizimleri oyunun bir parçasıdır. Kadın Gücü Sara Pelaez tarafından Allık koleksiyonu.

İçeriği tam olarak planlayamıyorsanız, esneklik için plan yapın. Mutlak değerler belirlemek yerine, mevcut bağlama göre en iyi değeri seçmek için CSS fonksiyonlarını kullanabiliriz.

bizim .comment stilleri, avatar için kesin bir piksel değeri belirledik. Bunun yerine CSS işlevini kullanabiliriz. min seçmek için minimum hesaplanan değer seçenekler listesi arasında.

“Güncellenmiş Avatar Izgara Sütunu” için CSS
.comment {
grid-template-columns: 64px 1fr;

}

Bu durumda, etki, avatarın asla aşılmamasıdır. 64px daha büyük görünüm alanları için. Ve daha küçük görünüm alanları için veya daha dar kaplar içinde, olarak hesaplanacaktır 15% toplam yorum genişliğinin

Bu örneğin gösterdiği gibi, bazen medya sorgularında kesin değerler tanımlamak yerine bağlamsal olarak yapmak için düzen seçimlerini tarayıcıya devredebiliriz.

Karakterler veya öğeler olsun, her zaman orijinal tasarımın planladığından daha fazlasını bekleyin.

Avatar güncellememiz zaten bazı şeyleri iyileştirdi. Ancak, tasarımcımızın gerçek dünya verilerini yansıtmayan “mutlu yol” içeriğine sahip bileşeni hala görüntülüyoruz. Özellikle, kullanıcı adları ve yorum uzunlukları nispeten kısadır.

Biraz daha fazla varyansa ve “gerçek” avatarlara sahip olmak için demo verilerimizi güncelleyelim:

Mockup taklitimiz kadar güzel değil 😊

Şimdi, yeniden boyutlandırma yoluyla bileşenimizi takip ediyor ve test ediyorsanız, içerik taşması olasılığımız olduğunu göreceksiniz.

önce onu çözelim .comment-metahangisi small kullanıcı adını ve tarihi içeren etiket.

Kullanıcı adının ve tarihin daha geniş görünüm pencerelerinde hizalanmasına ve daha küçük görünüm pencerelerinde istiflenmesine izin vermek için yerleşim yöntemini güncelleyeceğiz. Basit esnek davranış buna izin verir, çünkü alt öğeler yer olduğunda maksimum genişlikleri olur ve içeren öğe bu maksimum genişliğin altına düştüğünde yeni bir satıra akar.

“Yorum Meta Düzenini Güncelle” için CSS
.comment-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

Süre esnek kutu gap destek kazanıyor, bu durumda, bozulmuş davranış basitçe çok az daha yakın öğelerdir, bu nedenle bir geri dönüş sağlamamak çok zararlı değildir.

Devam edin ve bu sürümü test edin ve tam genişlikleri için yeterli alan olmadığında tarihlerin nasıl yeni bir satıra çarptığını görün.

İçerik Taşmasını Önleme

Demo verilerinde, ikinci yorumdaki daha uzun e-posta, sonunda daha küçük görünüm pencerelerinde taşma kaydırmasına neden olur. Yorum gövdesindeki genişletilmiş URL de öyle.

Düzeltme, istersek yalnızca bağlantı öğelerine dahil edilebilir. Ancak, bir yorum dizisinin doğası gereği, bu bağlamda taşma içeriği hakkında ekstra önleyici olmak mantıklı görünüyor. Bu nedenle, en üst düzeye iki özellik uygulayacağız. .comment içindeki tüm içeriğe basamaklamak için.

“İçerik Taşmasını Önleme” için CSS
.comment {
overflow-wrap: break-word;
hyphens: auto;
}

.comment a {
hyphens: none;
}

olasılığını ortadan kaldırdığımıza dikkat edin. hyphens bağlantılardan. Bu durumda, örneğimizdeki gibi tam bağlantılar görünür ve birileri onu yazmaya veya yüksek sesle okumaya çalışır.

Bir kullanıcı metni kopyalarsa, CSS’ye eklenen kısa çizgiler dahil edilmez. Belirtildiği üzere, hyphens ayrıca tüm tarayıcılarda tüm diller için tutarlı bir şekilde mevcut değildir. Yapabilirsiniz gözden geçirmek hyphens MDN’de destek.

İle birlikte overflow-wrap: break-wordherhangi bir metin dizesi Mayıs içeren öğenin tam genişliği için yer kalmadığında yeni bir satıra bölünebilir. Ne zaman hyphens desteklenirse, bonus etkisi, bozuk sözcüklerin neden olduğu tek boşluklardan kaynaklanan “düzensiz kenarı” azaltır.

İsteğe bağlı olarak, kullanmak için bağlantıları güncellemek isteyebilirsiniz. overflow-wrap: anywhere; tarayıcı, arayı uygulamadan önce bağlantıyı yeni bir satıra taşımaya karar verirse boş alanı önlemek için. Mevcut çözümümüzü daha küçük görünüm pencerelerinde görebilirsiniz, şu anda uzun süre açıkta kalan bağlantıdan önce bir boşluk bırakmaktadır.

Bileşeni şimdi yeniden boyutlandırmayı deneyin ve belki de etkilerindeki farkı görmek için bu özellikleri incelemek ve açıp kapatmak için açık geliştirme araçlarını açın.

Şimdi bu avatarlarla ilgilenelim.

İlk olarak, ayarladık border-radius bir daire görünümü oluşturmak için. Ardından görüntünün ızgara sütununu aşağıdakilerle doldurmasını sağlarız: width: 100%. Ardından görseli kendi kabına dönüştürüyoruz ve görsel içeriğinin dolmasına izin veriyoruz ancak limiti aşmıyor. img ile boyutlar object-fit: cover. kuralı bir ile bitiriyoruz son teknoloji ürünü aspect-ratio mükemmel bir kare sağlamak için.

“Güncellenmiş Avatar Boyutları” için CSS
.comment img {
border-radius: 50%;
width: 100%;
object-fit: cover;
aspect-ratio: 1;
}

@supports not (aspect-ratio: 1) {
.comment-avatar {
position: relative;
height: 0;
padding-bottom: 100%;
}

.comment-avatar img {
position: absolute;
height: 100%;
}
}

Bu kuralı, bir özellik algılama geri dönüş kuralıyla uyguluyoruz – @supports not (aspect-ratio: 1) – bunu yapan tarayıcılar için olumsuzluk destek aspect-ratio. Bu geri dönüş, görüntünün üst öğesinin tam kare oranını sağlamak için dolguya dayanan ve ardından img o alanı doldurur.

Önceki Modern CSS öğreticileri ele alındı object-fitgibi Yalnızca CSS Tam Genişlik Duyarlı Görüntüler 2 Yol. Bunun da tadını çıkarabilirsiniz 3 dakikalık video gösterimi object-fit.

Test Edilecek Davranışı Bozma

Tarayıcımızı/bileşen kapsayıcımızı yeniden boyutlandırarak oldukça kolay tespit edebileceğimiz senaryoları ele aldık. Daha fazla gerçek dünya verisi eklemek, daha iyi avatar stilleri tanımlamamıza yardımcı oldu.

Açıkça test etmemiz gereken birkaç öğe daha var: uluslararasılaştırma (i18n) ve erişilebilirlik için birkaç ilgili WCAG başarı kriteri.

terminoloji kontrolü: WCAG, “Web İçeriği Erişilebilirlik Yönergeleri,” daha erişilebilir ve kapsayıcı deneyimler oluşturmaya yardımcı olmayı amaçlayan bir dizi standart. Başarı Kriterleri erişilebilir deneyimler oluşturmaya yardımcı olmak için mevcut ve gelecekteki web teknolojilerine geniş çapta uygulanabilen kılavuzlardır.

Uluslararasılaştırma (i18n)

Evet, yorumlar aptalca saçmalık (nezaket cupcake ipsum ve kurumsal ipsum). Ancak, amacı kullanıcı tarafından gönderilen içeriği almak ve görüntülemek olan yorum dizisi bileşeni gibi bir şey için, bazı çevirileri deneyerek stres testi yapmak harika bir fikirdir.

İlk yorum Almanca, ikincisi Estonca ve üçüncüsü Arapça.

“RTL Metin Stili” için CSS
.comment {
text-align: start;
}

Taşmayı ele alma konusundaki önceki çalışmalarımız sayesinde, yorum dizimiz içerik dillerindeki değişikliği zarif bir şekilde ele alıyor.

Arapça olan üçüncüsünde, tarayıcı, özniteliği yerleştirdiği için öncelikle içerik yönü anahtarını kullanıyor. dir="rtl" üzerinde .comment liste öğesi. İlginç bir şekilde, tarayıcı akıllıca sırasını değiştirir. grid-template-columns ekstra bir şey yapmamıza gerek kalmadan. Flexbox da bu özniteliğe göre dönecektir. Float kullanan eski stiller ters çevrilmez ve ek bir geçersiz kılma gerektirir.

Sadece bir ekstra özellik tanımladık: text-align: start. Buna bir denir mantıksal özellik ve RTL’nin tanımlanması durumunda metni çevirir ve eşdeğer olur text-align: right. Süre mantıksal özellikler için hala destek kazanıyor, bir geri dönüş eklemeniz gerekebilir. kullandığımızdan beri gap boyunca boşluk bırakmak için orada güncelleme gerekmez. Etkilenen kenar boşluklarını kullanıyor olsaydık, gerektiğinde dönüştürmeye yardımcı olması için mantıksal özellikleri tekrar kullanabilirdik.

Bir RTL (sağdan sola) stil uzmanı olmadığım için, isterseniz sizi bu harika kaynağa yönlendireceğim. RTL stili hakkında daha fazla bilgi edinin.

WCAG Başarı Ölçütü 1.4.10 – Yeniden Akış

Yeniden akış, masaüstünde %400’e kadar yakınlaştırmayı destekleyen terimdir. %400’de 1280 piksel genişliğinde bir çözünürlükte, görüntü alanı içeriği 320 CSS piksel genişliğine eşittir.

Bir masaüstünde yakınlaştırma, sonunda genellikle “duyarlı tasarım” davranışı olarak düşündüğümüz şeyi tetikler. Aslında, medya sorguları veya diğer görüntü alanı tabanlı yerleşim yöntemleri kullanıyorsanız, yakınlaştırdıkça bunların ele alınmaya başladığını göreceksiniz.

Bu başarı kriterini ele almanın zorluğu genellikle iki yönlüdür:

  • yok zoom herhangi bir sorun için ayarlamak için medya sorgusu
  • yakınlaştırma kullanan bir masaüstünün en boy oranı, genellikle duyarlı tasarım için planladığımız mobil portre modundan farklıdır

Özellikle en boy oranı farkı, örtüşme sorunlarına neden olabilir. Aynı zamanda, yalnızca görüntüleme alanı birimlerine veya yüzdelerine dayanan çözümlerin bir yakınlaştırma bağlamında çok büyük veya çok küçük göründüğü anlamına gelir.

Bununla birlikte, diğer birimlerle birlikte kullanılan görünüm birimi birimleri, aslında yakınlaştırılmış yerleşim sorunlarının çözülmesine de yardımcı olabilir ve özel bir zoom medya sorgusu.

Bileşenimizi %400’e yakınlaştırırsak, avatar sütunu bu bağlamda biraz büyümeye başlar. Standart yakınlaştırmada algıladığımız gibi nispeten benzer boyutta bir sütun almasını istiyoruz.

Başlangıçta başvurduğumuzu hatırlayın min avatarın daha küçük kapsayıcılar ve görünüm alanları için bir yüzde genişliği aracılığıyla yeniden boyutlandırılması amaçlanan ızgara sütununa. Neyse ki, min fonksiyon ikiden fazla değer alabilir!

Şimdi, bu tür bir düzeltme biraz deneme yanılma gerektirebilir, ancak bence 10vw ek bir değer olarak istenen ayarlamayı sağladı. Ayrıca, gerçek mobil görünümler için avatarı biraz azalttı, ancak değerli bir takas oldu.

Yüzde genişliğini korumanın yararı, bileşenimizin üst kapsayıcısına da yanıt vermeye devam etmesidir. Kaldırırsak, görüntü alanı birimleri etkinleşmeye başlayana kadar bir azalma görmezdik ki bu objektif olarak çok geç olabilir.

“Sütun İzin Verilen Minimum Genişlikleri Güncelle” için CSS
.comment {
grid-template-columns: min(64px, 15%) 1fr;

}

Bir masaüstü tarayıcı kullanıyorsanız, yakınlaştırmanızı %400’e yükseltin. Ardından geliştirme araçlarını açın (bu test için kenar çubuğu olarak yerleştirmemeniz önerilir) ve bu demoyu bulun. Şunlardan birini seçin: .comment öğeleri listeleyin ve 10vw diğer değerlere karşı ne zaman “kazandığını” görmek için ok tuşlarını kullanarak. Ardından, bir mobil öykünücüye geçin ve ayarınızın avatarı o görünümde olumlu mu yoksa olumsuz mu etkilediğini görün.

Yakınlaştırma düzeni sorunlarını çözmek biraz sabır gerektirir, ancak min bu zorlukta yardımcı olmak için bulduğum en iyi modern CSS araçlarından biridir.

WCAG Başarı Ölçütü 1.4.12 – Metin Aralığı

Farkında olmadığınız veya zaten test ediyor olabileceğiniz başka bir kriter de şudur: Metin Aralığı.

Göre metin aralığı anlama belgeleriiçeriğiniz aşağıdakiler dahil olmak üzere kullanıcı ayarları için esnek olmalıdır:

  • Yazı tipi boyutunun en az 1,5 katı kadar satır yüksekliği (satır aralığı)
  • Aşağıdaki paragrafları yazı tipi boyutunun en az 2 katı olacak şekilde boşluk bırakın
  • Yazı tipi boyutunun en az 0.12 katına kadar harf aralığı (izleme)
  • Yazı tipi boyutunun en az 0.16 katı kadar sözcük aralığı

Neyse ki, bir metin aralığı yer imi Bu kriteri test etmek için stilleri uygulayacak olanı yakalayabilirsiniz.

Bir yer imi uygulamasına aşina değilseniz, bağlantıya tıklayıp yer imi çubuğunuza sürükleyebilirsiniz. Bu durumda, yer imi, bu kriteri test etmenize izin vermek için görüntülemekte olduğunuz sayfadaki tüm öğelere metin aralığı stillerini uygulayacak küçük bir komut dosyası içerir.

Bookmarklet testini yorum dizisi bileşenimize uygulayarak, daha önceki çalışmalarımız sayesinde çok şükür herhangi bir sorunla karşılaşmadık.

Mutlak boyutlara sahip içerik kutuları tanımlamaya çalışırsanız veya CSS kesme yöntemlerine güvenirseniz veya JavaScript ile satır içi boyut stillerini zorlarsanız bu kriterle ilgili zorluklar yaşayabilirsiniz. İçeriğin kesilmesi veya taşması durumunda bu kriteri karşılayacak şekilde çözmeniz gerekir.

Bu bileşen için oluşturulan son stilleri içeren yeni bir CodePen oluşturmak için “CodePen’de Aç” seçeneğini seçebilirsiniz. Aşağıdakiler dahil, uyguladığımız çeşitli güncellemeleri daha iyi keşfetmek için bunu bir fırsat olarak kullanın:

  • duyarlı ızgara sütunu boyutlandırma min
  • değişken genişlikte içerik yeniden akışı için flexbox
  • overflow-wrap ve hyphens içerik taşmasını işlemek için
  • içindeki birimleri birleştirmek min çeşitli görüntü alanı boyutlarını ve yakınlaştırmayı hesaba katmak için

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.