CSS { Gerçek Hayatta }

Faydalı Alternatif Metin Yazma

benim gibi son zamanlarda yazılmış, tarayıcılara bir dizi yeni CSS özelliğinin geldiğini görmek çok heyecan verici ve bunları hemen kullanmaya başlamak istediğimiz için bizi kim suçlayabilir ki?! Tarayıcıların yeni CSS özelliklerini her zamankinden daha hızlı desteklemek için çalıştığını görmek harika ve bu hız, birlikte çalışma, tarayıcı satıcılarının özellikleri birlikte çalışabilir şekilde uygulamak için birlikte çalıştığı bir girişim. Ve “her zaman yeşil kalan” tarayıcılarda, çoğu kullanıcı, tarayıcıları sorunsuz bir şekilde güncellendiğinden bu yeni özellikleri hemen görmelidir.

Ancak Jim Neilsen işaret ettio yapmaz her kullanıcının en yeni ve en iyi tarayıcı sürümüne sahip olduğu anlamına gelir. Birçok eski cihaz yapamamak en son sürüme güncelleyin. İşletim sistemi desteklemiyor. Bunun anlamı şudur ki:

  1. Web sitenizi daha eski cihazlarda test etmeniz gerekiyor ve
  2. Süslü yeni CSS özellikleri kullanıyorsanız, yedekler sağlamanız veya cihazları bu özellikleri desteklemeyen kullanıcıların yine de bunlar olmadan da yaşayabilmesini sağlamanız gerekir.

Aşamalı geliştirme

Aşamalı geliştirme bir web sitesinin temel içeriğinin ve işlevselliğinin mümkün olduğunca çok sayıda kullanıcı tarafından erişilebilir olmasını sağlarken, cihazları onları destekleyebilen kullanıcılar için daha yeni özellikler kullanarak gelişmiş bir deneyim sağladığımız bir web geliştirme stratejisidir. Eğlenceli gerçek: Bu makaleyi yazarken web sitesini açtım WhatIsMyBrowser.com aralıklı bir internet bağlantısı ile bir trende iken. Sayfanın CSS’si yüklenemedi, ancak yine de HTML’yi aldım ve tam olarak güzel olmasa bile sayfayı mükemmel şekilde kullanabilirdim. Bu ilerici geliştirme!

Tabii ki, birçok durumda kullanıcılar niyet CSS dosyanızı yükleyebilirsiniz, ancak tarayıcıları kullanmayı seçtiğiniz bazı özellikleri desteklemiyor olabilir. Bazen bu iyi! al aspect-ratio nispeten yeni olan ve örneğin Safari sürüm 12’ye sabitlenmiş bir iPhone 6’da desteklenmeyecek olan özellik. aspect-ratio içinde biraz metin bulunan bu öğedeki özellik, tüm bunlar tarayıcılarda gerçekleşecektir. yapma destek aspect-ratio öğe, metni yerleştirmek için olması gereken yükseklik olacaktır. Ortalama bir kullanıcı için önemli değil.

Desteklenen en boy oranıyla
En boy oranı uygulanmamış turkuaz kutu
En boy oranı desteklenmeden

(Demoyu görün)

geri dönüşler

Diğer durumlarda, belirli bir CSS özelliği için bir geri dönüş sağlamamız gerekebilir. Bunu yapabilmemizin bir yolu, CSS özelliğini farklı bir değerle tekrarlamaktır. Belki yenisini kullanmak istiyoruz lch() Şu anda yalnızca Safari’de desteklenen renk işlevi. dahil ederek hsl() önceki kuraldaki değer, tarayıcılardan daha fazlasını sağlayabiliriz yapma destek lch() sahip olmak hsl() değer uygulandı — tarayıcı, tanımadığı değeri yok sayar.

.element {
background: rgb(84% 0% 77%);
background: lch(50% 100 331);
}

Özellik sorguları

Bazen geri dönüşün biraz daha karmaşık olması gerekir, bu durumda bir özellik sorgusu. Belki de en-boy oranı bileşenimiz bir görüntü arka planına sahiptir.

