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. Bunun amacı, devralma için daha sezgisel bir model oluşturmak ve yakın zamanda eklenen ::highlight, ::spelling-error ve ::grammar-error sözde sınıflarla uyumlu olmaktır. Bu gönderide, çoğu site için görünür bir etkisi olmayacak olan değişiklik açıklanmaktadır.
Seçim stili
Seçili metnin görünümünün şekillendirilmesi, kullanıcılara anlam kazandırabilir. Örneğin, seçilen içeriğin amacı veya metni hiç seçememek. Örneğin, GitHub'da seçilen renkler, seçilen dizin yapısından farklı şekilde kodlanır.
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 öğesi ağacından devralınmasını (örneğin, font) veya hiç devralınmamasını (örneğin, 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ır. Chrome 130 ve önceki sürümleri bu modeli kullanır. Burada, vurgulanan metinle eşleşen ::selection yoktur. Bunun nedeni, .blue::selection özelliğinin yalnızca <em> öğesinin sahip olmadığı "blue" sınıfıyla eşleşmesidir.
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. Bu yöntem, CSS vurgulama devralma olarak adlandırılır. chrome://flags ürününde Deneysel Web Platformu özelliklerini etkinleştirerek bu özelliği önceki Chrome sürümlerinde deneyebilirsiniz.
Devralmayan seçim özelliklerini kullanan sitelerin seçilen metnin görünümünde değişiklikler görmesi olasıdır ancak hata raporlarından elde edilen kanıtlar, bu tür bir davranış için az sayıda kullanım alanı olduğunu göstermektedir.
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 sayede, aşağıdaki gibi bir kod snippet'iyle "üst öğeden devral" sonucu elde edilir:
: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 aşağıdaki sonuç ortaya çıkar:
Burada her öğe, öğe ağacı aracılığıyla --selection-color özelliği 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 açık yeşildir. 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 etkilenmez.
Devralma davranışlarının çakışmasını önlemek için ::selection sözde öğesinin kendisinde tanımlanan özel özellikler yoksayılır. Özellikleri öğenin kendisinde tanımlamanız ve ardından sözde öğede bunlara referans vermeniz gerekir.
::selection için Evrensel Seçiciler vurgulama devralmayı devre dışı bırak
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) için seçildiğinde bu sonuç ortaya çıkar:
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 şu ki, siteniz Chrome'da bu değişiklikle uyumlu olmayacaktır, ancak önemli anlar özelliği sayesinde elde edeceğiniz ergonomik avantajları kaçıracaksı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 vurgulu metin sözde öğeleri geliştirilirken CSS Çalışma Grubu, vurgulu metin 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, vurgu devralmayı kullanır. Burada sözde öğe, bir özellik gibi devralınır. Yani öğeler, vurgulu metin sözde öğelerini doküman üst öğelerinden devralır.
Tüm platformlarda tutarlılık sağlamak amacıyla, CSS Çalışma Grubu, ::selection için devralmayı vurgulamaya yönelik desteğin altını çiziyor. Tarayıcılar da yeni davranışı kullanıma sunarken mevcut siteleri bozmamaya çalışıyor.
Deneyin
Aşağıdaki CodePen'de değişiklikler gösterilmektedir. Bu özelliği Chrome 131'de deneyin.