E-posta Destekli CSS için AMP
Important: this documentation is not applicable to your currently selected format stories!
Bu belge, AMP e-postalarında şu anda desteklenen CSS özelliklerini özetlemektedir.
CSS uygulaması
Dahili stil sayfası
Bir iç stil sayfası kullanırken, CSS, e-postanın <head>
etiketinde bulunan tek bir <style amp-custom>
etiketi içinde belirtilir.
Satır içi stiller
İç stil sayfasına ek olarak, satır içi stiller style
özniteliğini kullanan herhangi bir öğede belirtilebilir.
Dış stil sayfası
E-posta için AMP'de harici stil sayfaları desteklenmez.
E-postanın hiçbir yerinde <link rel="stylesheet" href="...">
kullanımına izin verilmez.
Desteklenen CSS seçicileri
Basit seçiciler
- Tip seçici
elementname
- Sınıf seçici
.classname
- ID seçici
#idname
- Evrensel seçici
*
- Öznitelik seçici
[attr=value]
Birleştiriciler
- Bitişik sibling birleştirici
A + B
- Genel sibling birleştirici
A ~ B
- Child birleştirici
A > B
- Descendant birleştirici
A B
Sözde sınıflar
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:hover
:in-range
:indeterminate
:invalid
:last-child
:last-of-type
:last-of-type
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:valid
Desteklenen CSS özellikleri
-moz-appearance
-webkit-appearance
-webkit-tap-highlight-color
align-content
align-items
align-self
appearance
azimuth
background
background-attachment
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
bottom
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
color
color-adjust
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
counter-increment
counter-reset
cursor
direction
display
elevation
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
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-variation-settings
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
hyphens
image-orientation
image-resolution
inline-size
isolation
justify-content
justify-items
justify-self
left
letter-spacing
line-break
line-height
list-style
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
offset-distance
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
overflow-wrap
padding
padding-bottom
padding-left
padding-right
padding-top
pause
pause-after
pause-before
perspective
perspective-origin
pitch
pitch-range
place-items
position
quotes
resize
richness
right
row-gap
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-shadow
text-transform
text-underline-position
top
transform
transform-box
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
voice-family
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Ek kısıtlamalar
Aşağıdaki CSS özelliklerinin ek kısıtlamaları vardır:
Özellik | Kısıtlamalar |
---|---|
cursor |
İzin verilen tek değerler pointer ve initial değerleridir. |
filter |
url() izin verilmez. |
transition |
Yalnızca opacity , transform , visibility ve offset-distance canlandırılabilir. |
visibility |
İzin verilen tek değerler hidden , visible ve initial . |
z-index |
Sadece -100 ile 100 arasındaki değerlere izin verilir. |
Kurallar
Şu anda desteklenen tek kural, @media
'dır. Daha fazla bilgi için medya özelliklerine bakın.
Özel yazı tipleri (@font-face
)
Özel yazı tipleri, E-posta için AMP'de desteklenmez.
Medya özellikleri
@media
sorguları aracılığıyla kuralların koşullu olarak uygulanması için desteklenen medya özelliklerinin listesi.
device-width
max-device-width
min-device-width
hover
orientation
pointer
resolution
max-resolution
min-resolution
width
max-width
min-width