Daha önce hiç kimsenin bağlantı kurmadığı yerlerde kalın bağlantı oluşturun: Metin Parçaları

Metin Parçaları, URL parçasında bir metin snippet'i belirtmenize olanak tanır. Böyle bir metin parçasına sahip bir URL'ye gidildiğinde, tarayıcı ve/veya kullanıcının dikkatine sunar.

Thomas Steiner

Parça Tanımlayıcılar

Chrome 80 büyük bir sürümdü. Android'de Android ve iOS gibi heyecanla beklenen Web Çalışanlarında ECMAScript Modülleri, nullish birleştirme, isteğe bağlı zincirleme ve daha fazlası. Yayın her zamanki gibiydi bir blog yayınımızı Chromium blogu. Aşağıdaki ekran görüntüsünde blog yayınının bir alıntısını görebilirsiniz.

id özelliğine sahip öğelerin etrafında kırmızı kutular bulunan Chromium blog yayını.

Muhtemelen kendinize tüm kırmızı kutuların ne anlama geldiğini soruyorsunuzdur. Bu sorunlar, snippet'i kullanabilirsiniz. id özelliğine sahip tüm öğeleri vurgular.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

Kırmızı kutuyla vurgulanan her öğeye bir derin bağlantı yerleştirebilirim. Bunun için parça tanımlayıcısı Daha sonra bunu URL'sini ekleyin. Ürün Forumları kutusunun altındaki bir yandan da URL'yi manuel olarak hazırlayıp https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1. Geliştirici Araçları'nın Öğeler panelinde görebileceğiniz gibi, söz konusu öğenin bir id öğesi var özelliğini HTML1 değerine ayarlayın.

Bir öğenin id değerini gösteren Geliştirici Araçları.

Bu URL'yi JavaScript'in URL() oluşturucusuyla ayrıştırırsam farklı bileşenler görüntülenir. #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: ""
}
*/

Bir öğenin id ayrıntısını bulmak için Geliştirici Araçları'nı açmam gerekti, ancak bu çok önemli bir şey. söz konusu bölümde, söz konusu bölümü kullanan yazar tarafından blog yayınına bakın.

id olmadan bir şeye bağlantı vermek istersem ne olur? Diyelim ki ECMAScript Modüllerine başlıklı bölüme bakın. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, söz konusu <h1> bir id özelliğim var, yani bu başlığa bağlamam mümkün değil. Proje yönetiminin Metin Parçaları çözer.

id içermeyen bir başlığı gösteren Geliştirici Araçları.

Metin Parçaları

Metin Parçaları teklifi, URL karmasında bir metin snippet'i belirterek Böyle bir metin parçasına sahip bir URL'ye gidildiğinde bunu vurgulayabilir ve/veya kullanıcının dikkatini çekebilir.

Tarayıcı uyumluluğu

Tarayıcı Desteği

• 89
• 89
• x
• x

Kaynak

Başarılı: Bu bağlantılar, Twitter gibi bazı yaygın hizmetlerin kullandığı istemci tarafı yönlendirmelerinde sunulduğunda çalışmıyordu. Bu sorun crbug.com/1055455 olarak takip ediliyordu ve artık düzeltildi. Düzenli HTTP yönlendirmeleri her zaman sorunsuz çalışıyordu.

Bu özellik, güvenlik nedeniyle bağlantıların noopener bağlamı. Bu nedenle, Ürün İş Listesi’ne rel="noopener" <a> sabit işaretleme veya ekleme noopener Window.open() pencere işlevi özellikleri listesi.

start

En basit şekliyle Metin Parçalarının söz dizimi şöyledir: Karma simgesi # ve ardından gelen :~:text= ve son olarak, start yüzde kodlamalı metin gireceğim.

#:~:text=start

Örneğin, Web Çalışanlarında ECMAScript Modülleri başlığına bağlantı oluşturmak istediğimi Chrome 80'deki özellikleri duyuran blog yayını bu durumda URL şöyle olur:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

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 görünüm içine kaydırır:

Görünüme kaydırılan ve vurgulanan metin.

start ve end

