Vous pouvez styliser les e-mails envoyés à Gmail à l'aide de blocs <style> intégrés et de CSS standard. La plupart des sélecteurs, attributs et requêtes multimédias CSS sont compatibles.
Gmail peut ignorer les propriétés et sélecteurs CSS non compatibles.
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 accepte les sélecteurs de classe, d'élément et d'identifiant.
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 multimédias CSS
Vous pouvez utiliser des requêtes multimédias CSS standards pour ajuster le style d'un e-mail en fonction de l'appareil actuel de l'utilisateur. Gmail accepte les requêtes concernant 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
- break-after
- break-before
- break-inside
- caption-side
- clear
- couleur
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- colonnes
- direction
- display
- élévation
- 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
- vue générale
- outline-color
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- pause
- pause-after
- pause-before
- suggestion
- 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 multimédias acceptées
Types acceptés
- tous
- écran
Requêtes acceptées
- min-width
- max-width
- min-device-width
- max-device-width
- orientation
- min-resolution
- max-resolution
Mots clés acceptés
- et
- uniquement