Chrome 104'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Adım Pete LePage. Chrome 104'te geliştiriciler için neler yeni olduğuna göz atalım.

Bölge yakalama ile kırpma alanı belirtme

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 çapraz kaynaklı bir iframe'i vurgulayan bir web uygulamasının yer aldığı 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. Ardından 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. seviye 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ı - 4. Seviye - Söz dizimi ve Değerlendirme desteğini ekleyerek normal matematiksel karşılaştırma operatörlerini kullanarak medya sorguları yazmanıza olanak tanır.

Bu nedenle, 400 ile 600 piksel arasında bir görüntü alanını 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. */
}

Yeni söz dizimi, medya sorgularını daha az ayrıntılı hale getirmenin yanı sıra daha doğru olabilir. min- ve max- sorguları kapsayıcıdır. Örneğin: min-width: 400px 400 piksel veya daha geniş genişlikler 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.

Geçişlerin tek sayfalı bir uygulamada nasıl çalıştığına 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

Elbette daha birçok özellik 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.

Adım Pete LePage. Chrome 105 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.