CSS Desteği

Gmail'e gönderilen e-postaların stilini satır içi <style> bloklarını ve standart CSS'yi kullanarak belirleyebilirsiniz. Çoğu CSS seçici, özellik ve medya sorgusu desteklenir. Desteklenmeyen CSS özellikleri ve seçiciler, Gmail tarafından yok sayılabilir.

Desteklenen CSS özelliklerinin ve sorgularının tam listesi için referans kılavuzuna bakın.

CSS Seçiciler

Stilleri uygulamak için CSS seçicilerin bir alt kümesini kullanabilirsiniz. Gmail; sınıf, öğe ve kimlik seçicileri destekler.

Örnek

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

CSS Medya Sorguları

Bir e-postanın stilini kullanıcının mevcut cihazına uyacak şekilde ayarlamak için standart CSS medya sorgularını kullanabilirsiniz. Gmail; ekran genişliği, yön ve çözünürlükle ilgili sorguları destekler.

Örnek

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

Desteklenen CSS özellikleri ve sorguları

Gmail'de aşağıdaki CSS özellikleri desteklenir:

  • 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
  • mola sonrası
  • aradan önce
  • içeriden dışarıya ayırma
  • caption-side
  • clear
  • renk
  • sütun-sayısı
  • sütun dolgusu
  • sütun boşluğu
  • sütun-kuralı
  • sütun-kural-rengi
  • sütun-kural-tarzı
  • sütun-kural-genişliği
  • sütun aralığı
  • sütun-genişliği
  • sütunlar
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • yazı tipi
  • 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
  • yükseklik
  • image-orientation
  • image-resolution
  • ime-mode
  • tecrit
  • 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
  • sonraki sayfa sonu
  • önce-sayfa sonu
  • sayfa sonu içi
  • duraklat
  • pause-after
  • pause-before
  • atış
  • pitch-range
  • alıntı
  • richness
  • konuşma
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • gerilim
  • 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
  • genişlik
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • yakınlaştırma

Desteklenen medya sorguları

Desteklenen türler

  • tümü
  • ekran

Desteklenen sorgular

  • min-width
  • max-width
  • minimum cihaz genişliği
  • max-device-width
  • yön
  • minimum çözünürlük
  • max-resolution

Desteklenen anahtar kelimeler

  • ve
  • yalnızca