Tarayıcılarda CSS Desteği Kılavuzu

Nasıl herkesin aynı ekran ve çözünürlüğe sahip olduğu bir dünyada yaşayamayacağımız gibi, sitelerimizi görüntüleyen herkesin aynı tarayıcı ve tarayıcı sürümüne sahip olduğu bir dünyada asla yaşamayacağız. Bu, eski tarayıcılarla veya kullanmak istediğimiz bir şeyi desteklemeyen tarayıcılarla uğraşmak, bir web geliştiricisinin işinin bir parçası olduğu anlamına gelir. Bununla birlikte, şimdi işler geçmişte olduğundan çok daha iyi ve bu makalede, karşılaşabileceğimiz farklı türde tarayıcı desteği sorunlarına bir göz atacağım. Size bunlarla başa çıkmanın bazı yollarını göstereceğim ve ayrıca yakında ortaya çıkabilecek ve yardımcı olabilecek şeylere bakacağım.

Neden Bu Farklılıklara Sahiptik?

Tarayıcıların çoğunun Chromium tabanlı olduğu bir dünyada bile, bu tarayıcıların tümü Google Chrome ile aynı Chromium sürümünü çalıştırmaz. Bu, Vivaldi gibi Chromium tabanlı bir tarayıcının Google Chrome'un birkaç sürümü olabileceği anlamına gelir.

Ve elbette, kullanıcılar tarayıcılarını her zaman hızlı bir şekilde güncellemezler, ancak bu durum son yıllarda çoğu tarayıcının kendilerini sessizce yükseltmesiyle düzeldi.

Ayrıca, yeni özelliklerin tarayıcılara ilk etapta girme şekli de vardır. CSS için yeni özelliklerin CSS Çalışma Grubu tarafından tasarlandığı ve tam bir spesifikasyonun tarayıcı satıcılarına uygulanması için bir talimatla birlikte verildiği durum söz konusu değildir. Çoğu zaman, yalnızca deneysel bir uygulama gerçekleştiğinde, spesifikasyonun tüm ince ayrıntıları üzerinde çalışılabilir. Bu nedenle, özellik geliştirme yinelemeli bir süreçtir ve tarayıcıların geliştirme sırasında bu özellikleri uygulamasını gerektirir. Uygulama bu günlerde çoğunlukla tarayıcıda bir bayrağın arkasında gerçekleşirken veya yalnızca Nightly veya önizleme sürümünde mevcut olsa da, bir tarayıcı tam bir özelliğe sahip olduğunda, henüz başka hiçbir tarayıcının desteği olmasa bile, bunu herkes için açması muhtemeldir.

Tüm bunlar, her ne kadar hoşumuza giderse gitsin, özelliklerin sihirli bir şekilde her masaüstünde ve telefonda aynı anda bulunduğu bir dünyada asla var olmayacağımız anlamına geliyor. Profesyonel bir web geliştiricisiyseniz, işiniz bu gerçekle başa çıkmaktır.

Hatalar ve Destek Eksikliği

Tarayıcı desteğiyle ilgili olarak karşılaştığımız üç sorun var:

1. Özellik Desteği Yok
   İlk sorun (ve üstesinden gelinmesi en kolay olan), bir tarayıcının bu özelliği hiç desteklememesidir.
2. Tarayıcı “Hatalar” ile Başa Çıkmak
   İkincisi, tarayıcının özelliği desteklediğini iddia etmesi, ancak bunu diğer tarayıcıların özelliği destekleme biçiminden farklı bir şekilde yapmasıdır. Böyle bir sorun, "tarayıcı hatası" olarak adlandırma eğilimindeyiz çünkü sonuç tutarsız davranıştır.
3. CSS Özelliklerinin Kısmi Desteği
   Bu daha yaygın hale geliyor; bir tarayıcının bir özelliği desteklediği bir durum - ancak yalnızca bir bağlamda.

Tarayıcılar arasında bir fark gördüğünüzde neyle uğraştığınızı anlamanız faydalı olacaktır, bu yüzden sırayla bu sorunların her birine bir göz atalım.

1. Özellik Desteği Yok

Bir tarayıcının anlamadığı bir CSS özelliği veya değeri kullanırsanız, tarayıcı bunu yok sayar. Bu, desteklenmeyen bir özelliği kullansanız da, bir özellik oluşturup kullanmaya çalışsanız da aynıdır. Tarayıcı bu CSS satırını anlamıyorsa, onu atlar ve anladığı bir sonraki şeye geçer.

