RmlUi logo RmlUi Documentation RCSS Cascading Style Sheets
Edit on GitHub

Media queries

The RCSS at-rule @media can be used to dynamically activate and deactivate style rules based on a given set of conditions. The RCSS media queries follow the CSS syntax with some extensions and limitations.

@media (orientation: landscape) and (min-width: 640px)
{
	#menu {
		float: left;
		width: 320px;
	}
}

@media (min-resolution: 2x)
{
	@spritesheet theme2x
	{
		src: invader2x.tga;
		resolution: 2x;

		icon-invader: 179px 152px 102px 78px;
		icon-game:    330px 152px 102px 78px;
		icon-score:   534px 152px 102px 78px;
		icon-help:    728px 152px 102px 78px;
	}
}

@media (theme: blue)
{
	body {
		color: blue;
	}
	#header {
		background-color: #33e;
	}
}

@media not (theme: blue)
{
	body {
		color: red;
	}
	#header {
		background-color: #e33;
	}
}

Media features

The following table lists all supported media features.

Name Range Value Description
width Yes <length> Width of context.
height Yes <length> Height of context.
aspect-ratio Yes <ratio> Aspect ratio of context (width / height).
resolution Yes <resolution> The dp-ratio of the context. Note that <resolution> always takes the x unit in RCSS.
orientation No landscape | portrait Orientation based on the context width and height.
theme No <string> Custom RCSS feature. Can be activated and deactivated on the context.

Since RmlUi is designed to be displayed on screens and in a controlled environment, it doesn’t make sense to implement all CSS media features.

All range media features can be prefixed with min- and max- to specify minimum and maximum constraints, respectively. All other constraints are compared for equality.

Logical operators

The following logical operators can be used to combine media features.

Operator Description
and Matches if all conditions are true.
not Matches the inverse of the condition.

Other operators found in CSS are currently not supported.

Limitations

Currently, RCSS has some limitations compared to CSS.

  • @media rules cannot be nested.
  • Conditions cannot be nested within a media query, e.g. by using parenthesis.
  • Only a single occurrence of a given feature can be specified in a single media query.
    • Except that both min- and max- of the same range feature can be specified.
  • The CSS Level 4 syntax using <= operators and similar is not supported.