Web Design – CSS3


CSS3

The development of CSS Level 3 (CSS3) started in 2005. In contrast to further CSS specifications, CSS3 is modularized. The CSS3 modules are described in separate specifications such as Selectors, Media Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns. The modules are in different stages of development and browser implementation. Until recently, only a few modules had been standardized, such as the Color module , the Namespaces module , the Selectors module , and the Media Queries module .

A variety of new functions and features have been introduced in CSS3 such as border-radius , box-shadow , background-origin ; color declaration in HSL, HSLA, and RGBA; text-shadow ; text-overflow ; word-wrap ; box-sizing ; attribute selectors; transitions; multiple backgrounds; multicolumn layout; Web Fonts; and speech.

CSS3 is a superset of former CSS versions, and the core CSS properties can be used in any version, however, CSS3 introduced many new features and properties:

Property CSS 1 CSS 2 CSS 2.1 CSS3 Initial Value
Property CSS 1 CSS 2 CSS 2.1 CSS3 Initial Value
align-content no no no yes auto
align-items no no no yes auto
align-self no no no yes auto
alignment-adjust no no no yes auto
alignment-baseline no no no yes baseline
all no no no yes depending on individual properties
anchor-point no no no yes none
animation no no no yes depending on individual properties
animation-delay no no no yes 0
animation-direction no no no yes normal
animation-duration no no no yes 0
animation-fill-mode no no no yes none
animation-iteration-count no no no yes 1
animation-name no no no yes none
animation-play-state no no no yes running
animation-timing-function no no no yes ease
azimuth no yes yes no center
backface-visibility no no no yes visible
background yes yes yes yes depending on individual properties
background-attachment yes yes yes yes scroll
background-clip no no no yes border-box
background-color yes yes yes yes transparent
background-image yes yes yes yes none
background-origin no no no yes padding-box
background-position yes yes yes yes 0% 0%
background-repeat yes yes yes yes repeat
background-size no no no yes auto
baseline-shift no no no yes baseline
binding no no no yes none
bleed no no no yes 6pt
bookmark-label no no no yes content()
bookmark-level no no no yes none
bookmark-state no no no yes open
border yes yes yes yes depending on individual properties
border-bottom yes yes yes yes depending on individual properties
border-bottom-color no yes yes yes current color
border-bottom-left-radius no no no yes 0
border-bottom-right-radius no no no yes 0
border-bottom-style no yes yes yes none
border-bottom-width yes yes yes yes medium
border-collapse no yes yes ? separate
border-color yes yes yes yes depending on individual properties
border-image no no no yes none
border-image-outset no no no yes 0
border-image-repeat no no no yes stretch
border-image-slice no no no yes 100%
border-image-source no no no yes none
border-image-width no no no yes 1
border-left yes yes yes yes depending on individual properties
border-left-color no yes yes yes current color
border-left-style no yes yes yes none
border-left-width yes yes yes yes medium
border-radius no no no yes 0
border-right yes yes yes yes depending on individual properties
border-right-color no yes yes yes current color
border-right-style no yes yes yes none
border-right-width yes yes yes yes medium
border-spacing no yes yes ? 0
border-style yes yes yes yes depending on individual properties
border-top yes yes yes yes depending on individual properties
border-top-color no yes yes yes current color
border-top-left-radius no no no yes 0
border-top-right-radius no no no yes 0
border-top-style no yes yes yes none
border-top-width yes yes yes yes medium
border-width yes yes yes yes depending on individual properties
bottom no yes yes yes auto
box-decoration-break no no no yes slice
box-shadow no no no yes none
box-sizing no no no yes content-box
box-snap no no no yes none
box-suppress no no no yes show
break-after no no no yes auto
break-before no no no yes auto
break-inside no no no yes auto
caption-side no yes yes ? top
chains no no no yes none
clear yes yes yes yes none
clip no yes yes no auto
clip-path no no no yes none
clip-rule no no no yes nonzero
color yes yes yes yes implementation dependent
color-interpolation-filters no no no yes auto
column-count no no no yes auto
column-fill no no no yes balance
column-gap no no no yes normal
column-rule no no no yes depending on individual properties
column-rule-color no no no yes current color
column-rule-style no no no yes medium
column-rule-width no no no yes medium
column-span no no no yes none
column-width no no no yes auto
columns no no no yes depending on individual properties
contain no no no yes none
content no yes yes yes normal
counter-increment no yes yes yes none
counter-reset no yes yes yes none
counter-set no no no yes none
crop no no no yes auto
cue no yes yes yes depending on individual properties
cue-after no yes yes yes none
cue-before no yes yes yes none
cursor no yes yes yes auto
direction no yes yes yes ltr
display yes yes yes yes depending on individual properties
display-inside no no no yes auto
display-list no no no yes none
display-outside no no no yes inline-level
dominant-baseline no no no yes auto
elevation no yes yes no level
empty-cells no yes yes ? show
filter no no no yes none
flex no no no yes depending on individual properties
flex-basis no no no yes auto
flex-direction no no no yes row
flex-flow no no no yes depending on individual properties
flex-grow no no no yes 0
flex-shrink no no no yes 1
flex-wrap no no no yes nowrap
float yes yes yes yes none
float-offset no no no yes 0 0
flood-color no no no yes black
flood-opacity no no no yes 1
flow-from no no no yes none
flow-into no no no yes none
font yes yes yes yes depending on individual properties
font-family yes yes yes yes implementation dependent
font-feature-settings no no no yes normal
font-kerning no no no yes auto
font-language-override no no no yes normal
font-size yes yes yes yes medium
font-size-adjust no yes no yes none
font-stretch no yes no yes normal
font-style yes yes yes yes normal
font-synthesis no no no yes weight style
font-variant yes yes yes yes normal
font-variant-alternates no no no yes normal
font-variant-caps no no no yes normal
font-variant-east-asian no no no yes normal
font-variant-ligatures no no no yes normal
font-variant-numeric no no no yes normal
font-variant-position no no no yes normal
font-weight yes yes yes yes normal
grid no no no yes depending on individual properties
grid-area no no no yes depending on individual properties
grid-auto-columns no no no yes auto
grid-auto-flow no no no yes none
grid-auto-rows no no no yes auto
grid-column no no no yes depending on individual properties
grid-column-end no no no yes auto
grid-column-start no no no yes auto
grid-row no no no yes depending on individual properties
grid-row-end no no no yes auto
grid-row-start no no no yes auto
grid-template no no no yes depending on individual properties
grid-template-areas no no no yes none
grid-template-columns no no no yes none
grid-template-rows no no no yes none
hanging-punctuation no no no yes none
height yes yes yes yes auto
hyphens no no no yes manual
icon no no no yes auto
image-orientation no no no yes auto
image-resolution no no no yes normal
ime-mode no no no yes auto
initial-letters no no no yes normal
inline-box-align no no no yes last
justify-content no no no yes auto
justify-items no no no yes auto
justify-self no no no yes auto
left no yes yes yes auto
letter-spacing yes yes yes yes normal
lighting-color no no no yes white
line-box-contain no no no yes block inline replaced
line-break no no no yes auto
line-grid no no no yes match-parent
line-height yes yes yes yes normal
line-snap no no no yes none
line-stacking no no no yes depending on individual properties
line-stacking-ruby no no no yes exclude-ruby
line-stacking-shift no no no yes consider-shifts
line-stacking-strategy no no no yes inline-line-height
list-style yes yes yes yes depending on individual properties
list-style-image yes yes yes yes none
list-style-position yes yes yes yes outside
list-style-type yes yes yes yes disc
margin yes yes yes yes depending on individual properties
margin-bottom yes yes yes yes 0
margin-left yes yes yes yes 0
margin-right yes yes yes yes 0
margin-top yes yes yes yes 0
marker-offset no yes no no auto
marker-side no no no yes list-item
marks no yes no yes none
mask no no no yes border-box
mask-box no no no yes see individual properties
mask-box-outset no no no yes 0
mask-box-repeat no no no yes stretch
mask-box-slice no no no yes 0 fill
mask-box-source no no no yes none
mask-box-width no no no yes auto
mask-clip no no no yes border-box
mask-image no no no yes none
mask-origin no no no yes border-box
mask-position no no no yes center
mask-repeat no no no yes no-repeat
mask-size no no no yes border-box
mask-source-type no no no yes auto
mask-type no no no yes luminance
max-height no yes yes yes none
max-lines no no no yes none
max-width no yes yes yes none
min-height no yes yes yes 0
min-width no yes yes yes 0
move-to no no no yes normal
nav-down no no no yes auto
nav-index no no no yes auto
nav-left no no no yes auto
nav-right no no no yes auto
nav-up no no no yes auto
object-fit no no no yes fill
object-position no no no yes 50% 50%
opacity no no no yes 1
order no no no yes 0
orphans no yes yes yes 2
outline no yes yes yes depending on individual properties
outline-color no yes yes yes invert
outline-offset no no no yes 0
outline-style no yes yes yes none
outline-width no yes yes yes medium
overflow no yes yes yes depending on individual properties
overflow-wrap no no no yes normal
overflow-x no no no yes visible
overflow-y no no no yes visible
padding yes yes yes yes depending on individual properties
padding-bottom yes yes yes yes 0
padding-left yes yes yes yes 0
padding-right yes yes yes yes 0
padding-top yes yes yes yes 0
page no yes no yes auto
page-break-after no yes yes yes auto
page-break-before no yes yes yes auto
page-break-inside no yes yes yes auto
page-policy no no no yes start
pause no yes yes yes implementation dependent
pause-after no yes yes yes implementation dependent
pause-before no yes yes yes implementation dependent
perspective no no no yes none
perspective-origin no no no yes 50% 50%
pitch no yes yes no medium
pitch-range no yes yes no 50
play-during no yes yes no auto
position no yes yes yes static
presentation-level no no no yes 0
quotes no yes yes yes text
region-fragment no no no yes auto
resize no no no yes none
rest no no no yes depending on individual properties
rest-after no no no yes none
rest-before no no no yes none
richness no yes yes no 50
right no yes yes yes auto
rotation no no no yes 0
rotation-point no no no yes 50% 50%
ruby-align no no no yes auto
ruby-merge no no no yes separate
ruby-position no no no yes before
shape-image-threshold no no no yes 0.0
shape-outside no no no yes none
shape-margin no no no yes 0
size no yes no yes auto
speak no yes yes yes auto
speak-as no no no yes normal
speak-header no yes yes no once
speak-numeral no yes yes no continuous
speak-punctuation no yes yes no none
speech-rate no yes yes no medium
stress no yes yes no 50
string-set no no no yes none
tab-size no no no yes 8
table-layout no yes yes ? auto
text-align yes yes yes yes start
text-align-last no no no yes auto
text-combine-upright no no no yes none
text-decoration yes yes yes yes none
text-decoration-color no no no yes currentColor
text-decoration-line no no no yes none
text-decoration-skip no no no yes objects
text-decoration-style no no no yes solid
text-emphasis no no no yes depending on individual properties
text-emphasis-color no no no yes currentColor
text-emphasis-position no no no yes over right
text-emphasis-style no no no yes none
text-height no no no yes auto
text-indent yes yes yes yes 0
text-justify no no no yes auto
text-orientation no no no yes mixed
text-overflow no no no yes clip
text-shadow no yes no yes none
text-space-collapse no no no yes collapse
text-transform yes yes yes yes none
text-underline-position no no no yes auto
text-wrap no no no yes normal
top no yes yes yes auto
transform no no no yes none
transform-origin no no no yes 50% 50% 0
transform-style no no no yes flat
transition no no no yes depending on individual properties
transition-delay no no no yes 0s
transition-duration no no no yes 0s
transition-property no no no yes all
transition-timing-function no no no yes ease
unicode-bidi no yes yes yes normal
vertical-align yes yes yes yes baseline
visibility no yes yes yes visible
voice-balance no no no yes center
voice-duration no no no yes auto
voice-family no yes yes yes implementation dependent
voice-pitch no no no yes medium
voice-range no no no yes medium
voice-rate no no no yes normal
voice-stress no no no yes normal
voice-volume no no no yes medium
volume no yes yes no medium
white-space yes yes yes yes normal
widows no yes yes yes 2
width yes yes yes yes auto
word-break no no no yes normal
word-spacing yes yes yes yes normal
word-wrap no no no yes normal
wrap-flow no no no yes auto
wrap-through no no no yes wrap
writing-mode no no no yes horizontal-tb
z-index no yes yes yes auto
Number (out of 334) 53 122 115 314