From 468dcac699ee2df8a8614e143ae9a00007938f57 Mon Sep 17 00:00:00 2001 From: JJ Date: Sat, 21 Sep 2024 16:52:20 -0700 Subject: meow --- web/css.md | 1021 ++++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 815 insertions(+), 206 deletions(-) (limited to 'web/css.md') 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 | | ;` + - `right: auto | | ;` + - `bottom: auto | | ;` + - `left: auto | | ;` +- `z-index: auto | ;` +- `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 | ;` +- 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 +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` +- `` Experimental +- `` +- `` +- `` +- `` +- `` +- `` +- `