সাহসীভাবে লিঙ্ক করুন যেখানে আগে কেউ লিঙ্ক করেনি: টেক্সট ফ্র্যাগমেন্টস

টেক্সট ফ্র্যাগমেন্ট আপনাকে ইউআরএল ফ্র্যাগমেন্টে একটি টেক্সট স্নিপেট নির্দিষ্ট করতে দেয়। এই ধরনের টেক্সট ফ্র্যাগমেন্ট সহ একটি URL-এ নেভিগেট করার সময়, ব্রাউজার জোর দিতে পারে এবং/অথবা ব্যবহারকারীর নজরে আনতে পারে।

Thomas Steiner

খণ্ড শনাক্তকারী

Chrome 80 একটি বড় রিলিজ ছিল। এতে ওয়েব ওয়ার্কারদের মধ্যে ECMAScript মডিউল , নালিশ কোলেসিং , ঐচ্ছিক চেইনিং এবং আরও অনেক কিছুর মতো অত্যন্ত প্রত্যাশিত বৈশিষ্ট্য রয়েছে। রিলিজটি, যথারীতি, Chromium ব্লগে একটি ব্লগ পোস্টের মাধ্যমে ঘোষণা করা হয়েছিল। আপনি নীচের স্ক্রিনশটে ব্লগ পোস্টের একটি অংশ দেখতে পারেন।

আপনি সম্ভবত নিজেকে জিজ্ঞাসা করছেন সমস্ত লাল বাক্সের অর্থ কী। সেগুলি DevTools-এ নিম্নলিখিত স্নিপেট চালানোর ফলাফল। এটি id বৈশিষ্ট্যযুক্ত সমস্ত উপাদান হাইলাইট করে।

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

আমি একটি লাল বক্সের সাথে হাইলাইট করা যেকোন উপাদানের একটি গভীর লিঙ্ক রাখতে পারি । অনুমান করছি যে আমি পাশে থাকা আমাদের পণ্য ফোরাম বাক্সে আমাদের প্রতিক্রিয়া দিন এর সাথে গভীর লিঙ্ক করতে চাই, আমি URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #HTML1 হ্যান্ডক্র্যাফ্ট করে তা করতে পারি। আপনি বিকাশকারী সরঞ্জামগুলির উপাদান প্যানেলে দেখতে পাচ্ছেন, প্রশ্নে থাকা উপাদানটির HTML1 মান সহ একটি id বৈশিষ্ট্য রয়েছে।

আমি যদি এই ইউআরএলটিকে জাভাস্ক্রিপ্টের URL() কনস্ট্রাক্টর দিয়ে পার্স করি, তাহলে বিভিন্ন উপাদান প্রকাশিত হবে। #HTML1 মান সহ hash বৈশিষ্ট্যটি লক্ষ্য করুন।

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: ""
}
*/

যদিও একটি উপাদানের id খুঁজে পেতে আমাকে বিকাশকারী সরঞ্জামগুলি খুলতে হয়েছিল তা পৃষ্ঠার এই বিশেষ অংশটি ব্লগ পোস্টের লেখক দ্বারা সংযুক্ত হওয়ার সম্ভাবনা সম্পর্কে ভলিউম বলে।

আমি যদি id ছাড়া কিছু লিঙ্ক করতে চাই? বলুন আমি ওয়েব ওয়ার্কার্স শিরোনামে ECMAScript মডিউলগুলির সাথে লিঙ্ক করতে চাই। আপনি নীচের স্ক্রিনশটটিতে দেখতে পাচ্ছেন, প্রশ্নে থাকা <h1> এর কোনো id অ্যাট্রিবিউট নেই, মানে এই শিরোনামের সাথে লিঙ্ক করার কোনো উপায় নেই। এটি সেই সমস্যা যা টেক্সট ফ্র্যাগমেন্টস সমাধান করে।

টেক্সট টুকরা

টেক্সট ফ্র্যাগমেন্টস প্রস্তাব URL হ্যাশে একটি টেক্সট স্নিপেট নির্দিষ্ট করার জন্য সমর্থন যোগ করে। এই ধরনের টেক্সট ফ্র্যাগমেন্ট সহ একটি URL-এ নেভিগেট করার সময়, ব্যবহারকারী এজেন্ট জোর দিতে পারে এবং/অথবা ব্যবহারকারীর নজরে আনতে পারে।

