Şunları bilmeniz gerekir:
- Pencere içinde pencere dokümanı, pencere içinde pencere pencereleri üzerinde daha fazla kontrol sahibi olmanızı sağlar.
- CSS iç içe geçmiş bildirimleri bazı zorlu uç durumları düzeltir.
- Birden fazla satıra bölünen öğelerdeki süslemelerin davranışını belirtebilirsiniz.
- Bunun gibi çok daha fazla özellik var.
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ı.
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.
Örneğin, her şey tek bir satırda olduğunda bu öğe harika görünür.
İç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.
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.
- Birkaç yanlış başlangıçtan sonra klavyeyle odaklanılabilir kaydırma kapsayıcıları nihayet kullanıma sunuldu.
- WebGPU, çift kaynaklı harmanlama özelliğini kullanıma sundu.
- Web serisine de bağlı özelliği eklenir.
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.
- Chrome 130 için sürüm notları
- Chrome Geliştirici Araçları'ndaki yenilikler (130)
- Chrome 130 için 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.
Adım Pete LePage. Chrome 131 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğiz.