Vous pouvez styliser les e-mails envoyés à Gmail à l'aide de blocs <style>
intégrés et du code CSS standard. La plupart des sélecteurs CSS, des attributs et des requêtes média sont compatibles.
Les propriétés et sélecteurs CSS non compatibles peuvent être ignorés par Gmail.
Consultez le guide de référence pour obtenir la liste complète des propriétés et requêtes CSS compatibles.
Sélecteurs CSS
Vous pouvez utiliser un sous-ensemble de sélecteurs CSS pour appliquer des styles. Gmail est compatible avec les sélecteurs de classe, d'élément et d'ID.
Exemple
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p>
<p>Jerry</p>
</div>
</body>
</html>
Requêtes média CSS
Vous pouvez utiliser des requêtes média CSS standards pour adapter le style d'un e-mail à l'appareil actuel de l'utilisateur. Gmail accepte les requêtes portant sur la largeur, l'orientation et la résolution de l'écran.
Exemple
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
Propriétés et requêtes CSS compatibles
Les propriétés CSS suivantes sont compatibles avec Gmail:
- azimuth
- arrière-plan
- 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
- box-sizing
- pause après
- pause avant
- cambriolage
- caption-side
- clear
- couleur
- nombre de colonnes
- remplissage colonne
- écart entre colonnes
- règle-colonne
- couleur-règle-colonne
- style des règles de colonnes
- largeur-règle-colonne
- étendue de colonnes
- largeur de colonne
- colonnes
- direction
- afficheur
- elevation
- empty-cells
- float
- police
- 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-weight
- hauteur
- image-orientation
- image-resolution
- ime-mode
- isolement
- layout-flow
- layout-grid
- layout-grid-char
- layout-grid-char-spacing
- layout-grid-line
- layout-grid-mode
- layout-grid-type
- letter-spacing
- line-break
- line-height
- list-style
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marker-offset
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- contour
- outline-color
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- saut de page après
- saut de page avant
- saut de page
- mettre en pause
- pause-after
- pause-before
- lancer
- pitch-range
- citations
- performances
- parler
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- contrainte
- table-layout
- text-align
- text-align-last
- text-autospace
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-indent
- text-justify
- text-kashida-space
- text-orientation
- text-overflow
- text-transform
- text-underline-position
- unicode-bidi
- vertical-align
- voice-family
- white-space
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- zoom
Requêtes média acceptées
Types pris en charge
- tous
- écran
Requêtes acceptées
- min-width
- max-width
- largeur-min-appareil
- max-device-width
- orientation
- résolution min.
- max-resolution
Mots clés acceptés
- et
- uniquement