Skip to content

Latest commit

 

History

History
799 lines (642 loc) · 56.8 KB

list-of-css-features.md

File metadata and controls

799 lines (642 loc) · 56.8 KB

List of CSS4, CSS5 and Future

This list is still a draft and should be handled as a work in progress. This list is based on the full list of CSS features that were discussed

CSS4

Align
Feature Notes
align-content
align-items
align-self
gap
justify-content
justify-items
justify-self
order
place-content
place-items
place-self
row-gap
Animation
Feature Notes
Animate grid tracks CSS feature
offset
ray()
transform-box
will-change
At-rules
Feature Notes
@forced-colors
@media range-syntax
@supports
forced-color-adjust
Blend Modes
Feature Notes
isolation
Clipping, shapes & masking
Feature Notes
clip-path
inset()
polygon()
circle()
ellipse()
mask-mode
shape-image-threshold
shape-margin
shape-outside
Containment
Feature Notes
contain
Counters
Feature Notes
@counter-style
counter-set
fallback (@counter-style)
suffix (@counter-style)
symbols (@counter-style)
symbols()
system (@counter-style)
Flex
Feature Notes
flex
flex_value#fr
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
Functions
Feature Notes
clamp()
env()
fit-content
fit-content()
max()
min()
minmax()
repeat()
var(), --*
Backgrounds
Feature Notes
conic-gradient()
Grid
Feature Notes
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
Subgrid
Media
Feature Notes
aspect-ratio
cross-fade()
image-orientation
image-resolution
image-set()
Logical Properties
Feature Notes
block-size
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-end-end-radius
border-end-start-radius
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-start-end-radius
border-start-start-radius
float start / end
inline-size
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
max-block-size
max-inline-size
min-block-size
min-inline-size
overflow-block
overflow-inline
overscroll-behavior-block
overscroll-behavior-inline
padding-block
padding-block-end
padding-block-start
padding-inline
padding-inline-end
padding-inline-start
text-align start / end
writing-mode
Misc
Feature Notes
all
caret
caret-color
caret-shape
touch-action
unset
user-select
revert
Print
Feature Notes
page-orientation (@page)
print-color-adjust
Pseudo-classes
Feature Notes
:current
:defined
:dir
:focus-visible
:focus-within
:fullscreen
:future
:host-context()
:host()
:paused
:playing
:user-invalid
:user-valid
Pseudo-elements
Feature Notes
::backdrop
::cue
::cue-region
::part
::slotted
Relative units
Feature Notes
length#vb
length#vh
length#vi
length#vmax
length#vmin
length#vw
Scroll
Feature Notes
overflow-anchor
overscroll-behavior
overscroll-behavior-x
overscroll-behavior-y
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
Typography
Feature Notes
@annotation
@character-variant
@font-feature-values
@font-palette-values
@ornaments
@styleset
@stylistic
@swash
-webkit-line-clamp
annotation()
base-palette (@font-palette-values)
character-variant()
local()
font-family (@font-palette-values)
font-optical-sizing
font-palette
font-synthesis
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant
font-variant (@font-face)
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-variation-settings (@font-face)
hanging-punctuation
hyphens
line-gap-override (@font-face)
styleset()
stylistic()
swash()
text-combine-upright
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-orientation
text-underline-offset
text-underline-position
ornaments()

CSS5

Animation
Feature Notes
animation-composition
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
At-rules
Feature Notes
@custom-media
@layer
@scope
@scope :scope
@starting-style
@supports selector()
override-colors (@font-palette-values)
syntax (@property)
Cascade Layers
Feature Notes
layer()
layer() (@import)
revert-layer
Colors & theming
Feature Notes
accent-color
color-scheme
color-mix()
color() - display-p3, rec2020, a98, prophoto, xyz, xyz-d50, xyz-d65
color(from ...) - relative color syntax
Hue interpolation (gradients "in" syntax, "hue longer" syntax)
hwb()
oklab()
oklch()
lab()
lch()
Containment
Feature Notes
length#cqw, cqi, cqb, cqh, cqmax, cqmin
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
Logical Properites
Feature Notes
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
Math Functions
Feature Notes
abs()
acos()
asin()
atan()
atan2()
cos()
exp()
hypot()
log()
mod()
pow()
rem()
round()
sin()
sign()
sqrt()
tan()
Misc
Feature Notes
Nesting
Pseudo-classes
Feature Notes
:has()
:is()
:nth-child(An+B [of S]?)
:picture-in-picture
:popover-open
:where()
Pseudo-elements
Feature Notes
::grammar-error
::marker
::spelling-error
Relative Units
Feature Notes
Dynamic Viewport Units (dvh, lvh & svh)
length#cap
length#ex, length#rex
length#ic, length#ric
length#lh, length#rlh
Scroll
Feature Notes
content-visibility
overflow clip value
overflow-clip-margin
scrollbar-color
scrollbar-gutter
scrollbar-width
Scroll-driven animations
Feature Notes
animation-range
animation-range-end
animation-range-start
animation-timeline
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scroll()
timeline-scope
view-timeline
view-timeline-axis
view-timeline-inset
view-timeline-name
Transition & Transforms
Feature Notes
overlay
rotate
scale
transition-behavior
translate
Typography
Feature Notes
ascent-override (@font-face)
descent-override (@font-face)
font-size-adjust
font-synthesis-position
hyphenate-character
hyphenate-limit-chars
initial-letter
initial-letter-align
text-box-trim
text-box-edge
text-wrap balance / pretty
View transitions
Feature Notes
::view-transition
::view-transition-group
::view-transition-image-pair
::view-transition-new
::view-transition-old
@view-transition
view-transition-class
view-transition-name
view-transition-type

Future

Align
Feature Notes
align-tracks
justify-tracks
Anchoring
Feature Notes
anchor()
Aural CSS
Feature Notes
speak-as (@counter-style)
Color
Feature Notes
contrast-color()
Container Queries
Feature Notes
Style queries
Functions
Feature Notes
element()
image()
Grid
Feature Notes
masonry-auto-flow
Pseudo-classes
Feature Notes
:modal
:target-within
:top-layer
Pseudo-elements
Feature Notes
::target-text
Scroll
Feature Notes
target-text()
Text Fragmentation
Feature Notes
orphans
Typography
Feature Notes
line-clamp Currently -webkit-line-clamp
line-height-step
margin-trim
text-size-adjust
white-space-collapse
white-space-trim
Units
Feature Notes
frequency#Hz