How to Get Screen Width & Height Without JavaScript Using Pure CSS
The common tasks in web development involve knowing the width and height of a screen to make your design responsive. Conventionally, you have probably done this through JavaScript, but most likely did not think you could do this all in pure CSS, right? 🤔 Yes, it is possible — just pure CSS below, lightweight, and sans JavaScript!
In this post, I’m going to show how to get the width and height of the screen without relying on JavaScript — just pure CSS magic! ✨ We will also discuss why this is one of the great ways for performance enhancement and how it further enhances user experience on your site. 🌐 Alright? Here we go! 🎉
💡 Why Use Pure CSS to Get Screen Dimensions?
If the purpose is to create fast and lightweight websites, reducing dependence on JavaScript definitely will help one in every way. ⚡ Using CSS instead of JavaScript to get basic things done, like fetching screen dimensions, will reduce page load times, which will be essential for improving SEO rankings and overall user experiences. 📈 It cuts down having complex codes, hence making maintenance of the site much easier. 🛠️
📖 Step-by-Step Guide to Fetch Screen Width and Height Without JavaScript
Now, let’s take a look at the code snippet that enables you to retrieve the screen’s width and height via pure CSS. Here’s how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Screen Width & Height Without JavaScript</title>
<style>
@property --_w {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: "<length>";
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w), 1px)); /* screen width */
--h: tan(atan2(var(--_h), 1px)); /* screen height */
}
body:before {
content: counter(w) "x" counter(h);
counter-reset: h var(--h) w var(--w);
font-size: 50px;
font-family: system-ui, sans-serif;
font-weight: 900;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
</style>
</head>
<body></body>
</html>🔍 How Does This Code Work?
CSS Custom Properties (
--_wand--_h): We declare two custom properties,--_wand--_h, which hold the viewport width (100vw) and height (100vh). These act as the base measurements. 📏CSS
@property: We use the@propertyrule to define custom properties with specific syntax and initial values. This allows for more control over the custom variables. ⚙️Using Trigonometry in CSS: Here’s where the magic happens. ✨ By applying trigonometric functions like
atan2(arc tangent) andtan(tangent), we can derive the screen's width and height as integers without any units. 📐 This calculation is then displayed using the:beforepseudo-element.Display the Dimensions: In the
body:beforesection, we use CSScounter-resetto set thewandhvalues, and display them as text content in the center of the screen. 💻 This value will update dynamically when the viewport changes. 🔄
🚀 Benefits of This Approach
No JavaScript Required: You don’t need any JavaScript code to fetch the screen width and height. This reduces the overall complexity of your codebase. ✨
Performance Boost: By reducing the amount of JavaScript, your web page will load faster. 🚄 This is especially important for SEO since search engines prioritize faster-loading pages. 📈
Responsive and Dynamic: The dimensions update automatically when the screen is resized, making it perfect for responsive design without additional scripting. 📱
🧑💻 Full Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Screen Width & Height Without JavaScript</title>
<style>
/* Screen Size CSS */
@property --_w {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: "<length>";
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w), 1px)); /* screen width */
--h: tan(atan2(var(--_h), 1px)); /* screen height*/
/* The result is an integer without unit */
}
body:before {
content: counter(w) "x" counter(h);
counter-reset: h var(--h) w var(--w);
font-size: 50px;
font-family: system-ui, sans-serif;
font-weight: 900;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
/* Screen Size CSS end*/
/* Background css */
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
/* Background css End*/
</style>
</head>
<body>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>🏁 Conclusion
Getting the screen width and height using pure CSS is a simple yet powerful technique that improves your site’s performance. 💨 Why? Because with this approach, you reduce the use of JavaScript, and your website will remain lightweight and easy to maintain. 🧹 Try it in your next project and see for yourself how much faster your page will load! 🚀
A Note From the Author
Thank you so much for taking the time to read the story. If you found my article helpful and interesting, please share your thoughts in the comment section, and don’t forget to share and clap 😊
If you have enjoyed this post or any of my other work, I greatly appreciate donations from those who might be so inclined to support my writing. If you’d like to leave me a “tip,” I have an account set up HERE. Thank you!
Happy Coding! 💻✨
If you’re a fan of Demon Slayer and want to bring a piece of the action home, check out these amazing toys on Amazon! Whether you’re collecting or gifting, these figures capture the essence of your favorite characters perfectly. Grab yours here! 🥷✨
📞 Let’s Get in Touch! 📞
GitHub: @gajanan0707
LinkedIn: Gajanan Rajput
Website: mrcoder701.com
YouTube: mrcoder701
Instagram: mr_coder_701
Medium: Gajanan Rajput