Bugün kullanabileceğiniz temel özellikler

Temel Özelliklerin yalnızca bir parçası olan bazı özellikler hakkında bilgi edinin.

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 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 sorulara yanıt arıyoruz. "Bu özellikleri üretim kodunda ne zaman kullanmaya başlayabilirim?" "Eski tarayıcıları ne kadar süreyle desteklemeliyiz?"

Doğru cevap "duruma bağlı"dır. Gerekli olan ve kullanılabilen öğeler 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 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ğunluğunun bir özelliği kullanmanın güvenli olduğunu düşündüğü son noktadır. Bu, Temel adını verdiğimiz özellik grubudur. Daha fazla bilgi için buradaki referans duyurusuna göz atın.

İletişim öğ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şiktir. 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 olup olmamasından etkilenir.
URL çubuğu ve gezinme araç çubuğu bazen görünür, bazen de 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 değişir.
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 lütfen JavaScript'te structuredClone kullanarak derin kopyalama başlıklı makaleyi inceleyin.

Sanal :focus-visible 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 konuma 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. 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ış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.