Chrome 130'daki yenilikler

Şunları bilmeniz gerekir:

Adım Pete LePage. Chrome 130'taki geliştiricilere yönelik yenilikleri inceleyelim.

Pencere içinde pencere dokümanı

Pencere içinde pencere API'si, bir videoyu tarayıcı sekmesinden çıkarmak istediğinizde harikadır. Bu sayede, diğer siteler veya uygulamalarla etkileşimde bulunurken videoyu izleyebilirsiniz. Ancak sadece video ile alakalı.

Spotify'ın pencere içinde pencere penceresi

Belge pencere içinde pencere API'si bu kısıtlamayı ortadan kaldırarak içerik üzerinde kontrol sahibi olduğunuz bir pencere içinde pencere penceresi oluşturmanıza olanak tanır. Özel video oynatıcılar, video konferanslar ve üretkenlik uygulamaları gibi uygulamalarda bu API'yi kullanabilirsiniz. Spotify'ın web oynatıcısında bu özelliği nasıl kullandığını çok seviyorum. Mevcut şarkının posterini gösteren bir pencere açıyorum, kontrolleri çalıyorum ve şarkıyı favorilerime kolayca ekleyebiliyorum.

Bu özelliği kullanmak için yeni bir resim içinde resim penceresi dokümanı isteyin. Döndürülen promise, Pencere İçinde Pencere JavaScript nesnesi ile çözülür. Ardından, bunu kullanarak içeriğinizi pencereye ekleyin.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

Yeni preferInitialWindowPlacement mülküyle, Chrome'a önceki pencerenin konumunu veya boyutunu yeniden kullanmak yerine pencere içinde pencere öğesini her zaman varsayılan konumunda ve boyutunda açmasını söyleyebilirsiniz.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Daha fazla ayrıntı için François'in Herhangi bir öğe için resim içinde resim başlıklı yayınını inceleyin.

İç içe yerleştirilmiş CSS bildirimleri

CSS iç içe yerleştirme, kuralları diğerlerinin içine yerleştirerek daha kısa seçiciler, daha kolay okuma ve daha modülerlik sağlar. CSS iç içe yerleştirme, Temel Yeni kullanıma sunuldu olarak sınıflandırılır ve yaklaşık bir yıldır kullanılabilir.

Beklendiği gibi çalışmayan birkaç uç durum vardı. Örneğin, aşağıdaki CSS bloğunda, arka plan rengi en son çıktığı için arka plan renginin yeşil olmasını beklersiniz.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

CSS çalışma grubu, bu gibi uç durumları düzeltmek için Chrome 130'ta uygulanan iç içe yerleştirilmiş beyanlar kuralını kullanıma sundu. Şimdi aynı CSS bloğu, beklendiği gibi yeşil bir arka planla sonuçlanıyor. Boş bildirimleri iç içe yerleştirilmiş kurallarla birlikte kullanıyorsanız kodunuzu tekrar kontrol etmeniz gerekir.

Daha ayrıntılı bir açıklama için Bramus'un CSS iç içe yerleştirmesi CSSNestedDeclarations ile iyileştirildi makalesine göz atın.

box-decoration-break

box-decoration-break CSS özelliği, bir öğe parçalarının birden çok satır, sütun veya sayfaya bölündüğünde nasıl oluşturulacağını belirtmenizi sağlar.

Satır sonu yok

Örneğin, her şey tek bir satırda olduğunda bu öğe harika görünür.

Dilimler içeren satır sonları

İçerik birden fazla satıra bölündüğünde arka plan, kutu gölgesi, kenarlık gibi süslemeler dilimlenir ve oldukça radikal bir görünüm oluşur.

Klonla satır sonları

box-decoration-break: clone eklendiğinde, her parça bağımsız olarak oluşturulur ve böylece çok daha güzel bir görünüm elde edilir.

Tam olarak Temel olmasa da, Chrome ve Firefox'ta kullanılabilir ve Safari'de satıcı önekine sahiptir.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Daha fazla bilgi için box-decoration-break MDN dokümanlarına ve Rachel'in Chrome 130'taki box-decoration-break özelliği başlıklı yayınına göz atın.

Diğer özellikler

Elbette daha birçok özellik var.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerden bazıları ele alınmıştır. Chrome 130'taki 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 131 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğiz.