Puoi applicare uno stile alle email inviate a Gmail utilizzando i blocchi di <style> incorporati e
CSS standard. È supportata la maggior parte dei selettori, degli attributi e delle query multimediali CSS.
Le proprietà e i selettori CSS non supportati potrebbero essere ignorati da Gmail.
Consulta la guida di riferimento per un elenco completo proprietà e query CSS supportate.
Selettori CSS
Puoi utilizzare un sottoinsieme di selettori CSS per applicare gli stili. Gmail supporta le classi, selettori di elementi 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 per in base all'attuale dispositivo dell'utente. Gmail supporta le query in base alla larghezza dello schermo, orientamento e 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à CSS supportate e query
In Gmail sono supportate 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
- pausa
- break-before
- irruzione
- caption-side
- clear
- colore
- numero di colonne
- colonna-riempimento
- colonna-gap
- regola-colonna
- colonna-regola-colore
- stile-regola-colonna
- larghezza-regola-colonna
- intervallo-colonna
- larghezza-colonna
- colonne
- direction
- display
- elevazione
- empty-cells
- numero in virgola mobile
- 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
- interruzione-pagina-dopo
- interruzione-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
- tutti
- schermo
Query supportate
- min-width
- max-width
- min-device-width
- max-device-width
- orientamento
- risoluzione minima
- risoluzione massima
Parole chiave supportate
- e
- solo