Assistance CSS

Vous pouvez styliser les e-mails envoyés à Gmail à l'aide de blocs <style> intégrés et d'un CSS standard. La plupart des sélecteurs CSS, des attributs et des requêtes média sont compatibles. Gmail risque d'ignorer les sélecteurs et les propriétés 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 appliquer des styles à l'aide d'un sous-ensemble de sélecteurs CSS. 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 de médias CSS

Vous pouvez utiliser des requêtes média CSS standards pour ajuster le style d'un e-mail en fonction de 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 prises en charge dans 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-colonnes
  • Remplir une colonne
  • écart entre colonnes
  • règle-colonne
  • couleur-règle-colonne
  • style-règle-colonne
  • 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
  • variantes de police
  • 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 à l'intérieur
  • 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 compatibles

Types pris en charge

  • tous
  • écran

Requêtes acceptées

  • min-width
  • max-width
  • largeur-min-appareil
  • largeur-max. de l'appareil
  • orientation
  • résolution minimale
  • résolution maximale

Mots clés acceptés

  • et
  • uniquement