The CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
- https://developer.mozilla.org/en-US/docs/Web/CSS/length
- The large, small, and dynamic viewport units https://web.dev/viewport-units/ (web.dev)
- Future CSS: Anchor Positioning https://kizu.dev/anchor-positioning-experiments/ (kizu.dev)
- Tether elements to each other with CSS anchor positioning https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/ (developer.chrome.com)
Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.
Container queries enable you to apply styles to elements nested within a specific container based on the features of that container. The query returns true or false depending on whether the query condition is true for the container.
The CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.
The CSS data type represents a mathematical function that describes the rate at which a value changes.
- https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
- Using linear() for better animation https://fullystacked.net/posts/linear/ (fullystacked.net)
- Linear() Generator https://linear-easing-generator.netlify.app/ (linear-easing-generator.netlify.app)
Intrinsic Sizing
The min-content sizing keyword represents the minimum intrinsic size of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.
The offset-path CSS property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves.
- ttps://developer.mozilla.org/en-US/docs/Web/CSS/offset-path
The color() functional notation allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in.
The color-mix() functional notation takes two values and returns the result of mixing them in a given colorspace by a given amount.
lch(), lab(), oklch(), oklab()
The lch() functional notation expresses a given color using the LCH color space, which represents lightness, chroma, and hue. It uses the same L axis as the lab() color function of the CIELab color space, but it uses the polar coordinates C (Chroma) and H (Hue).
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast() https://www.bram.us/2021/04/28/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/ (bram.us)
Using Different Color Spaces for Non-Boring Gradients https://css-tricks.com/color-spaces-for-more-interesting-css-gradients/ (css-tricks.com)
scroll-snap-type, scroll-snap-align, scroll-padding…
The CSS scroll snap module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
- https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
- Smooth and simple transitions with the View Transitions API https://developer.chrome.com/docs/web-platform/view-transitions/ (developer.chrome.com)
The scroll-timeline CSS shorthand property is used to define a named scroll progress timeline, which is progressed through by scrolling a scrollable element (scroller) between top and bottom (or left and right). scroll-timeline is set on the scroller that will provide the timeline. The starting scroll position represents 0% progress and the ending scroll position represents 100% progress. If the 0% position and 100% position coincide (i.e., the scroll container has no overflow to scroll), the timeline is inactive.
The view-timeline CSS shorthand property is used to define a named view progress timeline, which is progressed through based on the change in visibility of an element (known as the subject) inside a scrollable element (scroller). view-timeline is set on the subject.
Animate to and from properties such as display: none
The font-display descriptor for the @font-face at-rule determines how a font face is displayed based on whether and when it is downloaded and ready to use.
The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. This article will give you all you need to know to get you started using variable fonts.
The text-wrap CSS shorthand property controls how text inside an element is wrapped. The different values provide:
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
- CSS text-wrap: balance https://developer.chrome.com/blog/css-text-wrap-balance/ (developer.chrome.com)
The text-wrap CSS shorthand property controls how text inside an element is wrapped. The different values provide:
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
- CSS text-wrap: pretty https://developer.chrome.com/blog/css-text-wrap-pretty (developer.chrome.com)
The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.
The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.
The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.
The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g. light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.
min(), max(), clamp()
CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.
sin(), cos(), tan()…
CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.
round(), mod(), rem()
CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.
sign(), abs()
The sign() CSS function contains one calculation, and returns -1 if the numeric value of the argument is negative, +1 if the numeric value of the argument is positive, 0⁺ if the numeric value of the argument is 0⁺, and 0⁻ if the numeric value of the argument is 0⁻.
pow(), sqrt(), exp(), log(), hypot()
The pow() CSS function is an exponential function that returns the value of a base raised to the power of a number.
The @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows developers to explicitly define their CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
The image() CSS function defines an in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.
Pre-filter a set of child elements before applying nth-child to it.
More control over :nth-child() selections with the of S syntax https://developer.chrome.com/docs/css-ui/css-nth-child-of-s (developer.chrome.com)