Chrome 69'daki yenilikler

Filiz LePage

Chrome ilk kez kullanıma sunulmasından bu yana 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 henüz değişmedi.

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

  • CSS Scroll Snap, akıcı ve sorunsuz kaydırma deneyimleri oluşturmanıza olanak tanır.
  • Ekran kesimleri, ekran kesiminin arkasında bulunan (bazen çentik olarak da bilinir) tüm alanlar da dahil olmak üzere ekranın tüm alanını kullanmanıza olanak tanır.
  • Web Locks API, eşzamansız olarak kilit almanıza, iş yapılırken kilidi tutmanıza ve ardından serbest bırakmanıza olanak tanır.

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 69'daki geliştiricilere yönelik yenilikleri görelim!

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

CSS Kaydırma Tutturması

Demoyu göster | Kaynak

CSS Kaydırma Tutturması, tarayıcıya her kaydırma işleminden sonra nerede duracağını bildiren kaydırma tutturma konumları tanımlayarak sorunsuz, sorunsuz ve kaydırma deneyimleri oluşturmanızı sağlar. Bu, resim ruloları veya kullanıcının belirli bir noktaya gitmesini istediğiniz sayfalara ayrılmış bölümler için çok kullanışlıdır.

Bir resim rulosu için kaydırma kapsayıcısına scroll-snap-type: x mandatory; ve her resme scroll-snap-align: center; eklerdim. Ardından, kullanıcı bantta gezinirken her bir resim sorunsuz şekilde 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ı boyutlarda olsa veya kaydırıcıdan daha büyük olsa bile iyi bir şekilde çalışır. Daha fazla ayrıntı ve deneyebileceğiniz örnekler için CSS Scroll Snap ile İyi Kontrollü Kaydırma yayınına göz atın!

Ekran kesimleri (çentikler olarak da bilinir)

ekran kesimi olan cep telefonu
Tarayıcılar, içeriğin kesimin tarafından kaplanmasını önlemek için ekran kesimi olan bir mobil cihazda fazladan bir kenar boşluğu ekler.

Bazen "çentik" adı verilen ekran kesimiyle piyasaya sürülen mobil cihazların sayısı her geçen gün artmaktadır. Bununla başa çıkmak için tarayıcılar sayfanıza biraz daha fazla kenar boşluğu ekler. Böylece, içerik çentik tarafından gizlenmez.

Peki bu alanı kullanmak isterseniz ne olur?

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

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

Daha sonra, içeriğinizi düzenlemek 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 vardır veya daha fazla ayrıntı için açıklamaya göz atın.

Web Locks API'si

Web Locks API, eşzamansız olarak bir kilit elde etmenize, iş yapılırken kilidi tutmanıza ve ardından bırakmanıza olanak tanır. Kilit tutulurken kaynaktaki başka hiçbir komut dosyası aynı kilidi edinemez. Bu da, paylaşılan kaynakların kullanımının koordine edilmesine yardımcı olur.

Örneğin, birden fazla sekmede çalışan bir web uygulaması, ağ ile yalnızca bir sekmenin senkronize edildiğinden emin olmak isterse senkronizasyon kodu network_sync_lock adlı bir kilit edinmeye ç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 edinen ilk sekme, verileri ağ ile senkronize eder. Başka bir sekme aynı kilidi almaya çalışırsa bu kilit sıraya alınır. Kilit serbest bırakıldıktan sonra, sıraya alınan bir sonraki isteğe kilit verilir ve yürütülür.

MDN, harika bir Web Locks yardımcı belgesine sahiptir ve daha ayrıntılı bir açıklamanın yanı sıra birçok örnek içerir. İsterseniz ayrıntılara inip spec de göz atabilirsiniz.

Diğer ölçütler

Bunlar, Chrome 69'da geliştiriciler için yapılan değişikliklerden sadece birkaçı tabii ki çok daha fazlası.

konik gradyan

  • CSS4 spesifikasyonundan, konik renk geçişlerini kullanarak artık bir dairenin çevresinde renk geçişleri oluşturabilirsiniz. Lea Verou'nun, kullanabileceğiniz bir CSS conic-gradient() çoklu dolgusu var ve sayfada, topluluk tarafından gönderilen çok sayıda harika örnek yer alıyor.
  • Öğeler üzerinde, bir özelliğin varlığının geçişini sağlayan yeni bir toggleAttribute() yöntemi bulunmaktadır. Bu yöntem, classList.toggle()'te olduğu gibidir.
  • JavaScript dizileri iki yeni yöntem alıyor: flat() ve flatMap(). Bunlar, tüm alt dizi öğelerinin içine yumuşatıldığı yeni bir dizi döndürür.
  • OffscreenCanvas ise işi ana iş parçacığından bir çalışana taşıyarak performans sorunlarını ortadan kaldırmaya yardımcı olur.

Paskalya yumurtaları

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

Chrome'daki Yeniler 28 bölümünün hazırlanmasına yardımcı olan herkese özel bir teşekkür ederiz. Bu isimlerin hepsi birbirinden güzel!

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 yeniliklerin ilk bölümümüzden bu yana ne kadar geliştiğini görmek ister misiniz? İlk videomuzdan bugüne kadarki geçmişimizi gösteren bu 30 saniyelik eğlenceli ilerleme videosuna göz atın.

Bu videoyu izleyip yorum ve geri bildiriminizi paylaştığınız için de teşekkür ederiz. Hepsini okudum ve önerilerinizi dikkate alıyorum. Bu videolar sizin sayenizde daha iyi hale geldi.

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

Chrome Bloopers'taki yenilikler

Keyifle oynayabileceğiniz küçük bir çekim videosu hazırladık. Bu videoyu izledikten sonra birkaç şey öğrendim:

  • Sözlerimin üzerine takıldığımda tuhaf sesler çıkarıyorum.
  • Yüzlerim durup dilimi çıkarıyorum.
  • Çok sallıyorum.

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 70 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!