- CSS Özel Vurgulama API'si, geliştiricilerin DOM yapısını değiştirmeden belirli metin bölümlerini biçimlendirmelerini sağlar.
- Range ve Highlight nesnelerini HighlightRegistry ile birleştirerek, özel görsel işaretleyiciler programatik olarak uygulanabilir.
- ::highlight() sözde öğesi, kayıtlı vurguları bağımsız olarak biçimlendirmek için özel bir CSS arayüzü sağlar.
- Bu yaklaşım, DOM ağırlığını azaltarak performansı optimize eder ve sarmalayıcı öğelerin eklenmesiyle ilişkili düzen kaymalarını önler.
Sayfadaki belirli kelimeleri vurgulamaya çalışırken her şeyi bir sürü kelimeyle çevrelemek zorunda kalmanın verdiği hayal kırıklığını hiç yaşadınız mı? <span> or <mark> Etiketler mi? Performans açısından tam bir kabus ve dürüst olmak gerekirse CSS düzeninizi bozabilir. İşte tam da bu noktada devreye giriyor... CSS Özel Vurgu API'sı Bu özellik, HTML yapısına dokunmadan dinamik olarak metin işaretlemesi gereken herkes için oyunun kurallarını değiştiren bir unsur olarak devreye giriyor.
Esasen, bu API zaten bildiğimiz şeyleri genişletiyor, örneğin ::selection or ::spelling-errorAma bu bize krallığın anahtarlarını veriyor. Hangi öğelerin vurgulanacağına tarayıcının karar vermesine güvenmek yerine, Artık istediğiniz metin aralıklarını tanımlayabilirsiniz. ve onları istediğiniz gibi şekillendirebilirsiniz. Bu, arama sonuçları, ortak düzenleme veya sözdizimi vurgulama gibi şeyleri DOM'a gereksiz ağırlık eklemeden ele almanın çok daha temiz bir yoludur.
Marka öğesinden neden uzaklaşıyoruz?
Uzun bir süre, <mark> `<pre>` etiketi, metni vurgulamak için en çok tercih edilen yöntemdi. Temel anlambilim açısından harika olsa da, oldukça can sıkıcı bazı sınırlamaları var. Örneğin, DOM'a düğüm eklemek, maliyetli yerleşim yeniden hesaplamalarını tetikleyebilir.Bu durum, özellikle animasyonlar sırasında sitenizin yavaş çalışmasına neden olabilir. Ancak asıl sorun, vurgulamanız gereken metinler olduğunda başlar. birden fazla HTML öğesine yayılırBir etiketi açık bırakıp başka bir öğenin içinde kapatırsanız geçersiz HTML oluşturursunuz, bu nedenle vurgulama işlemini birkaç küçük parçaya bölmek zorunda kalırsınız ki bu da oldukça hantal bir yöntemdir.
API'nin temel kavramları
Bunu çalıştırmak için birkaç özel nesneye aşina olmanız gerekiyor. İlk olarak, şunlar var: Aralık nesnesiBu da temelde belge içinde "buradan başla ve orada bitir" diyen bir işaretçi görevi görüyor. Sonra da elimizde şu var: Nesneyi vurgulaBu, bir veya daha fazla ürün yelpazesini bir araya getirerek tek bir stilistik grup olarak ele alınmalarını sağlar. Bunların tümü tarafından yönetilir. Öne Çıkanlar Kayıt Defteri (erişim yoluyla) CSS.highlightsBu uygulama, öne çıkan yerlerinizi benzersiz bir isim altında kaydettiğiniz bir harita gibi işlev görür.
Adım adım uygulama
Ekranda özel bir vurgu oluşturmak, dört basit adımdan oluşan bir işlemdir. İlk olarak, Range nesnelerinizi oluşturun. JavaScript'te. Bunu, bir metin düğümünü tanımlayarak ve aşağıdaki gibi yöntemler kullanarak yapabilirsiniz. setStart hem de setEnd Tam olarak hangi karakterleri hedeflemek istediğinizi belirlemek için. Eğer bir öğenin tamamını kapsamanız gerekiyorsa, setStartBefore hem de setEndAfter en iyi arkadaşların.
Aralık belirlendikten sonra, ikinci adım şudur: yeni bir Highlight nesnesi oluşturunBuradaki harika bir özellik, tek bir Vurgulama alanının birden fazla aralığı tutabilmesidir. Bu, bir kelimenin her geçtiği yerde aynı rengi paylaşmasını istediğiniz "sayfada ara" özelliği için mükemmeldir. Bundan sonra, öne çıkanları kaydet kullanma CSS.highlights.set('my-name', highlight)Bu, vurgulamanıza CSS motorunun gerçekten görebileceği özel bir tanımlayıcı kazandırır.
Son dokunuş, stili uygulamaktır. Bunun için şunları kullanırsınız: ::highlight(my-name) sözde eleman CSS dosyanızda. Bu standart bir öğe olmadığı için birkaç özellikle sınırlısınız, ancak kolayca değiştirebilirsiniz. arka plan rengi veya metin süslemesi Bu aralıkları daha dikkat çekici hale getirmek için. Örneğin, arama sonuçları için parlak sarı bir arka plan veya ortak bir düzenleyicide silinen metin için üstü çizili bir metin kullanabilirsiniz.
Gelişmiş kullanım ve performans avantajları
En etkileyici kullanım örneklerinden biri kod için sözdizimi vurgulamasıdır . Geleneksel olarak, Prism.js gibi kütüphaneler, belirteçleri renklendirmek için binlerce span eklerdi; bu da DOM'u inanılmaz derecede ağırlaştırabilirdi. Özel Vurgulama API'sini kullanarak, JavaScript'teki kodu belirteçlere ayırabilir ve sayfaya tek bir öğe eklemeden stiller uygulayabilirsiniz . Bu, DOM'u sade tutar ve tarayıcının büyük belgelerde tıkanmasını önler.
Vurgulanan öğeyi anında değiştirmeniz gerekirse, baştan başlamanıza gerek yok. Çünkü Vurgulama nesnesi Aralık'a bağlıdır. sadece Menzil sınırlarını güncellemek Ekrandaki görsel vurgu otomatik olarak güncellenecektir. Eğer bundan kurtulmak istiyorsanız, belirli bir aralığı aşağıdaki yöntemle kaldırabilirsiniz. delete Highlight nesnesi üzerindeki yöntem veya Tüm kayıt dosyasını silin. kullanma CSS.highlights.delete.
Erişilebilirlik ve Tarayıcı Desteği
Unutmamak gerekir ki bu öne çıkan noktalar tamamen görseldir ve içsel anlamsal anlam sağlamaz Ekran okuyuculara yönelik. Erişilebilirliğin en önemli öncelik olduğu bir şey geliştiriyorsanız, şunu kullanmalısınız: type Vurgulama arayüzünün bir özelliği olup, vurgulamanın yazım hatası mı yoksa dilbilgisi hatası mı olduğunu belirtmek için kullanılır, ancak bu özelliğe verilen destek değişiklik gösterebilir. Emin değilseniz, Öne çıkan özelliklerinizi ARIA etiketleriyle tamamlayın. Ya da anlamsal HTML en doğru yol.
Uyumluluk açısından, bu API son zamanlarda büyük bir ivme kazandı. Chrome, Edge ve Safari'de zaten sorunsuz çalışıyor ve Firefox da (yaklaşık 140. sürümden itibaren) bu gruba katıldı ; bu da artık çoğu üretim ortamı için uygun olduğu anlamına geliyor. Eski tarayıcılarda çökmeleri önlemek için, kodunuzu çalıştırmadan önce CSS nesnesinde 'highlights' özelliğinin olup olmadığını kontrol etmek akıllıca bir hareket olacaktır .
Bu API, görsel sunumu HTML yapısından ayırarak metin manipülasyonunu ele alma şeklimizi temelden değiştiriyor. Geliştiriciler, Range ve Highlight nesnelerini kullanarak, DOM'u hafif ve performansı yüksek tutarken gerçek zamanlı arama ve sözdizimi renklendirmesi gibi karmaşık özellikleri uygulayabilir ve böylece geleneksel sarmalayıcı öğelerin sınırlamalarını etkili bir şekilde aşabilirler.
