Assistenza CSS

Puoi applicare uno stile alle email inviate a Gmail utilizzando i blocchi <style> incorporati e CSS standard. La maggior parte dei selettori, degli attributi e delle media query CSS sono supportati. Le proprietà e i selettori CSS non supportati potrebbero essere ignorati da Gmail.

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

Selettori CSS

Puoi utilizzare un sottoinsieme di selettori CSS per applicare gli stili. Gmail supporta i 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 modificare lo stile di un'email in modo che si adatti 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

Le seguenti proprietà CSS sono supportate in Gmail:

  • 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
  • break-before
  • break-inside
  • caption-side
  • clear
  • colore
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • larghezza colonna
  • colonne
  • direction
  • display
  • elevazione
  • empty-cells
  • float
  • carattere
  • 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
  • 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
  • struttura
  • 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
  • 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

  • tutti
  • schermo

Query supportate

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • orientamento
  • min-resolution
  • max-resolution

Parole chiave supportate

  • e
  • solo