A few lines of CSS to get the screen width/height as integer values

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Learn how to obtain screen width and height as pixel values using only CSS, avoiding JavaScript. This method leverages @property and trigonometric functions, providing unitless values that update in real-time upon screen resize.

Get the screen width & height without JavaScript

Nice but complex to understand lol

I was confused for a second on how you can obtain a screen width by math. But the author didn’t mean the screen width but the viewport width in pixels.
With the <code>tan(atan(abc, 1px))</code> you simply convert the 100vw into the pixel amount without a unit so it can be used with counters to display the numbers on the page. There is no math going on here, we are just abusing those css functions to get rid of the unit and use pixels.

Awesome. I don’t know to use the new math functions yet, but this is cool. But here comes the downside of the link: There is no explanation, how this is working.

Brilliant. Thank you for sharing.