Assistenza CSS

Puoi definire lo stile delle email inviate a Gmail utilizzando blocchi <style> incorporati e CSS standard. Sono supportati la maggior parte dei selettori CSS, degli attributi e delle query multimediali. Le proprietà CSS e i selettori CSS non supportati potrebbero essere ignorati da Gmail.

Consulta la guida di riferimento per un elenco completo delle query e delle proprietà CSS supportate.

Selettore CSS

Per applicare gli stili puoi utilizzare un sottoinsieme di selettori CSS. Gmail supporta selettori di classe, elemento e ID.

Esempio

<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>

Query supporti CSS

Puoi utilizzare le query supporti CSS standard per adattare lo stile di un'email in base al dispositivo attuale dell'utente. Gmail supporta le query in base alla larghezza dello schermo, all'orientamento e alla risoluzione.

Esempio

<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>

Proprietà e query CSS supportate

Gmail supporta le seguenti proprietà CSS:

  • azimuth
  • background
  • 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
  • interruzione dopo
  • interruzione prima
  • rompicapo
  • caption-side
  • clear
  • colore
  • numero di colonne
  • riempimento delle colonne
  • Spaziatura colonna
  • regola-colonna
  • colore-regola-colonna
  • stile-colonna-regola
  • larghezza-regola-colonna
  • arco di colonna
  • larghezza delle colonne
  • colonne
  • direction
  • display
  • elevation
  • empty-cells
  • numero in virgola mobile
  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • caratteri-alternativi-varianti-caratteri
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • altezza
  • image-orientation
  • image-resolution
  • ime-mode
  • isolamento
  • 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
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • interruzione di pagina-dopo
  • interruzione di pagina-prima
  • interruzione di pagina all'interno
  • metti in pausa
  • pause-after
  • pause-before
  • diamante
  • pitch-range
  • citazioni
  • richness
  • parlare
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • tensione
  • 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

Query supporti supportate

Tipi supportati

  • all
  • schermo

Query supportate

  • min-width
  • max-width
  • larghezza-dispositivo-min
  • larghezza massima del dispositivo
  • orientamento
  • risoluzione minima
  • massima risoluzione

Parole chiave supportate

  • e
  • solo