Bugün kullanabileceğiniz temel özellikler

Web her zaman gelişmektedir ve tarayıcılar, geliştiricilere platformda yenilik yapmaları için yeni araçlar sağlamak üzere sürekli olarak güncellenir. Daha önce yardımcı kitaplıklar gerektiren şeyler, tasarım öğelerini kodlamanın daha kısa veya daha kolay yollarıyla birlikte web platformunun bir parçası haline gelir ve tüm tarayıcılarda desteklenir.

Bu sürekli evrim ve adaptasyon yardımcı olmakla birlikte kafa karışıklığına da neden olabilir. Tüm bu güncellemelerde gezinmek zor olabilir. Geliştiriciler olarak, “Tüm tarayıcı motorları bu yeni özelliği ne zaman destekleyecek?” gibi sorularımız var. “Üretim kodumda bu özellikleri gerçekten ne zaman kullanmaya başlayabilirim?” “Eski tarayıcıları ne kadar süreyle desteklemeliyiz?”

Gerçek cevap “duruma göre değişir”. Neye ihtiyaç duyulduğu ve neyin kullanılabilir olduğu 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 şey var ki, web’in mevcut manzarası bu kararları vermeyi zorlaştırabilir.

Chrome ekibi, daha fazla netlik sağlamak için diğer tarayıcı motorları ve web topluluğuyla işbirliği yapıyor. Bu, aşağıdaki gibi projeler üzerindeki çalışmalarımızı içerir: Birlikte çalışma 2023 bu da bir dizi temel özelliğin birlikte çalışabilirliğini geliştirmeye yardımcı olur. Peki ya son birkaç yıl içinde ortaya çıkan özellikler? Yaklaşık iki yıl önce öğrendiğimiz deneysel özellikler kullanıma hazır mı?

Bu gönderide, son iki ana sürüm için artık tüm büyük tarayıcı motorlarında kullanılabilen bazı özellikleri vurgulamak istiyorum. Bu, geliştiricilerin çoğunluğunun bir özelliği kullanmanın güvenli olduğunu hissedeceğini düşündüğümüz kesme noktasıdır ve Baseline adını verdiğimiz özellik kümesidir. Daha fazlası için lütfen buradan Baseline duyurusuna bakın.

iletişim öğesi #

bu &LTdialog> öğesi, açılır pencereler ve modeller gibi diyalog istemleri oluşturmak için yeni bir HTML öğesidir.

Kullanmak için modal öğeyi tanımlayın, ardından diyaloğu çağırarak diyaloğu açın. showModal() diyalog öğesindeki yöntem.

dialog id="d">
form method="dialog">
p>Hi, I'm a dialog.&LT/p>
button>ok&LT/button>
&LT/form>
&LT/dialog>
button onclick="d.showModal()">
Open Dialog
&LT/button>

Yerel bir HTML öğesi olarak odak yönetimi, sekme izleme ve yığın bağlamını koruma gibi özellikler yerleşiktir. Daha fazlası için Bir iletişim bileşeni oluşturma bölümünü okuyun.

Bireysel CSS dönüştürme özellikleri #

CSS dönüşümlerini kullanmak, sitenize bir hareket eklemenin performanslı bir yoludur.
Bir satırda üç özellik içeren CSS dönüşümleri yazmaya aşina olabilirsiniz.
Bireysel dönüştürme özellikleriyle artık dönüştürme özelliklerini ayrı ayrı belirleyebilirsiniz. Bu, karmaşık anahtar kare animasyonları yazarken kullanışlı olur.

.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}

Bu değişikliğin derinlemesine açıklaması için Bireysel dönüşüm özellikleriyle CSS dönüşümleri üzerinde daha ince taneli kontrol bölümünü okuyun.

Yeni görünüm birimi birimleri #

Mobilde, görüntü alanı boyutu, dinamik araç çubuklarının varlığından veya yokluğundan etkilenir.
Bazen görünür bir URL çubuğunuz ve gezinme araç çubuğunuz olur, ancak bazen bu araç çubukları tamamen geri çekilir.
Görünüm alanının gerçek boyutu, araç çubuklarının görünür olup olmamasına bağlı olarak farklı olacaktır.
gibi yeni görüntü alanı birimleri svh Ve lvh mobil cihazlar için tasarım yaparken web geliştiricilerine daha hassas kontrol sağlayın. Büyük, küçük ve dinamik görüntü alanı birimleri makalesinde daha fazla bilgi edinebilirsiniz.

JavaScript’te derin kopya #

Geçmişte, orijinal nesneye atıfta bulunmadan bir nesnenin derin bir kopyasını oluşturmak için popüler bir hackleme yöntemi vardı. JSON.stringify ile kombine JSON.parse. Bu, o kadar yaygın bir saldırıydı ki, V8 (Chrome’un javascript motoru) bu numaranın performansını agresif bir şekilde iyileştirdi. Ancak, artık bu hack’e ihtiyacınız yok structuredClone.

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 konusuna bakın.

bu :focus-visible sözde sınıf #

Web geliştiricileri olarak, klavyeyle bir sayfada gezinirken veya giriş öğelerine tıkladığınızda ortaya çıkan “odak halkasına” hepimiz aşinayız. Erişilebilirlik için gerekli bir özelliktir ancak bazen farklı kullanıcılar için görsel tasarımın önüne geçmektedir. bu :focus-visible CSS sözde sınıfı, tarayıcının odağın görünür olması gerektiğine inanıp inanmadığını kontrol eder. Artık yalnızca odağın görünür olması gereken durumlar için stiller belirleyebilirsiniz.

/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}

Daha fazla bilgi için Learn CSS’deki Odak bölümüne bakın.

TransformStream arayüzü #

Akışlar API’sinin TransformStream arabirimi, akışları birbirine aktarmayı mümkün kılar.

Örneğin, verileri bir yerden aktarabilir, ardından veriler aktarılırken veri akışını başka bir konuma sıkıştırabilirsiniz. Makale Getirme API’si ile akış istekleri bu örnek kullanım durumunda size yol gösterir.

Sarmak #

Son zamanlarda web platformunda birlikte çalışabilir ve kararlı bir şekilde kullanılabilen daha birçok özellik var. İleride birlikte çalışacağız WebDX Topluluk Grubu bu Baseline özellik setlerine daha fazla netlik getirmek için. Devam eden ayrıntılar için lütfen web.dev/baseline adresini ziyaret edin.

Güncel kalmak 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 olup bittiğine dair aylık güncellemeler yayınlıyor.

Yaptığımız şeyin size yardımcı olup olmadığını veya farklı türde desteğe ihtiyacınız olup olmadığını her zaman merak ediyoruz, bu nedenle lütfen bize şu adresten ulaşın: WebDX Topluluk Grubu.