ব্রাউজার সামঞ্জস্য

নিরাপত্তার কারণে, বৈশিষ্ট্যটির জন্য একটি noopener প্রসঙ্গে লিঙ্কগুলি খোলার প্রয়োজন। অতএব, আপনার <a> অ্যাঙ্কর মার্কআপে rel="noopener" অন্তর্ভুক্ত করা নিশ্চিত করুন বা আপনার Window.open() উইন্ডো কার্যকারিতা বৈশিষ্ট্যের তালিকায় noopener যোগ করুন।

start

এর সহজতম ফর্মে, টেক্সট ফ্র্যাগমেন্টের সিনট্যাক্স নিম্নরূপ: হ্যাশ চিহ্ন # এর পরে :~:text= এবং অবশেষে start , যা আমি যে শতাংশ-এনকোড করা পাঠ্যটির সাথে লিঙ্ক করতে চাই তা উপস্থাপন করে।

#:~:text=start

উদাহরণস্বরূপ, বলুন যে আমি ক্রোম 80-তে বৈশিষ্ট্যগুলি ঘোষণা করার ব্লগ পোস্টের শিরোনাম ওয়েব ওয়ার্কার্সের ECMAScript মডিউলগুলির সাথে লিঙ্ক করতে চাই, এই ক্ষেত্রে URLটি হবে:

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

টেক্সট টুকরা জোর দেওয়া হয় এই মত . আপনি যদি Chrome-এর মতো একটি সমর্থনকারী ব্রাউজারে লিঙ্কটি ক্লিক করেন, তাহলে পাঠ্য খণ্ডটি হাইলাইট করা হয় এবং স্ক্রোল করে দৃশ্যে দেখা যায়:

start এবং end

এখন যদি আমি ECMAScript Modules in Web Workers শিরোনামের পুরো বিভাগে লিঙ্ক করতে চাই, শুধু এর শিরোনাম নয়? সেকশনের সম্পূর্ণ টেক্সট শতাংশ-এনকোড করার ফলে ইউআরএলটি অকার্যকরভাবে দীর্ঘ হবে।

ভাগ্যক্রমে একটি ভাল উপায় আছে. পুরো পাঠ্যের পরিবর্তে, আমি start,end সিনট্যাক্স ব্যবহার করে পছন্দসই পাঠ্যটি ফ্রেম করতে পারি। অতএব, আমি পছন্দসই পাঠ্যের শুরুতে কয়েক শতাংশ-এনকোড করা শব্দ এবং পছন্দসই পাঠ্যের শেষে একটি কমা দ্বারা পৃথক করা কয়েক শতাংশ-এনকোড করা শব্দ নির্দিষ্ট করি ,

এটি এই মত দেখায়:

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 জন্য, আমার কাছে ECMAScript%20Modules%20in%20Web%20Workers আছে, তারপর একটি কমা আছে , তারপরে ES%20Modules%20in%20Web%20Workers. end হিসাবে আপনি যখন Chrome এর মতো একটি সমর্থনকারী ব্রাউজারে ক্লিক করেন, তখন পুরো বিভাগটি হাইলাইট করা হয় এবং স্ক্রোল করা হয়:

এখন আপনি আমার start এবং end পছন্দ সম্পর্কে আশ্চর্য হতে পারে. আসলে, সামান্য ছোট URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #:~:text=ECMAScript%20Modules,Web%20Workers. প্রতিটি পাশে শুধুমাত্র দুটি শব্দ দিয়ে কাজ করা হবে, খুব. পূর্ববর্তী মানগুলির সাথে start এবং end তুলনা করুন।

