Dukungan CSS

Anda dapat mengatur gaya email yang dikirim ke Gmail menggunakan pemblokiran <style> sebaris dan di CSS standar. Sebagian besar pemilih CSS, atribut, dan kueri media didukung. Pemilih dan properti CSS yang tidak didukung dapat diabaikan oleh Gmail.

Baca 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 kelas, , dan pemilih 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 ke sesuai dengan perangkat pengguna saat ini. Gmail mendukung kueri pada lebar layar, orientasi, dan resolusi.

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 CSS yang didukung & kueri

Properti CSS berikut didukung di Gmail:

  • azimuth
  • latar belakang
  • 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
  • setelah melanggar
  • jeda sebelum
  • membobol
  • caption-side
  • clear
  • warna
  • jumlah kolom
  • isian kolom
  • kolom-gap
  • aturan-kolom
  • warna-kolom-aturan
  • 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
  • penerobosan halaman
  • jeda
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • kutipan
  • richness
  • berucap
  • 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
  • min-device-width
  • max-device-width
  • orientasi
  • resolusi min
  • resolusi maksimum

Kata kunci yang didukung

  • dan
  • hanya