Chrome 71'deki yenilikler

Pete LePage

Chrome 71'de aşağıdaki özellikler için destek ekledik:

• Göreceli zamanların gösterilmesi artık Intl API'nin bir parçasıdır.
• Dikey olarak akan metin için alt çizginin metnin hangi tarafında görüneceğini belirtme.
• Konuşma sentezi API'sini kullanmadan önce kullanıcı etkinleştirme gerektirir.

Daha birçok özellikten yararlanabilirsiniz.

Adım Pete LePage. Şimdi Chrome 71'deki geliştiriciler için yeniliklere göz atalım.

Değişiklik günlüğü

Bu bölüm, öne çıkan özelliklerden yalnızca birkaçıdır. Chrome 71'deki ek değişiklikler için aşağıdaki bağlantılara göz atın.

• Chromium kaynak deposu değişiklik listesi
• ChromeStatus.com'un Chrome 71 ile ilgili güncellemeleri
• Chrome 71'de desteği sonlandırılan ve kaldırılan özellikler

Intl.RelativeTimeFormat() ile göreceli zamanları görüntüleme

Twitter'da en son yayının göreli zamanı gösteriliyor

Birçok web uygulaması, tarih ve saatin tamamını göstermek yerine bir şeyin ne zaman gerçekleştiğini veya gerçekleşeceğini belirtmek için "dün", "iki gün içinde" ya da "bir saat önce" gibi ifadeler kullanır.

Göreceli saatlerin gösterilmesi o kadar yaygın hale geldi ki, yaygın tarih/saat kitaplıklarının çoğu bu işlemi bizim için yapacak yerelleştirilmiş işlevler sağlıyor. Aslında, oluşturduğum neredeyse her web uygulamasına, Moment JS'yi bu amaç doğrultusunda eklediğim ilk kitaplıklardan biri.

Chrome 71, çalışmayı JavaScript motoruna aktaran ve göreli zamanların yerelleştirilmiş biçimlendirilmesini sağlayan Intl.RelativeTimeFormat() özelliğini kullanıma sunar. Bu şekilde performansta küçük bir artış elde etmiş oluruz. Yani, bu kitaplıklara yalnızca tarayıcı yeni API'leri henüz desteklemiyorsa çoklu dolgu olarak ihtiyaç duyabiliriz.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Kullanımı basittir. Yeni bir örnek oluşturun ve yerel ayarı belirtin. Ardından, format işlevini göreli zamanla çağırmanız yeterlidir. Tüm ayrıntılar için Mathias'ın Intl.RelativeTimeFormat API gönderisine göz atın.

Dikey metin için alt çizgi konumunu belirtme

Tutarsız alt çizgili dikey metin

Çince veya Japonca metin dikey akış şeklinde gösterildiğinde, tarayıcılar alt çizginin yerleştirildiği yerde tutarlı değildir. Alt çizgi solda veya sağda olabilir.

Chrome 71'de, text-underline-position özelliği artık CSS3 metin dekorasyonu spesifikasyonunun bir parçası olarak left veya right özelliğini kabul ediyor. CSS3 metin dekorasyonu spesifikasyonu, kullanılacak satır, stil, renk ve konum gibi öğelerin belirlenmesine olanak tanıyan birkaç yeni özellik ekliyor.

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Konuşma sentezi için kullanıcı etkinleştirmesi gerekir

Bir siteye ulaştığımızda hepimiz şaşırmış olduk ve o site aniden bizimle konuşmaya başlıyor. Otomatik oynatma politikaları, sitelerin ses veya sesli video dosyalarını otomatik olarak oynatmasını engeller. Bazı siteler bunun yerine ses sentezi API'sini kullanarak bu sorunun üstesinden gelmeye çalıştı.

Chrome 71'den itibaren konuşma sentezi API'sinin çalışması için sayfadaki kullanıcının bir şekilde etkinleştirilmesi gerekir. Bu sayede, diğer otomatik oynatma politikalarıyla uyumlu hale getirilmiştir. Kullanıcı sayfayla etkileşime geçmeden önce kullanmaya çalışırsanız hata mesajı alırsınız.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Not: Kodunuzun çalıştığından emin olmak için konuşma sentezi çağrınızı bir try/catch blokunda sarmalamanızı öneririz. Böylece, sayfa etkinleştirilmezse uygulamanızın geri kalanı bozulmaz.

Bir siteye gidip sizi ve etrafınızda oturan iş arkadaşlarınızın sürprizini görmekten daha kötü bir şey yoktur.

Diğer özellikler

Bunlar, Chrome 71'de geliştiriciler için yapılan değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

• Element.requestFullscreen() yöntemi artık Android'de özelleştirilebilir ve gezinme çubuğunu görünür hale getirme ile kullanıcı hareketi yapılana kadar hiçbir kullanıcı aracısı kontrolünün gösterilmediği tamamen kapsamlı bir mod arasında seçim yapmanıza olanak tanır.
• Modül komut dosyası istekleri için varsayılan kimlik bilgisi modu omit iken same-origin olarak değiştirildi.
• Chrome 71, Chrome'u Shadow DOM v1 spesifikasyonu ile uyumlu hale getirerek artık :host() ve :host-context() sözde sınıflarının yanı sıra ::slotted() bağımsız değişkenlerinin özgünlüğünü hesaplar.

Chrome DevSummit Videoları

Chrome Dev Summit'e gelmediyseniz veya katılmadıysanız ancak tüm konuşmaları görmediyseniz YouTube kanalımızdaki Chrome Dev Summit 2018 oynatma listesine göz atın.

Eva ve Phil, Hizmet İşleyiciler ile Daha Hızlı ve Daha Dayanıklı Uygulamalar Geliştirme başlıklı makalede hizmet işçilerini kullanmayla ilgili bazı ilginç tekniklerden bahsetmiştir.

Mariko ve Jake, Karmaşık JS'ye yoğun web uygulamaları, yavaşlamayı önleme başlıklı oturumda Squoosh'u nasıl oluşturduklarından bahsetti.

Katie ve Houssein, Speed Essentials: Key Techniques for Fast Websites (Hızla İlgili Temel Bilgiler: Hızlı Web Siteleri İçin Temel Teknikler) başlıklı makalede sitenizin performansını en üst düzeye çıkarmak için bazı harika tekniklerden bahsetti.

Jake pastayı düşürdü. Chrome DevSummit 2018 oynatma listesinde birçok harika video daha var.

Abone ol

En son videolarımızı kaçırmamak için Chrome Geliştiricileri YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 72 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak istiyorum!