Chrome 71'deki yenilikler

Pete LePage

Twitter GitHub Glitch Mastodon Ana Sayfa

Chrome 71'de aşağıdakiler için destek ekledik:

• Göreli saatleri görüntüleme artık Intl API'nin bir parçasıdır.
• Dikey olarak akan metin için alt çizginin hangi tarafında görüneceğini belirtme.
• Konuşma sentezi API'sini kullanmadan önce kullanıcı etkinleştirmesini zorunlu kılma.

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 71'deki geliştiriciler için yapılan yenilikleri görelim!

Değişiklik günlüğü

Öne çıkan bilgilerden yalnızca bazıları burada verilmiştir. 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
• Chrome 71 için ChromeStatus.com güncellemeleri
• Chrome 71'de kullanımdan kaldırma ve kaldırma işlemleri

Intl.RelativeTimeFormat() ile göreli saatleri görüntüleyin

En son yayının göreli zamanını gösteren Twitter

Birçok web uygulaması, tam tarih ve saati görüntülemek yerine, bir şeyin ne zaman olduğunu veya olacağını belirtmek için "dün", "iki gün sonra" veya "bir saat önce" gibi ifadeler kullanır.

Göreli saatleri görüntülemek o kadar yaygın hale geldi ki yaygın tarih/saat kitaplıklarının çoğu, bunu halledecek yerelleştirilmiş işlevler sağladı. Aslında, oluşturduğum neredeyse her web uygulaması olan Moment JS, özellikle de bu amaçla eklediğim ilk kitaplıklardan biri.

Chrome 71, çalışmayı JavaScript motoruna geçiren ve göreli zamanların yerelleştirilmiş biçimlendirmesini sağlayan Intl.RelativeTimeFormat()'i kullanıma sundu. Bu bize performansında küçük bir artış sağlar ve bu kitaplıklara, çoklu dolgu olarak yalnızca tarayıcı henüz yeni API'leri desteklemediğinde ihtiyaç duyarız.

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şturup yerel ayarı belirtin, ardından göreli zamanı belirterek biçimi çağırın. Tüm ayrıntılar için Mathias'ın Intl.RelativeTimeFormat API yayınına göz atın.

Dikey metnin altı çizili konumunu belirtme

Altı tutarsız çizgili dikey metin

Çince veya Japonca metin dikey akışta görüntülendiğinde tarayıcılar, alt çizginin yerleştirildiği yerle tutarsızdır. Metin solda veya sağda olabilir.

Chrome 71'de text-underline-position özelliği artık CSS3 metin süslemesi spesifikasyonunun bir parçası olarak left veya right özelliklerini kabul etmektedir. CSS3 metin dekorasyonu spesifikasyonu, kullanılacak satır, stil, renk ve konum gibi öğeleri belirtmek için kullanılabilecek birkaç yeni özellik ekler.

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

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

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

Bir siteyle karşılaştığımızda birdenbire bizimle konuşmaya başladığımızda hepimiz şaşırdık. Otomatik oynatma politikaları, sitelerin otomatik olarak ses çalmasını veya sesli video dosyalarını çalmasını engeller. Bazı siteler bunun yerine konuşma sentezi API'sini kullanarak bu sorunu aşmaya çalıştı.

Chrome 71'den itibaren, konuşma sentezi API'sinin çalışması için artık sayfada bir tür kullanıcının etkinleştirilmesi gerekiyor. Bu, diğer otomatik oynatma politikalarıyla uyumlu olmasını sağlar. Kullanıcı sayfayla etkileşimde bulunmadan önce kullanmaya çalışırsanız bir hata tetiklenir.

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ızdaki çalışma arkadaşlarınızı sürpriz yapmaktan daha kötü bir şey yoktur.

Diğer ölçütler

Bunlar, Chrome 71'de geliştiriciler için yapılan değişikliklerden sadece birkaçı. Elbette bunlar dışında çok daha fazlası var.

• Element.requestFullscreen() yöntemi artık Android'de özelleştirilebilir ve gezinme çubuğunu görünür yapma ile kullanıcı hareketi yapılana kadar hiçbir kullanıcı aracısı kontrolünün gösterilmediği tamamen etkileyici bir mod arasında seçim yapmanıza olanak tanır.
• Modül komut dosyası istekleri için varsayılan kimlik bilgileri modu omit iken same-origin olarak değiştirildi.
• Ayrıca Chrome'u Gölge DOM v1 spesifikasyonu ile aynı hizaya getiren Chrome 71 artık :host() ve :host-context() sözde sınıflarının yanı sıra ::slotted() bağımsız değişkenlerinin kesinliğini de hesaplıyor.

Chrome Geliştirici Zirvesi Videoları

Chrome Dev Summit'e gelmediyseniz veya katıldıysanız ancak konuşmaların tamamını izlemediyseniz YouTube kanalımızdaki Chrome Dev Summit 2018 oynatma listesine göz atın.

Eva ve Phil, Hizmet Çalışanlarıyla Daha Hızlı ve Daha Dayanıklı Uygulamalar Oluşturma konusunda hizmet çalışanları kullanmak için bazı ince tekniklerden yararlandı.

Mariko ve Jake, Karmaşık JS'li Web Uygulamalarında, Yavaş Şekilden Kaçınma isimli videoda Squoosh'u nasıl oluşturduklarını anlattı.

Katie ve Houssein, Speed Essentials: Key Techniques for Fast Websites bölümünde sitenizin performansını en üst düzeye çıkarmaya yönelik bazı harika tekniklerden bahsetti.

Jake pastayı bıraktı. Chrome DevSummit 2018 oynatma listesinde daha birçok muhteşem video var. Bunlara göz atın.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz Chrome Developers 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 anlatacağım.