תמיכה בשירות CSS

אפשר לעצב אימייל שנשלח ל-Gmail באמצעות בלוקים של <style> מוטבעים וגם שירות CSS סטנדרטי. יש תמיכה ברוב הסלקטורים, המאפיינים ושאילתות המדיה ב-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 כדי לשנות את הסגנון של הודעות אימייל אל שתואמים למכשיר הנוכחי של המשתמש. 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 נתמכים שאילתות

מאפייני ה-CSS הבאים נתמכים ב-Gmail:

  • 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
  • הפסקה אחרי
  • הפסקה לפני
  • התפצלות
  • caption-side
  • clear
  • color [צבע]
  • ספירת עמודות
  • מילוי עמודות
  • פער עמודות
  • כלל עמודה
  • צבע כלל עמודה
  • בסגנון כלל עמודות
  • רוחב כלל עמודה
  • טווח עמודות
  • רוחב עמודה
  • עמודות
  • direction
  • display
  • elevation
  • empty-cells
  • מספר ממשי (float)
  • גופן
  • 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
  • מעבר דף אחרי
  • מעבר דף לפני
  • מעבר דף פנימה
  • השהיה
  • pause-after
  • pause-before
  • הגשה
  • pitch-range
  • quotes
  • 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
  • כיוון
  • רזולוציה מינימלית
  • רזולוציה מקסימלית

מילות מפתח נתמכות

  • וגם
  • בלבד