Chrome 117'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

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.

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

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.

Bir klasör seçin ve en üstteki işlem çubuğunda söz konusu klasöre erişim izni 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 Kaydedildi. ile belirtildiğini unutmayın. Geçersiz kılınan öğeyi görmek için simgenin üzerine gelin.

Ağ panelinde, bir isteğin yanında bulunan geçersiz kılma simgesi.

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.

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.

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.