Chrome 99'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Chrome ve Firefox'un 100 sürümüne geri sayıma yalnızca bir hafta kaldı.
  • CSS kademeli katmanları, CSS'niz üzerinde daha fazla kontrol sahibi olmanızı sağlar ve stile özgü çakışmaların önlenmesine yardımcı olur.
  • showPicker() yöntemi; date, color ve datalist gibi <input> öğeleri için programatik olarak bir tarayıcı seçici göstermenize olanak tanır.
  • Daha fazlası da var.

Ben Pete LePage. Şimdi Chrome 99'daki geliştiriciler için yeni özellikleri birlikte görelim.

Chrome 100 ve Firefox 100

Chrome 100, Mart 2022 sonlarında, Firefox 100 ise Mayıs ayının başlarından kısa bir süre sonra kullanıma sunuluyor. Bunların her ikisi de sürüm numarası kilometre taşıdır ve üç basamağa taşmaktadır. Ancak, kodunuz iki basamak bekliyorsa yeni sürüm numarası sizin için sorunlara neden olabilir.

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

Chrome, yeni #force-major-version-to-100 seçeneğini vurgulayan sayfayı işaretler

Chrome'da #force-major-version-to-100 bayrağı mevcut sürüm numarasını 100 olarak değiştirir.

Firefox Nightly'nin Ayarlar menüsünden "Firefox 100 User-Agent Dizesi" seçeneğini etkinleştirebilirsiniz. Her şeyin beklendiği gibi çalıştığından emin olmak için sitenizi test etmek iyi bir fikirdir.

Tüm ayrıntılar için Yakında ana sürüm 100'e erişecek olan Chrome ve Firefox sayfasına göz atın.

CSS Basamaklı Katmanları

CSS Basamaklı Katmanları desteği ve CSS @layer kuralı Chrome 99'da kullanıma sunuluyor. Stile özgü çakışmaları önlemek için CSS dosyalarınız üzerinde daha açık bir kontrol sağlarlar. Bu özellik özellikle büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stilleri yönetirken kullanışlıdır.

CSS basamakına yeni bir katman eklerler. Katmanlı stillerde bir katmanın önceliği her zaman seçicinin belirliliğini geçer.

Kullanıcı arayüzü oluşturma projesi demosundaki görsel

Bir bağlantının stilini ayarlamaya çalışıyorsanız .card içinde, .post içinde daha spesifik seçicinin uygulandığını görürsünüz. @layer kuralını kullanarak her birinin stil özelliği hakkında daha açık olabilir ve kartınızdaki bağlantı stilinin yayınınızdaki 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 kademeli düzlemler oluşturur.

CSS @layer kuralını kullanarak katmanları basamaklama özelliği Chrome 99, Firefox 97 ve Safari 15.4 Beta'da desteklenir. Daha fazla bilgi için Cascade katmanları tarayıcınıza geliyor konusuna göz atın.

Giriş öğeleri için show Picker()

Uzun zamandır, tarih seçici göstermek için özel widget kitaplıklarına veya ipuçlarına bakmak zorunda kaldık. HTML InputElements üzerinde yeni bir showPicker() yöntemi eklendi. Bu, yalnızca date için değil, aynı zamanda time, color ve seçicileri olan diğer <input> öğeleri için de tarayıcı seçici göstermenin standart yoludur.

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

Kullanmak için <input> öğesinde showPicker() çağrısı yapın. Bu örnekte, onu bir try…catch blokuna sardım. Bu, tarayıcı API'yi desteklemiyorsa veya seçiciyi gösteremiyorsa bir yedek sağlamamı sağlıyor. Böylece, kullanıcıların yine de iyi bir deneyim yaşamasını sağlar.

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 showPicker() kullanabileceğiniz tüm farklı <input> türlerini görmek için Tarih, saat, renk ve dosyalar için tarayıcı seçici gösterme bölümüne göz atın.

Diğer ölçütler

Elbette dahası var.

Canvas2D API'si güncellenerek aşağıdakileri de içeren 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, koyu mod için web uygulaması manifestinde alternatif renkler sağlamasına olanak tanıyan yeni bir kaynak denemesi var.

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

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 99'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

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

Ben Pete LePage. Chrome 100 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!