Skip to content

Instantly share code, notes, and snippets.

@supachailllpay
Last active May 17, 2022 03:32
Show Gist options
  • Save supachailllpay/b7995126b8783b3f1525e36c84ad4be4 to your computer and use it in GitHub Desktop.
Save supachailllpay/b7995126b8783b3f1525e36c84ad4be4 to your computer and use it in GitHub Desktop.
CSS Property Groups

Modules

Positioned Layout Module

  • position
  • top
  • right
  • bottom
  • left
  • inset
  • inset-inline
  • inset-block
  • inset-inline-start
  • inset-block-start
  • inset-inline-end
  • inset-block-end
  • z-index

Containment Module

  • contain

Page Floats

  • float-reference
  • float
  • clear
  • float-defer
  • float-offset

Display Module

  • display
  • order
  • visibility

Flexible Box Layout Module

  • flex-flow
  • flex-direction
  • flex-wrap
  • flex
  • flex-grow
  • flex-shrink
  • flex-basis

Grid Layout Module

  • grid
  • grid-template
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
  • grid-area
  • grid-row
  • grid-column
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

Multi-column Layout Module

  • columns
  • column-width
  • column-count
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • column-fill

Box Alignment Module

  • justify-content
  • align-content
  • place-content
  • justify-self
  • align-self
  • place-self
  • justify-items
  • align-items
  • place-items
  • gap
  • row-gap
  • column-gap

Table Module

  • table-layout
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells

Inline Layout Module

  • vertical-align
  • line-height

Box Model Module

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Box Sizing Module

  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • box-sizing

Color Module

  • color
  • opacity

Backgrounds and Borders Module

  • background
  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • border
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
  • box-shadow

Fill and Stroke Module

  • fill-rule
  • fill-break
  • fill
  • fill-color
  • fill-image
  • fill-position
  • fill-size
  • fill-repeat
  • fill-origin
  • fill-opacity
  • stroke-width
  • stroke-align
  • stroke-linecap
  • stroke-linejoin
  • stroke-miterlimit
  • stroke-break
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-dash-corner
  • stroke-dash-justify
  • stroke
  • stroke-color
  • stroke-image
  • stroke-position
  • stroke-size
  • stroke-repeat
  • stroke-origin
  • stroke-opacity

Lists and Counters Module

  • list-style
  • list-style-position
  • list-style-image
  • list-style-type
  • marker-side
  • counter-reset
  • counter-increment
  • counter-set

Generated Content Module

  • content
  • quotes
  • string-set
  • bookmark-level
  • bookmark-label
  • bookmark-state

Fonts Module

  • font
  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size
  • font-size-adjust
  • font-synthesis
  • font-kerning
  • font-variant
  • font-variant-ligatures
  • font-variant-caps
  • font-variant-numeric
  • font-variant-east-asian
  • font-variant-position
  • font-feature-settings
  • src
  • unicode-range
  • font-display

Text Module

  • text-transform
  • white-space
  • tab-size
  • word-break
  • line-break
  • hyphens
  • overflow-wrap
  • word-wrap
  • text-align
  • text-align-all
  • text-align-last
  • text-justify
  • word-spacing
  • letter-spacing
  • text-indent
  • hanging-punctuation

Text Decoration Module

  • text-decoration
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
  • text-underline-position
  • text-emphasis
  • text-emphasis-style
  • text-emphasis-color
  • text-emphasis-position
  • text-shadow

Writing Modes

  • direction
  • unicode-bidi
  • writing-mode
  • text-orientation
  • glyph-orientation-vertical
  • text-combine-upright

Overflow Module

  • overflow
  • overflow-x
  • overflow-y
  • overflow-inline
  • overflow-block
  • overflow-clip-margin
  • scroll-behavior
  • scrollbar-gutter
  • text-overflow
  • block-ellipsis
  • line-clamp
  • max-lines
  • continue

Images Module

  • object-fit
  • object-position
  • image-orientation
  • image-rendering
  • image-resolution

Transforms Module

  • transform
  • transform-origin
  • transform-box

Basic User Interface Module

  • outline
  • outline-color
  • outline-style
  • outline-width
  • outline-offset
  • resize
  • cursor
  • caret
  • caret-color
  • caret-shape
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • user-select
  • accent-color
  • appearance

Filter Effects Module

  • filter
  • flood-color
  • flood-opacity
  • color-interpolation-filters
  • lighting-color

Compositing and Blending

  • mix-blend-mode
  • isolation
  • background-blend-mode

Shapes Module

  • shape-outside
  • shape-image-threshold
  • shape-margin

Masking Module

  • clip-path
  • clip-rule
  • mask
  • mask-image
  • mask-mode
  • mask-position
  • mask-size
  • mask-repeat
  • mask-origin
  • mask-clip
  • mask-composite
  • mask-border
  • mask-border-source
  • mask-border-slice
  • mask-border-width
  • mask-border-outset
  • mask-border-repeat
  • mask-border-mode
  • mask-type

Transitions

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Animations

  • animation
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • animation-name

Will Change Module

  • will-change

Device Adaptation Module

  • zoom
  • min-zoom
  • max-zoom
  • user-zoom
  • orientation

Fragmentation Module

  • break-before
  • break-after
  • break-inside
  • orphans
  • widows
  • margin-break
  • box-decoration-break

Scroll Snap Module

  • scroll-snap-type
  • scroll-padding
  • scroll-padding-top
  • scroll-padding-right
  • scroll-padding-bottom
  • scroll-padding-left
  • scroll-padding-inline
  • scroll-padding-block
  • scroll-padding-inline-start
  • scroll-padding-block-start
  • scroll-padding-inline-end
  • scroll-padding-block-end
  • scroll-margin
  • scroll-margin-top
  • scroll-margin-right
  • scroll-margin-bottom
  • scroll-margin-left
  • scroll-margin-inline
  • scroll-margin-block
  • scroll-margin-inline-start
  • scroll-margin-block-start
  • scroll-margin-inline-end
  • scroll-margin-block-end
  • scroll-snap-align
  • scroll-snap-stop

Overscroll Behavior Module

  • overscroll-behavior
  • overscroll-behavior-x
  • overscroll-behavior-y
  • overscroll-behavior-inline
  • overscroll-behavior-block

Speech Module

  • voice-volume
  • voice-balance
  • speak
  • speak-as
  • pause
  • pause-before
  • pause-after
  • rest
  • rest-before
  • rest-after
  • cue
  • cue-before
  • cue-after
  • voice-family
  • voice-rate
  • voice-pitch
  • voice-range
  • voice-stress
  • voice-duration
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment