Şunları bilmeniz gerekir:
- Üç yeni CSS özelliği, sorunsuz giriş ve çıkış animasyonları eklemeyi kolaylaştırır.
- Dizi gruplandırması ile daha yüksek düzeyli veri kümelerini hesaplayın.
- Geliştirici Araçları, yerel geçersiz kılma işlemlerini kolaylaştırır.
- Daha pek çok yenilik var.
Ben Adriana Jara. Şimdi, Chrome 117'de geliştiriciler için sunulan yeniliklere göz atalım.
Giriş ve çıkış animasyonları için yeni CSS özellikleri.
Bu üç yeni CSS özelliği, giriş ve çıkış animasyonlarını kolayca eklemenizi sağlar, Ayrıca, iletişim kutuları ve pop-over'lar gibi kapatılabilir üst katmandaki öğeler arasında ve bu öğelerden sorunsuz bir şekilde geçiş yapabilirsiniz.
İlk özellik transition-behavior
. display
gibi ayrı özellikleri taşımak üzere transition-behavior
için allow-discrete
değerini kullanın.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
Daha sonra @starting-style
kuralı, display: none
ve üst katmana giriş efektlerini canlandırmak için kullanılır. Öğe sayfada açılmadan önce tarayıcının arayabileceği bir stil uygulamak için @starting-style
kullanın.
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
Son olarak, üst katmandaki bir popover
veya dialog
öğesini karartmak için geçiş listenize overlay
özelliğini ekleyin. Diğer özelliklerle birlikte yer paylaşımına animasyon eklemek için geçişe veya animasyona yer paylaşımı ekleyin ve animasyon sırasında üst katmanda kalmasını sağlayın. Bu işlem çok daha düzgün görünür.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Hareketle kullanıcı deneyiminizi iyileştirmek üzere bu özelliklerin nasıl kullanılacağıyla ilgili ayrıntılar için Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği başlıklı makaleye göz atın.
Dizi gruplandırması
Programlamada dizi gruplandırması, en çok SQL'in GROUP BY ifadesini ve MapReduce programlamasını (map-group-reduce) kullandığımızda görülen son derece yaygın bir işlemdir.
Verileri gruplar halinde birleştirme özelliği, geliştiricilerin daha yüksek düzeyli veri kümeleri hesaplayabilmesini sağlar. Örneğin, bir grubun ortalama yaşı veya bir web sayfasının günlük LCP değerleri.
Dizi gruplandırması, Object.groupBy
ve Map.groupBy
statik yöntemlerinin eklenmesiyle bu senaryolara olanak sağlar.
groupBy
, sağlanan bir geri çağırma işlevini yinelenebilir bir öğedeki her öğe için bir kez çağırır. Geri çağırma işlevi, ilişkilendirilmiş öğe grubunu belirten bir dize veya sembol döndürmelidir.
Aşağıdaki örnekte MDN dokümanlarında, türlerine göre gruplandırılmış şekilde döndürmek için groupBy
yönteminin kullanıldığı bir ürün dizisi bulunmaktadır.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
Ayrıntılı bilgi için groupBy
belgelerini inceleyin.
Geliştirici Araçları'nda yerel geçersiz kılmalar kolaylaştırıldı.
Yerel geçersiz kılmalar özelliği artık daha kullanışlı hale getirildi. Böylece, erişim başlıklarına erişmeden Ağ panelinden uzak kaynakların web içeriğiyle ve yanıt başlıklarını kolayca taklit edebilirsiniz.
Web içeriğini geçersiz kılmak için Ağ panelini açın, bir isteği sağ tıklayın ve İçeriği geçersiz kıl'ı seçin.
Yerel geçersiz kılmalar ayarlayıp devre dışı bıraktıysanız Geliştirici Araçları bunları etkinleştirir. Geliştirici Araçları'nı henüz ayarlamadıysanız üstteki işlem çubuğunda bir istem görüntülenir. Geçersiz kılmaların depolanacağı bir klasör seçin ve Geliştirici Araçları'nın bu klasöre erişmesine izin verin.
Geçersiz kılmalar ayarlandıktan sonra Geliştirici Araçları sizi Kaynaklar > Geçersiz kılmalar > Web içeriğini geçersiz kılmanıza olanak tanıyan Düzenleyici.
Geçersiz kılınan kaynakların Ağ panelinde ile belirtildiğini unutmayın. Hangi öğelerin geçersiz kılındığını görmek için fareyle simgenin üzerine gelin.
Chrome 117'de Geliştirici Araçları ile ilgili tüm ayrıntılar ve daha fazla bilgi için Geliştirici Araçları'ndaki yeniliklere göz atın.
Diğer özellikler
Tabii ki çok daha fazlası var.
grid-template-columns
vegrid-template-rows
için beklenensubgrid
değeri artık Chrome'da uygulandı.unload
etkinliğinin kullanımdan kaldırılması içinWebSQL
kullanımdan kaldırma denemesi ve geliştirici deneme süresi mevcuttur.
Daha fazla bilgi
Bu bölümde, yalnızca bazı önemli noktalar yer alıyor. Aşağıdaki bağlantıları ziyaret ederek Chrome 117'deki ek değişiklikler.
- Chrome Geliştirici Araçları'ndaki yenilikler (117)
- Chrome 117 için desteği sonlandırma ve kaldırma işlemleri
- Chrome 117 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 şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.
Merhaba Adriana Jara. Chrome 117 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.