Inline CSS cho email template HTML đúng thứ tự ưu tiên, không phải chép tay từng thẻ
Email HTML thiết kế đẹp trên trình duyệt thường vỡ bố cục khi mở trong Outlook hay một số ứng dụng email, vì các ứng dụng này bỏ qua hoặc chỉ hiểu một phần CSS đặt trong thẻ <style>. Cách an toàn nhất là inline CSS email template: chép từng khai báo vào thuộc tính style của từng thẻ. Công cụ CSS Inliner làm việc này tự động ngay trong trình duyệt, tính specificity như trình duyệt thật, giữ lại @media và :hover, và báo dung lượng trước khi Gmail cắt thư.
Tính năng nổi bật
- Bộ phân tích CSS riêng: đọc quy tắc, danh sách selector, chú thích, chuỗi trong nháy, url() có dấu chấm phẩy và khai báo !important
- Tính specificity theo Selectors Level 4, kể cả :not(), :is(), :has() lấy theo đối số mạnh nhất và :where() bằng 0
- Áp cascade đúng: specificity cao thắng, bằng nhau thì quy tắc sau thắng, style nội tuyến có sẵn thắng trừ khi quy tắc có !important
- Giữ nguyên @media, @font-face, @import và selector có :hover, :focus, ::before trong thẻ <style> vì không thể inline
- Tùy chọn xóa class, id không còn được CSS giữ lại tham chiếu, không đụng id là đích của liên kết #
- Tùy chọn thêm thuộc tính bgcolor, width, height, align, valign cho table, td, th, img để Outlook desktop hiển thị đúng
- So sánh dung lượng trước và sau, cảnh báo khi vượt khoảng 102 KB là ngưỡng Gmail cắt thư
- Xem trước trong khung cách ly, sao chép hoặc tải tệp HTML đã inline; mọi xử lý diễn ra trong trình duyệt
Vì sao email HTML vẫn cần inline CSS
Trang web chỉ cần chạy trên vài trình duyệt hiện đại, còn một email phải hiển thị trên rất nhiều ứng dụng khác nhau: Gmail bản web và ứng dụng di động, Outlook bản desktop dùng bộ dựng hình của Word, Outlook.com, Apple Mail, Yahoo Mail và các ứng dụng email của nhà mạng. Mỗi ứng dụng xử lý thẻ <style> theo cách riêng: có nơi đọc được, có nơi đọc một phần, có nơi bỏ qua trong một số trường hợp như khi chuyển tiếp thư. Thuộc tính style nằm ngay trên từng thẻ là thứ gần như mọi ứng dụng đều đọc, nên các nền tảng gửi email lớn đều khuyên inline CSS trước khi gửi. Làm tay thì vừa chậm vừa dễ sai thứ tự ưu tiên, nhất là khi một thẻ khớp với nhiều quy tắc. Công cụ này làm đúng việc trình duyệt làm khi tính style: gom mọi quy tắc khớp, so specificity, so thứ tự, xét !important, rồi ghi kết quả thắng vào thuộc tính style.
Lợi ích khi sử dụng
- Không phải chép tay CSS vào từng thẻ td, a, p của email dài
- Kết quả theo đúng quy tắc cascade nên không có chuyện style yếu hơn đè lên style mạnh hơn
- Giữ được phần responsive @media và hiệu ứng :hover cho những ứng dụng email hỗ trợ
- Biết trước email có bị Gmail cắt hay không để rút gọn kịp thời
- Mã HTML không rời khỏi máy, phù hợp cả với email chứa thông tin nội bộ
Cách inline CSS cho email template
- 1Dán toàn bộ mã HTML email có thẻ <style> vào ô đầu vào, hoặc mở tệp .html từ máy. Có thể dán cả tài liệu đầy đủ có DOCTYPE hoặc chỉ một đoạn HTML.
- 2Chọn tùy chọn: xóa quy tắc đã inline khỏi <style>, xóa class và id không còn dùng, thêm thuộc tính HTML cho email, giữ hoặc bỏ !important trong style nội tuyến.
- 3Bấm Inline CSS. Công cụ phân tích CSS, tìm phần tử khớp từng selector và ghi khai báo thắng vào thuộc tính style.
- 4Đọc thống kê: số quy tắc đã inline, selector giữ lại trong <style>, selector không khớp phần tử nào, selector trình duyệt không hiểu và cảnh báo dung lượng Gmail.
- 5Bấm Xem trước để kiểm tra bố cục trong khung cách ly, sau đó sao chép HTML hoặc tải tệp để đưa vào nền tảng gửi email.
- 6Gửi thử tới vài hộp thư thật (Gmail, Outlook, điện thoại) trước khi gửi hàng loạt, vì không công cụ nào mô phỏng được đầy đủ mọi ứng dụng email.
Specificity quyết định style nào thắng khi inline
Mỗi selector có một bộ ba điểm (a, b, c): a đếm số id, b đếm số class, thuộc tính [type] và pseudo-class như :first-child, c đếm số tên thẻ và pseudo-element. Hai quy tắc cùng đặt color cho một phần tử thì quy tắc có bộ ba lớn hơn thắng, so từ a sang c; nếu bằng nhau hoàn toàn thì quy tắc xuất hiện sau thắng. Ví dụ #footer td có điểm (1, 0, 1) nên thắng .header td có điểm (0, 1, 1) dù đứng trước. Các pseudo-class đặc biệt được tính theo Selectors Level 4: :not(), :is(), :has() lấy điểm của đối số mạnh nhất trong danh sách, còn :where() luôn bằng 0. Công cụ tính đúng các quy tắc này, nên kết quả inline giống với những gì trình duyệt hiển thị khi còn thẻ <style>.
Style nội tuyến có sẵn và !important được xử lý thế nào
Nếu một thẻ đã có sẵn thuộc tính style, các khai báo đó thắng mọi quy tắc thường trong <style>, đúng như cách trình duyệt làm. Ngoại lệ là quy tắc có !important: khai báo !important trong stylesheet thắng khai báo nội tuyến thường, và chỉ thua khai báo nội tuyến cũng có !important. Trong mẫu có sẵn của công cụ, nút .btn có style="color: #000000" nhưng quy tắc .btn đặt color: #ffffff !important, nên kết quả là chữ trắng. Sau khi đã chọn được giá trị thắng, !important trong style nội tuyến thường không cần nữa nên công cụ mặc định bỏ đi; bật tùy chọn giữ !important khi bạn muốn chặn CSS khác của nền tảng gửi email ghi đè lên.
Những gì phải ở lại trong thẻ <style>
Thuộc tính style chỉ mô tả trạng thái tĩnh của một phần tử, nên có những thứ không thể inline: khối @media cho giao diện điện thoại, @font-face khai báo phông, hiệu ứng :hover và :focus, pseudo-element ::before và ::after. Công cụ giữ nguyên các phần này trong thẻ <style> ở đầu tài liệu. Một điểm cần nhớ khi viết @media cho email: vì style nội tuyến thắng CSS trong <style>, các khai báo trong @media muốn ghi đè thuộc tính đã inline phải có !important, ví dụ .wrapper { width: 100% !important; }. Gmail bản web và ứng dụng di động hiện hỗ trợ thẻ <style> và @media ở mức cơ bản, nhưng hỗ trợ khác nhau giữa các ứng dụng và loại tài khoản, nên bố cục cơ bản vẫn nên dựa vào style nội tuyến.
Thuộc tính HTML cũ giúp Outlook desktop hiển thị đúng
Outlook bản desktop trên Windows dựng email bằng bộ máy của Word nên hiểu CSS rất hạn chế, đặc biệt với chiều rộng và màu nền của bảng. Vì vậy mẫu email chuyên nghiệp thường khai báo song song cả CSS lẫn thuộc tính HTML kiểu cũ như width="600" và bgcolor="#ffffff" trên thẻ table, td. Khi bật tùy chọn thêm thuộc tính HTML, công cụ lấy giá trị đã inline để thêm bgcolor từ background-color dạng mã hex hoặc tên màu, width và height từ giá trị px hoặc phần trăm, align từ text-align và valign từ vertical-align cho ô bảng. Thuộc tính đã có sẵn trên thẻ không bị ghi đè, và các giá trị phức tạp như rgb() hay calc() được bỏ qua thay vì đoán.
Ngưỡng khoảng 102 KB khiến Gmail cắt thư
Gmail cắt những email có phần HTML lớn hơn khoảng 102 KB, chỉ hiện phần đầu kèm dòng thông báo thư bị cắt bớt và liên kết xem toàn bộ thư. Phần bị giấu thường là chân email, nơi có liên kết hủy đăng ký và pixel đo lượt mở, nên vừa ảnh hưởng trải nghiệm vừa làm lệch số liệu. Inline CSS làm email nặng lên vì cùng một khai báo được lặp lại trên nhiều thẻ, nên công cụ hiển thị dung lượng UTF-8 trước và sau, cảnh báo vàng khi gần ngưỡng và cảnh báo đỏ khi vượt. Cách giảm hiệu quả là xóa class, id không còn dùng, bỏ chú thích và khoảng trắng thừa, rút gọn nội dung, và nhớ rằng nền tảng gửi email sẽ còn chèn thêm link theo dõi khi gửi thật.
Xóa class và id sau khi inline có an toàn không
Sau khi inline, phần lớn class và id trong email chỉ còn là chữ thừa làm tăng dung lượng. Nhưng xóa hết thì các khối @media hay :hover còn giữ lại sẽ không còn gì để khớp. Công cụ quét phần CSS giữ lại để biết class và id nào vẫn đang được dùng, chỉ xóa phần không còn ai tham chiếu. Id là đích của liên kết nội bộ dạng href="#muc-luc" cũng được giữ nguyên. Nếu nền tảng gửi email của bạn dùng class riêng cho tính năng khác, ví dụ đánh dấu khối nội dung động, hãy tắt tùy chọn này.
Giới hạn của công cụ
Công cụ chỉ đọc CSS trong thẻ <style>; stylesheet ngoài qua thẻ <link> không được tải, bạn cần dán nội dung CSS đó vào thẻ <style> trước. HTML được phân tích bằng DOMParser của trình duyệt nên có một số chuẩn hóa tự động, ví dụ thêm thẻ tbody vào bảng và tự đóng thẻ bị thiếu. Chú thích điều kiện kiểu <!--[if mso]> được giữ nguyên như một chú thích, nên CSS hay HTML nằm bên trong không được inline; hãy kiểm tra lại nếu mẫu dùng mã riêng cho Outlook. Công cụ không tách thuộc tính viết tắt như margin, padding thành từng cạnh mà giữ nguyên và sắp thứ tự theo cascade. Thẻ <style> có media riêng như print hoặc có thuộc tính data-embed được giữ nguyên, không inline. Cuối cùng, kết quả nên được gửi thử trên các ứng dụng email thật vì mỗi ứng dụng còn có những giới hạn CSS riêng.
Câu hỏi thường gặp (FAQ)
Inline CSS cho email là gì?
Là chuyển các khai báo CSS đang nằm trong thẻ <style> vào thuộc tính style của từng thẻ HTML, ví dụ từ td { color: #333 } thành <td style="color: #333">. Nhiều ứng dụng email chỉ đọc chắc chắn style nội tuyến nên đây là bước chuẩn trước khi gửi email HTML.
Gmail có đọc được thẻ <style> không?
Gmail bản web và ứng dụng di động hiện hỗ trợ thẻ <style> trong phần head ở mức cơ bản, kể cả @media. Tuy vậy hỗ trợ khác nhau giữa các ứng dụng, loại tài khoản và khi thư được chuyển tiếp, nên bố cục chính vẫn nên dựa vào style nội tuyến, còn <style> dùng cho phần nâng cao như responsive.
Công cụ quyết định giá trị nào thắng khi nhiều quy tắc cùng khớp một thẻ?
Theo đúng cascade của trình duyệt: khai báo !important thắng khai báo thường; trong cùng mức, style nội tuyến có sẵn thắng stylesheet; giữa các quy tắc stylesheet, specificity cao hơn thắng; bằng nhau thì quy tắc đứng sau thắng.
Vì sao :hover và @media không được inline?
Thuộc tính style chỉ mô tả trạng thái tĩnh, không có cú pháp cho trạng thái rê chuột hay điều kiện kích thước màn hình. Vì vậy công cụ giữ các quy tắc này trong thẻ <style> để những ứng dụng email hỗ trợ vẫn dùng được.
Vì sao quy tắc trong @media không có tác dụng sau khi inline?
Vì style nội tuyến thắng CSS trong thẻ <style>. Khai báo trong @media muốn ghi đè giá trị đã inline phải thêm !important, ví dụ width: 100% !important.
Có nên bật tùy chọn giữ !important không?
Thường thì không cần, vì công cụ đã chọn giá trị thắng. Chỉ bật khi bạn muốn giá trị nội tuyến không bị CSS khác ghi đè, và nhớ rằng khi đó các quy tắc @media cũng khó ghi đè hơn.
Tùy chọn xóa class và id có làm hỏng email không?
Công cụ chỉ xóa class, id không còn xuất hiện trong phần CSS giữ lại và giữ id đang là đích của liên kết #. Nếu nền tảng gửi email dùng class riêng cho tính năng khác thì hãy tắt tùy chọn này.
Vì sao cần thêm bgcolor và width khi đã có CSS?
Outlook bản desktop trên Windows dựng email bằng bộ máy của Word và hiểu CSS hạn chế, nhất là màu nền và chiều rộng bảng. Thuộc tính HTML kiểu cũ như bgcolor, width được bộ máy này đọc ổn định hơn.
Email của tôi bị Gmail cắt, phải làm sao?
Gmail cắt email khi phần HTML lớn hơn khoảng 102 KB. Hãy bật xóa class và id không dùng, bỏ chú thích, rút gọn khoảng trắng, bớt nội dung hoặc chia thành nhiều email. Nhớ chừa khoảng trống cho link theo dõi mà nền tảng gửi email tự chèn.
Công cụ có tải CSS từ thẻ <link> không?
Không. Công cụ không tải tài nguyên ngoài; bạn cần mở tệp CSS, dán nội dung vào một thẻ <style> trong email rồi chạy lại. Nhiều ứng dụng email cũng bỏ qua stylesheet ngoài nên làm vậy là cần thiết.
Mã HTML email của tôi có bị gửi lên máy chủ không?
Không. Việc phân tích CSS, tìm phần tử và ghi style diễn ra hoàn toàn trong trình duyệt của bạn, trang không gửi mã HTML đi đâu.
Vì sao kết quả có thêm thẻ tbody?
HTML được phân tích bằng DOMParser của trình duyệt, và theo chuẩn HTML trình duyệt tự thêm tbody vào bảng. Thẻ này không ảnh hưởng hiển thị trong ứng dụng email.
Selector không khớp phần tử nào thì sao?
Công cụ liệt kê chúng trong phần thống kê. Khi bật xóa quy tắc đã inline, các selector này cũng bị bỏ khỏi <style> vì không dùng tới; tắt tùy chọn đó nếu bạn muốn giữ lại cho phần HTML được chèn sau.
Từ khóa liên quan
- inline css email template
- css inliner
- inline css online
- chuyển css sang inline style
- inline css cho email html
- email html inline style
- css inline tool
- gmail cắt email 102kb
- gmail clipping
- email template outlook
- bgcolor email outlook
- specificity css
- tính specificity selector
- responsive email media query
- juice css inliner
- premailer online
- thiết kế email html
- email marketing html
- css trong email
- xóa class email html
