Get Window Size in Pure CSS

We all know that CSS used to be the most challenging part of web development. However, it has become even harder nowadays.

You wouldn't believe it, but now CSS can define properties, do the math, and even directly get the window size! This article will show you how to do it.

Define Property

The @property rule is a new feature in CSS that allows developers to create custom properties and set their types, inheritance, and initial values. Using this feature, we can read specific values and pass them to custom properties.

In the example below, we define two custom properties, --w_raw and --h_raw, representing the window's width and height respectively:

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• syntax: '<length>' specifies that the property's type is a length.
• inherits: true indicates that the property can be inherited.
• initial-value sets the property's initial value to 100vw and 100vh, which are the viewport's width and height.

Removing Units

Now, we have obtained the window width and height values, but they still include units. How can we remove the units to get pure numeric values? It's a matter of math, so we need to use the mathematical tools in CSS: atan2(y, x) and tan().

• The atan2(y, x) function returns the angle (in radians) from the x-axis to the point (x, y).
• The tan() function calculates the tangent of a given angle.

Combining these, we can obtain the pure numeric values. Here, we pass var(--w_raw) and 1px as parameters to calculate the angle of the width and then convert it to a number. In this way, we convert the width and height to unitless values and store them in :root's variables.

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

Displaying the Numbers

Now that the numeric values are stored in CSS, how do we display them? It's the counter that counts!

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

We create a ::before pseudo-element on the body to display the CSS content.

• counter-reset initializes the counters h and w and sets their values to var(--h) and var(--w).
• content: counter(w) "x" counter(h); displays the width and height counter, in the format "width x height".

Done!

Now you have a window size indicator implemented purely in CSS.

The browser will update --w and --h in real time and display them on the page. The entire process is entirely JavaScript-free.

You can click here to try the online demo.

References:
Temani Afif - https://css-tip.com/screen-dimension/