Assistance CSS

Vous pouvez styliser les e-mails envoyés à Gmail à l'aide de blocs <style> intégrés et 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 les propriétés et les requêtes CSS compatibles.

Sélecteurs CSS

Vous pouvez utiliser un sous-ensemble de sélecteurs CSS pour appliquer des styles. Gmail prend en charge les classes, et les sélecteurs 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 pour l'appareil actuel de l'utilisateur. Gmail accepte les requêtes sur la largeur de l'écran, l'orientation et la résolution.

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 CSS acceptées et requêtes

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 de colonnes
  • colonne-gap
  • règle-colonne
  • couleur-règle-colonne
  • style-règle-colonne
  • largeur-règle-de-colonne
  • intervalle de colonnes
  • largeur de colonne
  • 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
  • saut-page-après
  • saut-page-avant
  • saut de page à l'intérieur
  • 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 média acceptées

Types acceptés

  • tous
  • écran

Requêtes acceptées

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • orientation
  • résolution minimale
  • résolution maximale

Mots clés acceptés

  • et
  • uniquement