Introducción
Durante mucho tiempo, el diseño adaptativo requería complejas consultas de medios, calc() y unidades dinámicas vw y vh.
Pero ahora hay una nueva función que puede simplificar significativamente todo el proceso: view().
¡Te contaré cómo funciona y por qué ya deberías dominarlo! 🚀
¿Qué es view() y cómo funciona?
view() es una función que calcula dinámicamente el tamaño de los elementos en función de la ventana del navegador.
Sintaxis:
view(clamp, min_value, ideal_value, max_value)min_value — tamaño mínimo
ideal_value - tamaño ideal (relativo a la ventana gráfica)
max_value — tamaño máximo
💡 Resultado: ¡un diseño fluido que se adapta a diferentes tamaños de pantalla sin saltos notables! 📱🖱️🖥️
Ejemplo práctico: caja adaptable
🌟 ¡Imagina que estás escribiendo un código en el que el contenedor cambia de tamaño automáticamente sin una sola consulta de medios!
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>¿Por qué view() es una revolución?
✅ Simplifica el CSS: ya no necesitas calc() y media queries complejas
✅ Crea un diseño más fluido
✅ Mejora la UX: no hay problemas con los diferentes tamaños de pantalla
✅ Hace que el código sea más legible y fácil de mantener
Compatibilidad con navegadores
✅ Funciona en las últimas versiones de Chromium (incluidos Chrome, Edge, Opera)
⚠️ En Firefox, soporte parcial (se activa a través de about:config)
❌ Safari y los navegadores antiguos aún no son compatibles
¿Cómo comprobar la compatibilidad?
Antes de usar view() en producción, asegúrate de verificar la compatibilidad:
✅ En el sitio web Can I Use
✅ O a través de la verificación CSS:
@supports (width: view(clamp, 100px, 50vw, 500px)) {
.box {
width: view(clamp, 100px, 50vw, 500px);
}
}Si no hay soporte, añada una opción de repuesto a través de clamp() o tamaños fijos.
Conclusión
Función view() ¡Es el futuro del diseño adaptativo! 🚀 Hace que el diseño sea más fácil, más limpio y más cómodo para los usuarios en cualquier dispositivo. ¡Ya vale la pena comenzar a experimentar con view() en tus proyectos para estar un paso por delante de todos!
Y si no solo quieres estar a la moda, sino también desarrollar con confianza tus habilidades de programación, aprende con nuestra aplicación Kodik — ¡aprende a programar en un formato que te encantará! 🔥