Chrome 104'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Adım Pete LePage. Şimdi Chrome 104'teki geliştiriciler için yeniliklere bakalım.

Bölge yakalama özelliğiyle bir kırpma alanı belirtin

getDisplayMedia(), mevcut sekmeden video akışı oluşturmayı sağlar. Ancak bazen sekmenin tamamını değil, yalnızca küçük bir kısmını görmek istersiniz. Bunu yapmanın tek yolu, her video karesini manuel olarak kırpmaktı.

Web uygulamaları, Bölge Yakalama özelliğiyle ekranın paylaşmak istediği belirli alanını tanımlayabilir. Örneğin, Google Slaytlar standart düzenleme görünümünde kalmanıza ve mevcut slaytı paylaşmanıza izin verebilir.

Ana içerik alanını ve kaynaklar arası iframe'i vurgulayan bir web uygulamasını içeren tarayıcı penceresinin ekran görüntüsü.
Ana içerik alanı mavi, çapraz kaynaklı iframe ise kırmızı renktedir.

Bunu kullanmak için paylaşılacak öğeyi seçin ve ardından bu öğeye göre yeni bir CropTarget oluşturun. Sonra, getDisplayMedia() numaralı telefonu arayarak ekran paylaşımını başlatın. Bu işlem, kullanıcıdan ekranını paylaşma izni ister. Ardından, track.cropTo() işlevini çağırın ve daha önce oluşturulan cropTarget öğesini iletin.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Daha fazla bilgi için Bölge yakalama ile daha iyi sekme paylaşımı başlıklı makaleyi inceleyin.

4. düzey söz dizimi ve değerlendirme ile daha kolay medya sorguları

Medya sorguları, farklı görüntü alanı boyutları için belirli stiller tanımlamanıza olanak tanıyarak duyarlı tasarım için kritik öneme sahiptir. Ancak bunları her gün kullanmadığınız sürece söz dizimi biraz kafa karıştırıcı olabilir.

Chrome 104, Medya Sorguları - Düzey 4 - Söz Dizimi ve Değerlendirme için destek ekleyerek normal matematiksel karşılaştırma operatörleri kullanarak medya sorguları yazmanıza olanak tanır.

Bu nedenle, 400 ile 600 piksel arasında bir görüntü alanı belirtmek için aşağıdaki gibi bir ifade yerine:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Bu şekilde yazılabilir:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Medya sorgularını daha az ayrıntılı hale getirmenin yanı sıra, yeni söz dizimi daha doğru olabilir. min- ve max- sorguları kapsayıcıdır. Örneğin: min-width: 400px 400 piksel veya daha geniş bir genişlik için testler. Yeni söz dizimi, ne demek istediğiniz konusunda daha açık olmanızı sağlar.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Bu özellik Firefox'ta zaten destekleniyor. Ayrıca, yeni söz dizimini eski söz dizimine yeniden yazan ve tarayıcı uyumluluğunu sağlayan bir PostCSS eklentisi de mevcut.

Daha fazla bilgi için Rachel'in Chrome 104'te aralık medya sorguları için yeni söz dizimi başlıklı makalesine göz atın.

Paylaşılan Öğe Geçişleri için yeni kaynak denemesi başladı

Platforma özel uygulamalar genellikle farklı görünümler arasında sorunsuz geçişlere sahiptir, güzel görünür, kullanıcıyı bağlamda tutar ve deneyimin daha performanslı hissettirilmesine yardımcı olur. Web'de ise tam gezinme zor olabilir ve bazen ekranın bir an için boş kalması anlamına gelebilir. Tek sayfalık uygulamalarda bu daha iyi olabilir ancak geçişler yine de zordur.

Chrome 104'te yeni bir kaynak denemesi başlatan Paylaşılan Öğe Geçişleri, geçişlerin belgeler arası (ör. çok sayfalı bir uygulamada) veya belge içi (ör. tek sayfalı bir uygulamada) olmasına bakılmaksızın sorunsuz geçişler sağlamanıza olanak tanır.

Tek sayfalık bir uygulamada geçişlerin nasıl işlediğine dair kaba bir örnek aşağıda verilmiştir. Gezinme işlevinde yeni sayfa içeriğini alın, ardından geçişlerin desteklenip desteklenmediğini kontrol edin.Desteklenmiyorsa sayfayı geçiş olmadan güncelleyin. Bu durumda, bir transition() oluşturun ve start()'u çağırarak DOM değişikliğinin tamamlandığını API'ye bildirin.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Paylaşılan Öğe Geçişleri, CSS animasyonları kullanır. Böylece, kaydırma veya istediğiniz başka bir efektle geçiş yapabilirsiniz.

Bu konuyu sadece yüzeysel olarak ele aldık. Sayfa Geçişlerini Web'e Getirme başlıklı Jake'in videosuna göz atın veya açıklayıcı içeriği inceleyin.

Diğer özellikler

Tabii ki çok daha fazlası var.

  • Çerezler açık bir Expires veya Max-Age özelliğiyle ayarlandığında değer artık en fazla 400 günle sınırlandırılacak.
  • Çoklu ekran pencere yerleşimi API'sinde iyileştirmeler yapıldı.
  • overflow-clip-margin CSS özelliği ise bir öğenin içeriğinin kırpılmadan önce ne kadar boyanmasına izin verildiğini belirtir.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 104'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

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

Ben Pete LePage. Chrome 105 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!