Công cụ escape / unescape CSS

Escape CSS là gì?

Escape văn bản để dùng làm định danh CSS – id hoặc class trong selector, ví dụ trong querySelector – theo thuật toán CSS.escape() của CSSOM, hoặc làm nội dung của chuỗi CSS trong dấu nháy. Công cụ cũng chuyển escape CSS trở lại văn bản.

Cách sử dụng Escape CSS

1. Chọn Escape hoặc Unescape.
2. Khi escape, chọn Ngữ cảnh: Định danh / selector (CSS.escape) hoặc Giá trị chuỗi trong dấu nháy; tùy chọn Escape ký tự ngoài ASCII thành \HEX.
3. Nhập id, class hoặc chuỗi vào ô Đầu vào và sao chép Đầu ra.

Ví dụ

0a#b.c

\30 a\#b\.c

Khi nào nên dùng Escape CSS

Dùng chế độ định danh mỗi khi id hoặc class có thể bắt đầu bằng chữ số hoặc chứa ký tự như ., :, # hay dấu cách – ví dụ document.querySelector("#" + CSS.escape(id)). Dùng chế độ chuỗi cho giá trị content: hoặc tên font. Công cụ không kiểm tra hay rút gọn CSS.

Escape CSS hoạt động như thế nào

Chế độ định danh theo CSSOM §2.1: NUL thành U+FFFD; ký tự điều khiển, chữ số đứng đầu, hoặc chữ số sau gạch nối đứng đầu thành escape mã điểm \HEX ; một - đứng riêng thành \-; chữ cái, chữ số, -, _ và ký tự ngoài ASCII được giữ; mọi ký tự ASCII khác được thêm gạch chéo ngược (# → \#). Chế độ chuỗi escape \, " và ' bằng gạch chéo ngược và ký tự điều khiển (kể cả xuống dòng) thành \HEX . Khi unescape, công cụ đọc \ cộng 1–6 chữ số hex và một khoảng trắng tùy chọn, xóa xuống dòng đã escape và giữ nguyên các ký tự escape khác.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Chọn phần tử có id bắt đầu bằng chữ số (#\31 23)
• ✓ Dựng selector từ tên class do người dùng tạo
• ✓ Viết ký tự đặc biệt trong chuỗi content:
• ✓ Đọc selector đã escape do công cụ sinh ra

Câu Hỏi Thường Gặp

Bước tiếp theo nên làm

Khám phá thêm danh mục