CSS'nin bu tasarım ilkesi, desteği olmayan bir tarayıcıya kötü bir şey olmayacağını bilerek, yeni özellikleri neşeyle kullanabileceğiniz anlamına gelir. Yalnızca geliştirme amaçlı kullanılan bazı CSS'ler için yapmanız gereken tek şey bu. Özelliği kullanın, bu özellik mevcut olmadığında deneyimin hala iyi olduğundan emin olun ve hepsi bu. Bu yaklaşım, platformun yeni şeyleri anlamayan tarayıcılarda güvenli bir şekilde kullanılmasını sağlayan bu özelliğini kullanarak, aşamalı geliştirmenin arkasındaki temel fikirdir.

Kullanmakta olduğunuz bir özelliğin tarayıcılar tarafından desteklenip desteklenmediğini kontrol etmek isterseniz Can I Use web sitesine bakabilirsiniz. Ayrıntılı destek bilgilerini aramak için başka bir iyi yer de MDN'deki her CSS özelliğinin sayfasıdır. Oradaki tarayıcı destek verileri çok ayrıntılı olma eğilimindedir.

Yeni CSS, Eski CSS'yi Anlıyor

Yeni CSS özellikleri geliştirilirken, bunların mevcut CSS ile nasıl etkileşime girdiğine dikkat edilir. Örneğin, Grid ve Flexbox spesifikasyonunda, display: grid ve display: flex flex'in, kayan bir öğenin bir ızgara öğesine dönüşmesi veya bir multicol kabının bir ızgaraya dönüşmesi gibi senaryolarla nasıl ilgileneceği konusunda ayrıntılı bilgi verilmiştir. Bu, belirli davranışların yok sayıldığı ve desteklenmeyen tarayıcı için CSS'nin üzerine yazmanıza yardımcı olduğu anlamına gelir. Bu geçersiz kılmalar, MDN'de Aşamalı geliştirme ve Izgara Düzeni sayfasında ayrıntılı olarak açıklanmıştır.

Özellik Sorgularıyla Destek Algılama

Yukarıdaki yöntem, yalnızca kullanmanız gereken CSS'nin onunla birlikte gitmek için başka özelliklere ihtiyacı yoksa çalışır. Daha eski tarayıcılar için CSS'nize ek özellikler eklemeniz gerekebilir, bunlar daha sonra özelliği destekleyen tarayıcılar tarafından da yorumlanır.

Bunun iyi bir örneği Izgara Düzeni kullanılırken bulunabilir. Bir ızgara öğesi haline gelen kayan bir öğe tüm kayan davranışlarını kaybederken, kayan noktalı bir ızgara düzeni için bir geri dönüş oluşturmaya çalışıyorsanız, öğelere yüzde genişlikleri ve muhtemelen kenar boşlukları eklemiş olmanız olasıdır.

 .grid > .item { width: 23%; margin: 0 1%; } 

Bu genişlikler ve kenar boşlukları, kayan öğe bir ızgara öğesi olduğunda da geçerli olacaktır. Genişlik, kabın tam genişliği yerine ızgara izinin bir yüzdesi olur; daha sonra herhangi bir marj ve belirtmiş olabileceğiniz bir boşluk uygulanacaktır.

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

Neyse ki, CSS'de yerleşik olarak bulunan ve bu durumla başa çıkmamıza yardımcı olan modern tarayıcılara uygulanan bir özellik var. Özellik Sorguları, tarayıcıya neyi desteklediklerini doğrudan sormamıza ve ardından yanıta göre hareket etmemize olanak tanır. Aygıtın veya ekranın bazı özelliklerini test eden Medya Sorgusu gibi, Özellik Sorguları da bir CSS özelliği ve değeri desteğini test eder.

Destek Testi

Desteği test etmek en basit durumdur, @supports ve ardından bir CSS özelliği ve değeri için test ediyoruz. Özellik Sorgusu içindeki içerik, yalnızca tarayıcı doğru yanıt verirse, yani özelliği destekliyorsa çalışır.

Destek Yok Testi

Tarayıcıya bir özelliği destekleyip desteklemediğini sorabilirsiniz. Bu durumda, Özellik Sorgusu içindeki kod, yalnızca tarayıcının desteği olmadığını belirtirse çalışır.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

Birden Fazla Şey İçin Test Edin

Desteklenecek birden fazla özelliğe ihtiyacınız varsa, and öğesini kullanın.

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

Bir mülkün veya diğerinin desteğine ihtiyacınız varsa, or öğesini kullanın.

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

