Inline CSS cho email HTML online

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ợ.

Kết quả

Bấm “Chạy” để xem kết quả.

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ự.

Dùng trong code của bạn

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));

Tài liệu API → Nhận API key miễn phí

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.