https://modern-css.com/reference/types/shape-function/
shape() | CSS Types & Functions
A function used in 'clip-path' and other properties to define custom 2D shapes using commands like 'move', 'line', and 'curve'. It's basically like writing SVG...
shape csstypesfunctions
https://modern-css.com/reference/types/length-percentage/
length-percentage | CSS Types & Functions
A CSS data type that accepts either a length (like 20px) or a percentage (like 50%). It's used in properties like 'width', 'margin', and 'padding'.
css typeslengthpercentagefunctions
https://modern-css.com/reference/types/gradient/
gradient | CSS Types & Functions
A special image type that transitions smoothly between two or more colors. Common types include 'linear-gradient()', 'radial-gradient()', and...
gradient csstypesfunctions
https://modern-css.com/reference/types/transform-function/
transform-function | CSS Types & Functions
A generic data type representing any function that alters an element's coordinate system. This includes common functions like rotate(), scale(), translate(),...
transform functioncss typesfunctions
https://modern-css.com/reference/types/shape/
shape | CSS Types & Functions
A basic data type that defines a 2D shape, like a circle, ellipse, or polygon. It's most commonly used with the 'clip-path' property to cut elements into...
shape csstypesfunctions
https://modern-css.com/reference/types/exp/
exp | CSS Types & Functions
Exponential function. Calculates the mathematical constant e raised to a power.
css typesexpfunctions
https://modern-css.com/reference/types/pow/
pow | CSS Types & Functions
An exponential math function that calculates a base raised to the power of an exponent. It's useful for creating non-linear scales (like font sizes or spacing).
css typespowfunctions
https://modern-css.com/reference/types/sibling-count/
sibling-count | CSS Types & Functions
A new experimental function that returns the total number of siblings an element has. This allows you to style elements based on how many items are currently...
css typessiblingcountfunctions
https://modern-css.com/reference/types/min/
min | CSS Types & Functions
Returns the smallest (most negative) value from a list of comma-separated expressions. It is useful for creating layouts that shrink but don't grow beyond a...
css typesminfunctions
https://modern-css.com/reference/types/position/
position | CSS Types & Functions
Specifies how an element is positioned in a document. It allows for static, relative, absolute, fixed, or sticky positioning, which changes how the element...
position csstypesfunctions
https://modern-css.com/reference/types/rem/
rem | CSS Types & Functions
css typesremfunctions
https://modern-css.com/reference/types/overflow/
overflow | CSS Types & Functions
Sets what happens if content is too big to fit into its container. It can be clipped, hidden, or made to scroll.
css typesoverflowfunctions
https://modern-css.com/reference/types/corner-shape-value/
corner-shape-value | CSS Types & Functions
Represents the specific keywords (like 'round', 'angle', 'bevel') that define how a corner should be shaped.
css typescornershapevaluefunctions
https://modern-css.com/reference/types/dashed-function/
dashed-function | CSS Types & Functions
An experimental type of CSS function name that starts with two dashes (like '--foo()'). It's intended to be used for custom, user-defined functions in the...
function cssdashedtypesfunctions
https://modern-css.com/reference/types/frequency/
frequency | CSS Types & Functions
Unit for sound frequency (Hz, kHz). Used in audio and speech-related CSS properties.
css typesfrequencyfunctions
https://modern-css.com/reference/types/attr/
attr() | CSS Types & Functions
Retrieves the value of an attribute from an element to use directly in CSS. The classic use is with the content property in pseudo-elements; using attr() with...
css typesattrfunctions
https://modern-css.com/reference/types/blend-mode/
blend-mode | CSS Types & Functions
A type representing the mathematical way two colors mix together. Common values include 'multiply' (darkens), 'screen' (lightens), and 'overlay' (increases...
blend modecss typesfunctions
https://modern-css.com/reference/types/env/
env | CSS Types & Functions
A function that allows you to use environment variables defined by the browser, most commonly used to handle 'safe areas' on devices with notches or rounded...
css typesenvfunctions
https://modern-css.com/reference/types/string/
string | CSS Types & Functions
A basic data type that represents a sequence of characters, always wrapped in quotes (e.g., 'Hello'). It's most commonly used with the 'content' property in...
css typesstringfunctions
https://modern-css.com/reference/types/if/
if | CSS Types & Functions
An experimental function that allows you to apply different values based on a condition (like a media query or a variable state) directly within a property...
css typesfunctions
https://modern-css.com/reference/types/flex/
flex | CSS Types & Functions
A shorthand property that defines how a flex item grows or shrinks to fit the available space in its container.
css typesflexfunctions
https://modern-css.com/reference/types/angle-percentage/
angle-percentage | CSS Types & Functions
A combination type that accepts either an explicit angle (like 45deg) or a percentage value that the browser converts into an angle based on a reference.
css typesanglepercentagefunctions
https://modern-css.com/reference/types/tan/
tan | CSS Types & Functions
Calculates the tangent of an angle. Useful for complex geometric translations or rotations directly in CSS.
css typestanfunctions
https://modern-css.com/reference/types/number/
number | CSS Types & Functions
A CSS data type representing a real number (which can include decimals). It's used for values like 'opacity', 'line-height' (as a multiplier), or in math...
css typesnumberfunctions
https://modern-css.com/reference/types/line-style/
line-style | CSS Types & Functions
A CSS data type representing the 'style' of a line, used in properties like 'border-style' or 'outline-style'. Common values include 'solid', 'dashed', and...
style csslinetypesfunctions
https://modern-css.com/reference/types/sin/
sin | CSS Types & Functions
Calculates the sine of an angle. Part of the trigonometric function suite in CSS, allowing you to create complex circular layouts or wave-like animations.
css typessinfunctions
https://modern-css.com/reference/types/counter/
counter | CSS Types & Functions
A function used in the 'content' property to display the current value of a CSS counter as text.
css typescounterfunctions
https://modern-css.com/reference/types/cap/
cap | CSS Types & Functions
Relative unit based on the height of capital letters. 1cap = cap height of the element's font.
css typescapfunctions
https://modern-css.com/reference/types/url/
url | CSS Types & Functions
The standard CSS function for including external resources like images, fonts, or SVGs into your stylesheet.
css typesurlfunctions
https://modern-css.com/reference/types/acos/
acos | CSS Types & Functions
A trigonometric function that calculates the arccosine of a number. It's used in advanced CSS math for calculating angles in layouts or animations based on...
css typesacosfunctions
https://modern-css.com/reference/types/rcap/
rcap | CSS Types & Functions
Relative to the root element's cap height. Like rem but for cap units.
css typesfunctions
https://modern-css.com/reference/types/clamp/
clamp | CSS Types & Functions
Clamps a value between an upper and lower bound. It accepts a minimum, a preferred, and a maximum value, making it perfect for fluid typography.
css typesclampfunctions
https://modern-css.com/reference/types/max/
max | CSS Types & Functions
Returns the largest (most positive) value from a list of comma-separated expressions. It is useful for creating layouts that grow but don't shrink below a...
css typesmaxfunctions
https://modern-css.com/reference/types/round/
round | CSS Types & Functions
A math function that rounds a value to the nearest multiple of another value. For example, you can use it to ensure a width always rounds to the nearest 10...
css typesroundfunctions
https://modern-css.com/reference/types/rch/
rch | CSS Types & Functions
Relative to the root element's character width (ch). Like rem but for character width.
css typesrchfunctions
https://modern-css.com/reference/types/abs/
abs | CSS Types & Functions
Absolute value function. Returns the non-negative value of a number.
css typesabsfunctions
https://modern-css.com/reference/types/ray/
ray | CSS Types & Functions
A function used in the motion path module to define a path that starts at a single point and shoots out in a specific direction (like a ray of light).
css typesrayfunctions
https://modern-css.com/reference/types/asin/
asin | CSS Types & Functions
A mathematical function that calculates the arcsine (inverse sine) of a number. It's used in advanced CSS math to determine angles based on vertical distances...
css typesasinfunctions
https://modern-css.com/reference/types/image/
image | CSS Types & Functions
A generic CSS type representing any data that can be rendered as an image, including URLs (url()), gradients (linear-gradient()), or subsets of other images...
image csstypesfunctions
https://modern-css.com/reference/types/type/
type | CSS Types & Functions
A generic keyword used in newer CSS specs (like Mixins and Functions) to denote a specific data type requirement for a variable or argument.
css typesfunctions
https://modern-css.com/reference/types/sqrt/
sqrt | CSS Types & Functions
Calculates the square root of a number. This is part of the exponent function set in CSS, useful for relative scaling based on geometric areas.
css typesfunctions
https://modern-css.com/reference/types/resolution/
resolution | CSS Types & Functions
A media query property that describes the pixel density of the output device (like a 'Retina' display). It allows you to provide higher-quality images only for...
css typesresolutionfunctions
https://modern-css.com/reference/types/ratio/
ratio | CSS Types & Functions
A CSS data type representing the proportion of one side to another (like 16 / 9 for widescreen). It's primarily used in the aspect-ratio property or media...
css typesratiofunctions
https://modern-css.com/reference/types/anchor-size/
anchor-size | CSS Types & Functions
A function that retrieves the width or height of the anchor element. It's incredibly useful for making a popup or menu match the exact dimensions of the button...
size cssanchortypesfunctions
https://modern-css.com/reference/types/angle/
angle | CSS Types & Functions
A basic CSS type for rotation values. It can be expressed in degrees (deg), radians (rad), gradians (grad), or turns (turn).
css typesanglefunctions
https://modern-css.com/reference/types/percentage/
percentage | CSS Types & Functions
A CSS data type representing a value relative to something else (usually the parent element's size or another property's value).
css typespercentagefunctions
https://modern-css.com/reference/types/time/
time | CSS Types & Functions
The standard CSS data type for durations. It can be defined in seconds (s) or milliseconds (ms).
css typestimefunctions
https://modern-css.com/reference/types/ric/
ric | CSS Types & Functions
Relative to the root element's CJK character width. Like rem but for CJK text.
css typesricfunctions
https://modern-css.com/reference/types/progress/
progress | CSS Types & Functions
A relative math function that calculates how far a value is between two points (a start and an end). It returns a number between 0 and 1, essentially giving...
css typesprogressfunctions
https://modern-css.com/reference/types/dimension/
dimension | CSS Types & Functions
A general term for any CSS value that combines a number with a unit (like '10px', '2em', or '50%').
css typesdimensionfunctions
https://modern-css.com/reference/types/
Types & Functions Reference | modern.css
CSS Types and Functions are values that help compute dynamic styles, such as mathematical calculations, color manipulations, and image sources. Browse all 79...
typesfunctionsreferencemoderncss
https://timkadlec.com/saved/2018/10/the-three-types-of-performance-testing-css-wizardry-css-architecture-web-performance-optimisation-and-more-by-harry-roberts/
The Three Types of Performance Testing – CSS Wizardry – CSS Architecture, Web Performance...
Tim Kadlec writes about performance, product management, and the web.
three typesperformance testingcsswizardryarchitecture
https://kilianvalkhof.com/2007/css-html/the-css-media-types/
The CSS media types | Kilian Valkhof
css mediatypeskilianvalkhof