Test Edilecek Bir Özellik ve Değer Seçme

Kullanmak istediğiniz her özellik için test yapmanız gerekmez - sadece kullanmayı planladığınız özelliklerin desteklendiğini gösteren bir şey. Bu nedenle, Grid Layout'u kullanmak istiyorsanız, display: grid için test yapabilirsiniz. Gelecekte (ve tarayıcılara alt şebeke desteği geldiğinde), daha spesifik olmanız ve alt şebeke işlevselliğini test etmeniz gerekebilir. Bu durumda, yalnızca alt şebeke desteği uygulayan tarayıcılardan gerçek bir yanıt almak için grid-template-columns: subgrid test edersiniz.

Şimdi kayan geri dönüş örneğimize dönersek, özellik sorgularının bunu bizim için nasıl çözeceğini görebiliriz. Yapmamız gereken, grid düzenini destekleyip desteklemediğini öğrenmek için tarayıcıyı sorgulamak. Olursa, öğenin genişliğini tekrar auto olarak ve kenar boşluğunu 0 olarak ayarlayabiliriz.

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

CodePen'de (Rachel Andrew) tarafından kaleme alınan Kalem Özelliği Sorguları ve Kılavuzuna bakın.

Tüm ızgara kodunu özellik sorgumun içine eklemiş olsam da buna ihtiyacım yok. Bir tarayıcı ızgara özelliklerini anlamadıysa, bunları yok sayar, böylece güvenli bir şekilde özellik sorgusunun dışında olabilirler. Bu örnekte bir özellik sorgusu içinde olması gerekenler, kenar boşluğu ve genişlik özellikleridir, çünkü bunlar eski tarayıcı kodu için gerekli olmakla birlikte, destekleyen tarayıcılar tarafından da uygulanacaktır.

Cascade'i kucaklayın

Geri dönüşler sunmanın çok basit bir yolu, tarayıcıların anlamadıkları CSS'yi görmezden geldikleri gerçeğinden ve diğer her şeyin eşit özgüllüğe sahip olduğu durumlarda, bir öğeye hangi CSS'nin uygulandığı açısından kaynak sırasının dikkate alındığı gerçeğinden yararlanmaktır. .

Özelliği desteklemeyen tarayıcılar için öncelikle CSS'nizi yazarsınız. Ardından, kullanmak istediğiniz özelliğin desteğini test edin; tarayıcı, yeni kodunuzla geri dönüş kodunun üzerine yazmayı desteklediğini onaylarsa.

Bu, mobil öncelikli bir yaklaşımı izleyerek duyarlı tasarım için medya sorguları kullanırken kullanabileceğiniz prosedürle hemen hemen aynıdır. Bu yaklaşımda, daha küçük ekranlar için düzeninizle başlarsınız, ardından kesme noktalarınızda ilerlerken daha büyük ekranlar için bir şeyler ekler veya üzerine yazarsınız.

CSS Özellik Sorgularını Kullanabilir miyim? caniuse.com'daki başlıca tarayıcılarda CSS Özellik Sorguları desteğine ilişkin veriler.

Yukarıdaki çalışma şekli, Özellik Sorgularını desteklemeyen tarayıcılar için endişelenmenize gerek olmadığı anlamına gelir. Kullanabilir miyim bölümünden de görebileceğiniz gibi, Özellik Sorguları gerçekten harika bir desteğe sahip. Onları desteklemeyen göze çarpan tarayıcılar, Internet Explorer'ın herhangi bir sürümüdür.

Bununla birlikte, kullanmak istediğiniz yeni özelliğin IE'de de desteklenmemesi muhtemeldir. Bu nedenle, şu anda neredeyse her zaman desteği olmayan tarayıcılar için CSS yazarak başlayacaksınız, ardından bir Özellik Sorgusu ile test edeceksiniz. Bu Özellik Sorgusu desteği test etmelidir.

1. Özellik Sorgularını destekleyen tarayıcılar, destekleri varsa true değerini döndürür ve bu nedenle sorgunun içindeki kod, eski tarayıcılar için kodun üzerine yazılarak kullanılır.
2. Tarayıcı, Özellik Sorgularını destekliyorsa ancak test edilen özelliği desteklemiyorsa, false döndürür. Özellik sorgusunun içindeki kod yok sayılır.
3. Tarayıcı, Özellik Sorgularını desteklemiyorsa, Özellik Sorgusu bloğundaki her şey yok sayılır, bu da, IE11 gibi bir tarayıcının eski tarayıcı kodunuzu kullanacağı anlamına gelir; bu, büyük olasılıkla tam olarak istediğiniz şeydir!

