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 devralma

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.

Pembe renkte vurgulanmış metin

Bunun nedeni, kaynak öğe devralma modeli kullanılarak uygulanmış olmasıdır. Dolayısıyla bu durumda ::selection sözde-sınıfı, yalnızca bu paragrafta bulunan öğenin sahip olmadığı mavi sınıfa sahip öğeleri eşleştirir.

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 sunulan değişiklikler, display özelliğinin kullanılmasını sağlar ve genişleyen ve daraltılan kısmın stilini belirlemek 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. Izgara veya esnek düzen gibi özellikleri kullanmanıza olanak tanıyan bu kısıtlama artık gevşetilmiştir.

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 esnek düzen 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 kenar boşluğu, CSS'de @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ırmada sayaçlar, geçerli sayfa numarası için page ve toplam sayfa sayısı için pages ile de desteklenir.

Daha ayrıntılı bir açıklama için Rachel'ın CSS ile yazdırıldığında 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 mülküyle Emoji'nin 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ıları kontrol edin.

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.