Şimdi, Web Çalışanlarında ECMAScript Modülleri başlıklı tüm bölümün başlığı mı? Bölümdeki tüm metnin yüzde kodlaması, sonuç olarak elde edilecek URL'nin büyük ölçüde uzundur.

Neyse ki daha iyi bir yol var. Metnin tamamını oluşturmak yerine, istenilen metni çerçevelemek için start,end söz dizimi. Bu yüzden, başlangıçta yüzde olarak kodlanmış birkaç kelime ve istenen metnin sonunda, birbirinden ayrılmış yüzde olarak kodlanmış birkaç kelime virgül , olacak şekilde yazın.

Bu şöyle görünür:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

start için ECMAScript%20Modules%20in%20Web%20Workers ve ardından virgül , gelir ES%20Modules%20in%20Web%20Workers. tarafından end olarak. Destekleyen bir tarayıcıyı tıkladığınızda gibi, tüm bölüm vurgulanır ve görünüme kaydırılır:

Görünüme kaydırılan ve vurgulanan metin.

Şimdi start ve end seçimimi merak ediyor olabilirsiniz. Aslına bakarsanız, biraz daha kısa olan URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. yalnızca iki kelime eklemek de işe yarardı. start ve end verilerini şununla karşılaştır: önceki değerlere sahiptir.

Bir adım daha ileri taşırsam ve şimdi hem start hem de end için tek bir kelime kullanırsam dert etmeyin. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. artık daha da kısa, ancak vurgulanan metin parçası artık orijinal olarak istenen parça değil. İlgili içeriği oluşturmak için kullanılan vurgulama, Workers. kelimesinin ilk oluşumunda durur. Bu, doğru, ancak benim göstermeyi hedefler. Sorun, istenen bölümün tek kelimelik mevcut start ve end değerleri:

Görünüme kaydırılmış ve vurgulanmış istenmeyen metin parçası.

prefix- ve -suffix

start ve end için yeterince uzun değerler kullanmak, benzersiz bağlantı elde etmeye yönelik bir çözümdür. Ancak bazı durumlarda bu mümkün değildir. Ayrıca ben neden Örneğin, Chrome 80 sürümü blog yayınını gösterebilir miyim? Bu sorunun cevabı şudur: Bu yayında "Metin Parçaları" tanıtıldı:

Parçalar duyurusu blog yayını alıntısı

"Metin" kelimesinin üzerindeki ekran görüntüsünde bunun nasıl olduğuna dikkat edin dört kez görünür. Dördüncü olay yazı tipiyle yazılmıştır. Bu kelimeyle bağlantı oluşturmak isteseydim start Hedef: text. "Metin" kelimesinden beri tek bir kelime olduğu için end olamaz. Şimdi ne yapmalıyım? İlgili içeriği oluşturmak için kullanılan URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text "Metin" sözcüğünün ilk oluşumuyla eşleşir zaten başlıklarda:

"Metin"in ilk oluşumundaki metin parçası eşleşmesi.

ziyaret edin.

Dikkat: Metin parçası eşleştirmesinin büyük/küçük harfe duyarlı olmadığını unutmayın.

Neyse ki bunun bir çözümü var. Böyle durumlarda bir prefix​- ve bir -suffix belirtebilirim. İlgili içeriği oluşturmak için kullanılan yeşil kod yazı tipinin önündeki kelime "metin" "the", ve ardından gelen kelime "parametre"dir. Hiçbiri "metin" sözcüğünün bulunduğu diğer üç aynı etrafında şekillenen kelimeler içerir. Bununla silahlı önceki URL'yi ayarlayıp prefix- ve -suffix öğelerini ekleyebilirim. Diğerleri gibi parametrelerin de yüzde kodlu olması gerekir ve birden fazla kelime içerebilirler. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter seçeneğine dokunun. Ayrıştırıcının prefix- ve -suffix öğelerini açıkça tanımlamasını sağlamak için bunların ayrılması gerekir. start ve isteğe bağlı end arasından tireyle - ekleyin.

Metin parçasının istenen "text" oluşumunda eşleşmesi.

Söz diziminin tamamı