2. Tarayıcı “Hatalar” ile Başa Çıkmak

İkinci tarayıcı desteği sorunu neyse ki daha az yaygın hale geliyor. “Ne Diledik”i okursanız (geçen yılın sonunda yayınlandı), geçmişin daha şaşırtıcı tarayıcı hatalarından bazılarına küçük bir tur atabilirsiniz. Bununla birlikte, herhangi bir yazılımda hatalar olabilir, tarayıcılar istisna değildir. Ve buna, spesifikasyon uygulamasının döngüsel doğası nedeniyle, bazen bir tarayıcının bir şey uyguladığı ve ardından spesifikasyonun değiştiği gerçeğini de eklersek, şimdi bir güncelleme yayınlamaları gerekir. Bu güncelleme gelene kadar, tarayıcıların birbirinden farklı bir şey yaptığı bir durumda olabiliriz.

Tarayıcı bir şeyin desteğini kötü bir şekilde desteklediğini bildirirse, Özellik Sorguları bize yardımcı olamaz. Tarayıcının “ Evet, ama muhtemelen beğenmeyeceksiniz ” diyebileceği bir mod yoktur. Gerçek bir birlikte çalışabilirlik hatası ortaya çıktığında, bu durumlarda biraz daha yaratıcı olmanız gerekebilir.

Bir hata gördüğünüzü düşünüyorsanız, yapmanız gereken ilk şey bunu onaylamaktır. Bazen hatalı davranışlar gördüğümüzü ve tarayıcıların farklı şeyler yaptığını düşündüğümüzde, hata bizdedir. Belki geçersiz bir sözdizimi kullandık veya hatalı biçimlendirilmiş HTML'yi biçimlendirmeye çalışıyoruz. Bu gibi durumlarda, tarayıcı bir şeyler yapmaya çalışacaktır; ancak, dilleri tasarlandıkları gibi kullanmadığınız için, her tarayıcı farklı bir şekilde başa çıkabilir. HTML ve CSS'nizin geçerli olup olmadığını hızlı bir şekilde kontrol etmek, mükemmel bir ilk adımdır.

Bu noktada, muhtemelen hızlı bir arama yapar ve sorunumun zaten geniş çapta anlaşılıp anlaşılmadığına bakardım. Bilinen sorunların bazı depoları vardır, örneğin Flexbugs ve Gridbugs. Bununla birlikte, yalnızca iyi seçilmiş birkaç anahtar kelime bile, konuyu kapsayan Yığın Taşması gönderilerini veya makalelerini ortaya çıkarabilir ve size bir geçici çözüm sunabilir.

Ama diyelim ki, hataya neyin neden olduğunu gerçekten bilmiyorsunuz, bu da bir çözüm aramayı oldukça zorlaştırıyor. Bu nedenle, bir sonraki adım, sorununuz için azaltılmış bir test senaryosu oluşturmak, yani hatayı tam olarak neyin tetiklediğini belirlemenize yardımcı olacak alakasız her şeyi çıkarmaktır. Bir CSS hatanız olduğunu düşünüyorsanız, herhangi bir JavaScript'i kaldırabilir veya aynı stili bir çerçevenin dışında yeniden oluşturabilir misiniz? Gördüğüm bir şeyin azaltılmış bir test durumunu bir araya getirmek için genellikle CodePen'i kullanırım; bu, kodu sormam gerekirse başka biriyle kolayca paylaşabileceğim bir şekilde bana verme avantajına sahip.

Çoğu zaman, konuyu izole ettikten sonra, istediğiniz sonuca ulaşmanın alternatif bir yolunu düşünmek mümkündür. Başka birinin kurnazca bir geçici çözüm bulduğunu göreceksiniz veya öneri istemek için bir yere gönderebilirsiniz.

Bununla birlikte, bir tarayıcı hatanız olduğunu düşünüyorsanız ve aynı sorundan bahseden başka birini bulamıyorsanız, bildirilmesi gereken yeni bir şey bulmuş olmanız oldukça olasıdır. Kısa süre önce kullanıma sunulan tüm yeni CSS'lerde, insanlar bazı şeyleri CSS'nin diğer bölümleriyle birlikte kullanmaya başladıklarında bazen sorunlar ortaya çıkabilir.

Bu tür sorunları bildirmekle ilgili Lea Verou'nun şu gönderisine göz atın, “Topluluğa Yardım Edin! Tarayıcı Hatalarını Bildirin!”. Makalede ayrıca azaltılmış bir test senaryosu oluşturmak için harika ipuçları var.

