Introduction
La mise en page adaptative a longtemps nécessité des requêtes de média complexes, calc() et des unités dynamiques vw et vh.
Mais maintenant, il y a une nouvelle fonctionnalité qui peut considérablement simplifier l'ensemble du processus — view().
Je vais vous dire comment cela fonctionne et pourquoi vous devriez déjà le maîtriser ! 🚀
Qu'est-ce que view() et comment ça marche ?
view() — est une fonction qui calcule dynamiquement la taille des éléments en fonction de la fenêtre du navigateur.
Syntaxe :
view(clamp, min_value, ideal_value, max_value)min_value — taille minimale
ideal_value — taille idéale (relative à la fenêtre)
max_value — taille maximale
💡 Résultat : un design fluide qui s'adapte à différentes tailles d'écran sans à-coups visibles ! 📱🖱️🖥️
Exemple pratique : Boîte adaptative
🌟 Imaginez que vous écrivez du code où le conteneur redimensionne automatiquement sans une seule requête média !
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>Pourquoi view() est une révolution ?
✅ Simplifie le CSS : plus besoin de calc() et de media queries complexes
✅ Crée une mise en page plus fluide
✅ Améliore l'expérience utilisateur : pas de problèmes avec différentes tailles d'écran
✅ Rend le code plus lisible et maintenable
Compatibilité avec les navigateurs
✅ Fonctionne dans les dernières versions de Chromium (y compris Chrome, Edge, Opera)
⚠️ Dans Firefox, prise en charge partielle (activée via about:config)
❌ Safari et les anciens navigateurs ne sont pas encore pris en charge
Comment vérifier la compatibilité ?
Avant d'utiliser view() en production, assurez-vous de vérifier la prise en charge :
✅ Sur le site Can I Use
✅ Ou via la vérification CSS :
@supports (width: view(clamp, 100px, 50vw, 500px)) {
.box {
width: view(clamp, 100px, 50vw, 500px);
}
}Si le support n'est pas disponible, ajoutez une option de remplacement via clamp() ou des tailles fixes.
Conclusion
Fonction view() est l'avenir du design adaptatif ! 🚀 Elle rend la mise en page plus facile, plus propre et plus pratique pour les utilisateurs sur tous les appareils. Cela vaut la peine de commencer à expérimenter avec view() dans vos projets dès maintenant pour avoir une longueur d'avance sur tout le monde !
Et si vous voulez non seulement être à la mode, mais aussi développer vos compétences en programmation, apprenez avec notre application Code — une formation à la programmation dans un format qui vous plaira à coup sûr ! 🔥