Metin Parçalarının tam söz dizimi aşağıda gösterilmektedir. (Kare parantezler, isteğe bağlı parametreleri belirtir.) Tüm parametrelerin değerlerinin yüzde olarak kodlanmış olması gerekir. Bu, özellikle tire ve -, ve işareti & ve virgül , karakterleri olduğundan, bunlar metnin bir parçası olarak yorumlanmaz yönerge sözdizimi.

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-, start, end ve -suffix özelliklerinin her biri, yalnızca tek bir içindeki metinle eşleşir blok düzeyinde öğe ancak tam start,end aralıkları birden fazla bloğu kapsayabilir. Örneğin, Aşağıdaki örnekte :~:text=The quick,lazy dog, dize "Hızlı" Blok düzeyindeki tek bir kesintisiz öğe içinde görünmez:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

Ancak aşağıdaki örnekte eşleşir:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

Tarayıcı uzantısıyla Metin Parçası URL'leri oluşturma

Metin Parçalı URL'leri elle oluşturmak yorucu olabilir. Özellikle de URL'lerin benzersizdir. Gerçekten isterseniz, spesifikasyonda bazı ipuçları bulunabilir ve Metin Parça URL'leri oluşturma adımları hakkında daha fazla bilgi edinin. Google tarafından sağlanan Metin Parçası Bağlantısı ile şunları yapabilirsiniz: bağlantısını tıklayarak herhangi bir metne bağlayın ve ardından "Seçilen Metne Kopyala"yı tıklayarak bu bağlamda tıklayın. Bu uzantı aşağıdaki tarayıcılarda kullanılabilir:

• Google Chrome için metin parçasına bağlantı oluşturma
• Microsoft Edge için metin parçasına bağlantı oluşturma
• Mozilla Firefox için Metin Parçası Bağlantısı
• Apple Safari için metin parçasına bağlantı

ziyaret edin.

Metin Bölümüne Bağlantı Oluştur tarayıcı uzantısı.

Bir URL'de birden çok metin parçası

Tek bir URL'de birden çok metin parçasının görünebileceğini unutmayın. Belirli metin parçalarının ve işareti (&) ile ayrılır. Üç metin parçasına sahip örnek bir bağlantı aşağıda 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.

Bir URL'de üç metin parçası.

Öğe ile metin parçalarını karıştırma

