Chrome 69'daki yenilikler

Pete LePage

Chrome'un ilk kullanıma sunulmasının üzerinden on yıl geçti. O zamandan beri çok şey değişti, ancak modern web uygulamaları için sağlam bir temel oluşturma hedefimiz değişmedi.

Chrome 69'da aşağıdakiler için destek ekledik:

  • CSS Scroll Snap, sorunsuz ve şık kaydırma deneyimleri oluşturmanıza olanak tanır.
  • Ekran kesikleri, ekran kesiğinin arkasındaki alan da dahil olmak üzere ekranın tamamını kullanmanıza olanak tanır. Bu alana bazen çentik denir.
  • Web Locks API, kilidi asynkron olarak edinmenize, çalışma yapılırken kilidi tutmanıza ve ardından kilidi bırakmanıza olanak tanır.

Daha birçok özellik de var.

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

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

CSS Kaydırma Görüntüsü

Demoyu göster | Kaynak

CSS Kaydırma Sabitleme, tarayıcıya her kaydırma işleminden sonra nerede duracağını bildiren kaydırma sabitleme konumları tanımlayarak sorunsuz ve şık kaydırma deneyimleri oluşturmanıza olanak tanır. Bu özellik, resim bantları veya kullanıcının belirli bir noktaya kaydırmasını istediğiniz sayfaya bölünmüş bölümler için çok faydalıdır.

Resim rulosu için kaydırma kapsayıcısına scroll-snap-type: x mandatory;, her resme de scroll-snap-align: center; eklerdim. Ardından, kullanıcı bantta gezinirken her resim sorunsuz bir şekilde kaydırılarak mükemmel konuma getirilir.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS Kaydırma Tutturma, tutturma hedefleri farklı boyutlara sahip olduğunda veya kaydırıcıdan daha büyük olduğunda bile iyi sonuç verir. Daha fazla bilgi ve denemeniz için CSS Scroll Snap ile İyi Kontrol Edilen Kaydırma başlıklı makaleyi inceleyin.

Ekran kesimleri (diğer adıyla çentikler)

ekran kesimi olan cep telefonu
Tarayıcılar, ekran kesimi olan mobil cihazlarda içeriğin kesilmesini önlemek için fazladan kenar boşluğu ekler.

Bazen çentik olarak adlandırılan ekran kesiklerine sahip artan sayıda mobil cihaz piyasaya sürülüyor. Bununla başa çıkmak için tarayıcılar, içeriğin çentik tarafından gizlenmemesi için sayfanıza biraz fazladan kenar boşluğu ekler.

Peki bu alanı kullanmak isterseniz ne olur?

CSS ortam değişkenleri ve viewport-fit meta etiketi sayesinde artık bunu yapabilirsiniz. Örneğin, tarayıcıya ekrandaki kesik alana genişlemesini söylemek için viewport meta etiketindeki viewport-fit özelliğini cover olarak ayarlayın.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Ardından, içeriğinizi biçimlendirmek için safe-area-inset-* CSS ortam değişkenlerini kullanabilirsiniz.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

WebKit blogunda iPhone X için Web Siteleri Tasarlama konulu harika bir yayın var veya daha ayrıntılı bilgi için açıklamaya göz atın.

Web Kilitleri API'si

Web Locks API, kilidi asynkron olarak edinmenize, çalışma yapılırken kilidi tutmanıza ve ardından kilidi bırakmanıza olanak tanır. Kilit tutulurken kaynaktaki başka hiçbir komut dosyası aynı kilidi alamaz. Bu da paylaşılan kaynakların kullanımını koordine etmeye yardımcı olur.

Örneğin, birden fazla sekmede çalışan bir web uygulaması yalnızca bir sekmenin ağla senkronize edildiğinden emin olmak istiyorsa senkronizasyon kodu network_sync_lock adlı bir kilit elde etmeye çalışır.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Kilidin alınacağı ilk sekme, verileri ağ ile senkronize eder. Başka bir sekme aynı kilidi almaya çalışırsa sıraya alınır. Kilit serbest bırakıldığında, sıradaki istek kilitlenir ve yürütülür.

MDN mükemmel bir Web Kilitleri yardım rehberine sahiptir, daha ayrıntılı bir açıklama ve birçok örnek içerir. İsterseniz daha ayrıntılı bir şekilde derin ve spesifikasyonları inceleyin.

Diğer özellikler

Bunlar, Chrome 69'daki geliştiricilere yönelik değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

konik gradyan

  • CSS4 spesifikasyonunda artık konik gradyanlar kullanarak bir dairenin çevresi etrafında renk geçişleri oluşturabilirsiniz. Lea Verou'nun kullanabileceğiniz bir CSS conic-gradient() polyfill'i var. Sayfada, topluluk tarafından gönderilen bir sürü harika örnek de yer alıyor.
  • Öğelerde, classList.toggle()'e benzer şekilde bir özelliğin varlığını değiştiren yeni bir toggleAttribute() yöntemi vardır.
  • JavaScript dizilerine iki yeni yöntem eklendi: flat() ve flatMap(). Tüm alt dizi öğelerinin içine yerleştirildiği yeni bir dizi döndürürler.
  • OffscreenCanvas ise ana iş parçacığındaki işlemleri bir çalışana taşıyarak performans darboğazlarını ortadan kaldırmaya yardımcı olur.

Paskalya yumurtaları

Videodaki tüm paskalya yumurtalarını buldunuz mu?

Chrome'da Yeni'nin 28 bölümünün hazırlanmasına yardımcı olan herkese özel bir teşekkür. Bu kişilerin her biri muhteşem.

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Chrome'daki Yenilikler ile ilgili ilk bölümden bu yana neler değiştiğini görmek ister misiniz? İlk videomuzdan bugüne kadarki yolculuğumuzu gösteren bu eğlenceli 30 saniyelik gelişme videomuza göz atın.

İzlediğiniz ve yorumlarınızı ve geri bildirimlerinizi paylaştığınız için teşekkür ederiz. Tüm önerileri okuyoruz ve dikkate alıyoruz. Bu videolar sizin sayenizde daha iyi hale geldi.

İzlediğiniz için teşekkürler.

Chrome'daki Yenilikler Bloopers

Keyfini çıkarmanız için eğlenceli bir çekim videosu hazırladık. Bu videoyu izledikten sonra birkaç şey öğrendim:

  • Kelimelerimi karıştırdığımda tuhaf sesler çıkarıyorum.
  • Yüz ifadeleri yapıyorum ve dilimi çıkarıyorum.
  • Çok hareket ediyorum.

Abone ol

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

Adım Pete LePage. Chrome 70 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.