যদি আমি এটিকে এক ধাপ এগিয়ে নিয়ে যাই এবং এখন start এবং end উভয়ের জন্য শুধুমাত্র একটি শব্দ ব্যবহার করি, আপনি দেখতে পাবেন যে আমি সমস্যায় আছি। URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #:~:text=ECMAScript,Workers. এখন আরও ছোট, কিন্তু হাইলাইট করা টেক্সট ফ্র্যাগমেন্ট আর আসল কাঙ্ক্ষিত নয়। Workers. , যা সঠিক, কিন্তু আমি যা হাইলাইট করতে চেয়েছিলাম তা নয়। সমস্যা হল যে পছন্দসই বিভাগটি বর্তমান এক-শব্দের start এবং end মান দ্বারা স্বতন্ত্রভাবে সনাক্ত করা যায় না:

prefix- এবং -suffix

start এবং end জন্য যথেষ্ট দীর্ঘ মান ব্যবহার করা একটি অনন্য লিঙ্ক পাওয়ার জন্য একটি সমাধান। কিছু পরিস্থিতিতে, তবে, এটি সম্ভব নয়। একটি পার্শ্ব নোটে, কেন আমি আমার উদাহরণ হিসাবে Chrome 80 রিলিজ ব্লগ পোস্টটি বেছে নিলাম? উত্তর হল এই রিলিজে টেক্সট ফ্র্যাগমেন্টগুলি চালু করা হয়েছিল:

লক্ষ্য করুন কিভাবে উপরের স্ক্রীনশটে "টেক্সট" শব্দটি চারবার দেখা যাচ্ছে। প্রথম ঘটনাটি একটি সবুজ কোড ফন্টে লেখা হয়েছে। যদি আমি এই নির্দিষ্ট শব্দের সাথে লিঙ্ক করতে চাই, তাহলে আমি text start করতে সেট করব। যেহেতু "টেক্সট" শব্দটি, ঠিক আছে, শুধুমাত্র একটি শব্দ, সেখানে end হতে পারে না। এখন কি? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #:~:text=text শব্দের প্রথম উপস্থিতির সাথে মেলে যা ইতিমধ্যেই শিরোনামে রয়েছে:

ভাগ্যক্রমে একটি সমাধান আছে. এই ধরনের ক্ষেত্রে, আমি একটি prefix​- এবং একটি -suffix নির্দিষ্ট করতে পারি। সবুজ কোড ফন্ট "টেক্সট" এর আগের শব্দটি হল "দ্য", এবং এর পরে শব্দটি হল "প্যারামিটার"। "টেক্সট" শব্দের অন্য তিনটি ঘটনার কোনোটিরই আশেপাশের শব্দ একই রকম নেই। এই জ্ঞান দিয়ে সজ্জিত, আমি পূর্ববর্তী URL টি টুইক করতে পারি এবং prefix- এবং -suffix যোগ করতে পারি। অন্যান্য পরামিতিগুলির মতো, তাদেরও শতাংশ-এনকোড করা প্রয়োজন এবং এতে একাধিক শব্দ থাকতে পারে। https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #:~:text=the-,text,-parameter পার্সারকে স্পষ্টভাবে prefix- এবং -suffix সনাক্ত করার অনুমতি দেওয়ার জন্য, তাদের start থেকে আলাদা করতে হবে এবং একটি ড্যাশ দিয়ে ঐচ্ছিক end হবে -

সম্পূর্ণ সিনট্যাক্স

টেক্সট ফ্র্যাগমেন্টের সম্পূর্ণ সিনট্যাক্স নীচে দেখানো হয়েছে। (বর্গাকার বন্ধনী একটি ঐচ্ছিক পরামিতি নির্দেশ করে।) সমস্ত প্যারামিটারের মান শতাংশ-এনকোড করা প্রয়োজন। ড্যাশ - , অ্যাম্পারস্যান্ড & এবং কমা , অক্ষরের জন্য এটি বিশেষভাবে গুরুত্বপূর্ণ, তাই সেগুলিকে পাঠ্য নির্দেশমূলক বাক্য গঠনের অংশ হিসাবে ব্যাখ্যা করা হচ্ছে না।

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

