20 điểm bởi xguru 2024-10-29 | 7 bình luận | Chia sẻ qua WhatsApp
  • Text Fragment là một tính năng mạnh mẽ của nền tảng web, cho phép liên kết chính xác tới một đoạn văn bản cụ thể trong trang web mà không cần thêm anchor
  • Tính năng này được bổ trợ bởi phần tử giả CSS ::target-text, cung cấp cách tùy chỉnh kiểu cho phần văn bản được tô sáng
  • Cú pháp cơ bản của URL text fragment:
  • Thêm cú pháp đặc biệt :~: sau dấu hash, rồi thêm phần sau sau text=:
    1. prefix-: chuỗi văn bản phải xuất hiện ngay trước đoạn văn bản được liên kết. Khi có nhiều kết quả khớp, nó giúp trình duyệt liên kết đúng tới đoạn văn bản cần thiết. Phần này không được tô sáng
    2. textStart: phần bắt đầu của văn bản cần tô sáng
    3. textEnd: phần kết thúc của văn bản cần tô sáng
    4. -suffix: hoạt động tương tự prefix-, nhưng là chuỗi văn bản đi sau đoạn văn bản; dấu gạch nối đứng trước phần văn bản theo sau. Hữu ích khi có nhiều kết quả khớp và cũng không được tô sáng cùng đoạn văn bản được liên kết
  • Nếu trình duyệt hỗ trợ text fragment, có thể dùng phần tử giả ::target-text để thay đổi kiểu của đoạn văn bản được tô sáng
    • ::target-text { background-color: yellow; }
  • Chỉ có thể thay đổi các thuộc tính sau:
    • color
    • background-color
    • text-decoration và các thuộc tính liên quan
    • text-shadow
    • stroke-color, fill-color, stroke-width
    • thuộc tính tùy chỉnh
  • Hỗ trợ trình duyệt và hành vi fallback
    • Text Fragment hiện được hỗ trợ trên tất cả trình duyệt
    • Phần tử giả ::target-text hiện vẫn chưa được Safari hỗ trợ, nhưng đã có trong bản Technology Preview
    • Nếu trình duyệt không hỗ trợ tính năng này, trang vẫn sẽ được tải nhưng không có tô sáng văn bản hoặc cuộn tới vị trí tương ứng
    • Kiểu tô sáng mặc định khác nhau tùy theo từng trình duyệt
  • Suy nghĩ kết thúc
    • Ban đầu tôi nghĩ text fragment là tính năng chỉ dành cho Chrome, nhưng rồi nhận ra thực ra đây là một nền tảng web mở mà mọi trình duyệt đều có thể triển khai
    • Đặc biệt hy vọng tính năng này sẽ được sử dụng rộng rãi hơn trong các hệ thống AI tạo sinh đáng tin cậy
    • Sẽ thật tuyệt nếu mọi người dùng đều có thể dễ dàng sử dụng text fragment
  • Cập nhật
    • Các trình duyệt dựa trên Chromium đã tích hợp sẵn tính năng tạo liên kết tới một đoạn văn bản cụ thể
    • Nếu bạn dùng Chrome, chỉ cần tô sáng văn bản rồi nhấp chuột phải, bạn sẽ thấy tùy chọn "Sao chép liên kết đến phần tô sáng" trong menu ngữ cảnh

7 bình luận

 
plorrr 2024-11-02

Thỉnh thoảng tôi thấy cái này khi tìm kiếm trên Google, hóa ra là như vậy.

 
siisee11 2024-10-29

Thì ra tính năng sao chép liên kết đến đoạn văn bản trong Arc Browser là kiểu này..!

 
galadbran 2024-10-29

Trong trình duyệt Edge, nếu bạn chọn văn bản rồi mở menu ngữ cảnh bằng cách nhấp chuột phải, sẽ có mục "Copy link to highlight", và chính nhờ tính năng đó mà tôi mới biết có một đặc tả như thế này.

 
galadbran 2024-10-29

Trên Firefox, tôi đang cài và dùng tiện ích mở rộng https://github.com/ichaoX/ext-textFragment.

 
joyfui 2024-10-30

Ồ, cảm ơn vì tiện ích mở rộng tuyệt vời này.

 
huiya 2024-10-29

Ồ, cái này thú vị thật đấy.

 
secret3056 2024-10-29

Chức năng như thế này luôn sao.... Thế giới trình duyệt đúng là càng biết càng thấy có đủ thứ trên đời.

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