การสนับสนุน CSS

คุณจัดรูปแบบอีเมลที่ส่งไปยัง Gmail ได้โดยใช้บล็อก <style> ในบรรทัดและ CSS มาตรฐาน ระบบรองรับตัวเลือก แอตทริบิวต์ และ Media Query ของ CSS ส่วนใหญ่ Gmail อาจละเว้นพร็อพเพอร์ตี้และตัวเลือก CSS ที่ไม่รองรับ

ดูรายการพร็อพเพอร์ตี้และข้อความค้นหา CSS ที่รองรับทั้งหมดได้ในคู่มืออ้างอิง

ตัวเลือก CSS

คุณสามารถใช้ตัวเลือก CSS ชุดย่อยเพื่อใช้รูปแบบได้ Gmail รองรับตัวเลือกคลาส องค์ประกอบ และรหัส

ตัวอย่าง

<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

คุณสามารถใช้ CSS Media Queries มาตรฐานเพื่อปรับการจัดรูปแบบของอีเมลให้เหมาะกับอุปกรณ์ปัจจุบันของผู้ใช้ Gmail รองรับการค้นหาตามความกว้างของหน้าจอ การวางแนว และความละเอียด

ตัวอย่าง

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

พร็อพเพอร์ตี้และข้อความค้นหา CSS ที่รองรับ

Gmail รองรับพร็อพเพอร์ตี้ CSS ต่อไปนี้

  • azimuth
  • เบื้องหลัง
  • 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
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • สี
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • คอลัมน์
  • direction
  • แสดง
  • elevation
  • empty-cells
  • จำนวนลอยตัว
  • แบบอักษร
  • 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
  • ส่วนสูง
  • image-orientation
  • image-resolution
  • ime-mode
  • การแยกกักตัว
  • 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
  • page-break-after
  • page-break-before
  • page-break-inside
  • หยุดชั่วคราว
  • pause-after
  • pause-before
  • พิช
  • pitch-range
  • ข้อความอ้างอิง
  • richness
  • พูด
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • 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

การค้นหาสื่อที่รองรับ

ประเภทที่รองรับ

  • ทั้งหมด
  • หน้าจอ

คำค้นหาที่รองรับ

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • การวางแนว
  • min-resolution
  • max-resolution

คีย์เวิร์ดที่รองรับ

  • และ
  • เท่านั้น