প্রতিটি prefix- , start , end , এবং -suffix শুধুমাত্র একটি একক ব্লক-স্তরের উপাদানের মধ্যে পাঠ্যের সাথে মিলিত হবে, কিন্তু সম্পূর্ণ start,end পরিসর একাধিক ব্লককে বিস্তৃত করতে পারে । উদাহরণস্বরূপ, :~:text=The quick,lazy dog নিম্নলিখিত উদাহরণে মিলতে ব্যর্থ হবে, কারণ শুরুর স্ট্রিং "The quick" একটি একক, নিরবচ্ছিন্ন ব্লক-স্তরের উপাদানের মধ্যে উপস্থিত হয় না:

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

তবে এটি এই উদাহরণে মেলে:

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

একটি ব্রাউজার এক্সটেনশন দিয়ে টেক্সট ফ্র্যাগমেন্ট URL তৈরি করা

হাত দিয়ে টেক্সট ফ্র্যাগমেন্ট ইউআরএল তৈরি করা ক্লান্তিকর, বিশেষ করে যখন নিশ্চিত করা যায় যে সেগুলি অনন্য। আপনি যদি সত্যিই চান, স্পেসিফিকেশনে কিছু টিপস রয়েছে এবং টেক্সট ফ্র্যাগমেন্ট ইউআরএল তৈরি করার জন্য সঠিক পদক্ষেপগুলি তালিকাভুক্ত করে। আমরা লিংক টু টেক্সট ফ্র্যাগমেন্ট নামে একটি ওপেন-সোর্স ব্রাউজার এক্সটেনশন প্রদান করি যা আপনাকে যেকোনো পাঠ্য নির্বাচন করে লিঙ্ক করতে দেয় এবং তারপর প্রসঙ্গ মেনুতে "নির্বাচিত পাঠ্যে লিঙ্কটি অনুলিপি করুন" এ ক্লিক করে। এই এক্সটেনশনটি নিম্নলিখিত ব্রাউজারগুলির জন্য উপলব্ধ:

• Google Chrome-এর জন্য টেক্সট ফ্র্যাগমেন্টের লিঙ্ক
• Microsoft Edge-এর জন্য টেক্সট ফ্র্যাগমেন্টের লিঙ্ক
• মজিলা ফায়ারফক্সের জন্য টেক্সট ফ্র্যাগমেন্টের লিঙ্ক
• অ্যাপল সাফারির জন্য টেক্সট ফ্র্যাগমেন্টের লিঙ্ক

একটি URL-এ একাধিক পাঠ্য খণ্ড

মনে রাখবেন যে একাধিক টেক্সট টুকরা একটি URL এ প্রদর্শিত হতে পারে। নির্দিষ্ট টেক্সট টুকরা একটি অ্যাম্পারস্যান্ড অক্ষর দ্বারা পৃথক করা প্রয়োজন & . এখানে তিনটি পাঠ্য খণ্ড সহ একটি উদাহরণ লিঙ্ক রয়েছে: 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

উপাদান এবং টেক্সট টুকরা মিশ্রণ

প্রথাগত উপাদানের খণ্ডগুলি পাঠ্য খণ্ডের সাথে একত্রিত করা যেতে পারে। একই ইউআরএলে উভয়ই থাকা পুরোপুরি ঠিক, উদাহরণস্বরূপ, পৃষ্ঠার মূল পাঠ্য পরিবর্তনের ক্ষেত্রে একটি অর্থপূর্ণ ফলব্যাক প্রদান করা, যাতে পাঠ্যের খণ্ডটি আর মেলে না। URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. আমাদের পণ্য ফোরাম বিভাগে আমাদের প্রতিক্রিয়া দিন-এর সাথে লিঙ্ক করা একটি উপাদানের খণ্ড ( HTML1 ), পাশাপাশি একটি পাঠ্য খণ্ড ( text=Give%20us%20feedback%20in%20our%20Product%20Forums. ):

খণ্ডের নির্দেশিকা

সিনট্যাক্সের একটি উপাদান আছে যা আমি এখনও ব্যাখ্যা করিনি: খণ্ড নির্দেশিকা :~: । উপরে দেখানো হিসাবে বিদ্যমান ইউআরএল উপাদান খণ্ডগুলির সাথে সামঞ্জস্যের সমস্যাগুলি এড়াতে, পাঠ্য খণ্ডের স্পেসিফিকেশন খণ্ড নির্দেশিকা প্রবর্তন করে। ফ্র্যাগমেন্ট নির্দেশিকা হল ইউআরএল ফ্র্যাগমেন্টের একটি অংশ যা কোড সিকোয়েন্স দ্বারা সীমাবদ্ধ করা হয় :~: এটি ব্যবহারকারী এজেন্ট নির্দেশাবলীর জন্য সংরক্ষিত, যেমন text= , এবং লোড করার সময় URL থেকে ছিনতাই করা হয় যাতে লেখক স্ক্রিপ্ট সরাসরি এটির সাথে যোগাযোগ করতে না পারে। ব্যবহারকারী এজেন্ট নির্দেশনাকে নির্দেশিকাও বলা হয়। কংক্রিট ক্ষেত্রে, text= তাই একটি পাঠ্য নির্দেশিকা বলা হয়।

বৈশিষ্ট্য সনাক্তকরণ

সমর্থন শনাক্ত করতে, document শুধুমাত্র-পঠন- fragmentDirective সম্পত্তির জন্য পরীক্ষা করুন। ফ্র্যাগমেন্ট নির্দেশিকা হল URL-এর জন্য নথির পরিবর্তে ব্রাউজারে নির্দেশিত নির্দেশাবলী নির্দিষ্ট করার একটি পদ্ধতি। এটি লেখকের স্ক্রিপ্টের সাথে সরাসরি মিথস্ক্রিয়া এড়াতে বোঝানো হয়েছে, যাতে ভবিষ্যতের ব্যবহারকারী এজেন্ট নির্দেশাবলী বিদ্যমান সামগ্রীতে ভঙ্গকারী পরিবর্তন প্রবর্তনের ভয় ছাড়াই যোগ করা যেতে পারে। এই ধরনের ভবিষ্যত সংযোজনের একটি সম্ভাব্য উদাহরণ অনুবাদ ইঙ্গিত হতে পারে।

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

বৈশিষ্ট্য সনাক্তকরণ প্রধানত এমন ক্ষেত্রে যেখানে লিঙ্কগুলি গতিশীলভাবে তৈরি করা হয় (উদাহরণস্বরূপ সার্চ ইঞ্জিনগুলি) ব্রাউজারগুলিতে টেক্সট টুকরো লিঙ্কগুলি পরিবেশন করা এড়াতে যা তাদের সমর্থন করে না।

টেক্সট টুকরা স্টাইলিং

ডিফল্টরূপে, ব্রাউজার স্টাইল টেক্সট টুকরা একইভাবে স্টাইল mark করে (সাধারণত হলুদের উপর কালো, mark জন্য CSS সিস্টেমের রং )। ব্যবহারকারী-এজেন্ট স্টাইলশীটে CSS রয়েছে যা দেখতে এইরকম:

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

আপনি দেখতে পাচ্ছেন, ব্রাউজারটি একটি ছদ্ম নির্বাচক ::target-text প্রকাশ করে যা আপনি প্রয়োগ করা হাইলাইটিং কাস্টমাইজ করতে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লাল পটভূমিতে কালো পাঠ্য হিসাবে আপনার পাঠ্যের টুকরো ডিজাইন করতে পারেন। বরাবরের মতো, রঙের বৈসাদৃশ্য পরীক্ষা করতে ভুলবেন না যাতে আপনার ওভাররাইড স্টাইলিং অ্যাক্সেসযোগ্যতার সমস্যা সৃষ্টি না করে এবং নিশ্চিত করুন যে হাইলাইটিংটি দৃশ্যত বাকি বিষয়বস্তু থেকে আলাদা।

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

পলিফিলেবিলিটি

টেক্সট ফ্র্যাগমেন্ট বৈশিষ্ট্য কিছুটা পলিফিল করা যেতে পারে। আমরা একটি পলিফিল প্রদান করি, যা এক্সটেনশন দ্বারা অভ্যন্তরীণভাবে ব্যবহৃত হয়, এমন ব্রাউজারগুলির জন্য যা টেক্সট ফ্র্যাগমেন্টের জন্য অন্তর্নির্মিত সমর্থন প্রদান করে না যেখানে কার্যকারিতা জাভাস্ক্রিপ্টে প্রয়োগ করা হয়।

