CSS pris en charge par AMP pour e-mail
Ce document décrit les fonctionnalités CSS actuellement prises en charge dans les e-mails AMP.
Application du CSS
Feuille de style intégrée
Lors de l'utilisation d'une feuille de style intégrée, le CSS est spécifié dans une seule balise <style amp-custom> située dans la balise <head> de l'e-mail.
Styles en ligne
En plus d'une feuille de style interne, les styles en ligne peuvent être spécifiés sur n'importe quel élément à l'aide de l'attribut style.
Feuille de style externe
Les feuilles de style externes ne sont pas prises en charge dans AMP pour e-mail.
L'utilisation de <link rel="stylesheet" href="..."> n'est autorisée nulle part dans l'e-mail.
Sélecteurs CSS pris en charge
Sélecteurs simples
- Sélecteur de type
elementname - Sélecteur de classe
.classname - Sélecteur d'ID
#idname - Sélecteur universel
* - Sélecteur d'attribut
[attr=value]
Combinateurs
- Combinateur de voisin adjacent
A + B - Combinateur de voisin général
A ~ B - Combinateur d'enfant
A > B - Combinateur descendant
A B
Pseudo-classes
: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
Propriétés CSS prises en charge
-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
Restrictions supplémentaires
Les propriétés CSS suivantes ont des restrictions supplémentaires :
| Propriété | Restrictions |
|---|---|
cursor |
Les seules valeurs autorisées sont pointer et initial. |
filter |
url() n'est pas autorisée. |
transition |
Seules opacity, transform, visibility et offset-distance peuvent être animées. |
visibility |
Les seules valeurs autorisées sont hidden, visible et initial. |
z-index |
Seules les valeurs comprises entre -100 et 100 sont autorisées. |
Règles At
La seule règle at actuellement prise en charge est @media. Voir Fonctionnalités multimédias pour plus d'informations.
Polices personnalisées (@font-face)
Les polices personnalisées ne sont pas prises en charge dans AMP our e-mail.
Fonctionnalités multimédias
Liste des fonctionnalités multimédias prises en charge pour l'application conditionnelle de règles via les requêtes @media.
device-widthmax-device-widthmin-device-widthhoverorientationpointerresolutionmax-resolutionmin-resolutionwidthmax-widthmin-width