Chrome 117'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Gelin, Chrome 117'de geliştiricileri bekleyen 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 eklemek ve iletişim kutuları ile popover'lar gibi üst katmanda kapatılabilir öğelere sorunsuz bir şekilde animasyon eklemek için gereken tüm özellikleri sunar.

İlk özellik transition-behavior. display gibi ayrı özellikleri geçirmek için 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;
}

Ardından, @starting-style kuralı, display: none öğesinden üst katmana giriş efektlerini canlandırmak için kullanılır. Tarayıcının, öğe sayfada açılmadan önce arayabileceği bir stil uygulamak için @starting-style 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 soldurmak için geçiş listenize overlay özelliğini ekleyin. Geçişe veya animasyona yer paylaşımı ekleyerek yer paylaşımını diğer özelliklerle birlikte canlandırın ve animasyon sırasında en üst katmanda kalmasını sağlayın. Bu işlem, çok daha sorunsuz 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 özellikleri hareketle kullanıcı deneyiminizi iyileştirmek için nasıl kullanacağınızla ilgili ayrıntılı bilgi edinmek üzere Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği başlıklı makaleyi inceleyin.

Dizi gruplandırması

Programlamada dizi gruplama, SQL'in GROUP BY ifadesini ve MapReduce programlamayı (map-group-reduce olarak düşünmek daha iyidir) kullandığımızda en sık görülen, son derece yaygın bir işlemdir.

Verileri gruplar halinde birleştirme özelliği, geliştiricilerin daha yüksek sıralı 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 gruplama, Object.groupBy ve Map.groupBy statik yöntemlerini ekleyerek bu senaryoları mümkün kılar.

groupBy, yinelenebilir bir öğedeki her öğe için sağlanan geri çağırma işlevini bir kez çağırır. Geri çağırma işlevi, ilişkili öğenin grubunu belirten bir dize veya sembol döndürmelidir.

MDN belgelerindeki aşağıdaki örnekte, türlerine göre gruplandırılmış olarak döndürülmek için groupBy yöntemi kullanılan bir ürün dizisi yer almaktadı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 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 kolay kullanılabiliyor. Bu sayede, uzak kaynaklara erişmeden Ağ panelinden yanıt başlıklarını ve web içeriklerini 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.

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

Yerel geçersiz kılmalarınız ayarlanmış ancak devre dışı bırakılmışsa DevTools bunları etkinleştirir. Henüz ayarlamadıysanız DevTools, en üstteki işlem çubuğunda sizi yönlendirir. Geçersiz kılmaların saklanacağı bir klasör seçin ve DevTools'un bu klasöre erişmesine izin verin.

Bir klasör seçin ve üstteki işlem çubuğunda klasöre erişime izin verin.

Geçersiz kılmalar ayarlandıktan sonra DevTools, web içeriğini geçersiz kılmanıza olanak tanımak için sizi Kaynaklar > Geçersiz Kılmalar > Düzenleyici'ye yönlendirir.

Geçersiz kılınan kaynakların Ağ panelinde Kaydedildi. ile gösterildiğini unutmayın. Nelerin geçersiz kılındığını görmek için simgenin üzerine gelin.

Ağ panelindeki bir isteğin yanında geçersiz kılma simgesi.

Tüm ayrıntılar ve Chrome 117'deki Geliştirici Araçları hakkında daha fazla bilgi için Geliştirici Araçları'ndaki yenilikler başlıklı makaleyi inceleyin.

Diğer özellikler

Elbette daha pek çok özellik var.

Daha fazla bilgi

Bu özet yalnızca bazı önemli noktaları kapsar. Chrome 117'deki ek değişiklikler için aşağıdaki bağlantılara göz atın.

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.

Ben Adriana Jara. Chrome 117 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağım.