Chuyển CSS thành inline trực tuyến

Tính năng và cách hoạt động

Công cụ này giải quyết vấn đề email hoặc trang web hiển thị không đúng khi trình duyệt hoặc ứng dụng email bỏ qua thẻ <style>. Thay vì phải tự tay thêm thuộc tính style cho từng phần tử, bạn chỉ cần dán HTML và công cụ sẽ tự động chuyển đổi.

Ví dụ cụ thể

Với đầu vào:

<style>p{color:red}</style><p>Xin chào</p>

Sau khi chuyển đổi, thẻ <p> sẽ có thuộc tính inline: style="color: red;". Nếu chọn remove-style, thẻ <style> sẽ bị loại bỏ khỏi kết quả.

Quá trình xử lý

Trình duyệt phân tích HTML thành tài liệu, nối tất cả nội dung thẻ <style> với CSS bổ sung, tìm các khối quy tắc đơn giản (ví dụ p { ... }) và áp dụng các khai báo tương ứng vào thuộc tính style của từng phần tử. Các bộ chọn không hợp lệ sẽ bị bỏ qua.

Giới hạn

Quá trình chuyển đổi chạy hoàn toàn trên máy của bạn, không tải tài nguyên bên ngoài. Tuy nhiên, nó không hỗ trợ đầy đủ các tính năng CSS như cascade, độ ưu tiên (specificity), media queries, keyframes, pseudo-elements, CSS lồng nhau, hoặc các stylesheet liên kết ngoài. Trình duyệt có thể chuẩn hóa HTML trong quá trình phân tích. Kết quả không phải là trình làm sạch bảo mật, không đảm bảo hiển thị giống hệt trên mọi trình duyệt; hãy kiểm tra trong ứng dụng email hoặc trình duyệt đích.

Câu hỏi thường gặp

1. Tôi có thể chuyển đổi tối đa bao nhiêu ký tự?

Mỗi ô nhập liệu giới hạn 500.000 ký tự. Nếu vượt quá, bạn cần chia nhỏ nội dung.

2. Tại sao một số quy tắc CSS không được áp dụng?

Công cụ chỉ xử lý các bộ chọn đơn giản (ví dụ p, .class, #id) và bỏ qua các bộ chọn phức tạp như :hover, ::before hoặc media queries. Ngoài ra, nếu CSS có cú pháp không hợp lệ, nó sẽ bị bỏ qua.

3. Tôi có thể giữ lại thẻ <style> trong kết quả không?

Có, chỉ cần bỏ chọn tùy chọn remove-style trước khi chuyển đổi. Khi đó, thẻ <style> sẽ được giữ nguyên trong tài liệu đầu ra.

Kiểm tra nhanh

• Dán HTML có chứa thẻ <style>.
• Thêm CSS bổ sung nếu cần.
• Chọn hoặc bỏ chọn remove-style.
• Nhấn nút chuyển đổi.
• Sao chép kết quả và kiểm tra trong email hoặc trình duyệt.