Boşluğu doldurmak

Web için uygulama geliştirmeyi kolaylaştırıyoruz.

Rachel Andrew

Geliştiricilerle tek tek veya CSS'nin Durumu gibi anketler aracılığıyla konuştuğumuzda hep aynı şeyleri duyarız. Geliştiriciler, farklı tarayıcılarda sorunsuz çalışan web siteleri ve uygulamalar oluşturmakta, heyecan verici yeni özelliklerin ne zaman güvenle kullanılabileceğini bilmekte zorlanmaktadır.

Flexbox boşluğu

Sorunlu bir özelliğe örnek olarak gap özelliği, ızgara veya esnek öğeler ya da bir çoklu sütun kapsayıcısındaki sütunlar arasında boşluklar oluşturmanı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 ise çoğu geliştirici için bekleme süresi çok daha uzundu. Bunun nedeni, son sürümden daha eski tarayıcı sürümlerini desteklemeleriydi. 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 özelliği ızgarada desteklendiğinden @supports (gap:1em) true 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şması 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 parmağınızı bir tarayıcıya işaret eden bir yayın değildir. Farklı platform özelliklerini incelerseniz farklı tarayıcıların farklı özelliklerde öncülük ettiğini görürsünüz.

Ç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, heyecan verici yeni renk işlevlerinde öncü rol oynuyor.

Prototip oluşturmada bir tarayıcı liderlik ederken 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ılara uygulanabilmesi ve tek bir tarayıcıda uygulanmasını imkansız hale getirecek şekilde tasarlanmamış olması ç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 gösterebiliriz? Yeni özellikleri, ne kadar iyi desteklendiğini belirlemek için herkesin her şeyi dikkatli bir şekilde araştırmak zorunda bırakmadan nasıl paylaşırız?

Birlikte çalışabilirlik

Tarayıcılar, birlikte çalışabilirlik sorununu çözmek için hâlihazırda birlikte çalışmaktadır. 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ıl 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ış:

• CSS'yi öğrenme
• Formlar'ı öğrenme
• Tasarımı Öğrenin
• PWA hakkında bilgi edinme

Bu sitedeki içeriklerimizi, güvenli bir şekilde kullanabileceğiniz konulara odaklamak için çalışıyoruz. Henüz tam olarak bu noktaya ulaşmış değiliz, ancak önümüzdeki aylarda uygulamaya doğru biraz 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.

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 developer.chrome.com adlı kardeş sitemizde 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.