AMP for Email es compatible con las CSS
Important: this documentation is not applicable to your currently selected format ads!
En este documento se describen las funciones de las CSS que actualmente son compatibles con los correos electrónicos de AMP.
Cómo implementar las CSS
Hojas de estilo internas
Cuando se utilizan hojas de estilo internas, la CSS se define dentro de una sola etiqueta <style amp-custom>
que se ubica en la etiqueta <head>
del correo electrónico.
Estilos en línea
Además de las hojas de estilo internas, también pueden definirse estilos en línea para cualquier elemento mediante el atributostyle
.
Hojas de estilo externas
Las hojas de estilo externas no son compatibles con AMP for Email.
No se permite utilizar <link rel="stylesheet" href="...">
en ninguna parte del correo electrónico.
Selectores que son compatibles con las CSS
Selectores sencillos
- Tipo de selector
elementname
- Clase del selector
.classname
- ID del selector
#idname
- Selector universal
*
- Selector de atributos
[attr=value]
Combinadores
- Combinador de hermanos adyacentes
A + B
- Combinador de hermanos generales
A ~ B
- Combinador hijo
A > B
- Combinador descendiente
A B
Pseudoclases
: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
Propiedades que son compatibles con las CSS
-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
Restricciones adicionales
Las siguientes propiedades de las CSS tienen restricciones adicionales:
Propiedad | Restricciones |
---|---|
cursor |
Los únicos valores que se permiten son pointer e initial . |
filter |
url() no está permitida. |
transition |
Solamente opacity , transform , visibility y offset-distance pueden generar animaciones. |
visibility |
Los únicos valores que se permiten son hidden , visible e initial . |
z-index |
Solo se permiten los valores entre -100 y 100. |
Reglas at
La única regla at actualmente compatible es @media
. Consulte las funciones de medios para obtener más información.
Fuentes personalizadas (@font-face
)
Las fuentes personalizadas no son compatibles con AMP for Email.
Funciones de medios
A continuación, se muestra una lista de funciones de medios que son compatibles para integrar reglas condicionales mediante consultas en @media
.
device-width
max-device-width
min-device-width
hover
orientation
pointer
resolution
max-resolution
min-resolution
width
max-width
min-width