Boşluğu doldurmak

Web için geliştirme yapmayı kolaylaştırır.

Geliştiricilerle tek tek veya CSS'nin Durumu gibi anketler aracılığıyla konuştuğumuzda hep aynı şeyleri duyarız. Geliştiriciler, tarayıcılarda iyi çalışan web siteleri ve uygulamalar oluşturmakta ve heyecan verici yeni özelliklerin ne zaman güvenli bir şekilde kullanılabileceğini anlamakta zorlanıyor.

Flexbox boşluğu

Sorunlu bir mülk örneği olarak gap mülkü, grid veya flex öğeleri ya da multicol kapsayıcıdaki sütunlar arasında boşluk bırakmanıza olanak tanır. Çok sütunlu düzende column-gap özelliği uzun zamandır kullanılsa da bu özellik ilk olarak grid-column-gap ve grid-row-gap ile birlikte grid-gap olarak ızgara düzeninde kullanıldı.

Izgara düzeni tarayıcılara eklendikten hemen sonra özellik, row-gap ve column-gap ile birlikte gap olarak yeniden adlandırıldı. Daha sonra bu özelliğin esnek düzende de çalışacağı belirtildi. Yeniden adlandırma işlemi, aynı şeyi yapan birden fazla mülkümüz olmadığı anlamına gelir.

.box {
  display: flex;
  gap: 1em;
}

Firefox, esnek düzenler için mülkü Ekim 2018'de kullanıma sundu. Bu özellik Temmuz 2020'ye kadar Chrome'da, Nisan 2021'de ise Safari'de gösterilmedi. Bu, gap'ü güvenli bir şekilde kullanabilmemiz için iki yıl altı ay beklememiz gerektiği anlamına geliyordu. Gerçekte, çoğu geliştirici için en son sürümden eski tarayıcı sürümlerini destekleme ihtiyacı nedeniyle bekleme süresi çok daha uzundu. Esnek düzende boşluk desteğini algılamak için özellik sorgularını kullanamadığımızdan, esnek düzende gap desteğini sağlamak daha sorunlu hale geldi. gap mülkü ızgaralarda desteklendiğinde @supports (gap:1em) doğru değerini döndürür.

Bir tarayıcıda yeni bir özellik kullanıma sunulduğunda kullanıcıların bu özellikten bahsetmesi ve demoları paylaşmaya başlaması da bir sorundur. Bu süreç genellikle özellik herhangi bir kararlı tarayıcıda kullanıma sunulmadan çok önce başlar. Bu durum geliştiriciler için kafa karıştırıcı veya en azından can sıkıcı olabilir. Her yerde sürekli olarak yeni ve parlak özelliklerden bahsediliyor. Sonrasında, destek eksikliği nedeniyle bu özellikleri kullanamadığınızı fark ediyorsunuz.

Destek hizmetinde neden boşluklar var?

Bu, yavaş olduğu için bir tarayıcıya parmak sallayan bir gönderi değildir. Farklı platform özelliklerine baktığınızda farklı tarayıcıların farklı özelliklerde öne çıktığını göreceksiniz.

Çoğu özelliğin prototipi tek bir tarayıcıda oluşturulur. Örneğin, ızgara düzeni spesifikasyonu ilk olarak Microsoft tarafından oluşturuldu ve Internet Explorer 10'da ilk biçiminde uygulandı. Mozilla'daki bir mühendis, alt ızgaranın nasıl davranması gerektiğini belirlemek için çok çalıştı ve bu nedenle bu özellik ilk olarak Firefox'a eklendi. Safari, bazı heyecan verici yeni renk işlevlerinde öncü rol oynuyor.

Prototipleme konusunda bir tarayıcı liderlik etse de CSS Çalışma Grubu'ndaki tüm tarayıcıların (ve diğer kuruluşların) temsilcileri CSS özelliklerini tartışır. Bir özelliğin tüm tarayıcılarda uygulanabilmesi ve tek bir tarayıcıda uygulanmasını imkansız kılacak şekilde tasarlanmaması çok önemlidir. Bu durum, destekte kalıcı bir boşluğa ve özelliğin kullanılmamasına neden olur.

