Yayınlanma tarihi: 8 Ekim 2024
Chrome 131'den itibaren CSS vurgusu devralma özelliği, ::selection ve ::target-text sözde sınıfları için değişiyor. Bu, devralma için daha sezgisel bir model oluşturmak ve yakın zamanda eklenen ::highlight, ::spelling-error ve ::grammar-error sözde sınıflarıyla uyumlu hale getirmek içindir. Bu gönderide, çoğu sitede görünür bir etkisi olmayacak olan değişiklik açıklanmaktadır.
Seçim stili
Seçilen metnin görünümüne stil uygulamak, kullanıcılara seçilen içeriğin amacı veya metnin hiç seçilememesi gibi anlamlar verebilir. Örneğin GitHub, seçili kodu seçili dizin yapısından farklı bir şekilde renklendirir.
CSS, öne çıkan sözde öğeler olarak bilinen bir grup sözde öğeden biri olan ::selection sözde öğesiyle seçim stilini destekler.
Bu sözde öğeler, metnin çeşitli kullanıcı, tarayıcı veya komut dosyası tarafından yönlendirilen işlemler altında nasıl göründüğünü kontrol eder. Seçim dışında yazım hatalarını (::spelling-error), dil bilgisi hatalarını (::grammar-error), URL yerleştirilmiş metin hedeflerini (::target-text) ve komut dosyası tarafından oluşturulan önemli noktaları (::highlight) biçimlendirebilirsiniz.
Her CSS özelliği koleksiyonunda olduğu gibi, site tasarlarken devralma davranışı da önemli bir husustur. Genel olarak geliştiriciler, CSS özelliklerinin DOM öğe ağacı aracılığıyla devralınmasını (ör. font) veya hiç devralınmamasını (ör. background) bekler.
Chrome 131'de seçim davranışında yapılan değişiklikler
Aşağıdaki doküman parçasını inceleyin:
p {
color: red;
}
.blue::selection {
color: blue;
}
<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>
Parçanın stil beyanları, seçili metnin rengini değiştirir. Bir kural tüm öğelerle, diğeri ise "blue" sınıfına sahip öğelerle eşleşir.
Chrome 130 veya önceki sürümlerde bu seçenek belirlendiğinde sonuç şu şekilde olur:
Chrome 131'de seçildiğinde sonuç şu şekilde değişir:
Neler değişti? Seçim özelliklerinin devralma davranışı geçmişte başlangıç öğesi devralma aracılığıyla uygulanıyordu. Bu durumda, seçimde seçilen öğeyle eşleşen bir ::selection'deki özellikler kullanılıyordu. Chrome 130 ve önceki sürümleri bu modeli kullanır. Bu modelde, .blue::selection yalnızca "blue" sınıfına sahip öğelerle eşleştiği için vurgulanan metinde eşleşen ::selection yoktur. <em> öğesinde "blue" sınıfı yoktur.
Chrome 131, öğelerin üst öğelerinden seçim davranışını devraldığı yeni bir davranışı etkinleştirir. Önceki örnekte, <em> öğesinin kendisiyle eşleşen bir ::selection öğesi yoktur. Bu nedenle, <p> öğesinin seçim renklerini devralır. Buna CSS vurgusu devralma denir ve chrome://flags'da Deneysel Web Platformu özelliklerini etkinleştirerek önceki Chrome sürümlerinde deneyebilirsiniz.
Seçim özelliklerinin devralınmadığı sitelerde, seçili metnin görünümünde değişiklikler görülebilir ancak hata raporlarından elde edilen kanıtlar, bu tür bir davranışın çok az kullanım alanı olduğunu gösteriyor.
Seçim için CSS özel özellikleri çalışmaya devam eder
Birçok site, CSS özel mülkleri kullanarak CSS vurgusu devralınmasını simüle eder. Özel mülkler, öğe ağacı aracılığıyla devralınır. Bu işlem, aşağıdaki gibi bir kod snippet'iyle "üst öğeden devralınır" sonucunu verir:
:root {
--selection-color: lightgreen;
}
::selection {
color: var(--selection-color);
}
.blue {
--selection-color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>
Hem Chrome 130 hem de 131'de seçildiğinde sonuç şu şekilde olur:
Burada her öğe, öğe ağacı aracılığıyla --selection-color mülkü için bir değer devralır ve metin seçildiğinde bu renk kullanılır. .blue sınıfına sahip öğeler ve alt öğeleri seçildiğinde mavi, diğer öğeler ise açık yeşil görünür. Birçok site bu tekniği kullanır ve Stack Overflow'da önerilen yöntem budur.
Uyumluluğu korumak için CSS vurgusu devralma modeli, ::selection (ve diğer CSS vurgusu sözde öğeleri) için özel özellik değerlerinin, kaynak öğeden (uygulandığı öğe) devralınacağını belirtir. Bu yöntemi kullanan siteler, Chrome 131'deki değişikliklerden etkilenmeyecektir.
::selection sözde öğesinde tanımlanan özel özellikler, çakışan devralma davranışlarını önlemek için yoksayılır. Özellikleri öğenin kendisinde tanımlamanız ve ardından sözde öğede bunlara referans vermeniz gerekir.
::selection vurguyu devralmayı devre dışı bırakmak için evrensel seçiciler
CSS özel özelliklerini kullanmayan siteler, seçili metin rengini ayarlamak için evrensel bir seçici kullanıyor olabilir. Örneğin, aşağıdaki CSS gibi:
::selection /* = *::selection (universal) */ {
color: lightgreen;
}
.blue::selection {
color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>
Hem Chrome 130 (ve önceki sürümler) hem de Chrome 131 (ve sonraki sürümler) sürümlerinde seçildiğinde sonuç şu şekilde olur:
CSS vurgusu devralma özelliği, ikinci vurgulanmış metnin ebeveyninden mavi rengini devralmasına neden olmaz. Bunun nedeni, evrensel seçicinin <em> öğesiyle eşleşmesi ve evrensel vurgu rengini (açık yeşil) uygulamasıdır.
CSS vurgusu devralma özelliğinden yararlanmak için evrensel seçiciyi yalnızca kökle eşleşecek şekilde değiştirin. Bu durumda, vurgu alt öğeleri tarafından devralınır:
:root::selection {
color: lightgreen;
}
.blue::selection {
color: blue;
}
<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>
Chrome 131'deki sonuç şu şekilde görünür:
Siteniz seçim renklerini değiştiriyor ancak özel mülkler kullanmıyorsa ::selection sözde sınıfı için evrensel bir seçiciniz olabilir. İyi haber, Chrome'daki bu değişiklikten sonra sitenizin çalışmayacağıdır. Ancak öne çıkan metinlerin devralınmasından kaynaklanan ergonomik avantajlardan yararlanamayacaksınız.
::target-text stili de değişiyor
Burada açıklanan tüm davranışlar ve değişiklikler, ::selection için olduğu gibi ::target-text sözde öğesi için de geçerlidir. Tek bir sitede birden fazla hedef metin stilinin kullanım alanları sınırlıdır ve özellik oldukça yeni olduğundan sitenizin ::target-text davranışında değişiklik olması pek olası değildir.
Bu değişiklik neden yapıldı?
Diğer vurgu sözde öğeleri geliştirilirken CSS Çalışma Grubu, vurgu devralma modeliyle devralmayı uygulamaya karar verdi.
Bu, ::selection sözde öğesinin spesifikasyonunda zaten mevcut olan bir yöntemdi ancak tarayıcılar bunu uygulamadı. Seçim dışı sözde öğeler, sözde öğenin bir özellikmiş gibi devralındığı vurgu devralma özelliğini kullanır. Yani öğeler, vurgulu metin sözde öğelerini doküman üst öğelerinden devralır.
Tüm vurgu sözde öğeleri arasında tutarlılık sağlamak amacıyla CSS Çalışma Grubu, ::selection için vurgu devralma özelliğini desteklediğini yineledi. Tarayıcılar, mevcut siteleri bozmamaya çalışırken yeni davranışı kullanıma sunmak için çalışıyor.
Deneyin
Aşağıdaki CodePen'de değişiklikler gösterilmektedir. Bu özelliği Chrome 131'de deneyin.