CSS Media Expressions

A Collection of Interesting Ideas,

This version:


The goal of this document is to specify a syntax for media queries within values in CSS.

1. Introduction

In CSS, declarations may only be given responsive values by declaring new @media at-rules with duplicated selectors and declarations. This module introduces a more efficient way of representing responsive values.

2. Media Expressions Syntax

The syntax of a media() function is:

media() = media( <media-value> [, <media-value>]? )

<media-value> = [ <media-condition> ]?, <css-value>

To learn more about <media-condition> see Media Queries.

To learn more about <css-value> see CSS Values and Units Module.

body {
  font-size: media(
    (min-width:  600px) 18px,
    (min-width: 1000px) 20px


Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.


Terms defined by this specification


Normative References

S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119