Referans Değer'de yer alan bazı özellikler hakkında bilgi edinin.
Web sürekli gelişiyor ve tarayıcılar, geliştiricilere platformda yenilik yapabilecekleri yeni araçlar sunmak için sürekli güncelleniyor. Daha önce yardımcı kitaplıklara ihtiyaç duyulan şeyler web platformunun bir parçası haline geldi ve tüm tarayıcılarda desteklenmenin yanı sıra tasarım öğelerini kodlamanın daha kısa veya kolay yolları oldu.
Bu sürekli gelişme ve adaptasyon fayda sağlasa da kafa karışıklığına yol açabilir. Tüm bu güncellemeler arasında gezinmek zor olabilir. Geliştiriciler olarak bazı sorularımız var, "Tüm tarayıcı motorları bu yeni özelliği ne zaman destekleyecek?" "Üretim kodumda bu özellikleri kullanmaya ne zaman başlayabilirim?" "Eski tarayıcıları ne kadar süreyle desteklemeliyiz?"
Doğru cevap "Duruma göre değişir". Gereken ve kullanılabilir olan öğeler gerçekten kullanıcı tabanınıza, teknoloji yığınınıza, ekip yapınıza ve desteklenen cihazlara bağlıdır. Ancak hepimizin hemfikir olduğu bir konu da şu: Web'in mevcut ortamı bu kararları vermeyi zorlaştırabiliyor.
Chrome ekibi, daha fazla netlik sağlamak için diğer tarayıcı motorları ve web topluluğuyla işbirliği yapmaktadır. Bir dizi önemli özelliğin birlikte çalışabilirliğini artırmaya yardımcı olan Interop 2023 gibi projelerdeki çalışmalarımız da buna dahildir. Peki ama 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üm için tüm önemli tarayıcı motorlarında kullanılabilir olan bazı özelliklerden bahsetmek istiyorum. Bu aşama, geliştiricilerin çoğunluğunun bir özelliği kullanmanın güvenli olduğunu düşündüğü son noktadır ve Referans olarak adlandırdığımız özellik grubudur. Daha fazla bilgi için Referans Değeriyle ilgili duyuruyu inceleyebilirsiniz.
İletişim öğesi
<dialog> öğesi, pop-up'lar ve kalıcı modlar gibi iletişim kutusu istemleri oluşturmak için kullanılan yeni bir HTML öğesidir.
Bunu kullanmak için modal öğeyi tanımlayın, ardından iletişim kutusunda 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>
Yerel bir HTML öğesi olarak odak yönetimi, sekme izleme ve yığın bağlamını tutma gibi özellikler yerleşiktir. Daha fazla bilgi için İletişim kutusu bileşeni oluşturma konusunu okuyun.
Bağımsız CSS dönüşüm özellikleri
CSS dönüşümlerini kullanmak, sitenize hareket eklemenin etkili bir yoludur.
Tek satırda üç özellik içeren CSS dönüşümleri yazmaya aşina olabilirsiniz.
Dönüşüm özelliklerini ayrı ayrı kullanarak artık dönüştürme özelliklerini ayrı ayrı belirtebilirsiniz. Bu özellik, karmaşık animasyon kareleri 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ı için Ayrı dönüşüm özelliklerine sahip CSS dönüşümleri üzerinde daha ayrıntılı kontrol başlıklı makaleyi okuyun.
Yeni görüntü alanı birimleri
Mobil cihazlarda görüntü alanı boyutu, dinamik araç çubuklarının olup olmamasından etkilenir.
Bazen bir URL çubuğu ve gezinme araç çubuğu görünür olsa da bazen bu araç çubukları tamamen geri çekilir.
Görüntü alanının gerçek boyutu, araç çubuklarının görünür olup olmadığına bağlı olarak farklılık gösterir.
svh ve lvh gibi yeni görüntü alanı birimleri, mobil cihazlar için tasarım yaparken web geliştiricilerine daha hassas kontrol olanağı sunar. Daha fazla bilgi için Büyük, küçük ve dinamik görüntü alanı birimleri başlıklı makaleye bakın.
Tarayıcı Desteği
- 108
- 108
- 101
- 15,4
JavaScript'te derin kopya
Geçmişte, orijinal nesneye referans vermeden bir nesnenin derin bir kopyasını oluşturmak için JSON.stringify ile JSON.parse birleştirilen popüler bir saldırı yapıldı. Bu o kadar yaygın bir saldırıydı ki V8 (Chrome'un JavaScript motoru) bu hilenin performansını agresif bir şekilde yükseltti. Ancak, structuredClone ile bu eğitime artık 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 ayrıntı için lütfen structuredClone kullanarak JavaScript'te derin kopyalama başlıklı makaleyi inceleyin.
:focus-visible sözde sınıfı
Web geliştiricileri olarak hepimiz, klavyeyle bir sayfada gezinirken veya giriş öğelerini tıkladığınızda görünen "odak halkası"na aşinayız. Bu, erişilebilirlik için gerekli bir özelliktir, ancak bazen farklı kullanıcılar için görsel tasarımın aksamasına yol açabilir. :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ı gereken zamanlar için 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 hakkında bilgi edinmeyle ilgili odak bölümüne göz atın.
TransformStream arayüzü
Streams API'nin TransformStream arayüzü, akışları birbirine bağlamayı mümkün kılar.
Örneğin, bir yerden veri akışı gerçekleştirebilir ve ardından veriler aktarılırken veri akışını başka bir konuma sıkıştırabilirsiniz. Getirme API'siyle akış istekleri başlıklı makale, bu örnek kullanım alanında size yol gösterir.
Son adım
Son zamanlarda web platformunda birlikte çalışabilir ve kararlı hale gelen birçok özellik eklendi. Gelecekte bu Temel özellik gruplarına daha fazla netlik kazandırmak için WebDX Community Group ile birlikte çalışacağız. Ayrıntılı bilgi için lütfen web.dev/baseline adresine göz atı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ışabilirliğe kadar web platformunda neler olduğuyla ilgili aylık güncellemeler yayınlıyor.
Neler yaptığımızı veya farklı desteğe ihtiyacınız olup olmadığını her zaman merak ediyoruz. Lütfen WebDX Community Group'tan (WebDX Topluluk Grubu) bize ulaşın.