Metin Parçaları, URL parçasında bir metin snippet'i belirtmenizi sağlar. Bu tür bir metin parçasına sahip bir URL'ye gidildiğinde, tarayıcı bunu vurgulayabilir ve/veya kullanıcının dikkatini çekebilir.
Parça Tanımlayıcılar
Chrome 80 büyük bir sürümdü. Web İşçilerinde ECMAScript Modülleri, boş birleştirme, isteğe bağlı zincirleme ve daha fazlası gibi beklenen pek çok özelliği içeriyordu. Bu sürüm, her zamanki gibi Chromium blogundaki bir blog yayınında duyuruldu. Aşağıdaki ekran görüntüsünde blog yayınından bir alıntı görebilirsiniz.
id özelliğine sahip öğelerin etrafında kırmızı kutular bulunan Chromium blog yayını.Muhtemelen kendinize bu kırmızı kutuların ne anlama geldiğini soruyorsunuz. Geliştirici Araçları'nda aşağıdaki snippet'i çalıştırmanın sonucudur. id özelliği olan tüm öğeleri vurgular.
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
Daha sonra sayfa URL'sinin karmasında kullandığım parça tanımlayıcısı sayesinde kırmızı kutuyla vurgulanan herhangi bir öğeye derin bağlantı yerleştirebiliyorum. Bir kenardaki Ürün Forumlarımızda bize geri bildirim gönderin kutusuna derin bağlantı vermek istediğimi varsayarsak https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 URL'sini özel olarak oluşturabilirim.
Geliştirici Araçları'nın Öğeler panelinde görebileceğiniz gibi, söz konusu öğe HTML1 değerine sahip bir id özelliğine sahiptir.
id özelliğini gösteren Geliştirici Araçları.Bu URL'yi JavaScript'in URL() oluşturucusu ile ayrıştırırsam farklı bileşenler ortaya çıkıyor.
#HTML1 değerine sahip hash özelliğine dikkat edin.
new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
hash: "#HTML1"
host: "blog.chromium.org"
hostname: "blog.chromium.org"
href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
origin: "https://blog.chromium.org"
password: ""
pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
Yine de, bir öğenin id değerini bulmak için Geliştirici Araçları'nı açmam gerekmesi, sayfanın bu bölümüne blog yayınının yazarı tarafından bağlantı verilmesinin amaçlanma olasılığının çok açık olduğunu gösteriyor.
id içermeyen bir şeye bağlamak istersem ne olur? Web İşçilerindeki ECMAScript Modülleri başlığına bağlantı vermek istediğimi düşünelim. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, söz konusu <h1> bir id özelliğine sahip değil. Bu nedenle, bu başlığa bağlantı oluşturamam mümkün değil. Metin Parçalarının çözdüğü
sorun budur.
id içermeyen bir başlık gösteren Geliştirici Araçları.Metin Parçaları
Metin Parçaları teklifi, URL karmasında metin snippet'inin belirtilmesi için destek sağlar. Kullanıcı aracısı, böyle bir metin parçasına sahip bir URL'ye giderken bunu vurgulayabilir ve/veya kullanıcının dikkatini çekebilir.
Tarayıcı uyumluluğu
Bu özellik, güvenlik nedeniyle bağlantıların noopener bağlamında açılmasını gerektirir.
Bu nedenle, <a> sabit işaretlemenize rel="noopener" veya noopener öğesiniWindow.open() pencere işlevi özellikleri listenize eklemeyi unutmayın.
start
En basit biçimde, Metin Parçalarının söz dizimi şu şekildedir: Karma sembolü #, ardından :~:text= ve son olarak start, bağlantı vermek istediğim yüzde kodlamalı metni temsil eder.
#:~:text=start
Örneğin, Chrome 80'deki özellikleri duyuran blog yayınında Web İşçilerinde ECMAScript Modülleri başlığına bağlantı vermek istediğimi düşünelim. Bu durumda URL şöyle olur:
Metin parçası bu şekilde vurgulanır. Bağlantıyı Chrome gibi destekleyen bir tarayıcıda tıklarsanız metin parçası vurgulanır ve ekrana kaydırılır:
start ve end
Şimdi, yalnızca başlığı değil, Web Çalışanlarındaki ECMAScript Modülleri başlıklı bölümün tamamına bağlantı vermek istersem ne olur? Bölüm metninin tamamını yüzde olarak kodlamak, elde edilen URL'yi imkansız bir şekilde uzun hale getirir.
Neyse ki daha iyi bir yol var. Metnin tamamı yerine, start,end söz dizimini kullanarak istediğim metni çerçeveleyebilirim. Bu nedenle, istenen metnin başında yüzde olarak kodlanmış birkaç kelime ve istenen metnin sonunda virgülle , ayrılmış olarak yüzde olarak kodlanmış birkaç kelime belirtirim.
Şuna benzer:
start için ECMAScript%20Modules%20in%20Web%20Workers, ardından bir virgül , ve end olarak ES%20Modules%20in%20Web%20Workers. yazıyor. Chrome gibi destekleyen bir tarayıcıyı tıkladığınızda, bölümün tamamı vurgulanır ve görünüme kaydırılır:
Şimdi start ve end seçeneklerimi merak ediyor olabilirsiniz. Aslında, her bir yüzünde yalnızca iki kelime bulunan biraz daha kısa URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. de işe yarar. start ve end değerlerini önceki değerlerle karşılaştırın.
Bunu bir adım daha ileri taşırsam ve şimdi hem start hem de end için yalnızca tek bir kelime kullanırsam başım dertte olduğunu görebilirsiniz. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. URL'si artık daha da kısa ancak vurgulanan metin parçası artık başlangıçta istenen parça değil. Vurgulama, Workers. kelimesinin ilk geçtiği yerde durur. Bu doğru, ancak vurgulamak istediğim şey bu değil. Sorun, istenen bölümün geçerli tek kelimelik start ve end değerleriyle benzersiz şekilde tanımlanmamasıdır:
prefix- ve -suffix
start ve end için yeterince uzun değerler kullanmak, benzersiz bir bağlantı elde etmeye yönelik çözümlerden biridir.
Ancak bazı durumlarda bu mümkün değildir. Bir de sizce neden Chrome 80 sürümü blog yayınını
örnek olarak seçtim? Cevap, bu sürümde Metin Parçaları
kullanıma sunulmuştur:
Ekran görüntüsünde "metin" kelimesinin dört kez göründüğüne dikkat edin. Dördüncü tekrar ise
yeşil kod yazı tipiyle yazılır. Bu kelime ile bağlantı oluşturmak istersem start değerini text olarak ayarlarsınız. "Metin" kelimesi, tek bir kelime olduğundan end olamaz. Sırada ne var? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text zaten başlıkta bulunan "Metin" kelimesinin ilk geçtiği yerle eşleşir:
Neyse ki bunun bir çözümü var. Bu gibi durumlarda, bir prefix- ve -suffix belirtebilirim. Yeşil kod yazı tipi olan "metin"den önceki kelime "the", ardından gelen kelime ise "parametre"dir. "Metin" kelimesinin geçtiği diğer üç kelimeden hiçbirinin etrafında aynı kelimeler bulunmuyor. Bu bilgiye sahip olduğum için önceki URL'de ince ayar yapabilir, prefix- ve -suffix değerlerini ekleyebilirim. Diğer parametreler gibi onlarda da yüzdeyle kodlanmış olmaları gerekir ve birden fazla kelime içerebilirler.
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter.
Ayrıştırıcının prefix- ve -suffix öğelerini açık bir şekilde tanımlaması için bu öğelerin start ve isteğe bağlı end özelliklerinden bir kısa çizgi - ile ayrılması gerekir.
Tam söz dizimi
Metin Parçalarının tam söz dizimi aşağıda gösterilmiştir. (Köşeli parantezler isteğe bağlı bir parametreyi belirtir.)
Tüm parametrelerin değerlerinin yüzde olarak kodlanması gerekir. Bu, özellikle tire -, "ve" işareti & ve virgül , karakterleri için önemlidir. Bu nedenle, söz konusu karakterler metin yönergesi söz diziminin bir parçası olarak yorumlanmaz.
#:~:text=[prefix-,]start[,end][,-suffix]
prefix-, start, end ve -suffix özelliklerinin her biri yalnızca tek bir blok düzeyindeki öğedeki metinlerle eşleşir ancak tam start,end aralıkları birden çok bloğa ait olabilir. Örneğin, "The quick" (Hızlı) başlangıç dizesi tek bir kesintisiz blok düzeyindeki öğe içinde görünmediğinden :~:text=The quick,lazy dog aşağıdaki örnekte eşleşmeyecektir:
<div>
The
<div></div>
quick brown fox
</div>
<div>jumped over the lazy dog</div>
Ancak, aşağıdaki örnekle eşleşir:
<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>
Bir tarayıcı uzantısıyla Metin Parça URL'leri oluşturma
Metin Parçaları URL'lerini el ile oluşturmak, özellikle de bunların benzersiz olduğundan emin olmak gerektiğinde yorucudur. Gerçekten istiyorsanız spesifikasyonda bazı ipuçları bulunur ve Metin Parça URL'leri oluşturma adımları tam olarak listelenir. Metin Parçasına Bağlantı adı verilen bir açık kaynak tarayıcı uzantısı sunuyoruz. Bu uzantı, istediğiniz metne seçip ardından bağlam menüsünde "Seçilen Metne Bağlantıyı Kopyala"yı tıklayarak bağlantı oluşturmanızı sağlar. Bu uzantı aşağıdaki tarayıcılarda kullanılabilir:
- Google Chrome için Metin Parçasına Bağlantı
- Microsoft Edge için Metin Parçasına Bağlantı
- Mozilla Firefox için Metin Parçasına Bağlantı
- Apple Safari için Metin Parçasına Bağlantı
Bir URL'de birden fazla metin parçası
Bir URL'de birden fazla metin parçasının görünebileceğini unutmayın. Belirli metin parçalarının bir "ve" işaretiyle (&) ayrılması gerekir. Aşağıda, üç metin parçası içeren örnek bir bağlantı verilmiştir:
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet.
Öğe ve metin parçalarını karıştırma
Geleneksel öğe parçaları, metin parçalarıyla birleştirilebilir. Her ikisinin de aynı URL'de bulunmasında bir sakınca yoktur. Örneğin, sayfadaki orijinal metnin değişmesi ve metin parçasının artık eşleşmemesi gibi durumlarda anlamlı bir yedek sağlanmasında sorun yoktur. Ürün Forumlarımızda bize geri bildirim gönderin bölümüne yönlendiren URL'de https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. hem öğe parçası (HTML1) hem de metin parçası (text=Give%20us%20feedback%20in%20our%20Product%20Forums.) bulunur:
Parça yönergesi
Söz diziminin henüz açıklamadığım bir öğesi var: parça yönergesi :~:. Yukarıda gösterildiği gibi, mevcut URL öğesi parçalarıyla uyumluluk sorunlarını önlemek için Metin Parçaları spesifikasyonu, parça yönergesini sunar. Parça yönergesi, :~: kod dizisiyle ayrılmış URL parçasının bir parçasıdır. Bu, text= gibi kullanıcı aracısı talimatlarına ayrılmıştır ve yazar komut dosyalarının doğrudan etkileşimde bulunamaması için yükleme sırasında URL'den çıkarılır. Kullanıcı aracısı talimatları, yönergeler olarak da adlandırılır. Bu nedenle, somut örnekte text=, metin yönergesi olarak adlandırılır.
Özellik algılama
Desteği algılamak için document adresinde salt okunur fragmentDirective özelliğini test edin. Parça yönergesi, URL'lerin doküman yerine tarayıcıya yönelik talimatları belirtmek için kullandığı bir mekanizmadır. Gelecekteki kullanıcı aracısı talimatlarının, mevcut içerikte değişikliğe yol açma korkusu olmadan eklenebilmesi için yazar komut dosyası ile doğrudan etkileşimden kaçınılması amaçlanmıştır. Gelecekte bu tür eklemelere örnek olarak çeviri ipuçları verilebilir.
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
Özellik algılama, bağlantıların dinamik olarak oluşturulduğu (örneğin arama motorları tarafından) durumlarda, bunları desteklemeyen tarayıcılara metin parçaları bağlantısı sunmaktan kaçınmak için tasarlanmıştır.
Metin parçalarının stilini belirleme
Varsayılan olarak, tarayıcılar metin parçalarını mark (genellikle mark için sarı üzerinde siyah, mark için CSS sistem renkleri) ile aynı şekilde biçimlendirir. Kullanıcı aracısı stil sayfası, CSS'yi aşağıdaki gibi içerir:
:root::target-text {
color: MarkText;
background: Mark;
}
Gördüğünüz gibi tarayıcı, uygulanan vurgulamayı özelleştirmek için kullanabileceğiniz yapay bir seçici ::target-text gösterir. Örneğin, metin parçalarınızı kırmızı bir arka plan üzerinde
siyah metin şeklinde tasarlayabilirsiniz. Her zaman olduğu gibi, geçersiz kılma stilinizin erişilebilirlik sorunlarına neden olmaması için renk kontrastını kontrol etmeyi ve vurgunun, içeriğin geri kalanından görsel olarak öne çıktığından emin olun.
:root::target-text {
color: black;
background-color: red;
}
Çoklu doldurulabilirlik
Metin Parçaları özelliği bir ölçüde çoklu doldurulabilir. İşlevin JavaScript'te uygulandığı Metin Parçaları için yerleşik destek sağlamayan tarayıcılar için, polyfill tarafından dahili olarak kullanılan bir polyfill sunuyoruz.
Programatik Metin Parçası bağlantı oluşturma
polyfill, içe aktarıp Metin Parçası bağlantıları oluşturmak için kullanabileceğiniz bir fragment-generation-utils.js dosyası içerir. Bu, aşağıdaki kod örneğinde özetlenmiştir:
const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
let url = `${location.origin}${location.pathname}${location.search}`;
const fragment = result.fragment;
const prefix = fragment.prefix ?
`${encodeURIComponent(fragment.prefix)}-,` :
'';
const suffix = fragment.suffix ?
`,-${encodeURIComponent(fragment.suffix)}` :
'';
const start = encodeURIComponent(fragment.textStart);
const end = fragment.textEnd ?
`,${encodeURIComponent(fragment.textEnd)}` :
'';
url += `#:~:text=${prefix}${start}${end}${suffix}`;
console.log(url);
}
Analiz amacıyla Metin Parçaları elde etme
Parçayı çok sayıda site yönlendirme için kullanır. Bu nedenle, tarayıcılar bu sayfaları bozmamak için Metin Parçalarını ayırır. Örneğin, analiz amacıyla sayfaların Metin Parçası bağlantılarının gösterilmesi için gerekli bir gereklilik söz konusudur, ancak önerilen çözüm henüz uygulanmamıştır. Şu an için geçici bir çözüm olarak, istenen bilgileri almak üzere aşağıdaki kodu kullanabilirsiniz.
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
Güvenlik
Metin parçası yönergeleri, yalnızca kullanıcı etkinleştirmesinin sonucu olan tam (aynı sayfa olmayan) gezinmelerde çağrılır.
Ayrıca, hedeften farklı bir kaynaktan gelen gezinmeler de gezinmenin, hedef sayfanın yeterince izole edildiğinin bilinmesi için bir noopener bağlamında gerçekleşmesini gerektirir. Metin parçası yönergeleri yalnızca ana çerçeveye uygulanır. Bu, metnin iframe'ler içinde aranamayacağı ve iframe gezinmesinin bir metin parçasını çağırmayacağı anlamına gelir.
Gizlilik
Metin Parçaları spesifikasyonu uygulamalarının, sayfada bir metin parçası bulunsa da bulunmasa da sızdırılmaması önemlidir. Öğe parçaları tamamen orijinal sayfa yazarının kontrolünde olsa da metin parçaları herkes tarafından oluşturulabilir. Yukarıdaki örnekte, <h1> içinde id olmadığı için Web İşçileri İçindeki ECMAScript Modülleri başlığına bağlantı oluşturmanın hiçbir yolu olmadığını unutmayın. Ancak, ben dahil olmak üzere hiç kimse, metin parçasını dikkatli bir şekilde oluşturarak herhangi bir yere nasıl bağlantı oluşturabiliyordu?
evil-ads.example.com kötü amaçlı bir reklam ağı işlettiğimi hayal edin. Ayrıca, reklam iframe'lerimden birinde, kullanıcı reklamla etkileşim kurduktan sonra dinamik olarak dating.example.com için bir Metin Parça URL'si dating.example.com#:~:text=Log%20Out ile birlikte gizli bir çapraz kaynak iframe'i oluşturduğumu hayal edin. "Çıkış" metni bulunursa kurbanın şu anda kullanıcı profili oluşturmak için kullanabileceğim dating.example.com hizmetine giriş yapmış olduğunu biliyorum. Naif Metin Parçaları uygulaması, başarılı bir eşleşmenin odaklanma değişikliğine neden olması gerektiğine karar verebileceğinden, evil-ads.example.com tarihinde blur etkinliğini dinleyerek eşleşmelerin ne zaman gerçekleştiğini öğrenebilirim. Chrome'da Metin Parçaları'nı yukarıdaki senaryonun yaşanamayacağı şekilde uyguladık.
Diğer bir saldırı, kaydırma konumuna dayalı olarak ağ trafiğinden yararlanmak olabilir. Kurbanımın ağ trafiği günlüklerine, örneğin bir şirket intranetinin yöneticisi olarak erişimim olduğunu varsayalım. İnsan kaynaklarıyla ilgili uzun bir belgenin , Daha sonra belge yüklemenin, örneğin tükenmişlik öğesinin yanındaki izleme pikselinin yüklenmesiyle birlikte geçici olarak meydana geldiğine karar verirsem, intranet yöneticisi olarak bir çalışanın, çalışanın gizli olduğunu ve kimseye görünür olmadığını varsaymış olabileceği, :~:text=burn%20out içeren bir metin parçası bağlantısını tıkladığını belirleyebilirim. Bu örneğin başlangıçta bir şekilde tasarlanmış olması ve bu örneğin kötüye kullanımının çok belirli ön koşulların karşılanmasını gerektirdiğinden, Chrome güvenlik ekibi gezinmede kaydırma işlevini uygulamanın riskini yönetilebilir olarak değerlendirmiştir.
Diğer kullanıcı aracıları, bunun yerine manuel kaydırma kullanıcı arayüzü öğesi göstermeye karar verebilir.
Chromium, kapsam dışında kalmak isteyen siteler için kullanıcı aracılarının Metin Parça URL'lerini işlememesi için gönderebileceği bir Doküman Politikası üst bilgi değerini destekler.
Document-Policy: force-load-at-top
Metin parçalarını devre dışı bırakma
Bu özelliği devre dışı bırakmanın en kolay yolu, HTTP yanıtı başlıkları ekleyebilen bir uzantı kullanmaktır. Örneğin, ModHeader (bir Google ürünü değildir) için aşağıdaki gibi bir yanıt (istek değil) başlığı eklenir:
Document-Policy: force-load-at-top
Kapsam dışında kalmayı seçmenin daha karmaşık bir yolu da ScrollToTextFragmentEnabled kurumsal ayarını kullanmaktır.
Bu işlemi macOS'te yapmak için aşağıdaki komutu terminale yapıştırın.
defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
Windows'da, Google Chrome Enterprise Yardımı destek sitesindeki dokümanları uygulayın.
Web aramasında metin parçaları
Google arama motoru bazı aramalar için ilgili web sitesinden içerik snippet'i ile hızlı bir yanıt veya özet sağlar. Bu öne çıkan snippet'lerin soru biçiminde yapılan aramalarda görünme olasılığı daha yüksektir. Öne çıkan snippet'i tıklamak kullanıcıyı, doğrudan kaynak web sayfasında öne çıkan snippet metnine yönlendirir. Bu, otomatik olarak oluşturulan Metin Parçası URL'leri sayesinde çalışır.
Sonuç
Metin Parçaları URL'si, web sayfalarında rastgele bir metne bağlantı vermek için güçlü bir özelliktir. Akademik topluluk, bunu son derece doğru alıntı veya referans bağlantıları sağlamak için kullanabilir. Arama motorları, sayfalardaki metin sonuçlarına derin bağlantı oluşturmak için bunu kullanabilir. Sosyal ağ siteleri, kullanıcıların erişilemeyen ekran görüntüleri yerine web sayfasındaki belirli bölümleri paylaşmalarını sağlamak için bu özelliği kullanabilir. Umarım Metin Parça URL'lerini kullanmaya başlarsınız ve bunları benim kadar yararlı bulursunuz. Link to Text Fragment tarayıcı uzantısını yüklediğinizden emin olun.
İlgili bağlantılar
- Spesifikasyon taslağı
- TAG İncelemesi
- Chrome Platform Durum girişi
- Chrome izleme hatası
- Niyet to Ship iş parçacığı
- WebKit-Dev ileti dizisi
- Mozilla standartları konum iş parçacığı
Teşekkür
Metin Parçaları, Grant Wang'in katkılarıyla Nick Burris ve David Bokan tarafından uygulandı ve belirtildi. Bu makalenin kapsamlı incelemesi için Joe Medley'ye teşekkür ederiz. Greg Rakozy'nin Unsplash'teki lokomotif resmi.