Bir yavru kedi görüntüsü arka planı olan en boy oranı kutusu

Sığ bir yükseklikte (tarayıcının desteklemediği yerlerde) aspect-ratio) görüntü garip bir şekilde kırpılmış ve ayırt edilmesi zor görünebilir. Bir özellik sorgusu kullanarak, minimum bir yükseklik belirleyebiliriz. aspect-ratio desteklenmiyor.

.aspect-box {
min-height: 10rem;
}

@supports (aspect-ratio: 3 / 2) {
.aspect-box {
min-height: auto;
aspect-ratio: 3 / 2;
}
}

(Demoyu görün.)

Daha da ileri gidebiliriz ve eski moda yöntem modern özelliği desteklemeyen tarayıcılar için bir en boy oranı ayarlamak için. Ancak unutmayın, aşamalı geliştirmenin amacı, aynı eski tarayıcıların kullanıcıları için deneyim, ancak bir kullanılabilir deneyim. Aynı sonucu sağlamak için iki katından fazla kod yazmanın pek bir anlamı yoktur. Neredeyse tüm kullanıcıların en boy oranlı görüntüleri alması kesinlikle gerekliyse (ve inanın bana, sahip olmak önemli kabul edildi – örneğin, eski cihazları kullanan kilit paydaşlar tarafından!), o zaman onları eski moda şekilde kodlamakta özgürsünüz. Ama bence bu son çare olmalı.

çoklu doldurma

Neyse ki, bir özelliği çoklu doldurmamız gereken durumların sayısı gün geçtikçe azalıyor, ancak yeni bir CSS özelliği kullanmak istediğimiz birkaç durumda hala gerekli olabilir. bu :focus-visible sözde sınıf (odaklanan bir öğeye erişilebilir odak stilleri uygulamak için kullanabiliriz) yalnızca kullanıcı için yararlı olduğunda) yakın zamanda yaygın bir tarayıcı desteği kazanmıştır ve bir süredir bazı tarayıcılarda desteklenirken diğerlerinde desteklenmemektedir. Şu anda özellik sorgularını kullanarak sözde sınıfların desteğini test etmenin bir yolu yoktur (bu, bize bir :focus bu tarayıcılar için bir geri dönüş olarak stil), bir çoklu dolgu kullanarak Bunun gibi kullanışlı bir alternatiftir.

Artık bir çoklu dolguya ihtiyacınız olmadığından emin olduğunuzda (örneğin bir özellik geniş çapta destekleniyorsa), kullanıcılarınıza gereksiz JS sunmaktan kaçınmak için onu kaldırmak iyi bir fikirdir.

Test yapmak

Denklemin diğer önemli parçası da elbette web sitelerinizi test etmektir! Gerçek cihaz testinin yerini hiçbir şey tutamaz, bu nedenle bir cihaz laboratuvarına erişiminiz varsa kesinlikle onu kullanmalısınız. En azından, onları yakalayabilirseniz birkaç farklı cihazda test etmeyi hedefleyin. Örneğin dokunmatik etkileşimle ilgili sorunlar, yalnızca gerçek bir dokunmatik ekranlı cihaz kullanıyorsanız görünür hale gelecektir.

Test platformları

Gerçek cihazlarda test edemiyorsanız (ve birçok şirketin iyi stoklanmış bir cihaz laboratuvarı tutmak için bütçesi yoksa), aşağıdakiler gibi çevrimiçi test platformları tarayıcı yığını ve LamdaTest çeşitli platformlarda ve cihazlarda test etmemizi sağlar. Bu platformlardan bazıları daha ucuz öykünücü seçenekleri sunar, ancak öykünücülerde kopyalanmayan sorunları yakalamanıza yardımcı olacağından, mümkünse gerçek aygıt seçeneğini kullanmanızı öneririm. Daha pahalı olabilirler, ancak bir grup müşterinin sitenize erişememesi durumunda ortaya çıkabilecek daha maliyetli sorunları önlemenize yardımcı olabilir!

Hangi tarayıcılar test edilecek?

