Bu, web için uygulama geliştirmeyi kolaylaştırıyor.
İster bireysel olarak ister CSS'nin Durumu gibi anketler aracılığıyla geliştiricilerle konuştuğumuzda sürekli aynı şeyler duyuyoruz. Geliştiriciler, farklı tarayıcılarda iyi çalışan web siteleri ve uygulamalar oluşturmakta, heyecan verici yeni özelliklerin ne zaman güvenli olacağını bilmekte zorlanmaktadır.
Flexbox açığı
Sorunlu bir özelliğe örnek olarak gap özelliği, ızgara veya esnek öğeler ya da çok sütunlu kapsayıcıdaki sütunlar arasında boşluk bırakmanıza olanak tanır. column-gap öğesini uzun süredir çoklu sütun içinde barındırmış olsak da, özellik ilk olarak grid-column-gap ve grid-row-gap ile birlikte tablo düzeninde grid-gap şeklinde göründü.
Izgara düzeni tarayıcılara yerleştirildikten hemen sonra, mülk row-gap ve column-gap ile birlikte gap olarak yeniden adlandırıldı. Daha sonra esnek düzende de çalışması belirtildi. Yeniden adlandırma, aynı işlemi yapan birden fazla mülke sahip olmadığımız anlamına gelir.
.box {
display: flex;
gap: 1em;
}
Firefox, Ekim 2018'de mülkü esnek düzenler için gönderdi. Temmuz 2020'ye kadar Chrome'da, ardından Nisan 2021'de Safari'de görünmedi. Bu da gap ürününü güvenli bir şekilde kullanabilmemiz için iki yıl ila altı aylık bir süre tanıdığımız anlamına geliyordu. Gerçekte ise çoğu geliştirici, son sürümden daha eski tarayıcı sürümlerini destekleme ihtiyacı nedeniyle bekleme süresi çok daha uzundu. Esnek düzende gap özelliğinin desteklenmesi, esnek düzende boşluk desteğini algılamak için özellik sorgularını kullanamayacağımız için daha da sorunlu hale geldi. gap özelliği ızgarada desteklendiğinden @supports (gap:1em) doğru değerini döndürür.
Bir diğer sorun da, yeni bir özellik bir tarayıcıya geldiğinde insanların bununla ilgili konuşmaya ve demoları paylaşmaya başlamasıdır. Bu süreç genellikle ilgili özellik herhangi bir kararlı tarayıcıda kullanıma sunulmadan çok önce başlar. Bu, geliştiriciler için kafa karıştırıcı veya en azından can sıkıcı olabilir. Sürekli olarak yepyeni özelliklerden bahsediliyor ve destek eksikliği nedeniyle bu özellikleri kullanamadığınızı keşfediyorsunuz.
Destekle ilgili neden eksiklikler var?
Bu, yavaş olduğu için bir tarayıcıya işaret eden bir yayın değildir. Farklı platform özelliklerini incelediğinizde farklı tarayıcıların farklı özelliklerde öncülük ettiğini 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şturulmuş ve Internet Explorer 10'daki ilk biçiminde uygulanmıştır. Mozilla'daki bir mühendis, alt ızgaranın nasıl çalışması gerektiğini anlamak için çok çalıştı; bu nedenle bu özellik ilk olarak Firefox'a geldi. Bazı heyecan verici yeni renk işlevlerinde Safari'nin başını çektiğini görüyoruz.
Prototip oluşturmada bir tarayıcı öncülük 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şluk ve özelliğin kullanılmamasına yol açar.
Ancak bir özelliği uygularken, o tarayıcıya yönelik olası diğer tüm özelliklerle birlikte o özelliğin de önceliklendirilmesi gerekir. Ayrıca bazen, tarayıcıyı daha iyi hale getirmek için yapılması gereken işler geride kalır. Chromium'daki RenderingNG çalışması buna iyi bir örnektir. Bu, alt ızgaranın uygulanmasını önlemiştir; ancak, Firefox ve Chromium gönderim alt ızgarası arasındaki uzun boşluk, ızgara düzeninin öncelikle yeni oluşturma motorunda yeniden uygulanmasına duyulan ihtiyaçtan kaynaklanmaktadır.
Sorunlar
Burada iki sorunumuz var. İlki birlikte çalışabilirlik sorunudur. Bir özelliğin tarayıcıya geldiği andan her yerde kullanılabilir hale gelmesinin uzun zaman alabileceği gerçeği.
İkincisi ise mesajlaşma sorunu. Destek eksikliklerinin nerede olduğunu nasıl açıklayabiliriz? Ne kadar iyi desteklendiğini anlamak için herkesin her şeyi dikkatli bir şekilde araştırmasına gerek kalmadan yeni özellikleri nasıl paylaşırız?
Birlikte çalışabilirlik
Tarayıcılar, birlikte çalışabilirlik sorununu çözmek için şimdiden birlikte çalışıyor. Geçtiğimiz yıl Compat 2021, esnek düzendeki "gap" özelliği de dahil olmak üzere çeşitli özelliklerle ilgili destek boşluğunu doldurmaya yardımcı oldu. Bu yıl, Birlikte Çalışma 2022 çalışması 15 özelliğe odaklanıyor ve bunlardan bazıları üzerinde şimdiden hareket ediliyor.
İlerleme durumunu Interop 2022 kontrol panelinden takip edebilirsiniz.
Mesajlaşma
İkinci sorun ise, web.dev ve developer.chrome.com adresindeki özellikler hakkında konuşurken size yardımcı olmak istiyorum. İçeriğimizi okuduğunuzda özelliklerin durumunun net olarak görülmesini ve destek sorunlarıyla başa çıkmanın pratik yollarını sunmamızı istiyorum.
Birkaç temel kurs başlattık ve bu kurslar da artacak. Bu kurslar, temel web platformu teknolojilerini kullanarak modern web için uygulama geliştirmeyi öğrenmenize yardımcı olur. Çıkış tarihi:
Bu sitedeki içeriğimizi, güvenli bir şekilde kullanabileceğiniz öğelere odaklamak için çalışıyoruz. Henüz tam olarak o noktaya ulaşmış değiliz. Ancak, önümüzdeki aylarda pratik yaklaşıma doğru bir kaymanın olduğunu görmeye başlayacaksınız.
Ayrıca Açık Web Dokümanları projesini destekleyerek açık web dokümanlarına katkıda bulunuyoruz. Bu, güncel tarayıcı uyumluluk verilerinin yanı sıra MDN hakkında birinci sınıf dokümanlar sunmamızı sağlar. Daha sonra bu verileri, özelliklere desteklediğimizi göstermek için web.dev'de kullanırız. Esnek düzende şu anki gap desteği aşağıda yer almaktadır.
Tarayıcı Desteği
- 84
- 84
- 63
- 14.1
Chrome’un web vizyonu, Kaynak ve Geliştirici denemelerinde denediğimiz şeyler hakkında daha fazla bilgi edinmek isterseniz bu içeriği kardeş sitemiz olan developer.chrome.com'da giderek daha fazla bulabilirsiniz. Buradaki içerik deneysel olabilir veya şu anda yalnızca Chrome'da destekleniyor olabilir. Ancak bu içeriği keşfetmenizi ve geri bildirimde bulunmanızı çok isteriz.
Şu anda web açısından çok heyecan verici bir dönemden geçiyoruz. Temel özellikleri size daha hızlı getirmemize ve web geliştirmeyi daha eğlenceli ve daha az sinir bozucu hale getirecek şekilde mevcut boşluklar hakkında net bilgi edinmeye yardımcı olabileceğimizi umuyoruz.
Fotoğraf: Cristofer Maximilian.