Các CSS được Hỗ trợ của AMP cho Email
Tài liệu này nêu các tính năng CSS hiện đang được hỗ trợ trong các email AMP.
Áp dụng CSS
Stylesheet nội bộ
Khi sử dụng một stylesheet nội bộ, CSS được quy định trong một thẻ <style amp-custom> nằm trong thẻ <head> của email.
Phong cách inline
Ngoài một stylesheet nội bộ, các phong cách inline có thể được quy định trên bất kỳ yếu tố nào sử dụng thuộc tính style.
Stylesheet bên ngoài
Các stylesheet bên ngoài không được hỗ trợ trong AMP cho Email.
Việc sử dụng <link rel="stylesheet" href="..."> không được cho phép trong email.
Các bộ chọn CSS được hỗ trợ
Các bộ chọn đơn giản
- Bộ chọn loại
elementname - Bộ chọn lớp
.classname - Bộ chọn ID
#idname - Bộ chọn đa năng
* - Bộ chọn thuộc tính
[attr=value]
Các bộ kết hợp
- Bộ kết hợp anh em liền kề
A + B - Bộ kết hợp anh em tổng quát
A ~ B - Bộ kết hợp con
A > B - Bộ kết hợp con cháu
A B
Các lớp giả
:active:checked:default:disabled:empty:enabled:first-child:first-of-type:focus:focus-within:hover:in-range:indeterminate:invalid:last-child:last-of-type:last-of-type:not:nth-child:nth-last-child:nth-last-of-type:nth-of-type:only-child:only-of-type:optional:out-of-range:read-only:read-write:required:valid
Các thuộc tính CSS được hỗ trợ
-moz-appearance-webkit-appearance-webkit-tap-highlight-coloralign-contentalign-itemsalign-selfappearanceazimuthbackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-colorclearcolorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscounter-incrementcounter-resetcursordirectiondisplayelevationempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variation-settingsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowsheighthyphensimage-orientationimage-resolutioninline-sizeisolationjustify-contentjustify-itemsjustify-selfleftletter-spacingline-breakline-heightlist-stylelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthmix-blend-modeobject-fitobject-positionoffset-distanceopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-yoverflow-wrappaddingpadding-bottompadding-leftpadding-rightpadding-toppausepause-afterpause-beforeperspectiveperspective-originpitchpitch-rangeplace-itemspositionquotesresizerichnessrightrow-gapspeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestresstable-layouttext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-shadowtext-transformtext-underline-positiontoptransformtransform-boxtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilityvoice-familywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Các hạn chế bổ sung
Các thuộc tính CSS sau có các hạn chế bổ sung:
| Thuộc tính | Hạn chế |
|---|---|
cursor |
Các giá trị duy nhất được cho phép là pointer (con trỏ) và initial (ban đầu). |
filter |
url() không được cho phép. |
transition |
Chỉ opacity (độ mờ), transform (chuyển đổi), visibility (hiển thị) và offset-distance (bù khoảng cách) có thể được hoạt họa. |
visibility |
Các giá trị duy nhất được cho phép là hidden (ẩn), visible (hiển thị) và initial (ban đầu). |
z-index |
Chỉ các giá trị từ -100 đến 100 được cho phép. |
Quy tắc @
At-rule (Quy tắc @) duy nhất hiện được hỗ trợ là @media. Xem Các tính năng đa phương tiện để biết thêm thông tin.
Các phông chữ tùy chỉnh (@font-face)
Các phông chữ tùy chỉnh không được hỗ trợ trong AMP cho Email.
Các tính năng đa phương tiện
Danh sách các tính năng đa phương tiện được hỗ trợ để áp dụng có điều kiện các quy tắc thông qua truy vấn @media.
device-widthmax-device-widthmin-device-widthhoverorientationpointerresolutionmax-resolutionmin-resolutionwidthmax-widthmin-width