Şunları bilmeniz gerekir:
- Üç yeni CSS özelliği, akıcı giriş ve çıkış animasyonlarının eklenmesini kolaylaştırır.
- Dizi gruplaması ile yüksek sıralı veri kümelerini hesaplayın.
- Geliştirici Araçları, yerel geçersiz kılma işlemlerini kolaylaştırır.
- Daha fazlası da var.
Ben Adriana Jara. Chrome 117'nin ayrıntılarına girelim ve geliştiricilere yönelik yenilikleri görelim.
Giriş ve çıkış animasyonları için yeni CSS özellikleri.
Bu üç yeni CSS özelliği, giriş ve çıkış animasyonlarını kolayca eklemek için seti tamamlar. Ayrıca, iletişim kutuları ve pop-up'lar gibi üst katman kapatılabilir öğeleri sorunsuz bir şekilde canlandırırlar.
İ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, display: none
öğesinden üst katmana giriş efektlerini canlandırmak için @starting-style
kuralı kullanılır. Öğe sayfada açılmadan önce tarayıcının bakabileceği bir stil uygulamak için @starting-style
öğesini 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
efektini soluk renkte göstermek için geçiş listenize overlay
özelliğini ekleyin. Diğer özelliklerle birlikte yer paylaşımını canlandırmak için geçişe veya animasyona yer paylaşımı ekleyin ve animasyon sırasında en üst katmanda kaldığından emin olun. Bu ayar ç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;
}
Bu özelliklerin hareketle ilgili kullanıcı deneyiminizi geliştirmek üzere nasıl kullanılacağıyla ilgili ayrıntılar için Düzgün giriş ve çıkış animasyonları için dört yeni CSS özelliğine göz atın.
Dizi gruplama
Programlamada dizi gruplandırması oldukça yaygın bir işlemdir ve SQL'in GROUP BY yan tümcesini ve MapReduce programlamasını (map-group-reduce olarak daha iyi düşünülür) kullandığımızda sıklıkla görülen bir işlemdir.
Verileri gruplar halinde birleştirebilme özelliği, geliştiricilerin daha yüksek düzeydeki veri kümelerini hesaplamasını sağlar. Örneğin, bir kohortun ortalama yaşı veya bir web sayfası için günlük LCP değerleri.
Dizi gruplandırma, Object.groupBy
ve Map.groupBy
statik yöntemleri eklenerek bu senaryoları etkinleştirir.
groupBy
, iterasyon öğesi içindeki her öğe için sağlanan bir geri çağırma işlevini bir kez çağırır. Geri çağırma işlevi, ilişkili öğenin grubunu belirten bir dize veya simge döndürmelidir.
Aşağıdaki örnekte, MDN dokümanlarında, türlerine göre gruplandırılmış halde 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 }
]
}
*/
Daha fazla bilgi için groupBy
dokümanlarına göz atın.
Geliştirici Araçları'nda yerel geçersiz kılmalar basitleştirildi.
Yerel geçersiz kılmalar özelliği artık kolaylaştırılmıştır. Böylece, Ağ panelinden uzak kaynakların yanıt başlıklarını ve web içeriğini bunlara erişmeden 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.
Geliştirici Araçları, ayarlanmış ancak devre dışı bırakılmış yerel geçersiz kılmaları etkinleştirir. Geliştirici Araçları'nı henüz ayarlamadıysanız üst kısımdaki işlem çubuğunda sizden istenir. Geçersiz kılmaları depolayacağınız 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 > Düzenleyici'ye yönlendirir. Böylece web içeriğini geçersiz kılabilirsiniz.
Geçersiz kılınan kaynakların Ağ panelinde ile belirtildiğini unutmayın. Geçersiz kılınan öğeyi görmek için simgenin üzerine gelin.
Chrome 117'deki Geliştirici Araçları hakkında ayrıntılı bilgi ve daha fazla bilgi için Geliştirici Araçları'ndaki yenilikler sayfasına göz atın.
Diğer ölçütler
Elbette dahası da var.
grid-template-columns
vegrid-template-rows
için beklenensubgrid
değeri artık Chrome'da uygulandı.WebSQL
desteğinin sonlandırılması deneme süresi veunload
etkinliğinin kullanımdan kaldırılması için geliştirici denemesi bulunmaktadır.Chrome 116 videosunda bahsedilen bfcache için
notRestoredReasons
API bu sürümde kullanıma sunulacaktır.
Daha fazla bilgi
Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 117'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.
- Chrome Geliştirici Araçları'ndaki yenilikler (117)
- Chrome 117 için kullanımdan kaldı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 Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Merhaba Adriana Jara, Chrome 117 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.