Ancak bir özelliğin uygulanması söz konusu olduğunda, söz konusu tarayıcı için diğer tüm olası özelliklerle birlikte önceliklendirilmesi gerekir. Bazen de tarayıcıyı iyileştirmek için yapılması gereken diğer çalışmalar nedeniyle işler aksayabilir. Chromium'daki RenderingNG çalışması bunun mükemmel bir örneğidir. Bu, alt ızgaranın uygulanmasına olanak tanıdı. Ancak Firefox ile Chromium'un alt ızgara yayınlaması arasındaki uzun süre, ızgara düzeninin önce yeni oluşturma motorunda yeniden uygulanması gerektiğinden kaynaklanmaktadır.

Sorunlar

Burada iki sorun var. Bunlardan ilki, birlikte çalışabilirlik sorunudur. Bir özelliğin bir tarayıcıda kullanıma sunulmasından her yerde kullanıma sunulmasına kadar uzun bir süre geçmesi bu sorunun nedenlerinden biridir.

İkincisi, mesajlaşmayla ilgili bir sorun. Destek konusundaki boşlukları nasıl açıkça belirtebiliriz? Yeni özellikleri, her kullanıcının destek kapsamını öğrenmek için her şeyi dikkatlice araştırması gerekmeyecek şekilde nasıl paylaşabiliriz?

Birlikte çalışabilirlik

Tarayıcılar, birlikte çalışarak birlikte çalışabilirlik sorununu çözmeye çalışıyor. Geçen yıl Compat 2021, esnek düzendeki boşluk özelliği de dahil olmak üzere çeşitli özelliklerde destek eksikliğini gidermeye yardımcı oldu. Bu yılki Interop 2022 çalışması 15 özelliğe odaklanıyor ve bunların bazılarında zaten hareketlilik var.

İlerleme durumunu Interop 2022 kontrol panelinden takip edebilirsiniz.

Mesajlaşma

İkinci sorun, web.dev ve developer.chrome.com'da özelliklerden bahsederken yardımcı olmak istediğim bir konu. İçeriklerimizi okuduğunuzda özelliklerin durumunun gerçekten net olmasını ve destek sorunlarında gezinmek için pratik yollar sunmamızı istiyoruz.

Temel bilgiler içeren çeşitli kurslar kullanıma sunduk. Bu kursların sayısı artacak. Bu kurslar, temel web platformu teknolojilerini kullanarak modern web için nasıl içerik oluşturacağınızı öğrenmenize yardımcı olur. Çıkış:

Bu sitedeki içeriklerimizi, güvenli bir şekilde kullanabileceğiniz konulara odaklamak için çalışıyoruz. Henüz tam olarak bu noktaya ulaşmadık ancak önümüzdeki aylarda pratikliğe yönelik bir değişim görmeye başlayacaksınız.

Ayrıca Open Web Docs projesini destekleyerek açık web belgelerine katkıda bulunuyoruz. Bu sayede, güncel tarayıcı uyumluluğu verileri ile birlikte MDN ile ilgili birinci sınıf dokümanlara sahip oluruz. Ardından, bu verileri web.dev'de kullanarak özelliklere destek sunarız. Esnek düzende gap için şu anda sunulan destek aşağıda açıklanmıştır.

Tarayıcı desteği

  • Chrome: 84.
  • Kenar: 84.
  • Firefox: 63.
  • Safari: 14.1.

Chrome'un web'e dair vizyonu ve Origin ile geliştirici denemelerinde denediğimiz özellikler hakkında daha fazla bilgi edinmek istiyorsanız bu içerikleri kardeş sitemizde (developer.chrome.com) bulabilirsiniz. Bu içerikler deneysel olabilir veya şu anda yalnızca Chrome'da destekleniyor olabilir. Ancak bu içerikleri keşfetmenizi ve geri bildirimde bulunmanızı isteriz.

Şu anda web için gerçekten heyecan verici bir dönem. Önemli özellikleri size daha hızlı sunmaya ve mevcut boşluklar konusunda net olmaya yardımcı olarak web geliştirmeyi daha eğlenceli ve daha az can sıkıcı hale getirmeyi umuyoruz.

Fotoğraf: Cristofer Maximilian.