Chrome 117'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 117'de geliştiriciler için neler yeni olduğuna 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ı mülkler için geçiş yapmak ü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 ve üst katmana giriş efektlerini canlandırmak için @starting-style kuralı kullanılır. Öğe sayfada açılmadan önce tarayıcının arayabileceği bir stil uygulamak için @starting-style öğesini kullanın.

/*  0. 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;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  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 yavaşça soldurmak için overlay mülkünü geçiş listenize 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 ilgili kullanıcı deneyiminizi iyileştirmek için bu özellikleri nasıl kullanacağınızla ilgili ayrıntılar için Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği başlıklı makaleyi inceleyin.

Dizi gruplandırma

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 gruplara ayırma özelliği, geliştiricilerin daha yüksek düzeyde veri kümeleri hesaplamasına olanak tanır. Örneğin, bir grubun ortalama yaşı veya bir web sayfasının günlük LCP değerleri.

Dizi gruplandırma, Object.groupBy ve Map.groupBy statik yöntemlerini ekleyerek bu senaryoları etkinleştirir.

groupBy, sağlanan geri çağırma işlevini iterlenebilir 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.

Yerel geçersiz kılmalar, DevTools'ta basitleştirildi.

Yerel geçersiz kılmalar özelliği artık daha kullanışlı hale getirildi. Böylece, uzak kaynakların yanıt başlıklarını ve web içeriğini bunlara erişim olmadan Ağ panelinden 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.

Bir isteğin açılır menüsündeki geçersiz kılma seçenekleri.

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 saklanacağı bir klasör seçin ve DevTools'un bu klasöre erişmesine izin verin.

Üst kısımdaki işlem çubuğundan bir klasör seçin ve bu klasöre erişim izni 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 Kaydedildi. ile gösterildiğini unutmayın. Hangi öğelerin geçersiz kılındığını görmek için fareyle simgenin üzerine gelin.

Ağ panelinde bir isteğin yanındaki geçersiz kılma simgesi.

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.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Aşağıdaki bağlantıları ziyaret ederek Chrome 117'deki ek değişiklikler.

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.