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 to100vw
and100vh
, 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 countersh
andw
and sets their values tovar(--h)
andvar(--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/
Top comments (17)
What's about credits for the inventor of this technique? Temani Afif - css-tip.com/screen-dimension/.
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. 🫡
This code is a poem
I think you mean window size, right?
Never window size.
Delete this word from your mind and replace it with
viewport
Thanks for pointing that out!👏 Fixed it.
that's cool, thanks for sharing
hmm. Interesting. But in which cases I can use it?
Genius!
Is it supported on all current browsers
Awesome!!!
caniuse.com/?search=%40property
if im not wrong. thats not support for safari 16.3<
Wow, how clever !