3. CSS Özelliklerinin Kısmi Desteği

Üçüncü tür sorun, modern CSS spesifikasyonlarının tasarlanma şekli nedeniyle daha yaygın hale geldi. Grid Layout ve Flexbox'ı düşünürsek, bu özellikler hizalama yapmak için Box Alignment Level 3'teki özellikleri ve değerleri kullanır. Bu nedenle, align-items , justify-content ve column-gap gibi özellikler hem Grid hem de Flexbox'ta ve ayrıca diğer yerleşim yöntemlerinde kullanılmak üzere belirtilir.

Bununla birlikte, yazının yazıldığı sırada, gap özellikleri tüm ızgarayı destekleyen tarayıcılarda Grid Layout'ta çalışır ve multicol'de column-gap çalışır; ancak, Flexbox için bu özellikleri yalnızca Firefox uygulamıştır.

Flexbox için bir geri dönüş oluşturmak için kenar boşluklarını kullanacak olsaydım, ardından column-gap test edip kenar boşluklarını kaldırsaydım, Grid veya çoklu column-gap destekleyen tarayıcılarda kutularımın aralarında boşluk olmayacak, bu nedenle geri dönüş aralığım kaldırıldı.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

Bu, Özellik Sorgularının geçerli bir sınırlamasıdır. Bir özelliğin başka bir özellikte desteklenip desteklenmediğini test etmenin bir yolu yok. Yukarıdaki durumda, tarayıcıya sormak istediğim şey, "Flexbox'ta sütun boşluğu desteğiniz var mı?" Bu şekilde, yedeğimi kullanabilmem için olumsuz bir yanıt alabilirim.

Break- break-before , break-after ve break-inside CSS parçalanma özellikleriyle ilgili benzer bir sorun vardır. Bunlar sayfa yazdırıldığında daha iyi desteğe sahip olduğundan, tarayıcılar genellikle destek talep eder. Bununla birlikte, multicol'de destek için test yapıyorsanız, yanlış pozitif gibi görünen şeyler elde edersiniz. Bu sorun için CSS Çalışma Grubunda bir sorun dile getirdim, ancak bu çözülmesi kolay bir sorun değil. Düşünceleriniz varsa, lütfen oraya ekleyin.

Seçici Desteğinin Test Edilmesi

Şu anda Özellik Sorguları yalnızca CSS Özellikleri ve Değerlerini test edebilir. Test etmek isteyebileceğimiz başka bir şey, Seçiciler spesifikasyonunun 4. Seviyesindekiler gibi daha yeni seçicilerin desteğidir. Bir açıklayıcı not ve ayrıca Firefox Nightly'de bunu başaracak Özellik Sorguları için yeni bir özelliğin bir bayrağının arkasında bir uygulama var.

Firefox'ta about:config sayfasını ziyaret ederseniz ve layout.css.supports-selector.enabled işaretini etkinleştirirseniz, çeşitli seçicilerin desteklenip desteklenmediğini test edebilirsiniz. Sözdizimi şu anda çok basittir, örneğin :has seçicisini test etmek için:

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

Bu, geliştirme aşamasında olan bir özelliktir, ancak, biz konuşurken, tarayıcı desteğinin sürekli mevcut sorunlarını yönetmemize yardımcı olacak özelliklerin nasıl eklendiğini görebilirsiniz.

Daha fazla okuma

Bir özelliği kullanmak istediğinizde ve bunun tek bir büyük tarayıcı tarafından desteklenmediğini fark ettiğinizde veya işler farklı şekillerde davranıyorsa, sinir bozucu görünebilir. Yardımcı olabilecek bazı pratik okumalar topladım.

• "CSS Izgarasını Kullanma: Izgara Olmadan Tarayıcıları Destekleme" Eski tarayıcılar ve CSS Izgarası ile başa çıkmak için seçenekler
• Özellik Sorguları için “Özellik Sorguları” MDN referans sayfası
• “CSS Izgarası ve Aşamalı Geliştirme” MDN kılavuzu, Izgara aşamalı iyileştirme
• "Flexbox'ın Geriye Dönük Uyumluluğu" Flexbox desteğine yönelik MDN kılavuzu, eski ön ekli uygulamaların ayrıntılarını içerir
• "Önce Kalıp Kitaplığı" Bir kalıp kitaplığı kullanarak geri dönüş kodu nasıl yönetilir