Ş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 yerleştirilmiş beyanları, bazı zor 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 idealdir. Böylece, diğer sitelerle veya uygulamalarla etkileşimde bulunurken videoyu gözden kaçırmazsınız. Ancak yalnızca video oynatabilir.
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 ve oynatma kontrollerini içeren bir pencere açılır. Şarkıyı kolayca favorilerime ekleyebilirim.
Bu özelliği kullanmak için yeni bir resim içinde resim penceresi dokümanı isteyin. Döndürülen promise, Pencere içinde pencere JavaScript nesnesi ile çözülür.
Ardından, içeriğinizi pencereye eklemek için bu kodu kullanın.
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 konumda ve boyutta 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 Pencere İçinde Pencere başlıklı yayınını inceleyin.
CSS iç içe yerleştirilmiş beyanları
CSS iç içe yerleştirme, kuralları diğerlerinin içine yerleştirerek daha kısa seçiciler, daha kolay okuma ve daha fazla 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 renginin en son geldiği için yeşil olmasını beklersiniz ancak renk 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'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 CSSNestedDeclarations ile CSS iç içe yerleştirme iyileştirmeleri başlıklı makalesine göz atın.
box-decoration-break
box-decoration-break CSS mülkü, bir öğenin parçalarının birden fazla satıra, sütuna veya sayfaya bölündüğünde nasıl oluşturulacağını belirtmenize olanak tanır.
Ö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 bir parça bağımsız olarak oluşturulur ve çok daha güzel bir görünüm elde edilir.
Tam olarak temel düzeyde olmasa da Chrome ve Firefox'ta kullanılabilir ve Safari'de tedarikçi ön eklidir.
.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, yalnızca bazı önemli noktaları kapsar. Chrome 130'taki 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 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.