Dukungan CSS

Anda dapat menyesuaikan gaya email yang dikirim ke Gmail menggunakan blok <style> inline dan CSS standar. Sebagian besar pemilih CSS, atribut, dan kueri media didukung. Properti CSS dan pemilih yang tidak didukung dapat diabaikan oleh Gmail.

Lihat panduan referensi untuk mengetahui daftar lengkap properti dan kueri CSS yang didukung.

Pemilih CSS

Anda dapat menggunakan subset pemilih CSS untuk menerapkan gaya. Gmail mendukung pemilih class, elemen, dan ID.

Contoh

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

Kueri Media CSS

Anda dapat menggunakan kueri media CSS standar untuk menyesuaikan gaya email agar sesuai dengan perangkat pengguna saat ini. Gmail mendukung kueri terhadap lebar, orientasi, dan resolusi layar.

Contoh

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

Properti & kueri CSS yang didukung

Properti CSS berikut didukung di 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
  • jeda setelah
  • jeda sebelum
  • masuk ke dalam
  • caption-side
  • clear
  • warna
  • jumlah-kolom
  • pengisian kolom
  • kesenjangan kolom
  • aturan kolom
  • warna-aturan-kolom
  • gaya aturan kolom
  • lebar aturan-kolom
  • rentang kolom
  • lebar-kolom
  • kolom
  • direction
  • tampilan
  • 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
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • tinggi
  • image-orientation
  • image-resolution
  • ime-mode
  • isolasi
  • 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
  • jeda halaman setelah
  • jeda-halaman sebelum
  • batas-halaman-dalam
  • jeda
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • kutipan
  • richness
  • ucapkan
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • ketegangan
  • 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

Kueri media yang didukung

Jenis yang didukung

  • semua
  • layar

Kueri yang didukung

  • min-width
  • max-width
  • lebar-perangkat-min
  • max-device-width
  • orientasi
  • resolusi min
  • max-resolution

Kata kunci yang didukung

  • dan
  • hanya