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-color
align-content
align-items
align-self
appearance
azimuth
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
color
color-adjust
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
counter-increment
counter-reset
cursor
direction
display
elevation
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variation-settings
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
hyphens
image-orientation
image-resolution
inline-size
isolation
justify-content
justify-items
justify-self
left
letter-spacing
line-break
line-height
list-style
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
offset-distance
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
overflow-wrap
padding
padding-bottom
padding-left
padding-right
padding-top
pause
pause-after
pause-before
perspective
perspective-origin
pitch
pitch-range
place-items
position
quotes
resize
richness
right
row-gap
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-shadow
text-transform
text-underline-position
top
transform
transform-box
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
voice-family
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-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-width
max-device-width
min-device-width
hover
orientation
pointer
resolution
max-resolution
min-resolution
width
max-width
min-width