Chrome 130'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

• Belge pencere içinde pencere özelliği, pencere içinde pencere pencereleri üzerinde daha fazla kontrol sahibi olmanızı sağlar.
• CSS iç içe yerleştirilmiş bildirimleri, bazı zorlu uç durumları düzeltir.
• Birden fazla satıra yayılan öğelerdeki süslemelerin davranışını belirleyebilirsiniz.
• Ve daha pek çok şey var.

Ben Pete LePage. Gelin, Chrome 130'da geliştiriciler için hangi yenilikler olduğuna göz atalım.

Doküman pencere içinde pencere

Pencere içinde pencere API'si, bir videoyu tarayıcı sekmesinden çıkarıp diğer siteler veya uygulamalarla etkileşimde bulunurken videoyu takip etmek istediğinizde kullanışlıdır. Ancak bu yalnızca video için geçerlidir.

Doküman pencere içinde pencere API'si bu kısıtlamayı ortadan kaldırarak içeriği kontrol edebileceğiniz bir pencere içinde pencere penceresi oluşturmanıza olanak tanır. Özel video oynatıcılar, video konferans ve üretkenlik uygulamaları gibi alanlarda kullanmak için idealdir. Spotify'ın web oynatıcısında bu özelliği kullanmasını çok beğeniyorum. Çalan şarkının albüm kapağını, oynatma kontrollerini ve şarkıyı kolayca favorilerime ekleyebileceğim bir pencere açılıyor.

Bu özelliği kullanmak için yeni bir doküman pencere içinde pencere penceresi isteğinde bulunun. Döndürülen promise, pencere içinde pencere penceresi JavaScript nesnesiyle çözümlenir. Ardından, bu özelliği 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 özelliğiyle, 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,
});

Çok daha fazla ayrıntı için François'nın Herhangi Bir Öğede Pencere İçinde Pencere başlıklı gönderisine göz atın.

CSS iç içe yerleştirilmiş beyanları

CSS iç içe yerleştirme, kuralları diğerlerinin içine yerleştirerek daha kısa seçicilere, daha kolay okumaya ve daha fazla modülerliğe olanak tanır. CSS iç içe yerleştirme, yeni kullanıma sunulan Baseline özelliğidir ve yaklaşık bir yıldır kullanılmaktadır.

Beklendiği gibi çalışmayan birkaç uç durum vardı. Örneğin, aşağıdaki CSS bloğunda arka plan renginin en son geldiği için yeşil olmasını beklersiniz ancak kırmızıdır.

.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'da uygulanan iç içe yerleştirilmiş bildirimler kuralını kullanıma sundu. Aynı CSS bloğu artık beklendiği gibi yeşil bir arka planla sonuçlanıyor. Basit 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ştirme CSSNestedDeclarations ile iyileşiyor başlıklı makalesine göz atın.

box-decoration-break

box-decoration-break CSS özelliği, bir öğenin parçaları birden fazla satır, sütun veya sayfaya bölündüğünde nasıl oluşturulacağını belirtmenize olanak tanır.

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

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

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

Baseline olmasa da Chrome ve Firefox'ta kullanılabilir ve Safari'de satıcı ön ekine sahiptir.

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

Daha fazla bilgi için box-decoration-break MDN'deki dokümanlara ve Rachel'ın Chrome 130'daki box-decoration-break özelliği başlıklı gönderisine göz atın.

Diğer özellikler

Elbette daha pek çok şey var.

• Birkaç başarısız denemenin ardından klavyeyle odaklanılabilir kaydırma kapsayıcıları nihayet kullanıma sunuluyor.
• WebGPU, çift kaynak karıştırma özelliğine kavuşuyor.
• Web seri numarası da bağlı bir özellik kazanır.

Daha fazla bilgi

Bu özet yalnızca bazı önemli noktaları kapsar. Chrome 130'daki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

• Chrome 130 sürüm notları.
• Chrome Geliştirici Araçları'ndaki yenilikler (130)
• Chrome 130 ile ilgili ChromeStatus.com güncellemeleri
• Chromium kaynak deposu değişiklik listesi
• Chrome sürüm takvimi

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 131 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağız.