ฉลาดกว่า Ctrl+F: ลิงก์ไปยังเนื้อหาในหน้าเว็บได้โดยตรง

• Text Fragment คือความสามารถอันทรงพลังของเว็บแพลตฟอร์มที่ช่วยให้ลิงก์ไปยังข้อความเฉพาะภายในหน้าเว็บได้อย่างแม่นยำ โดยไม่ต้องเพิ่มแองเคอร์
• ความสามารถนี้เสริมด้วย CSS pseudo-element ::target-text ที่เปิดให้กำหนดสไตล์ของข้อความที่ถูกไฮไลต์ได้
• ไวยากรณ์พื้นฐานของ URL แบบ text fragment:
  • https://example.com/page.html/…]
• เพิ่มไวยากรณ์พิเศษ :~: หลังเครื่องหมายแฮช แล้วเพิ่มสิ่งต่อไปนี้หลัง text=:
  1. prefix-: สตริงข้อความที่ต้องอยู่ก่อนหน้าข้อความที่ลิงก์ไปทันที หากมีรายการที่ตรงกันหลายจุด จะช่วยให้เบราว์เซอร์ลิงก์ไปยังข้อความที่ถูกต้องได้ ส่วนนี้จะไม่ถูกไฮไลต์
  2. textStart: จุดเริ่มต้นของข้อความที่จะไฮไลต์
  3. textEnd: ส่วนท้ายของข้อความที่จะไฮไลต์
  4. -suffix: ทำงานคล้ายกับ prefix- แต่เป็นสตริงข้อความที่มีขีดกลางนำหน้าและอยู่หลังข้อความ มีประโยชน์เมื่อมีรายการที่ตรงกันหลายจุด และจะไม่ถูกไฮไลต์พร้อมกับข้อความที่ลิงก์ไป
• หากเบราว์เซอร์รองรับ text fragment ก็สามารถใช้ pseudo-element ::target-text เพื่อเปลี่ยนสไตล์ของข้อความที่ถูกไฮไลต์ได้
  • ::target-text { background-color: yellow; }
• สามารถเปลี่ยนได้เฉพาะพร็อพเพอร์ตีต่อไปนี้:
  • color
  • background-color
  • text-decoration และพร็อพเพอร์ตีที่เกี่ยวข้อง
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • custom properties
• การรองรับของเบราว์เซอร์และพฤติกรรม fallback
  • ปัจจุบัน text fragment รองรับแล้วในทุกเบราว์เซอร์
  • pseudo-element ::target-text ยังไม่รองรับใน Safari แต่ใช้ได้ในเวอร์ชัน Technology Preview
  • หากเบราว์เซอร์ไม่รองรับความสามารถนี้ หน้าเว็บจะโหลดตามปกติโดยไม่มีการไฮไลต์ข้อความหรือเลื่อนไปยังตำแหน่งนั้น
  • สไตล์เริ่มต้นของการไฮไลต์แตกต่างกันไปในแต่ละเบราว์เซอร์
• ข้อคิดส่งท้าย
  • ตอนแรกคิดว่า text fragment เป็นความสามารถเฉพาะของ Chrome แต่ภายหลังพบว่าจริง ๆ แล้วมันเป็นพื้นฐานเว็บแบบเปิดที่สามารถนำไปใช้ได้ในทุกเบราว์เซอร์
  • หวังว่าจะได้เห็นความสามารถนี้ถูกใช้งานอย่างแพร่หลายมากขึ้น โดยเฉพาะในระบบ generative AI ที่เชื่อถือได้
  • อยากให้ผู้ใช้ทุกคนสามารถใช้งาน text fragment ได้อย่างง่ายดาย
• อัปเดต
  • เบราว์เซอร์ที่ใช้ Chromium มีความสามารถในตัวสำหรับสร้างลิงก์ไปยังข้อความเฉพาะอยู่แล้ว
  • หากใช้ Chrome สามารถไฮไลต์ข้อความแล้วคลิกขวา จากนั้นจะพบตัวเลือก "คัดลอกลิงก์ไปยังข้อความที่ไฮไลต์" ในเมนูตามบริบท

[plorrr]

บางครั้งก็เจอสิ่งนี้ตอนค้นหาใน Google เหมือนกัน ตอนนี้เลยเข้าใจแล้วว่าเป็นแบบนี้นี่เอง

[siisee11]

ใน Arc Browser ฟีเจอร์คัดลอกลิงก์ไปยังข้อความคือฟีเจอร์แบบนี้นี่เอง..!

[galadbran]

ในเบราว์เซอร์ Edge ถ้าลองเลือกข้อความแล้วคลิกขวาเปิดเมนูบริบท จะมีเมนูชื่อ "Copy link to highlight" อยู่ ซึ่งก็เพราะฟีเจอร์นั้นแหละที่ทำให้ผมรู้ว่ามีสเปกแบบนี้อยู่ด้วย

[galadbran]

ใน Firefox ผมติดตั้งและใช้งานส่วนขยายชื่อ https://github.com/ichaoX/ext-textFragment อยู่ครับ

[joyfui]

โอ้ เป็นส่วนขยายที่ดีมาก ขอบคุณครับ

[huiya]

โอ้ อันนี้น่าสนใจดีนะ

[secret3056]

ฟีเจอร์แบบนี้ก็มีด้วย....ยิ่งรู้จักโลกของเบราว์เซอร์มากเท่าไร ก็ยิ่งพบว่ามีสารพัดอย่างจริง ๆ

https://th.news.hada.io/topic/?id=17474…