Adam Argyle

One List To Rule Them All

Listen Later

Whether I'm giving a talk or on a podcast, these two things constantly pop up:

  • how do I find what to study to keep up?
  • what's new in CSS?

    • If you've wondered those things before, then this list is for you.

    Find something you've never heard of, click the link; and look at you, you're already getting more familiar with what's new!

    Selectors
    #
    • :has()
    • :is() and :where()
    • :focus-visible
    • :user-valid
    • :user-invalid
    • :active-view-transition
    • :active-view-transition-type()
    • :target-current
    • :popover-open
    • :scope
    • :heading
    • :heading()
    • :state()
      • Pseudo Elements
      #
      • ::backdrop
      • ::slotted()
      • ::part()
      • ::highlight()
      • ::grammar-error
      • ::spelling-error
      • ::view-transition-new()
      • ::view-transition-old()
      • ::view-transition-group()
      • ::view-transition-image-pair()
      • ::scroll-button()
      • ::scroll-marker()
      • ::details-content
      • ::picker()
      • ::picker-icon
      • ::checkmark
      • ::column
      • ::target-text
        • Language
        #
        • CSS Nesting
          • @rules
          #
          • @property
          • @container
            • size query
            • style query
            • state query
            • @scope
            • @layer
            • @keyframes with entry and exit
            • @supports
            • @starting-style
            • @view-transition
            • @position-try
            • @mixin
            • @function
            • @else
            • @when
              • Color
              #
              • color-mix()
              • color(from …)
              • contrast-color()
              • oklch(), oklab(), hwb(), color()
              • linear-gradient(in oklab, …)
                • Functions
                #
                • var()
                • if()
                • linear()
                • fit-content()
                • repeat()
                • min()
                • max()
                • attr()
                • env()
                • circle(), polygon()
                • scroll()
                • view()
                • clamp()
                • sibling-count() and sibling-index()
                • cos(), sin(), tan(), pow(), atan2() asin() acos()
                • shape()
                • light-dark()
                • at-rule()
                • image-set()
                • anchor()
                • random()
                • random-item()
                • control-value()
                • progress()
                • media-progress()
                • container-progress()
                • mix()
                • calc-mix()
                • cross-fade()
                • transform-mix()
                • first-valid()
                • toggle()
                  • Properties
                  #
                  • accent-color
                  • color-scheme
                  • container-type
                  • content-visibility
                  • contain-intrinsic-size
                  • aspect-ratio
                  • animation-composition
                  • animation-timeline
                  • animation-range
                  • text-wrap
                  • font-palette and font-palette-values
                  • scrollbar-gutter
                  • forced-color-adjust
                  • reading-flow
                  • scroll-behavior
                  • interpolate-size
                  • corner-shape
                  • overscroll-behavior
                  • scroll-marker-group
                  • scroll-target-group
                  • transition-behavior
                  • scrollbar-color and scrollbar-size
                  • text-box
                  • anchor-name
                  • anchor-scope
                  • position-anchor
                  • position-area
                  • position-try-fallbacks
                  • position-try-order
                  • position-visibility
                  • field-sizing
                  • initial-letter
                    • Values
                    #
                    • grid-template-columns: subgrid;
                    • text-align: start | end;
                    • overflow: clip;
                      • Queries:
                      #
                      • @media (prefers-contrast)
                      • @media (prefers-reduced-data)
                        • Units
                        #

                        There's a whole lot of units now. In my opinion, each are unique and useful in their own occasions. Super powers, knowing which to use when.

                        Relative
                        #
                        • ex
                        • ch
                        • cap
                        • ic
                        • lh
                          • Root Relative
                          #
                          • rex
                          • rch
                          • rlh
                          • ric
                          • rcap
                            • Absolute
                            #
                            • pt
                            • pc
                            • in
                            • cm
                            • mm
                            • Q
                              • Viewport
                              #
                              • vw
                              • vh
                              • vi
                              • vb
                              • vmin
                              • vmax
                              • dvw
                              • dvh
                              • dvi
                              • dvb
                              • dvmin
                              • dvmax
                              • svw
                              • svh
                              • svi
                              • svb
                              • svmin
                              • svmax
                              • lvw
                              • lvh
                              • lvi
                              • lvb
                              • lvmin
                              • lvmax
                                • Container
                                #
                                • cqw
                                • cqh
                                • cqi
                                • cqb
                                • cqmin
                                • cqmax

                                  • Have a suggestion? Let me know on Bluesky or Twitter! 🤝

                                  ...more
                                  View all episodesView all episodes
                                  Download on the App Store
                                  Adam ArgyleBy