Binlerce farklı cihaz, işletim sistemi ve tarayıcı sürümüyle, mümkün olan her ortamda test etmek kesinlikle imkansız! Peki hangilerini test etmelisiniz? buldum durum sayacı web sitesi, bir yıl boyunca en çok kullanılan tarayıcıları gösterdiği için burada çok faydalı olacaktır. Yıla, tarihe, platforma ve bölgeye göre filtreleyebilirsiniz: Örneğin, Birleşik Krallık’taki Trowbridge belediye meclisi için bir web sitesi yapıyorsanız, Birleşik Krallık istatistikleri muhtemelen sizin için dünya çapındaki istatistiklerden çok daha değerli olacaktır.

Site aynı zamanda istatistikleri özellikle kontrol etmenizi sağlar. tarayıcı sürümleri, test için en yararlı bulduğum şey bu. Genel bir kural olarak, testlerimle birlikte listelenen en popüler tarayıcıların en az son iki yılını ve ayrıca birkaç eski tarayıcıyı/cihazı, özellikle de eski cihazlarda çalışan Safari sürümlerini kapsamayı hedefliyorum.

Bir müşteri için çalışıyorsanız ve bunu yapabilecek durumdaysanız, ne kadar geriye doğru test etmeyi planladığınızı ve bu müşterilerin tarayıcılardan ne bekleyebileceklerini açıkça belirten yazılı bir anlaşma yapmaya değer olabilir. tüm özellikleri desteklemez (neyin bir hata oluşturduğuna karşı). Müşterileri aşamalı geliştirme konusunda eğitmek, aslında daha eski tarayıcılar için geri dönüşler olan “hataları” bildirirken, satır boyunca oldukça fazla zaman ve açıklama kazandırabilir!

Test etmenin diğer yolları

Tarayıcılar arası teste ek olarak, web sitelerimizi test ederken göz önünde bulundurmamız gereken başka yöntemler de vardır:

  • Klavye gezintisi – Birçok kişi fare yerine klavye kullanır. Web sitesinde yalnızca klavyenizi kullanarak gezinebiliyor musunuz? Odaklanmış unsurlar belirgin mi?
  • ekran okuyucular – Görme engelli kişiler, sayfanın içeriğini okuyan web sitesinde gezinmek için bir ekran okuyucu kullanabilir. MacOS’ta yerleşik bir ekran okuyucu bulunur, Seslendirmeve Chromebook’lar şunları içerir: Chrome Vox’u. (Ekran okuyucularla test etmede kesinlikle daha iyi olmam gerekiyor!)
  • yakınlaştırma – Pek çok kullanıcı (ben dahil!) tarayıcılarındaki yakınlaştırma seviyesini artırıyor. En az %15 yakınlaştırmayı deneyin. Yazı tipi boyutu beklendiği gibi artıyor mu? Düzen bozulur mu?
  • Azaltılmış hareket – Kullanıcılar, işletim sistemi düzeyinde azaltılmış hareket için bir tercih ayarlayabilir. web siteniz hareket tercihlerine saygı duymak? Dikkat dağıtabilecek veya daha da kötüsü bilişsel sorunları tetikleyebilecek animasyonları duraklatabilirler mi?
  • Erişilebilirlik araçları – Gibi araçlar balta web sayfanızı tarayın ve manuel olarak kontrol edilmesi zaman alacak olan erişilebilirlik sorunlarını (eksik alternatif metin, renk kontrastı ve anlamsal işaretleme gibi) kontrol edin. Aksi takdirde fark edilmeyebilecek sorunları yakalamak için sitenizi bu araçlardan biriyle çalıştırmaya değer.

Bu liste hiçbir şekilde ayrıntılı değildir, ancak web sitenizi bir sonraki test ettiğinizde düşünmeniz gereken bazı şeyler vermelidir. Aşamalı geliştirme ile geliştirerek, testlerin ortaya çıkardığı sorunların sayısını azaltmayı ve herkese uygun bir deneyim sağlamayı hedefleyebileceğimizi unutmayın.

Bir cevap yazın

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