DEV Community

Get Window Size in Pure CSS

Leapcell on September 01, 2024

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...
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
 
theyoungdev profile image
Rokeeb Qasim

Is it supported on all current browsers

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
 
ajayvj profile image
ajay v j

Awesome!!!

Collapse
 
sawacrow profile image
cengiz ilhan

caniuse.com/?search=%40property
if im not wrong. thats not support for safari 16.3<

Collapse
 
loop_key profile image
ynck

Wow, how clever !

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
 
yaireo profile image
Yair Even Or

Genius!

Collapse
 
axi0m profile image
Matt

This is gold.

Collapse
 
konstantinos_ntamadakis_5 profile image
Konstantinos Ntamadakis • Edited

Would be possible to calculate some element height, like headers with this instead of using javascript?
I'm curious to see what else is possible with the new @property featured in CSS