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 sağlayacak yeni araçlar sunmak için sürekli güncelleniyor. Daha önce yardımcı kitaplıklar gerektiren özellikler, web platformunun bir parçası haline geldi ve tüm tarayıcılarda, tasarım öğelerini kodlamanın daha kısa veya kolay yollarıyla destekleniyor.

Bu sürekli evrim ve adaptasyon faydalı olsa da kafa karışıklığı yaratabilir. Tüm bu güncellemeler arasında gezinmek zor olabilir. Geliştiriciler olarak "Tüm tarayıcı motorları bu yeni özelliği ne zaman destekleyecek?" gibi sorularımız var. "Bu özellikleri üretim kodumda ne zaman kullanmaya başlayabilirim?" "Eski tarayıcıları ne kadar süreyle desteklemeliyiz?"

Doğru cevap "duruma göre değişir". 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 şey şu: Web'in mevcut ortamı bu kararları almanın zorlaşabileceği konusunda.

Chrome ekibi daha fazla açıklık getirmek için diğer tarayıcı motorları ve web topluluğuyla ortak çalışıyor. Bir dizi temel özelliğin birlikte çalışabilirliğini iyileştirmeye yardımcı olan Interop 2023 gibi projelerdeki çalışmalarımız da buna dahildir. Peki son birkaç yılda sunulan özellikler ne olacak? İki yıl önce öğrendiğimiz deneysel özellikler kullanıma hazır mı?

Bu gönderide, son iki ana sürüm için tüm önemli tarayıcı motorlarında artık kullanılabilir olan 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 Referans değer duyurusunu buradan inceleyebilirsiniz.

İletişim öğesi

<dialog> öğesi, pop-up'lar ve kalıcı öğeler gibi iletişim kutusu istemleri oluşturmak için kullanılan yeni bir HTML öğesidir.

Bunu kullanmak için kalıcı öğeyi tanımlayın, ardından iletişim öğ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>

Odak yönetimi, sekme izleme ve yığın bağlamını koruma gibi özellikler, yerel bir HTML öğesi olarak yerleşiktir. Daha fazla bilgi için İletişim kutusu bileşeni oluşturma bölümünü okuyun.

Bağımsız CSS dönüşüm özellikleri

CSS dönüşümlerini kullanmak, sitenize hareket eklemenin etkili bir yoludur.
. Tek satırda üç özellikle CSS dönüştürmeleri yazmaya aşina olabilirsiniz.
. Bağımsız dönüşüm özellikleriyle artık dönüşüm özelliklerini ayrı ayrı belirtebilirsiniz. Bu özellik, karmaşık animasyon karesi animasyonları yazarken kullanışlıdır.

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

Bu değişikliğin ayrıntılı 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, ancak bazen bu araç çubukları tamamen geri çekilmiş olur.
. Görüntü alanının gerçek boyutu, araç çubuklarının görünür olup olmaması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ı makaleyi inceleyin.

JavaScript'te derin kopyalama

Geçmişte, orijinal nesneye referans vermeden bir nesnenin derin kopyasını oluşturmak için JSON.parse ile birlikte JSON.stringify kullanılan popüler bir saldırı yöntemi kullanılıyordu. Bu, V8'in (Chrome'un JavaScript motoru) bu hilenin performansını agresif bir şekilde iyileştirdiği yaygın bir saldırıydı. Ancak structuredClone ile artık bu eğitime 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 ayrıntılı bilgi için lütfen structuredClone kullanarak JavaScript'te ayrıntılı kopyalama başlıklı makaleyi inceleyin.

Sanal :focus-visible sınıfı

Web geliştiricileri olarak hepimiz bu "odak halkası" hakkında bilgi sahibiyiz. Bir sayfada klavyeyle gezinirken veya giriş öğelerini tıkladığınızda gösterilir. Erişilebilirlik için gerekli bir özelliktir ancak bazen farklı kullanıcıların görsel tasarımını engelleyebilir. :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 durumlar için stiller 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 öğrenmeyle ilgili bölüme odaklanma 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, ardından veriler aktarılırken veri akışını başka bir konuma sıkıştırabilirsiniz. Getirme API'siyle istek akışı başlıklı makalede, bu örnek kullanım alanı açıklanmaktadır.

Son adım

Son zamanlarda web platformunda birlikte çalışabilir ve kararlı bir şekilde kullanılabilir hale gelen birçok özellik mevcuttur. Bundan sonra, bu Temel özellik gruplarını daha net hale getirmek 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ışabileceklere kadar web platformunda olup bitenlerle ilgili aylık güncellemeler yayınlıyor.

Yaptığımız şeyin size yardımcı olup olmadığını veya farklı desteğe ihtiyacınız olup olmadığını her zaman merak ediyoruz. Bu nedenle lütfen WebDX Topluluk Grubu'ndan bize ulaşın.