DEV Community

Leapcell
Leapcell

Posted on • Updated on

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;
}


Enter fullscreen mode Exit fullscreen mode
  • 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));
}


Enter fullscreen mode Exit fullscreen mode

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);
}


Enter fullscreen mode Exit fullscreen mode

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.

Demo

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

Top comments (19)

Collapse
 
0x04 profile image
Oliver Kühn

What's about credits for the inventor of this technique? Temani Afif - css-tip.com/screen-dimension/.

Collapse
 
leapcell profile image
Leapcell

Thank you for pointing this out! The article was based on an internal technical sharing, and the inventor was unintentionally omitted. We'll do our best to avoid such oversights in the future. 🫡

Collapse
 
aroldev profile image
Arol

This code is a poem

Collapse
 
chriscalo profile image
Chris Calo

I think you mean window size, right?

Collapse
 
yaireo profile image
Yair Even Or • Edited

Never window size.
Delete this word from your mind and replace it with viewport

Collapse
 
leapcell profile image
Leapcell

Thanks for pointing that out!👏 Fixed it.

Collapse
 
kevinluo201 profile image
Kevin Luo

Is it possible to use calc instead of tan * atan2 trick? Whatever, great article!

Collapse
 
xbandx68 profile image
Andrea Bandiera

is possible to create one generic css and reuse it inside component? like Angular.
for example insert one div:

where I need to mesure

Collapse
 
herlon_costa_2976ae93adb3 profile image
Herlon Costa

It's a very nice solution!!

Collapse
 
thrasher profile image
Enrico Monzeglio

that's cool, thanks for sharing

Collapse
 
inglsmit profile image
Paul Inglsmit

hmm. Interesting. But in which cases I can use it?

Collapse
 
kevinbism profile image
Kevin Ramirez

In no case, but it is useful when you want to know the size of your screen's viewport just by visiting the demo page.

Collapse
 
theyoungdev profile image
Rokeeb Qasim

Is it supported on all current browsers

Collapse
 
ajayvj profile image
ajay v j

Awesome!!!