Chrome 69'daki yenilikler

Pete LePage

Chrome'un ilk sürümünün yayınlanmasının üzerinden on yıl geçti. O zamandan bu yana ç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 akıcı kaydırma deneyimleri oluşturmanıza olanak tanır.
  • Ekran kesimleri, ekran kesiminin arkasındaki alan da dahil olmak üzere ekranın tamamını kullanmanıza olanak tanır. Bu alan bazen çentik olarak da adlandırılır.
  • Web Locks API, eşzamansız olarak kilit edinmenize, işlem yapılırken kilidi tutmanıza ve ardından kilidi serbest bırakmanıza olanak tanır.

Ve çok daha fazlası!

Ben Pete LePage. Gelin, Chrome 69'daki geliştiricilere yönelik yeniliklere göz atalım.

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

CSS Scroll Snap

CSS Scroll Snap, kaydırma işleminden sonra tarayıcıya nerede duracağını söyleyen kaydırma yakalama konumları bildirerek sorunsuz ve şık kaydırma deneyimleri oluşturmanıza olanak tanır. Bu özellik, kullanıcının belirli bir noktaya kaydırmasını istediğiniz resim galerileri veya sayfalandırılmış 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 ise scroll-snap-align: center; eklerdim. Ardından, kullanıcı bantta kaydırdıkça her resim mükemmel konuma sorunsuz bir şekilde kaydırılır.


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

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

CSS Scroll Snapping, snap hedefleri farklı boyutlarda olsa veya kaydırıcıdan daha büyük olsa bile iyi çalışır. Daha fazla bilgi ve deneyebileceğiniz örnekler için CSS Scroll Snap ile Kontrollü Kaydırma başlıklı gönderiye göz atın.

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

Ekran kesimi olan cep telefonu
Tarayıcılar, içeriğin ekran kesimiyle kaplanmasını önlemek için ekran kesimi olan bir mobil cihaza ekstra boşluk ekler.

Ekran kesimiyle (bazen çentik olarak da adlandırılır) piyasaya sürülen mobil cihazların sayısı artıyor. Bunu önlemek için tarayıcılar, içeriğin çentik tarafından gizlenmemesi amacıyla sayfanıza biraz daha fazla kenar boşluğu ekler.

Peki bu alanı kullanmak isterseniz ne yapmanız gerekir?

CSS ortam değişkenleri ve viewport-fit meta etiketiyle artık bunu yapabilirsiniz. Örneğin, tarayıcıya ekran kesme alanı içine genişlemesini söylemek için viewport-fit özelliğini viewport meta etiketinde cover olarak ayarlayın.

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

Ardından, içeriğinizi yerleştirmek 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 Sitesi Tasarlama hakkında harika bir yayın var. Daha fazla bilgi için açıklayıcı yayına da göz atabilirsiniz.

Web Locks API

Web Locks API, kilidi eşzamansız olarak almanıza, işlem yapılırken kilidi tutmanıza ve ardından kilidi serbest bırakmanıza olanak tanır. Kilit tutulurken, kaynakta başka hiçbir komut dosyası aynı kilidi alamaz. Bu sayede, paylaşılan kaynakların kullanımı koordine edilir.

Örneğin, birden fazla sekmede çalışan bir web uygulaması yalnızca bir sekmenin ağ ile senkronize edilmesini sağlamak istiyorsa senkronizasyon kodu, network_sync_lock adlı bir kilidi almaya ç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.
});

Kilidi alan 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ıktan sonra, sıradaki istek kilitlenir ve yürütülür.

MDN'de Web Locks ile ilgili harika bir başlangıç kılavuzu bulunur. Bu kılavuzda daha ayrıntılı bir açıklama ve birçok örnek yer alır. Dilerseniz daha ayrıntılı bilgi edinmek için şartnameye göz atabilirsiniz.

Diğer özellikler

Bunlar, geliştiriciler için Chrome 69'daki değişikliklerden yalnızca birkaçıdır. Elbette daha pek çok değişiklik yapıldı.

konik renk geçişi

Paskalya yumurtaları

Videodaki tüm paskalya yumurtalarını bulabildiniz mi?

Chrome'daki Yenilikler'in 28 bölümünün yayınlanmasına yardımcı olan herkese teşekkür ederiz. Bu kişilerin her biri harika!

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'in ilk bölümünden bu yana ne kadar yol katettiğini görmek ister misiniz? İlk videomuzdan bugüne kadar olan geçmişimizi gösteren bu eğlenceli 30 saniyelik gelişim videosuna göz atın.

Elbette, izlediğiniz ve yorumlarınızı, geri bildirimlerinizi paylaştığınız için teşekkür ederiz. Hepsini okuyor ve önerilerinizi dikkate alıyorum. Bu videolar sizin sayenizde daha iyi hale geldi.

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

Chrome'daki Yenilikler - Hatalar

Keyifle izleyebileceğiniz eğlenceli bir hata derlemesi hazırladık. Bu videoyu izledikten sonra öğrendiğim birkaç şey:

  • Konuşurken kelimeleri karıştırdığımda garip sesler çıkarıyorum.
  • Mimik yapıyorum ve dilimi çıkarıyorum.
  • Çok kıpırdanırım.

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.

Ben Pete LePage. Chrome 70 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için hemen buraya geleceğim.