Assistance CSS

Vous pouvez styliser les e-mails envoyés à Gmail à l'aide de blocs <style> intégrés et de code CSS standard. La plupart des sélecteurs CSS, des attributs et des requêtes média sont acceptés. 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 accepte 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 ajuster le style d'un e-mail en fonction de l'appareil actuel de l'utilisateur. Gmail prend en charge 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
  • après-midi
  • pause-avant
  • cambriolage
  • caption-side
  • clear
  • couleur
  • nombre de colonnes
  • remplissage de colonne
  • écart de colonne
  • règle-colonne
  • couleur-règle-colonne
  • style règle-colonne
  • largeur-règle-colonne
  • intervalle de colonne
  • largeur de colonne
  • colonnes
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • polices-variantes-variantes
  • 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
  • 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 acceptés

  • tous
  • écran

Requêtes acceptées

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

Mots clés acceptés

  • et
  • uniquement