Baseline'ın bazı özellikleri hakkında bilgi edinin.
Yayınlanma tarihi: 10 Mayıs 2023
Web sürekli olarak gelişiyor ve tarayıcılar, geliştiricilere platformda yenilik yapmaları için yeni araçlar sunmak üzere sürekli güncelleniyor. Daha önce yardımcı kitaplıklar gerektiren özellikler web platformunun bir parçası haline geldi ve tasarım öğelerini kodlamanın daha kısa veya daha kolay yolları ile birlikte tüm tarayıcılarda desteklenmeye başladı.
Bu sürekli değişim ve uyum, faydalı olsa da kafa karışıklığına da yol açabilir. Tüm bu güncellemelerde gezinmek zor olabilir. Geliştiriciler olarak "Tüm tarayıcı motorları bu yeni özelliği ne zaman destekleyecek?" gibi sorulara yanıt arıyoruz. "Bu özellikleri üretim kodunda ne zaman kullanmaya başlayabilirim?" "Eski tarayıcıları ne kadar süreyle destekleyeceğiz?"
Doğru cevap "durumdan duruma değişir". Gerekilen ve kullanılabilen özellikler, kullanıcı tabanınıza, teknoloji grubunuza, ekip yapınıza ve desteklenen cihazlara bağlıdır. Ancak hepimizin hemfikir olduğu bir konu var: Web'in mevcut durumu bu kararları vermeyi zorlaştırabilir.
Chrome ekibi, konuyla ilgili daha fazla bilgi vermek için diğer tarayıcı motorlarıyla ve web topluluğuyla birlikte çalışıyor. Bu kapsamda, bir dizi önemli özelliğin birlikte çalışabilirliğini iyileştirmeye yardımcı olan Interop 2023 gibi projelerde yaptığımız çalışmalar da yer alıyor. Peki son birkaç yılda kullanıma sunulan özellikler ne olacak? İki yıl önce öğrendiğimiz deneysel özellikler kullanıma hazır mı?
Bu yayında, son iki ana sürümde tüm büyük tarayıcı motorları tarafından kullanılabilen bazı özellikleri vurgulamak istiyorum. Bu, geliştiricilerin çoğunun bir özelliğin kullanımının güvenli olduğunu düşüneceği kesme noktasıdır ve referans olarak adlandırdığımız özellik grubudur. Daha fazla bilgi için lütfen Baseline duyurusunu inceleyin.
İletişim kutusu öğesi
<dialog> öğesi, pop-up ve modal gibi iletişim istemleri oluşturmak için kullanılan yeni bir HTML öğesidir.
Bu yöntemi kullanmak için modal öğeyi tanımlayın, ardından iletişim kutusu öğesinde showModal() yöntemini çağırarak iletişim kutusunu açın.
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
Yerleşik bir HTML öğesi olarak odak yönetimi, sekme izleme ve yığın bağlamını koruma gibi özellikler yerleşik olarak bulunur. Daha fazla bilgi için İletişim bileşeni oluşturma başlıklı makaleyi inceleyin.
Bağımsız CSS dönüşüm özellikleri
CSS dönüşümlerini kullanmak, sitenize hareket eklemenin etkili bir yoludur. CSS dönüşümlerini tek satırda üç mülkle yazmayı biliyor olabilirsiniz. Artık bağımsız dönüştürme özellikleriyle dönüştürme özelliklerini tek tek belirtebilirsiniz. Bu özellik, karmaşık animasyon kareleri animasyonları yazarken kullanışlıdır.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Bu değişikliğin ayrıntılı bir açıklamasını Bağımsız dönüştürme özellikleriyle CSS dönüştürme işlemleri üzerinde daha ayrıntılı denetim başlıklı makalede bulabilirsiniz.
Yeni görüntü alanı birimleri
Mobil cihazlarda görüntü alanı boyutu, dinamik araç çubuklarının varlığından veya yokluğundan etkilenir.
Bazen adres çubuğu ve gezinme araç çubuğu görünür, bazen de bu araç çubukları tamamen geri çekilir.
Görüntü alanının gerçek boyutu, araç çubuklarının görünür olup olmamasına bağlı olarak farklı olur.
svh ve lvh gibi yeni ekran birimleri, web geliştiricilerine mobil cihazlar için tasarım yaparken daha hassas kontrol sağlar. Daha fazla bilgi için Büyük, küçük ve dinamik görüntü alanı birimleri başlıklı makaleyi inceleyin.
JavaScript'te derin kopyalama
Geçmişte, bir nesnenin orijinal nesneye referans içermeyen derin bir kopyasını oluşturmak için popüler bir hile JSON.stringify ile JSON.parse birleştiriliyordu. Bu, o kadar yaygın bir hile haline gelmişti ki V8 (Chrome'un JavaScript motoru), bu hilenin performansını önemli ölçüde iyileştirdi. Ancak structuredClone ile artık bu hilelere ihtiyacınız yok.
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
Daha fazla bilgi için JavaScript'te structuredClone kullanarak derin kopyalama başlıklı makaleyi inceleyin.
:focus-visible sözde sınıfı
Web geliştiricileri olarak, bir sayfayı klavyeyle gezerken veya giriş öğelerini tıkladığınızda görünen "odak halkasına" aşinayız. Erişilebilirlik için gerekli bir özellik olsa da bazen farklı kullanıcılar için görsel tasarımın önüne geçer. :focus-visible CSS sözde sınıfı, tarayıcının odağın görünür olması gerektiğini düşünüp düşünmediğini kontrol eder. Artık yalnızca odağın görünür olması gerektiğinde stilleri belirtebilirsiniz.
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
Daha fazla bilgi için CSS'yi Öğrenme'deki Odak bölümüne göz atın.
TransformStream arayüzü
Streams API'nin TransformStream arayüzü, akışların birbirine aktarılmasını sağlar.
Örneğin, verileri bir yerden aktarabilir, ardından veriler aktarılırken veri akışını başka bir konumda sıkıştırabilirsiniz. fetch API ile akış isteklerini kullanma makalesinde bu örnek kullanım alanında size yol gösterilmektedir.
Son adım
Kısa süre önce web platformunda birlikte çalışabilir ve kararlı bir şekilde kullanılabilen daha birçok özellik kullanıma sunuldu. Bundan sonra, bu temel özellik gruplarına daha fazla netlik kazandırmak için WebDX Topluluk Grubu ile birlikte çalışacağız. Yeni gelişmeler için Referans sayfasına bakın.
Gelişmelerden haberdar olmak istiyorsanız ekibimiz bir özellik birlikte çalışabilir hale geldiğinde makaleler yayınlıyor ve deneysel özelliklerden yeni birlikte çalışabilir özelliklere kadar web platformunda neler olup bittiğine dair aylık güncellemeler yayınlıyor.
Yaptığımız çalışmaların size yardımcı olup olmadığını veya farklı türde desteğe ihtiyacınız olup olmadığını öğrenmek isteriz. Lütfen WebDX Topluluk Grubu'ndan bize ulaşın.