Boşluğu doldurmak

Web için geliştirme sürecini kolaylaştırır.

Rachel Andrew

Gerek bireysel olarak gerekse State of CSS gibi anketler aracılığıyla geliştiricilerle konuştuğumuzda sürekli olarak aynı şeyleri duyuyoruz. Geliştiriciler, tarayıcılarda iyi çalışan web siteleri ve uygulamalar oluşturmakta zorlanıyor ve heyecan verici yeni özelliklerin ne zaman güvenle kullanılabileceğini bilmiyor.

Flexbox boşluğu

Sorunlu bir özelliğe örnek olarak gap özelliği, grid veya flex öğeleri ya da multicol kapsayıcıdaki sütunlar arasında boşluklar oluşturmanıza olanak tanır. Uzun süredir çok sütunlu düzende column-gap özelliğini kullanıyor olsak da bu özellik ilk olarak ızgara düzeninde grid-gap, grid-column-gap ve grid-row-gap ile birlikte gösterildi.

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

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

Firefox, Ekim 2018'de esnek düzenler için özelliği kullanıma sundu. Temmuz 2020'ye kadar Chrome'da, Nisan 2021'e kadar da Safari'de görünmüyordu. Bu nedenle, gap'yı güvenli bir şekilde kullanabilmemiz için iki yıl altı ay beklememiz gerekiyordu. Ancak çoğu geliştirici, en son sürümden daha eski tarayıcı sürümlerini desteklemesi gerektiğinden çok daha uzun süre bekledi. Esnek düzende gap desteği, esnek düzende boşluk desteğini algılamak için özellik sorgularını kullanamamamız nedeniyle daha sorunlu hale geldi. gap özelliği ızgarada desteklendiği için @supports (gap:1em) doğru değerini döndürür.

Başka bir sorun da yeni bir özellik bir tarayıcıya eklendiğinde kullanıcıların bu özellik hakkında konuşmaya ve demolar paylaşmaya başlamasıdır. Bu süreç genellikle özellik herhangi bir kararlı tarayıcıda yer almadan çok önce başlar. Bu durum, geliştiriciler için kafa karıştırıcı veya en azından sinir bozucu olabilir. Her yerde sürekli olarak yepyeni özelliklerden bahsedilirken destek eksikliği nedeniyle bu özellikleri kullanamadığınızı fark ediyorsunuz.

Neden destek eksiklikleri var?

Bu gönderi, yavaş olduğu için bir tarayıcıyı suçlamayı amaçlamaz. Farklı platform özelliklerine baktığınızda, farklı tarayıcıların farklı özelliklerde öne çıktığını görürsünüz.

Çoğu özellik tek bir tarayıcıda prototip olarak oluşturulur. Örneğin, ızgara düzeni spesifikasyonu ilk olarak Microsoft tarafından oluşturulmuş ve Internet Explorer 10'da ilk biçiminde uygulanmıştır. Mozilla'daki bir mühendis, alt ızgaranın nasıl davranması gerektiğini bulmak için çok çalıştı. Bu nedenle, bu özellik ilk olarak Firefox'ta kullanıma sunuldu. Safari'nin bazı heyecan verici yeni renk işlevlerinde öncülük ettiğini görüyoruz.

Bir tarayıcı prototip oluşturma konusunda öncülük edebilirken 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 bir tarayıcıda uygulanmasını imkansız kılacak şekilde tasarlanmaması çok önemlidir. Bu durum, destek konusunda kalıcı bir boşluğa ve özelliğin kullanılmamasına yol açar.

Ancak bir özelliği uygulamaya gelince, bu tarayıcı için olası diğer tüm özelliklerle birlikte önceliklendirilmesi gerekir. Bazen de tarayıcıyı daha iyi hale getirmek için yapılması gereken başka çalışmalar nedeniyle bazı şeyler gecikebilir. Bunun en iyi örneklerinden biri Chromium'daki RenderingNG çalışmasıdır. Bu, alt ızgaranın uygulanmasının önünü açtı. Ancak Firefox ile Chromium'un alt ızgarayı kullanıma sunması arasındaki uzun süre, ızgara düzeninin önce yeni oluşturma motorunda yeniden uygulanması gerektiğinden kaynaklanıyor.

Sorunlar

Burada iki sorun var. Birincisi, birlikte çalışabilirlik sorunudur. Bir özelliğin bir tarayıcıda kullanıma sunulmasıyla her yerde kullanılabilir hale gelmesi uzun zaman alabilir.

İkincisi ise mesajlaşmayla ilgili bir sorundur. Destek eksikliklerinin nerede olduğunu nasıl net bir şekilde belirtebiliriz? Yeni özellikleri, herkesin destek durumunu öğrenmek için her birini dikkatlice araştırmasına gerek kalmadan nasıl paylaşabiliriz?

Birlikte çalışabilirlik

Tarayıcılar, birlikte çalışabilirlik sorununu çözmek için zaten birlikte çalışıyor. Geçen yıl Compat 2021, esnek düzendeki boşluk özelliği de dahil olmak üzere bir dizi özelliğin desteklenmesiyle ilgili açığı kapatmaya yardımcı oldu. Bu yılki Interop 2022 çalışması 15 özelliğe odaklanıyor ve bu özelliklerin bazılarında ilerleme kaydedildi.

İlerleme durumunu Interop 2022 kontrol panelinden takip edebilirsiniz.

Mesajlaşma

İkinci sorun, web.dev ve developer.chrome.com'daki özelliklerden bahsederken yardımcı olmak istediğim bir konu. İçeriğimizi okuduğunuzda özelliklerin durumu net bir şekilde anlaşılmalı ve destek sorunlarını çözmek için pratik yöntemler sunmalıyız.

Bir dizi temel kurs başlattık ve daha fazlasını yayınlamaya devam edeceğiz. Bu kurslar, temel web platformu teknolojilerini kullanarak modern web için nasıl geliştireceğinizi öğrenmenize yardımcı olur. Çıkış:

Bu sitedeki içeriğimizi güvenle kullanabileceğiniz öğelere odaklamak için çalışıyoruz. Bu konuda henüz tam olarak istediğimiz noktada değiliz ancak önümüzdeki aylarda pratikliğe doğru bir geçiş görmeye başlayacaksınız.

Ayrıca, Open Web Docs projesini destekleyerek açık web belgelerine katkıda bulunuyoruz. Bu sayede, MDN'de birinci sınıf dokümanlar ve güncel tarayıcı uyumluluğu verileri sunabiliriz. Ardından, özellikleri desteklediğimizi göstermek için bu verileri web.dev'de kullanırız. Esnek düzende gap için mevcut destek durumu aşağıda verilmiştir.

Browser Support

Chrome'un web ile ilgili vizyonu, Origin ve geliştirici denemelerinde denediğimiz özellikler hakkında daha fazla bilgi edinmek istiyorsanız bu içerikleri kardeş sitemiz developer.chrome.com'da bulabilirsiniz. Bu sitedeki içerikler deneysel olabilir veya şu anda yalnızca Chrome'da destekleniyor olabilir. Ancak bu içerikleri inceleyip geri bildirimde bulunursanız memnun oluruz.

Web için gerçekten heyecan verici bir dönemdeyiz. Temel özellikleri size daha hızlı sunmamıza ve mevcut eksiklikler konusunda net olmamıza yardımcı olacağımızı umuyoruz. Böylece web geliştirme daha eğlenceli ve daha az sinir bozucu hale gelebilir.

Fotoğraf: Cristofer Maximilian.