প্রোগ্রাম্যাটিক টেক্সট ফ্র্যাগমেন্ট লিংক জেনারেশন

পলিফিলে একটি ফাইল fragment-generation-utils.js রয়েছে যা আপনি আমদানি করতে এবং টেক্সট ফ্র্যাগমেন্ট লিঙ্ক তৈরি করতে ব্যবহার করতে পারেন। এটি নীচের কোড নমুনায় বর্ণিত হয়েছে:

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);
}

বিশ্লেষণের উদ্দেশ্যে টেক্সট ফ্র্যাগমেন্ট প্রাপ্ত করা

প্রচুর সাইট রাউটিং এর জন্য ফ্র্যাগমেন্ট ব্যবহার করে, এই কারণেই ব্রাউজারগুলি টেক্সট ফ্র্যাগমেন্টগুলিকে সরিয়ে দেয় যাতে সেই পৃষ্ঠাগুলি ভাঙ্গতে না পারে। পৃষ্ঠাগুলিতে টেক্সট ফ্র্যাগমেন্ট লিঙ্কগুলি প্রকাশ করার একটি স্বীকৃত প্রয়োজন রয়েছে, উদাহরণস্বরূপ, বিশ্লেষণের উদ্দেশ্যে, কিন্তু প্রস্তাবিত সমাধানটি এখনও বাস্তবায়িত হয়নি৷ আপাতত একটি সমাধান হিসাবে, আপনি পছন্দসই তথ্য বের করতে নীচের কোডটি ব্যবহার করতে পারেন।

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

নিরাপত্তা

টেক্সট ফ্র্যাগমেন্ট নির্দেশাবলী শুধুমাত্র পূর্ণ (একই-পৃষ্ঠার নয়) নেভিগেশনগুলিতে আহ্বান করা হয় যা ব্যবহারকারীর সক্রিয়করণের ফলাফল। অতিরিক্তভাবে, গন্তব্যের চেয়ে ভিন্ন উৎস থেকে উদ্ভূত ন্যাভিগেশনের জন্য ন্যাভিগেশনের প্রয়োজন হবে noopener প্রেক্ষাপটে, যেমন গন্তব্য পৃষ্ঠাটি যথেষ্ট বিচ্ছিন্ন বলে পরিচিত। টেক্সট ফ্র্যাগমেন্ট নির্দেশাবলী শুধুমাত্র প্রধান ফ্রেমে প্রয়োগ করা হয়। এর মানে হল টেক্সট আইফ্রেমের ভিতরে অনুসন্ধান করা হবে না, এবং iframe নেভিগেশন একটি টেক্সট খণ্ডকে আহ্বান করবে না।

গোপনীয়তা

এটা গুরুত্বপূর্ণ যে টেক্সট ফ্র্যাগমেন্টের স্পেসিফিকেশনের প্রয়োগগুলি কোনও পৃষ্ঠায় কোনও টেক্সট ফ্র্যাগমেন্ট পাওয়া গেছে কিনা তা ফাঁস না করে। যদিও উপাদানের খণ্ডগুলি সম্পূর্ণরূপে মূল পৃষ্ঠার লেখকের নিয়ন্ত্রণে থাকে, পাঠ্য খণ্ড যে কেউ তৈরি করতে পারে। মনে রাখবেন কিভাবে উপরের আমার উদাহরণে ওয়েব ওয়ার্কার্স শিরোনামে ECMAScript মডিউলের সাথে লিঙ্ক করার কোন উপায় ছিল না, যেহেতু <h1> এর একটি id ছিল না, কিন্তু আমি সহ যে কেউ কীভাবে পাঠ্য খণ্ডটি সাবধানে তৈরি করে যে কোনও জায়গায় লিঙ্ক করতে পারে?

