Introduction
For a long time, adaptive layout required complex media queries, calc(), and dynamic vw and vh units.
But now there is a new feature that can significantly simplify the whole process — view().
I'll tell you how it works and why you should already master it! 🚀
What is view() and how does it work?
view() is a function that dynamically calculates the size of elements depending on the browser window.
Syntax:
view(clamp, min_value, ideal_value, max_value)min_value - minimum size
ideal_value — ideal size (relative to viewport)
max_value - maximum size
💡 Summary: fluid design that adapts to different screen sizes without noticeable jumps! 📱🖱️🖥️
Case study: Adaptive box
🌟 Imagine writing code where the container automatically resizes without a single media query!
HTML + CSS:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Демо CSS view()</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #222;
color: white;
text-align: center;
}
.box {
width: view(clamp, 150px, 50vw, 600px);
height: view(clamp, 150px, 30vh, 400px);
background: linear-gradient(135deg, #ff8a00, #e52e71);
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.box span {
font-size: view(clamp, 1rem, 3vw, 2rem);
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<span>Измените размер окна! 🎯</span>
</div>
</body>
</html>Why is view() a revolution?
✅ Simplifies CSS: no more calc() and complex media queries
✅ Creates a smoother layout
✅ Improves UX: no problems with different screen sizes
✅ Makes the code more readable and maintainable
Browser compatibility
✅ Works in the latest versions of Chromium (including Chrome, Edge, Opera)
⚠️ Firefox has partial support (enabled via about:config)
❌ Safari and old browsers do not yet support
How to check compatibility?
Before using view() in production, be sure to check the support:
✅ On the website Can I Use
✅ Or through CSS validation:
@supports (width: view(clamp, 100px, 50vw, 500px)) {
.box {
width: view(clamp, 100px, 50vw, 500px);
}
}If there is no support, add a backup option via clamp() or fixed sizes.
Conclusion
Function view() is the future of adaptive design! 🚀 It makes layout easier, cleaner, and more convenient for users on any device. It's worth starting experiments with view() in your projects now to be one step ahead of everyone!
And if you want not only to be trendy, but also to confidently develop programming skills, learn with our application Code - programming training in a format that you will definitely like! 🔥