Inline CSS cho email API
Chuyển các quy tắc trong <style> vào thuộc tính style="" cho email HTML, giữ media query, cảnh báo các CSS mà Gmail, Outlook không hỗ trợ.
Nhiều trình đọc email bỏ qua hoặc xoá khối <style>, nên email HTML phải mang CSS trong thuộc tính style. Bộ inline phân tích các style sheet của email, áp từng quy tắc vào các phần tử khớp theo đúng thứ tự (độ ưu tiên của selector, thứ tự trong mã, !important, style inline có sẵn được ưu tiên hơn quy tắc thường) rồi ghi kết quả vào inline.
Các quy tắc không inline được như @media cho giao diện di động, :hover và @font-face được giữ trong một thẻ <style> ở head (keep_style_tags=true để giữ cả các khối gốc). Sau khi inline, API báo các vấn đề tương thích: flexbox và grid, position, float, ảnh nền, border-radius và box-shadow trên Outlook, biến CSS, calc(), đơn vị rem / vh, ảnh thiếu alt, và email vượt giới hạn 102 KB mà Gmail sẽ cắt bớt.
Selector hỗ trợ: thẻ, class, id, thuộc tính, quan hệ con cháu và con trực tiếp, :first-child và các pseudo-class cấu trúc tương tự.
Tham số
| Tên | Vị trí | Kiểu | Bắt buộc | Mặc định | |
|---|---|---|---|---|---|
html | body | string | có | HTML của email (tối đa 2 MB). | |
keep_style_tags | body | boolean | không | false | Giữ lại các khối <style> gốc. |
Ví dụ
curl -X POST "https://apibox.io.vn/v1/email-inline" \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"}'const res = await fetch('https://apibox.io.vn/v1/email-inline', {
method: 'POST',
headers: {
Authorization: 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"html": "<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"
}),
});
const data = await res.json();
console.log(data);import requests
res = requests.post(
"https://apibox.io.vn/v1/email-inline",
headers={"Authorization": "Bearer YOUR_API_KEY"},
json={"html": "<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\"big\">Xin chào</p>"},
timeout=30,
)
print(res.json())<?php
$ch = curl_init('https://apibox.io.vn/v1/email-inline');
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
CURLOPT_POSTFIELDS => '{"html":"<style>p{color:red} .big{font-size:20px} @media (max-width:600px){p{font-size:12px}}</style><p class=\\"big\\">Xin chào</p>"}',
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));Kết quả trả về
{
"html": "<!DOCTYPE html><html><head><style>@media (max-width:600px){p{font-size:12px}}</style></head><body><p class=\"big\" style=\"color: red; font-size: 20px\">Xin chào</p></body></html>",
"stats": {
"rules": 2,
"applications": 2,
"unmatched_selectors": 0,
"kept_in_style_tag": 1,
"size_kb": 0
},
"warnings": []
}Ứng dụng
- Chuẩn bị bản tin, email giao dịch trước khi gửi
- Pipeline dựng template email
- Kiểm tra lỗi Outlook của template trong CI
- Làm sạch HTML dán từ công cụ thiết kế
Hỏi đáp
Vì sao phải inline CSS?
App Gmail, Outlook và nhiều webmail bỏ hoặc giới hạn khối <style>; style inline là CSS duy nhất mọi trình đọc đều áp dụng.
Media query có được giữ không?
Có, chúng nằm trong thẻ <style> ở head, nơi các trình đọc hỗ trợ (Apple Mail, Gmail web, iOS) sử dụng.
API có tự sửa các cảnh báo không?
Không, API chỉ báo để bạn viết lại bằng bảng và các thuộc tính được hỗ trợ rộng rãi.
API liên quan
HTML sang Markdown
Chuyển HTML hoặc URL trang web bất kỳ thành Markdown gọn gàng chuẩn GitHub, hỗ trợ bảng, trích xuất bài viết chính và link tuyệt đối.
</>Markdown sang HTML
Chuyển Markdown chuẩn GitHub sang HTML, hỗ trợ bảng và gạch ngang. Kết quả được lọc sẵn script và event handler để chống XSS.
<✓>Lọc HTML an toàn
Loại bỏ script, iframe, form, event handler, style inline và link javascript: khỏi HTML không tin cậy trước khi hiển thị.