AMP for Email es compatible con las CSS
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-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
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-widthmax-device-widthmin-device-widthhoverorientationpointerresolutionmax-resolutionmin-resolutionwidthmax-widthmin-width