Chrome 131'deki yenilikler

Mariko Kosaka
X

Şunları bilmeniz gerekir:

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

CSS vurgulama mirası

CSS vurgusu devralma özelliği, ::selection ve ::target-text sözde sınıfları için değişiyor. Bu, stil devralma için daha sezgisel bir model oluşturur ve yakın zamanda eklenen ::highlight, ::spelling-error ve ::grammar-error sözde sınıflarıyla uyumlu hale gelir.

Vurgulanmış metin içeren bu kod snippet'ini düşünün.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

Chrome'un önceki sürümlerinde, vurgulanan metni seçtiğinizde üst paragraf öğesinde ::selection sözde sınıfı ayarlanmış olsa bile metnin rengi mavi olarak değişmezdi.

Vurgulanan metin pembe renktedir.

Bunun nedeni, kaynak öğe devralma modeli kullanılarak uygulanmış olmasıdır. Bu nedenle, bu durumda ::selection sözde sınıfı yalnızca mavi sınıfa sahip öğelerle eşleşir. Bu paragraftaki öğe ise mavi sınıfa sahip değildir.

Vurgu devralma değişikliğiyle birlikte, Chrome 131'de aynı metin seçildiğinde metnin rengi mavi olur.

Vurgulanan metin mavi renkte

Bununla ilgili birkaç değişiklik daha var. Bu nedenle, bu özellik üzerinde çalışan Igalia'dan Stephen Chenney tarafından yazılan CSS seçim stili için devralma değişiklikleri başlıklı makaleyi inceleyin.

<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.