Chrome 99'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Chrome ve Firefox'un 100. sürümüne sayılı haftalar kaldı.
  • CSS basamaklı katmanları, CSS'niz üzerinde daha fazla kontrol sahibi olmanızı sağlar ve stile özgülükteki anlaşmazlıkları önlemeye yardımcı olur.
  • showPicker() yöntemi, date, color ve datalist gibi <input> öğeleri için programatik olarak tarayıcı seçici göstermenize olanak tanır.
  • Bunun gibi çok daha fazla özellik var.

Adım Pete LePage. Chrome 99'daki geliştiricilere yönelik yenilikleri inceleyelim.

Chrome 100 ve Firefox 100

Chrome 100, Mart ayının sonlarında (2022) kullanıma sunulacaktır. Firefox 100 ise kısa bir süre sonra Mayıs ayının başlarında kullanıma sunulacaktır. Her ikisi de ana sürüm numarası açısından önemli bir aşamadır ve üç haneli sürüm numaralarına geçişi işaret eder. Ancak kodunuz iki basamaklı bir sayı bekliyorsa yeni sürüm numarası size sorun çıkarabilir.

Sürüm numaralarını kontrol eden veya kullanıcı aracısı dizesini ayrıştıran herhangi bir kod, sorun olmayacağından emin olmak için kontrol edilmelidir.

Chrome&#39;un, yeni #force-major-version-to-100 seçeneğini vurgulayan işaretleme sayfası

Chrome'da #force-major-version-to-100 işareti, geçerli sürüm numarasını 100 olarak değiştirir.

Ayrıca Firefox Nightly'nin Ayarlar menüsünde "Firefox 100 Kullanıcı Aracı Dizesi" seçeneğini etkinleştirebilirsiniz. Her şeyin beklendiği gibi çalıştığından emin olmak için sitenizi test etmeniz iyi bir fikirdir.

Ayrıntılı bilgi için Chrome ve Firefox yakında 100 ana sürümüne ulaşacak başlıklı makaleyi inceleyin.

CSS basamaklı katmanları

CSS basamaklı katmanları ve CSS @layer kuralı için destek Chrome 99'da kullanıma sunuluyor. Stil özgünlüğüyle ilgili anlaşmazlıkları önlemek için CSS dosyalarınız üzerinde daha net bir kontrol sağlarlar. Bu, özellikle büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stillerini yönetirken yararlıdır.

CSS düşey düzenine yeni bir katman eklerler. Katmanlı stillerde, katmanın önceliği her zaman seçicinin özgünlüğünün önüne geçer.

Kullanıcı arayüzünün dökümünü gösteren proje demosu çizimi

Bir bağlantının stilini belirlemeye çalışıyorsanız .card içindeki bir .post içinde daha spesifik seçicinin uygulanacağını görürsünüz. @layer kuralını kullanarak her birinin stil özelliği hakkında daha net bilgi verebilir ve kartınızdaki bağlantı stilinin, gönderinizdeki bağlantı stilini geçersiz kılmasını sağlayabilirsiniz.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Bunun nedeni, basamak önceliğidir. Katmanlı stiller yeni basamaklı düzlemler oluşturur.

CSS @layer kuralını kullanan basamaklı katmanlar Chrome 99, Firefox 97 ve Safari 15.4 Beta'da desteklenir. Daha fazla bilgi için Sıralı katmanlar tarayıcınızda kullanıma sunuluyor başlıklı makaleyi inceleyin.

Giriş öğeleri için showPicker()

Uzun süredir tarih seçici göstermek için özel widget kitaplıklarına veya hilelere başvurmak zorunda kalıyorduk. HTML InputElements'te yeni bir showPicker() yöntemi var. Tarayıcı seçiciyi yalnızca date için değil, aynı zamanda seçiciler ile time, color ve diğer <input> öğeleri için de göstermenin standart yoludur.

Tarayıcı seçicilerinin ekran görüntüleri
Chrome masaüstü, Chrome mobil, Safari masaüstü, Safari mobil ve Firefox masaüstü sürümlerindeki tarayıcı tarih seçicileri (Temmuz 2021).

Bunu kullanmak için <input> öğesinde showPicker() işlevini çağırın. Bu örnekte, try…catch bloğuna sardım. Bu sayede, tarayıcı API'yi desteklemiyorsa veya seçiciyi gösteremiyorsa bir yedek sağlayabilirim. Bu sayede, kullanıcıların iyi bir deneyim yaşamaya devam etmesini sağlarsınız.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Tüm ayrıntıları ve kullanabileceğiniz tüm farklı <input> türlerini öğrenmek için Tarih, saat, renk ve dosyalar için tarayıcı seçici gösterme bölümüne göz atın.showPicker()

Diğer özellikler

Tabii ki çok daha fazlası var.

Canvas2D API güncellendi ve aşağıdakiler gibi yeni işlevler eklendi:

  • ContextLost ve ContextRestored için iki yeni etkinlik
  • willReadFrequently seçeneği
  • Daha fazla CSS metin değiştirici desteği
  • Ve daha fazlası.

PWA'ların karanlık mod için web uygulaması manifestinde alternatif renkler sunmasına olanak tanıyan yeni bir kaynak denemesi kullanıma sunuldu.

El yazısı tanıma API'si kullanıma sunuldu.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 99'daki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 100 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.