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 yayın, değişikliği açıklasa da
çoğu site için gözle görülür bir etkiye neden olur.
Seçim stili
Seçilen metnin görünümünün stil özelliklerini biçimlendirerek kullanıcılara anlamı aktarabilirsiniz. Örneğin, amacı veya metnin hiç seçilememesi. Örneğin, GitHub'da seçilen renkler, seçilen dizinden farklı. inceleyeceğiz.
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ılar altında nasıl görüneceğini kontrol eder.
veya komut dosyası tabanlı işlemler olarak
belirlenebilir. Seçimin dışında yazım stilini de belirleyebilirsiniz
hataları (::spelling-error), dil bilgisi hataları (::grammar-error), URL'ye yerleştirilmiş metin
hedefler (::target-text) ve komut dosyası tarafından oluşturulan vurgulamalar (::highlight).
Her CSS mülkü 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
Şu belge parçasına dikkat edin:
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ümler bu modeli kullanır.
vurgulanan metinle eşleşen ::selection yok, çünkü .blue::selection
yalnızca <em> öğesinde bulunmayan "blue" sınıfına sahip öğeleri eşleştirir.
Chrome 131, öğelerin seçim davranışını devraldığı yeni davranışı etkinleştirir
anne veya babası olabilir. Yukarıdaki örnekte, <em> öğesi ::selection içermiyor
ile eşleştiği için <p> öğesinin seçim renklerini devralır. Bu
Bu yöntem CSS vurgulamayı devralma olarak adlandırılır. Bu özelliği önceki
Deneysel Web Platformu özelliklerini etkinleştirerek
chrome://flags.
Devralmayan seçim özelliklerini kullanan siteler değişiklikleri görebilir ancak hata raporlarındaki kanıtlar, bu değişimin mevcut olduğunu bu tür davranışların az sayıda kullanım alanı vardır.
Seçim için CSS Özel Özellikleri hâlâ çalışıyor
Birçok site, CSS özel mülkleri kullanarak CSS vurgusu devralınmasını simüle eder. Özel özellikler öğe ağacı üzerinden devralınır ve "üst öğeden devral" aşağıdaki gibi bir kod snippet'iyle gösterin:
: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, --selection-color özelliği için bir değer devralır
renklendirilir ve metin seçildiğinde bu renk kullanılır. Öğeler
.blue sınıfıyla ve alt öğeleri seçildiğinde mavi renkte olur ve diğer öğeler
öğeler açık yeşildir. Birçok site bu tekniği kullanır ve
Stack Overflow'da önerildi.
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 öğesinin kendisinde tanımlanan özel özellikler yoksayılır
korumayı kolaylaştırır.
öğesi olabilir ve daha sonra, sözde öğede bunlara başvuruda bulunabilir.
::selection için vurguyu devralmayı devre dışı bırakmak üzere evrensel seçiciler
CSS özel özelliklerini kullanmayan siteler, evrensel seçici kullanıyor olabilir değerini girin. Örneğin:
::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>
Bu, hem Chrome 130 (ve önceki sürümler) hem de Chrome 131'de seçildiğinde ortaya çıkan sonuçtur. (ve daha sonra):
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'de 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, sitenizin Chrome'daki bu değişiklikle birlikte bozulmayacağı,
kalıtımı öne çıkarmanın ergonomik avantajlarından yararlanma fırsatını kaçırmayın.
::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. Birden fazla veri türünün
tek bir sitede hedef metin stilleri sınırlıdır ve bu özellik oldukça yenidir.
Dolayısıyla sitenizin ::target-text davranışında değişiklik yapma olasılığı son derece düşük.
Bu değişiklik neden yapıldı?
Diğer vurgulayıcı öğe, geliştirme aşamasındayken CSS Working
Grup, vurgulama devralma modeliyle devralmayı uygulamak için çözüldü.
Bu, zaten ::selection spesifikasyonunda kullanılan yöntemdi
sözde öğe, ancak tarayıcılar bunu uygulamadı. Seçim dışı
sözde öğeler, sözde öğenin devralındığı vurgu devralma ayarını kullanır
bir mülk gibi düşünebilirsiniz. Yani öğeler, vurgulu metin sözde öğelerini doküman üst öğelerinden devralır.
CSS Çalışma Grubu, tüm vurgulu metin sözde öğelerinde tutarlılık sağlamak için ::selection vurgulu metin özelliğinin devralınmasını desteklediğini yineledi. Tarayıcılar, mevcut siteleri bozmamaya çalışırken yeni davranışı kullanıma sunmak için çalışıyor.
Deneyin
Değişiklikler aşağıdaki CodePen'de gösterilmektedir. Bu özelliği Chrome 131'de deneyin.