কল্পনা করুন যে আমি একটি খারাপ বিজ্ঞাপন নেটওয়ার্ক চালালাম evil-ads.example.com । আরও কল্পনা করুন যে আমার একটি বিজ্ঞাপন আইফ্রেমে আমি ডায়নামিকভাবে একটি টেক্সট ফ্র্যাগমেন্ট URL dating.example.com dating.example.com #:~:text=Log%20Out সাথে একটি লুকানো ক্রস-অরিজিন iframe তৈরি করেছি। যদি "লগ আউট" লেখাটি পাওয়া যায়, আমি জানি যে শিকারটি বর্তমানে dating.example.com এ লগ ইন করেছে, যা আমি ব্যবহারকারীর প্রোফাইলিংয়ের জন্য ব্যবহার করতে পারি। যেহেতু একটি সাদামাটা টেক্সট ফ্র্যাগমেন্ট বাস্তবায়ন সিদ্ধান্ত নিতে পারে যে একটি সফল ম্যাচের ফলে ফোকাস সুইচ হওয়া উচিত, তাই evil-ads.example.com এ আমি blur ইভেন্টটি শুনতে পারি এবং এইভাবে জানতে পারি কখন একটি ম্যাচ হয়েছে। ক্রোমে, আমরা টেক্সট ফ্র্যাগমেন্টগুলি এমনভাবে প্রয়োগ করেছি যাতে উপরের দৃশ্যটি ঘটতে পারে না।

আরেকটি আক্রমণ হতে পারে স্ক্রোল অবস্থানের উপর ভিত্তি করে নেটওয়ার্ক ট্রাফিককে কাজে লাগাতে। অনুমান করুন যে আমার শিকারের নেটওয়ার্ক ট্র্যাফিক লগগুলিতে আমার অ্যাক্সেস ছিল, যেমন একটি কোম্পানি ইন্ট্রানেটের প্রশাসক হিসাবে। এখন কল্পনা করুন যে একটি দীর্ঘ মানব সম্পদ নথি বিদ্যমান আছে যদি আপনি ভোগেন তাহলে কী করবেন... এবং তারপরে বার্ন আউট , উদ্বেগ ইত্যাদির মতো অবস্থার একটি তালিকা। আমি তালিকার প্রতিটি আইটেমের পাশে একটি ট্র্যাকিং পিক্সেল রাখতে পারি। তারপর যদি আমি নির্ধারণ করি যে দস্তাবেজটি লোড করা সাময়িকভাবে ট্র্যাকিং পিক্সেলের পাশে লোড করার সাথে ঘটে, বলুন, বার্ন আউট আইটেম, আমি তখন, ইন্ট্রানেট প্রশাসক হিসাবে, নির্ধারণ করতে পারি যে একজন কর্মচারী একটি টেক্সট ফ্র্যাগমেন্ট লিঙ্কে ক্লিক করেছেন :~:text=burn%20out যা কর্মচারী অনুমান করতে পারে যে এটি কারও কাছে গোপনীয় ছিল এবং নয়। যেহেতু এই উদাহরণটি শুরু করার জন্য কিছুটা অনুপস্থিত এবং যেহেতু এটির শোষণের জন্য খুব নির্দিষ্ট পূর্বশর্ত পূরণ করা প্রয়োজন, তাই ক্রোম নিরাপত্তা দল পরিচালনাযোগ্য হতে নেভিগেশনে স্ক্রোল বাস্তবায়নের ঝুঁকি মূল্যায়ন করেছে। অন্য ব্যবহারকারী এজেন্ট পরিবর্তে একটি ম্যানুয়াল স্ক্রোল UI উপাদান দেখানোর সিদ্ধান্ত নিতে পারে।

যে সাইটগুলি অপ্ট-আউট করতে চায় তাদের জন্য, Chromium একটি ডকুমেন্ট পলিসি হেডার মান সমর্থন করে যা তারা পাঠাতে পারে যাতে ব্যবহারকারী এজেন্টরা টেক্সট ফ্র্যাগমেন্ট URL গুলি প্রক্রিয়া না করে৷

Document-Policy: force-load-at-top

পাঠ্য খণ্ড অক্ষম করা হচ্ছে

বৈশিষ্ট্যটি নিষ্ক্রিয় করার সবচেয়ে সহজ উপায় হল একটি এক্সটেনশন ব্যবহার করে যা HTTP প্রতিক্রিয়া শিরোনামগুলিকে ইনজেক্ট করতে পারে, উদাহরণস্বরূপ, ModHeader (একটি Google পণ্য নয়), নিম্নরূপ একটি প্রতিক্রিয়া (অনুরোধ নয় ) শিরোনাম সন্নিবেশ করানো:

