meow

1 files changed, 815 insertions, 206 deletions

diff --git a/web/css.md b/web/css.md
index 8f5eb38..75f39c9 100644
--- a/web/css.md
+++ b/web/css.md
@@ -1,234 +1,843 @@
 ---
 layout: web
-title: A Brief Reference for Modern CSS
+title: "Modern CSS: a reference"
 ---
 
-# A Brief Reference for Modern CSS
+# Modern CSS: a reference
 
-I like CSS. I really, really like CSS. I greatly enjoy just... fucking about with it, producing [pretty websites](https://toki.la) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf).
+I like CSS. I really like CSS! I greatly enjoy just... messing about with it, producing [pretty websites](https://toki.la) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf) and everything in around and between.
 
-But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely on references. Property names are remarkably unintuitive. And CSS is complicated! There's a lot to keep in your head, and it's ever changing - ever improving, I would say, but ever changing nonetheless. So I figured writing my *own* reference might help.
+But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely a reference. Property names are *remarkably* unintuitive. And CSS is complicated! There's a lot to keep in your head. And it's ever changing - ever improving, I would argue, but ever changing nonetheless. So I figured writing my own reference might help.
 
-So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to the [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me.
+So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to [MDN](https://developer.mozilla.org/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me.
 
 https://css-tricks.com/whats-new-since-css3/
 
-## Layout
+## Selectors
+- [selectors](https://developer.mozilla.org/Web/CSS/CSS_selectors)
+- [nesting](https://developer.mozilla.org/Web/CSS/CSS_nesting)
 
-### flow
+`foo {...}`: a **type selector** matches all elements of the type `foo`.
 
-### absolute
+`.foo {...}`: a **class selector** matches all elements of the class `foo`.
 
-### flexbox
+`#foo {...}`: an **identifier selector** matches a single element by its unique id `foo`.
 
-### grid
+`foo[attr] {...}`: an **attribute selector** matches an element `foo` that has the attribute `attr`.
 
-## Media Queries
+`foo, bar {...}`: the **selector list** matches both the elements `foo` and `bar`.
 
-## Selectors
+`foo bar {...}`: the **descendant combinator** matches some element `bar` that is a descendant of `foo`. A descendant of `foo` is any element that is nested within it, at any level in the tree.
 
-**attributes** go on elements...
+`foo { bar {...}}`: **nesting syntax**
 
-**identifiers** can be selected with `#`.
+`foo { &bar {...}}`: a **nesting selector**
 
-**classes** can be selected with `.`.
+`foo > bar {...}`: the **child combinator** matches some element `bar` if `bar` is a direct child of `foo`. A child element is an
 
-### combinators
+- :first-child, :last-child, :only-child, :nth-child(), nth-last-child()
+- :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :nth-last-of-type()
 
-### nested queries
+`:empty {...}`: the **empty pseudo-class** selects an element that does not have any children.
 
-Queries can be nested!!!!!1!!
-
-### pseudo-classes
-
-### pseudo-elements
-
-## Elements
-
-Many elements have default styles provided by the browser. These are accessible at ... in Firefox, and ... in Chrome.
-resource://gre-resources/html.css
-
-### body and friends
-
-```css
-body {
-  display: block;
-  margin: 8px;
-}
-```
-
-```css
-html, main, header, footer, div,
-section, nav, article, aside, blockquote {
-  display: block;
-}
-```
-
-### formatting
-
-```css
-b, strong {
-  font-weight: bolder;
-}
-```
-
-```css
-i, em {
-  font-style: italic;
-}
-```
-
-```css
-u {
-  text-decoration: underline;
-}
-```
-
-```css
-s {
-  text-decoration: line-through;
-}
-```
-
-```css
-q:before {
-  content: open-quote;
-}
-
-q:after {
-  content: close-quote;
-}
-```
-
-```css
-small {
-  font-size: smaller;
-}
-```
-
-```css
-sub {
-  vertical-align: sub;
-  font-size: smaller;
-}
-```
-
-```css
-sup {
-  vertical-align: super;
-  font-size: smaller;
-}
-```
-
-```css
-code {
-  font-family: -moz-fixed;
-}
-```
-
-### paragraphs
-
-```css
-p {
-  display: block;
-  margin-block: 1em;
-}
-```
-
-```css
-pre {
-  display: block;
-  font-family: -moz-fixed;
-  white-space: pre;
-  margin-block: 1em;
-}
-```
-
-### headers
-
-```css
-h1, h2, h3, h4, h5, h6 {
-  display: block;
-  font-weight: bold;
-}
-
-h1 {
-  font-size: 2em;
-  margin-block: .67em;
-}
-
-h2 {
-  font-size: 1.5em;
-  margin-block: .83em;
-}
-
-h3 {
-  font-size: 1.17em;
-  margin-block: 1em;
-}
-
-h4 {
-  font-size: 1.00em;
-  margin-block: 1.33em;
-}
-
-h5 {
-  font-size: 0.83em;
-  margin-block: 1.67em;
-}
-
-h6 {
-  font-size: 0.67em;
-  margin-block: 2.33em;
-}
-```
-
-`h1`s nested within an `article`, `aside`, `nav`, or `section` behave somewhat strangely, acting as a smaller header depending on the level of nesting.
+`foo + bar {...}`: the **next-sibling combinator** selects all elements `bar` that are the (direct) next sibling `bar` of some elements `foo`.
 
-### lists
+`foo ~ bar {...}`: the **subsequent-sibling combinator** selects all elements `bar` that are a subsequent sibling of some elements `foo`.
+
+`:has(...) {...}`:
+The child, next-sibling, and subsequent-sibling combinators - with the exception of `:empty` - all match a *child element*. It is often desired to match the *parent element* instead: some element that *has*,
+
+`:not(...) {...}`:
+
+`:is(...) {...}`:
+The `:is` pseudo-class takes a list of selectors, and selects any element matchable by one or more
 
-```css
-li {
-  display: list-item;
-  text-align: match-parent;
-}
-```
-
-```css
-ul, menu {
-  display: block;
-  counter-reset: list-item;
-  margin-block: 1em;
-  padding-inline-start: 40px;
-  list-style-type: disc;
-}
-```
-
-```css
-ol {
-  display: block;
-  counter-reset: list-item;
-  margin-block: 1em;
-  padding-inline-start: 40px;
-  list-style-type: decimal;
-}
-```
-
-Nested lists have no top or bottom margins. The `list-style-type` of unordered lists changes with depth: from a `disc`, to a `circle`, to a `square`.
-
-### meta
-
-```css
-head, link, meta, title, style, script {
-  display: none;
-}
-```
-
-___ are invisible.
+`:where()`
 
 ## Properties
 
-There are a *lot* of properties, of various elements, and things.
+`property: inherit | initial | revert | revert-layer | unset;`
+
+- all
+- will-change
+- `touch-action: auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | pinch-zoom | manipulation;`
+
+## Variables
+- [cascading variables](https://developer.mozilla.org/Web/CSS/CSS_cascading_variables)
+
+CSS custom properties (or variables)...
+
+- `--*: ...;`
+- var()
+- @property
+
+## Layouts
+
+- display
+
+### the box model
+- [box model](https://developer.mozilla.org/Web/CSS/CSS_box_model)
+- [box sizing](https://developer.mozilla.org/Web/CSS/CSS_box_sizing)
+- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)
+
+- width
+  - min-width
+  - max-width
+- height
+  - min-height
+  - max-height
+- `visibility: visible | hidden | collapse;`
+- `content-visibility: visible | hidden | auto;`
+- `box-sizing: border-box | content-box;`
+- justify-items
+- justify-self
+- vertical-align
+- aspect-ratio
+- `resize: none | horizontal | vertical | both | block | inline;`
+- padding
+  - padding-block
+  - padding-block-end
+  - padding-block-start
+  - padding-bottom
+  - padding-inline
+  - padding-inline-end
+  - padding-inline-start
+  - padding-left
+  - padding-right
+  - padding-top
+- margin
+  - margin-block
+  - margin-block-end
+  - margin-block-start
+  - margin-bottom
+  - margin-inline
+  - margin-inline-end
+  - margin-inline-start
+  - margin-left
+  - margin-right
+  - margin-top
+- min-block-size
+- max-block-size
+- min-inline-size
+- max-inline-size
+- contain-intrinsic-block-size
+- contain-intrinsic-height
+- contain-intrinsic-inline-size
+- contain-intrinsic-size
+- contain-intrinsic-width
+
+- @container
+- container
+  - container-name
+  - container-type
 
-`property left right center up` or whatever
-this seems consistent and i don't know it
+### flow
+- [flow layout](https://developer.mozilla.org/Web/CSS/CSS_flow_layout)
+- [display](https://developer.mozilla.org/Web/CSS/CSS_display)
+
+### flex
+- [flexible box layout](https://developer.mozilla.org/Web/CSS/CSS_flexible_box_layout)
+- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)
+
+- flex
+  - flex-basis
+  - flex-direction
+  - flex-flow
+  - flex-grow
+  - flex-shrink
+  - flex-wrap
+- align-items
+- align-self
+- align-content
+- justify-content
+- place-items
+- place-content
+- place-self
+- order
+
+### grid
+- [grid](https://developer.mozilla.org/Web/CSS/CSS_grid_layout)
+
+- grid
+  - grid-area
+  - grid-auto-flow
+  - grid-auto-rows
+  - grid-auto-columns
+  - grid-column
+    - grid-column-start
+    - grid-column-end
+  - grid-row
+    - grid-row-start
+    - grid-row-end
+  - grid-template
+    - grid-template-areas
+    - grid-template-columns
+    - grid-template-rows
+- gap
+  - row-gap
+  - column-gap
+
+### positioning
+- [positioned layout](https://developer.mozilla.org/Web/CSS/CSS_positioned_layout)
+
+- `position: static | relative | absolute | fixed | sticky;`
+  - `top: auto | <length> | <percentage>;`
+  - `right: auto | <length> | <percentage>;`
+  - `bottom: auto | <length> | <percentage>;`
+  - `left: auto | <length> | <percentage>;`
+- `z-index: auto | <integer>;`
+- `float: none | left | right | inline-start | inline-end;`
+- contain
+- inset
+  - inset-block
+  - inset-block-end
+  - inset-block-start
+  - inset-inline
+  - inset-inline-end
+  - inset-inline-start
+- clear
+- ? transform
+
+### column
+- [multi-column layout](https://developer.mozilla.org/Web/CSS/CSS_multi-column_layout)
+
+- ? break-before, break-after, break-inside
+- ? column-gap
+- column-fill
+- column-span
+- column-rule
+  - column-rule-color
+  - column-rule-style
+  - column-rule-width
+- columns
+  - column-count
+  - column-width
+
+### page
+- [paged media](https://developer.mozilla.org/Web/CSS/CSS_paged_media)
+- [fragmentation](https://developer.mozilla.org/Web/CSS/CSS_fragmentation)
+
+- box-decoration-break
+- break-before
+- break-after
+- break-inside
+- page
+- orphans
+- widows
+- :first, :left, :right
+
+### table
+- [table](https://developer.mozilla.org/Web/CSS/CSS_table)
+
+- table-layout
+- caption-side
+- empty-cells
+- border-collapse
+- border-spacing
+
+## Media Queries
+
+- @media
+
+## Units and Math
+
+- abs()
+- acos()
+- asin()
+- atan()
+- atan2()
+- cos()
+- exp()
+- hypot()
+- log()
+- mod()
+- max()
+- min()
+- pow()
+- rem()
+- round()
+- sign()
+- sin()
+- sqrt()
+- tan()
+
+## Assorted Properties
+
+### backgrounds and borders
+- [backgrounds and borders](https://developer.mozilla.org/Web/CSS/CSS_backgrounds_and_borders)
+
+- background
+  - background-attachment
+  - background-blend-mode
+  - background-clip
+  - background-color
+  - background-image
+  - background-origin
+  - background-position
+    - background-position-x
+    - background-position-y
+  - background-repeat
+  - background-size
+- border
+  - 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-bottom
+    - border-bottom-color
+    - border-bottom-left-radius
+    - border-bottom-right-radius
+    - border-bottom-style
+    - border-bottom-width
+  - border-color
+  - border-end-end-radius
+  - border-end-start-radius
+  - border-image
+    - border-image-outset
+    - border-image-repeat
+    - border-image-slice
+    - border-image-source
+    - border-image-width
+  - 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-left
+    - border-left-color
+    - border-left-style
+    - border-left-width
+  - border-radius
+  - border-right
+    - border-right-color
+    - border-right-style
+    - border-right-width
+  - border-start-end-radius
+  - border-start-start-radius
+  - border-style
+  - border-top
+    - border-top-color
+    - border-top-left-radius
+    - border-top-right-radius
+    - border-top-style
+    - border-top-width
+  - border-width
+- outline
+  - outline-color
+  - outline-offset
+  - outline-style
+  - outline-width
+- box-shadow
+
+### overflow and scrolling
+- [overflow](https://developer.mozilla.org/Web/CSS/CSS_overflow)
+- [overscroll behavior](https://developer.mozilla.org/Web/CSS/CSS_overscroll_behavior)
+- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_scroll_snap)
+- [scrollbars styling](https://developer.mozilla.org/Web/CSS/CSS_scrollbars_styling)
+
+- overflow
+  - overflow-anchor (unsure??)
+  - overflow-block
+  - overflow-clip-margin
+  - overflow-inline
+  - overflow-x
+  - overflow-y
+- text-overflow
+- 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
+- scrollbar-color
+- scrollbar-gutter
+- scrollbar-width
+- scroll-behavior
+- overscroll-behavior
+  - overscroll-behavior-block
+  - overscroll-behavior-inline
+  - overscroll-behavior-x
+  - overscroll-behavior-y
+
+### text
+- [text](https://developer.mozilla.org/Web/CSS/CSS_text)
+- [text decoration](https://developer.mozilla.org/Web/CSS/CSS_text_decoration)
+
+- text-align
+- text-align-last
+- text-anchor
+- text-decoration
+  - text-decoration-color
+  - text-decoration-line
+  - text-decoration-skip-ink
+  - text-decoration-style
+  - text-decoration-thickness
+- text-emphasis
+  - text-emphasis-color
+  - text-emphasis-position
+  - text-emphasis-style
+- text-indent
+- text-justify
+- text-rendering
+- text-shadow
+- text-transform
+- text-underline-offset
+- text-underline-position
+- text-wrap
+  - text-wrap-mode
+  - text-wrap-style
+- line-height
+- hanging-punctuation
+- `hyphenate-character: auto | <string>;`
+- hyphenate-limit-chars
+- hyphens
+- letter-spacing
+- tab-size
+- line-break
+- `overflow-wrap: normal | break-word | anywhere;`
+- white-space
+- white-space-collapse
+- word-break
+- word-spacing
+- quotes
+- `user-select: auto | none | text | all;`
+- cursor
+
+### fonts
+- [fonts](https://developer.mozilla.org/Web/CSS/CSS_fonts)
+- [font loading](https://developer.mozilla.org/Web/CSS/CSS_font_loading)
+
+- font
+  - font-family
+  - font-feature-settings
+  - font-kerning
+  - font-language-override
+  - font-optical-sizing
+  - font-palette
+  - font-size
+  - font-size-adjust
+  - font-stretch
+  - font-style
+  - font-synthesis
+    - font-synthesis-position
+    - font-synthesis-small-caps
+    - font-synthesis-style
+    - font-synthesis-weight
+  - font-variant
+    - 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-weight
+- @font-face
+- @font-feature-values
+- @font-palette-values
+
+### lists
+- [lists and counters](https://developer.mozilla.org/Web/CSS/CSS_lists_and_counters)
+- [counter styles](https://developer.mozilla.org/Web/CSS/CSS_counter_styles)
+
+- list-style
+  - list-style-image
+  - list-style-position
+  - list-style-type
+- counter-increment
+- counter-reset
+- counter-set
+
+### colour
+- [colors](https://developer.mozilla.org/Web/CSS/CSS_colors)
+- [color adjustment](https://developer.mozilla.org/Web/CSS/CSS_color_adjustment)
+
+- color
+- opacity
+- color-scheme
+- accent-color
+- caret-color
+- print-color-adjust
+- forced-color-adjust
+- rgb()
+- hsl()
+- hwb()
+- lab()
+- lch()
+- oklab()
+- oklch()
+- color()
+- color-contrast() Experimental
+- color-mix()
+- device-cmyk()
+- light-dark()
+- @color-profile
+
+### images
+- [images](https://developer.mozilla.org/Web/CSS/CSS_images)
+
+- image-orientation
+- image-rendering
+- object-fit
+- object-position
+- linear-gradient()
+- radial-gradient()
+- conic-gradient()
+- repeating-linear-gradient()
+- repeating-radial-gradient()
+- repeating-conic-gradient()
+- element() Experimental
+- image()
+- cross-fade()
+
+### masking, filters, compositing, and blending
+- [masking](https://developer.mozilla.org/Web/CSS/CSS_masking)
+- [filter effects](https://developer.mozilla.org/Web/CSS/CSS_filter_effects)
+- [compositing and blending](https://developer.mozilla.org/Web/CSS/CSS_compositing_and_blending)
+
+- filter
+- backdrop-filter
+- clip
+- clip-path
+- clip-rule
+- mask
+  - mask-border
+    - mask-border-mode
+    - mask-border-outset
+    - mask-border-repeat
+    - mask-border-slice
+    - mask-border-source
+    - mask-border-width
+  - mask-clip
+  - mask-composite
+  - mask-image
+  - mask-mode
+  - mask-origin
+  - mask-position
+  - mask-repeat
+  - mask-size
+  - mask-type
+- isolation
+- mix-blend-mode
+- blur()
+- brightness()
+- contrast()
+- drop-shadow()
+- grayscale()
+- hue-rotate()
+- invert()
+- opacity()
+- saturate()
+- sepia()
+
+### transformations
+- [transforms](https://developer.mozilla.org/Web/CSS/CSS_transforms)
+
+- backface-visibility
+- perspective
+- perspective-origin
+- rotate
+- scale
+- transform
+  - transform-box
+  - transform-origin
+  - transform-style
+- zoom
+- translate
+- matrix()
+- matrix3d()
+- perspective()
+- rotate()
+- rotate3d()
+- rotateX()
+- rotateY()
+- rotateZ()
+- scale()
+- scale3d()
+- scaleX()
+- scaleY()
+- scaleZ()
+- skew()
+- skewX()
+- skewY()
+- translate()
+- translate3d()
+- translateX()
+- translateY()
+- translateZ()
+
+### animations
+- [animations](https://developer.mozilla.org/Web/CSS/CSS_animations)
+- [transitions](https://developer.mozilla.org/Web/CSS/CSS_transitions)
+- [motion path](https://developer.mozilla.org/Web/CSS/CSS_motion_path)
+
+- animation
+- animation-composition
+- animation-delay
+- animation-direction
+- animation-duration
+- animation-fill-mode
+- animation-iteration-count
+- animation-name
+- animation-play-state
+- animation-range Experimental
+- animation-range-end Experimental
+- animation-range-start Experimental
+- animation-timeline Experimental
+- animation-timing-function
+- transition
+- transition-behavior
+- transition-delay
+- transition-duration
+- transition-property
+- transition-timing-function
+- offset
+- offset-anchor
+- offset-distance
+- offset-path
+- offset-position
+- offset-rotate
+- @keyframes
+
+### shapes
+- [shapes](https://developer.mozilla.org/Web/CSS/CSS_shapes)
+
+- shape-image-threshold
+- shape-margin
+- shape-outside
+- shape-rendering
+- paint-order
+- circle()
+- ellipse()
+- inset()
+- path()
+- polygon()
+- rect()
+- shape() Experimental
+- xywh()
+
+### svgs
+
+- x
+- y
+- cx
+- cy
+- d
+- x
+- y
+- r
+- rx
+- ry
+- fill
+  - fill-opacity
+  - fill-rule
+- marker
+  - marker-end
+  - marker-mid
+  - marker-start
+- pointer-events
+- stop-color
+- stop-opacity
+- stroke
+  - stroke-dasharray
+  - stroke-dashoffset
+  - stroke-linecap
+  - stroke-linejoin
+  - stroke-miterlimit
+  - stroke-opacity
+  - stroke-width
+- dominant-baseline
+- vector-effect
+- color-interpolation
+- color-interpolation-filters
+
+### mathml
+
+- math-depth
+- math-shift
+- math-style
+
+### writing modes
+- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_writing_modes)
+- [ruby layout](https://developer.mozilla.org/Web/CSS/CSS_ruby_layout)
+
+- `direction: ltr | rtl;`
+- block-size
+- inline-size
+- `writing-mode: horizontal-tb | vertical-lr | vertical-rl;`
+- `unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;`
+- `text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation;`
+- `text-combine-upright: none | all;`
+- ruby-align
+- ruby-position
+
+## Assorted Pseudo-Classes
+
+- :link, :visited
+- :local-link
+  - alternatively: `*[href*="//"]:not([href*="base-url"])`
+- :any-link
+  - useless, use `:link, :visited` or `a, area`
+- :target
+  - v useful
+
+- :active, :hover, :focus, :focus-within, :focus-visible
+
+- :checked, :default, :indeterminate
+- :in-range, :out-of-range
+- :required, :optional
+- :disabled, :enabled
+- :valid, :invalid, :user-valid, :user-invalid
+- :read-only, :read-write
+- :placeholder-shown
+- :autofill
+
+
+- :fullscreen, :picture-in-picture, :modal, :popover-open
+
+- :past, :current, :future
+- :defined
+- :lang(), :dir()
+- :host, :host(), :host-context()
+- :root
+- :scope
+- :state()
+
+## Assorted Pseudo-Elements
+- [pseudo-elements](https://developer.mozilla.org/Web/CSS/CSS_pseudo-elements)
+
+- content
+- ::before
+- ::after
+- ::marker
+- ::backdrop
+- ::cue
+- ::file-selector-button
+- ::first-letter
+- ::first-line
+- ::grammar-error
+- ::highlight()
+- ::part()
+- ::placeholder
+- ::selection
+- ::slotted()
+- ::spelling-error
+- ::target-text
+
+## Assorted At-Rules
+
+- @charset
+- @counter-style
+- @import
+- @layer
+- @namespace
+- @page
+- @scope
+- @supports
+
+## Assorted Functions
+
+- calc()
+- url()
+
+- attr()
+- clamp()
+- counter()
+- counters()
+- env()
+- fit-content()
+- image-set()
+- layer()
+- minmax()
+- paint()
+- ray()
+- repeat()
+- symbols()
+
+## Assorted Types
+- `<absolute-size>`
+- `<alpha-value>`
+- `<angle>`
+- `<angle-percentage>`
+- `<basic-shape>`
+- `<blend-mode>`
+- `<box-edge>`
+- `<calc-keyword>`
+- `<calc-sum>`
+- `<color-interpolation-method>`
+- `<color>`
+- `<custom-ident>`
+- `<dashed-ident>`
+- `<dimension>`
+- `<display-box>`
+- `<display-inside>`
+- `<display-internal>`
+- `<display-legacy>`
+- `<display-listitem>`
+- `<display-outside>`
+- `<easing-function>`
+- `<filter-function>`
+- `<flex>`
+- `<frequency>`
+- `<frequency-percentage>`
+- `<generic-family>`
+- `<gradient>`
+- `<hex-color>`
+- `<hue>`
+- `<hue-interpolation-method>`
+- `<ident>`
+- `<image>`
+- `<integer>`
+- `<length>`
+- `<length-percentage>`
+- `<line-style>`
+- `<named-color>`
+- `<number>`
+- `<overflow>`
+- `<percentage>`
+- `<position-area>` Experimental
+- `<position>`
+- `<ratio>`
+- `<relative-size>`
+- `<resolution>`
+- `<string>`
+- `<system-color>`
+- `<time>`
+- `<time-percentage>`
+- `<transform-function>`
+- `<url>`