Chrome 104'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Şimdi Chrome 104'ün geliştiriciler için yeniliklerini görelim.

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

getDisplayMedia(), geçerli sekmeden video akışı oluşturmanızı sağlar. Ancak bazı durumlarda sekmenin tamamını değil, yalnızca küçük bir bölümünü tercih edebilirsiniz. Şimdiye kadar bunu yapmanın tek yolu her video karesini manuel olarak kırpmaktı.

Bölge Yakalama ile bir web uygulaması, ekranda paylaşmak istediği belirli alanı tanımlayabilir. Örneğin, Google Slaytlar standart düzenleme görünümünde kalmanıza ve mevcut slaytı paylaşmanıza olanak tanıyabilir.

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

Kullanmak için paylaşılacak öğeyi seçin, ardından bu öğeye dayalı yeni bir CropTarget oluşturun. Ardından, getDisplayMedia() adlı kişiyi arayarak ekran paylaşımını başlatın. Bu, kullanıcıdan ekranlarını paylaşma izni ister. Ardından, track.cropTo() numaralı telefonu arayın ve daha önce oluşturulan cropTarget doğrulama kodunu 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ı bölümüne göz atın.

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

Medya Sorguları, duyarlı tasarım için kritik öneme sahiptir ve farklı görüntü alanı boyutları için belirli stiller tanımlamanızı sağlar. Ancak, bunları her gün kullanmazsanız söz dizimi biraz kafa karıştırıcı olabilir.

Chrome 104'ün desteklediği Medya Sorguları - Düzey 4 - Söz Dizimi ve Değerlendirme, sıradan matematiksel karşılaştırma operatörlerini kullanarak medya sorguları yazmanıza olanak tanır.

Dolayısıyla, 400 ile 600 piksel arasında bir görüntü alanını belirtmek için bunun gibi bir değer yerine:

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

Şöyle 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 büyük bir genişlik için test eder. 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. */
}

Firefox'ta zaten desteklenir ve yeni söz dizimini eski söz dizimine yeniden yazarak tarayıcı uyumluluğu sağlayan bir PostCSS eklentisi vardır.

Daha ayrıntılı bilgi için Rachel'ın Chrome 104'te aralık medya sorguları için yeni söz dizimi adlı makalesine göz atın.

Paylaşılan Öğe Geçişleri yeni kaynak denemesi başlatıyor

Platforma özgü uygulamalar genellikle farklı görünümler arasında yumuşak geçişler sağlar, güzel görünürler, kullanıcının bağlam içinde kalmasını sağlar ve deneyimin daha iyi performans göstermesine yardımcı olurlar. Web'de ise tam bir gezinme bulmak zor olabilir ve bazen anlık boş ekran anlamına gelebilir. Tek sayfalık bir uygulama için bu daha iyi olabilir ama geçişler yine de zordur.

Chrome 104'te yeni bir kaynak denemesi başlatan Paylaşılan Öğe Geçişleri, geçişlerin dokümanlar arası (ör. çok sayfalı bir uygulamada) veya doküman içi (ör. tek sayfalık bir uygulamada) olmasından bağımsız olarak 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: Gezinme işlevinde, yeni sayfa içeriğini alın, ardından geçişlerin desteklenip desteklenmediğini kontrol edin; desteklenmiyorsa sayfayı geçiş yapmadan güncelleyin. Etkinlerse bir transition() oluşturun ve buna start() çağrısı yaparak DOM değişikliği tamamlandığında 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 arka planda, CSS Animasyonlarını kullanır. Böylece, basma efektinden, kayarak veya istediğiniz herhangi bir şeye geçiş yapabilirsiniz.

Yüzeyleri yeni çizdik. Jake’in Bring Page Transitions to the Web (Web'e Sayfa Geçişlerini Getir) adlı videosuna bakın veya açıklamayı inceleyin.

Diğer ölçütler

Elbette dahası var.

  • Çerezler açık bir Expires veya Max-Age özelliğiyle ayarlandığında değer artık en fazla 400 gün olacak şekilde sınırlandırılacaktır.
  • Birden çok ekran pencere yerleşimi API'sinde geliştirmeler yapıldı.
  • overflow-clip-margin CSS özelliği de bir öğe içeriğinin kırpılmadan önce ne kadar boyanabileceğini belirtir.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 104'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 105 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!