Chrome 131'deki yenilikler

Mariko Kosaka
X

Şunları bilmeniz gerekir:

Adım Mariko Kosaka. Chrome 131'de geliştiriciler için neler yeni olduğuna göz atalım.

<details> ve <summary>'te Stil İyileştirmeleri

Artık açıklama veya akordeon widget'ları oluşturmak için <details> ve <summary> öğelerinin yapısını biçimlendirmek üzere daha fazla seçeneğiniz var.

Bu sürümde yapılan değişiklikler, display mülkünün kullanımını sağlar ve genişleyen ve daralan kısmı biçimlendirmek için bir ::details-content sözde öğesi ekler.

Geçmişte details öğesinin görüntüleme türünü değiştirmek mümkün değildi. Bu kısıtlama artık kaldırıldı. Böylece ızgara veya esnek düzenler gibi öğeleri kullanabilirsiniz.

Birkaç details öğesinden oluşan bu özel akordeon örneğinde, details öğelerinden biri genişletildiğinde içeriği summary öğesinin yanına yerleştirilir.

Flex düzeni içeren akordeon widget&#39;ı

Bu işlem, details öğesinde bir flex düzeni kullanılarak gerçekleştirilir. grid gibi diğer görüntüleme değerleriyle daha fazla düzen deseni deneyebilirsiniz.

Daha ayrıntılı bir açıklama için Bramus'un <details> stili için daha fazla seçenek başlıklı makalesine göz atın.

@page kenar boşluğu kutuları

Web dokümanlarını yazdırırken veya PDF olarak dışa aktarırken sayfa kenar boşluğu kutuları için destek eklendi.

Sayfa kenar boşluğu kutuları, bir sayfanın kenar boşluğu alanındaki içerikleri tanımlamanıza olanak tanır. Böylece, tarayıcı tarafından oluşturulan yerleşik üstbilgileri ve altbilgileri kullanmak yerine özel üstbilgi ve altbilgi sağlayabilirsiniz.

Sayfa marjı, CSS'deki @page kuralı kullanılarak tanımlanır.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Bir kenar boşluğu kutusunun görünümü ve içeriği, oluşturulan içerik kullanılarak 16 kenar boşluğu kutusunu temsil eden at kuralları içindeki CSS özellikleriyle belirtilir.

Sayfa numaralandırması için geçerli sayfa numarası page ve toplam sayfa sayısı pages ile sayaçlar da desteklenir.

Daha ayrıntılı bir açıklama için Rachel'in CSS kullanarak yazdırılan web sayfalarının kenar boşluklarına içerik ekleme başlıklı makalesine göz atın.

Diğer özellikler

Elbette daha birçok özellik var.

  • "clip-path", "fill", "stroke" ve "marker" için harici SVG kaynakları desteği.
  • WebHID, özel çalışan bağlamlarında etkinleştirilir.
  • font-variant-emoji CSS özelliğiyle emojinin davranışını kontrol edin.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 131'deki diğer 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.

Adım Mariko Kosaka. Chrome 132 kullanıma sunulduğunda Chrome'daki yenilikleri size buradan bildireceğiz.