Document-Policy: force-load-at-top

আরেকটি, আরও জড়িত, অপ্ট আউট করার উপায় হল এন্টারপ্রাইজ সেটিং ScrollToTextFragmentEnabled ব্যবহার করে। ম্যাকোসে এটি করতে, টার্মিনালে নীচের কমান্ডটি পেস্ট করুন।

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows-এ, Google Chrome এন্টারপ্রাইজ হেল্প সাপোর্ট সাইটে ডকুমেন্টেশন অনুসরণ করুন।

ওয়েব অনুসন্ধানে পাঠ্য খণ্ড

কিছু অনুসন্ধানের জন্য, সার্চ ইঞ্জিন Google একটি প্রাসঙ্গিক ওয়েবসাইট থেকে একটি বিষয়বস্তুর স্নিপেট সহ একটি দ্রুত উত্তর বা সারাংশ প্রদান করে৷ এই বৈশিষ্ট্যযুক্ত স্নিপেটগুলি সবচেয়ে বেশি প্রদর্শিত হয় যখন একটি অনুসন্ধান একটি প্রশ্নের আকারে হয়। একটি বৈশিষ্ট্যযুক্ত স্নিপেটে ক্লিক করা ব্যবহারকারীকে সরাসরি সোর্স ওয়েব পৃষ্ঠার বৈশিষ্ট্যযুক্ত স্নিপেট পাঠ্যে নিয়ে যায়। স্বয়ংক্রিয়ভাবে তৈরি টেক্সট ফ্র্যাগমেন্ট URL-এর জন্য এটি কাজ করে।

উপসংহার

টেক্সট ফ্র্যাগমেন্টস ইউআরএল হল ওয়েবপেজে নির্বিচারে লেখার সাথে লিঙ্ক করার জন্য একটি শক্তিশালী বৈশিষ্ট্য। পণ্ডিত সম্প্রদায় অত্যন্ত সঠিক উদ্ধৃতি বা রেফারেন্স লিঙ্ক প্রদান করতে এটি ব্যবহার করতে পারেন। সার্চ ইঞ্জিন পৃষ্ঠাগুলিতে পাঠ্য ফলাফলের সাথে ডিপ লিঙ্ক করতে এটি ব্যবহার করতে পারে। সোশ্যাল নেটওয়ার্কিং সাইটগুলি ব্যবহারকারীদেরকে অ্যাক্সেসযোগ্য স্ক্রিনশটগুলির পরিবর্তে একটি ওয়েবপৃষ্ঠার নির্দিষ্ট প্যাসেজগুলি ভাগ করতে দেওয়ার জন্য এটি ব্যবহার করতে পারে৷ আমি আশা করি আপনি টেক্সট ফ্র্যাগমেন্ট ইউআরএল ব্যবহার করা শুরু করবেন এবং সেগুলিকে আমার মতোই দরকারী বলে মনে করবেন। লিংক টু টেক্সট ফ্র্যাগমেন্ট ব্রাউজার এক্সটেনশন ইনস্টল করতে ভুলবেন না।

সম্পর্কিত লিঙ্ক

• বিশেষ খসড়া
• TAG পর্যালোচনা
• Chrome প্ল্যাটফর্ম স্ট্যাটাস এন্ট্রি
• ক্রোম ট্র্যাকিং বাগ
• শিপ থ্রেড অভিপ্রায়
• WebKit-Dev থ্রেড
• মোজিলা স্ট্যান্ডার্ড পজিশন থ্রেড

স্বীকৃতি

গ্রান্ট ওয়াং এর অবদানে নিক বুরিস এবং ডেভিড বোকান দ্বারা টেক্সট ফ্র্যাগমেন্টগুলি বাস্তবায়িত এবং নির্দিষ্ট করা হয়েছিল। এই নিবন্ধটির পুঙ্খানুপুঙ্খ পর্যালোচনার জন্য জো মেডলিকে ধন্যবাদ। আনস্প্ল্যাশে গ্রেগ রাকোজির হিরো ছবি।