Geleneksel öğe parçaları, metin parçalarıyla birleştirilebilir. Hem kullanarak anlamlı bir yedek sağlamasını isteyebilirsiniz. Örneğin, sayfadaki orijinal değiştirilir ve metin parçası artık eşleşmez. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. Bize Ürün Forumları bölümü hem bir öğe parçasını (HTML1) hem de bir metin parçasını içerir (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Hem öğe parçası hem de metin parçasıyla bağlantı oluşturma.

Snippet yönergesi

Söz diziminde henüz açıklamadığım bir öğe var: :~: parça yönergesi. Kaçınılması gerekenler yukarıda gösterildiği gibi, mevcut URL öğesi parçalarıyla ilgili Metin Parçaları spesifikasyonu, parçayı tanıtır yönergesini inceleyin. Parça yönergesi, URL parçasının kod sırası ile ayrılmış bir bölümüdür :~: text= gibi kullanıcı aracısı talimatları için ayrılmıştır ve URL'den çıkarılır yazar komut dosyalarının dosyayla doğrudan etkileşimde bulunamaması için yükleme sırasında. Kullanıcı aracısı talimatları yönergeler olarak da adlandırılır. Somut örnekte, text= bu nedenle metin yönergesi olarak adlandırılır.

Özellik algılama

Desteğin tespit edilmesi için document üzerinde salt okunur fragmentDirective özelliğini test edin. Parça yönergesi, URL'lerin uygulayacaksınız. Gelecekteki kullanıcı aracısının, yazar komut dosyasıyla doğrudan etkileşimde bulunmasını önlemek içindir. Talimatlar, mevcut içerikte zarar verici değişiklikler yapma korkusu olmadan eklenebilir. Bir çeviri ipuçları, ileride yapılabilecek bu tür eklemelere örnek olarak verilebilir.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

Not: Chrome 80 ile Chrome 85 arasında fragmentDirective özelliği Location.prototype tarihinde tanımlandı. Bu değişiklikle ilgili ayrıntılar için WICG/scroll-to-text-fragment#130 sayfasına göz atın.

Özellik algılama, temel olarak bağlantıların dinamik olarak oluşturulduğu (örneğin, arama motorları) kullanımını desteklemez.

Metin parçalarının stilini belirleme

Varsayılan olarak, tarayıcılar metin parçalarının stil özelliklerini aynı stilde biçimlendirirler. mark (genellikle sarı üzerine siyah, CSS sistem renkleri (mark için). Kullanıcı aracısı stil sayfası şuna benzer CSS içerir:

:root::target-text {
  color: MarkText;
  background: Mark;
}

Gördüğünüz gibi, tarayıcı sanal bir seçici Şu işlemler için kullanabileceğiniz ::target-text: özelleştirilebilir. Örneğin, metin parçalarınızı siyah renkte tasarlayabilirsiniz bir metin görürsünüz. Her zamanki gibi renk kontrastını kontrol etme Böylece geçersiz kılma stiliniz erişilebilirlik sorunlarına neden olmaz ve vurgulamanın gerçekten görsel olarak içeriğin geri kalanından farklılık gösterir.

:root::target-text {
  color: black;
  background-color: red;
}

Çoklu doldurulabilirlik

Metin Parçaları özelliğinde bir ölçüde çoklu doldurulabilir. Google tarafından polyfill, Google'ın geliştirdiği uzantıyı , işlevin JavaScript'te uygulandığı Metin Parçaları için yerleşik destek sağlar.

Programatik Metin Parçası bağlantısı oluşturma

polyfill bir dosya içerir fragment-generation-utils.js öğesini içe aktarabilir ve metin parçası bağlantıları oluşturmak için kullanabilirsiniz. Bu ana hatlarıyla aşağıdaki kod örneğinde bulabilirsiniz:

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ı Edinme

Çok sayıda site, yönlendirme için bu parçayı kullanır. Bu nedenle tarayıcılar, metin parçalarını çıkarır düzgün şekilde kapatır. Bir kabul edilen ihtiyaç sayfa metin parçalarının bağlantılarını görüntülemenizi sağlar. Örneğin, analiz amacıyla, ancak önerilen çözüm henüz uygulanmamıştır. Şimdilik geçici bir çözüm olarak, aşağıdaki kodu kullanarak bilgileri girin.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

Güvenlik

Metin parçası yönergeleri yalnızca a kullanıcı etkinleştirmesi. Ayrıca, hedeften farklı bir kaynaktan gelen gezinmeler için gezinmenin otomatik olarak noopener bağlamı, örneğin hedef sayfanın yeterince izole olduğunun bilinmesi gerekir. Metin parçası yönergeleri yalnızca ana çerçeveye uygulanır. Bu, metnin iframe'lerde ve iframe'de aranamayacağı anlamına gelir gezinme bir metin parçasını çağırmaz.

Gizlilik

Metin Parçaları spesifikasyonu uygulamalarının, bir metnin metin parçası veya parçası olup olmadığını kontrol edin. Öğe parçaları tamamen oluşturan kullanıcılar, metin parçalarının herkes tarafından oluşturulabilir. Yukarıdaki örneğimde bunun nasıl olduğunu Web Çalışanlarında ECMAScript Modülleri başlığına bağlantı kurmak için hiçbir yol yoktu, çünkü <h1> id yok ama ben de dahil herkesin nasıl değiştiriyorsunuz?

Kötü bir reklam ağı yönettiğimi evil-ads.example.com düşünün. Daha fazla diyelim ki iframe'ler Metin ile dating.example.com için dinamik olarak gizli bir kaynaklar arası iframe oluşturdum Parça URL'si dating.example.com#:~:text=Log%20Out Kullanıcı reklamla etkileşime geçtiğinde. "Çıkış yap" bulundu, kurbanın şu anda dating.example.com adresine giriş yaptım. Bunu kullanıcı profili oluşturmak için kullanabilirim. Naif bir metinden beri Parça uygulaması, başarılı bir eşlemenin odak değişimine neden olacağına, özellikle de evil-ads.example.com blur etkinliğini dinleyip eşleşmenin ne zaman olduğunu öğrenebiliyorum. İçinde Chrome için, Metin Parçalarını yukarıdaki senaryonun gerçekleşemeyeceği şekilde uyguladık.

Diğer bir saldırı, kaydırma konumuna göre ağ trafiğini kötüye kullanmak olabilir. Şuraya erişimim olduğunu varsayalım: ağ trafiği günlükleri oluşturabilirim. Şimdi burada hayal edin. uzun bir insan kaynakları dokümanı, Sorun Yaşadığınızda Yapılması Gerekenler ve ardından tükenmişlik, anksiyete vb. gibi hastalıklarla ilgili sorunları bildirin. liste'ye dokunun. Daha sonra, belgenin yüklenmesinin tükenmiş öğesinin yanındaki izleme pikseli kullanıyorsanız, intranet yöneticisi olarak bu bir çalışan, çalışanın yaptığı :~:text=burn%20out gibi bir metin parçası bağlantısını tıkladı. olduğunu ve kimsenin göremediğini düşünmüş olabilir. Bu örnek biraz Bununla birlikte, bu teknolojinin kullanılması çok spesifik ön koşulların karşılanmasını gerektirdiğinden, Chrome güvenlik ekibi, gezinme sırasında kaydırmanın uygulanması riskini değerlendirdi. Diğer kullanıcı aracıları bunun yerine bir manuel kaydırma kullanıcı arayüzü öğesi göstermeye karar verebilir.

Chromium, kapsam dışında kalmak isteyen siteler için bir Belge Politikası kullanıcı aracılarının Metin Parçası URL'lerini işlememesi için gönderebilecekleri üstbilgi değeri.

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ı yerleştirebilen bir uzantı kullanmaktır. başlıkları veya bölümleri ModHeader (Google ürünü değil) kullanarak bir yanıt (istek değil) üstbilgisini aşağıdaki gibi ekleyin:

Document-Policy: force-load-at-top

Devre dışı bırakmanın daha karmaşık bir yolu, kurumsal ScrollToTextFragmentEnabled. 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 desteği girin.

Uyarı: Bunu yalnızca ne yaptığınızı bildiğinizde deneyin.

Web aramasında metin parçaları

Bazı aramalarda Google arama motoru, hızlı bir yanıt veya içerikle ilgili özet sağlar alakalı bir web sitesinden snippet'e sahip olur. Bu öne çıkan snippet'lerin soru biçimindedir. Öne çıkan snippet'i tıklamak, kullanıcıyı doğrudan öne çıkan snippet'e yönlendirir snippet metni ekleyin. Bu, otomatik olarak oluşturulan Metin Parçaları URL'leri sayesinde çalışır.

Öne çıkan snippet'in gösterildiği Google arama motoru sonuç sayfası. Durum çubuğunda Metin Parçaları URL'si gösterilir.

ziyaret edin.

Tıkladıktan sonra sayfanın ilgili bölümü görünüme kaydırılır.

Sonuç

Metin Parçaları URL'si, web sayfalarında rastgele metinlere bağlantı vermek için güçlü bir özelliktir. Akademik topluluğu, bunu son derece doğru alıntı veya referans bağlantıları sağlamak için kullanabilir. Arama motorları, derin bağlantı oluşturarak sayfalardaki metin sonuçlarına derin bağlantı oluşturabilirsiniz. Sosyal ağ siteleri, kullanıcıların paylaşım yapmasına izin vermek için bunu kullanabilir erişilemeyen ekran görüntüleri yerine web sayfasının belirli pasajlarını kullanabilirsiniz. Umarım siz de Metin Parçalı URL'leri kullanma benim kadar faydalı bulurum. Etiket Yöneticisi'ni kullanarak Metin parçasına bağlantı tarayıcısı uzantısına sahip olur.

İlgili bağlantılar

• Spesifikasyon taslağı
• TAG İncelemesi
• Chrome Platform Durumu girişi
• Chrome izleme hatası
• İleti dizisi gönderme amacı
• WebKit-Dev ileti dizisi
• Mozilla standartları konum ileti dizisi

Teşekkür

Metin Parçaları Nick Burris ve David Bokan, Grant Wang. Joe Medley'e şu katkı için teşekkür ederiz: ayrıntılı olarak incelemenizi öneririz. Greg Rakozy tarafından oluşturulan hero resim Lansmanı kaldırın.