Si vous êtes un développeur Web expérimenté, vous avez peut-être déjà entendu le mot de dégradation gracieuse. Avant d’en apprendre davantage sur la dégradation gracieuse du développement Web, décomposons le mot. Le sens de gracieux est élégant ou beau, et la dégradation est la rupture ou la chute. Ainsi, la signification générale du mot dégradation gracieuse est qu’il rend l’élément élégant lorsqu’il se brise.
Les développeurs utilisent le terme de dégradation gracieuse dans le développement Web. Il fournit diverses techniques pour que tout site Web ou application puisse fonctionner correctement dans des navigateurs moins performants.
Par exemple, les navigateurs modernes prennent en charge les fonctionnalités avancées CSS et JavaScript, mais ne sont pas pris en charge par les anciens navigateurs ou les anciennes versions des navigateurs. Dans de tels cas, les développeurs doivent s'assurer que les utilisateurs peuvent accéder au site Web dans des navigateurs plus anciens avec une bonne expérience.
在上面的部分中，我们了解了什么是优雅降级以及为什么开发人员应该确保它。现在，我们将通过示例学习不同的优雅降级技术。
在这种技术中，开发人员需要将代码分解成不同的包，并逐个加载每个包。因此，成功加载网HTML, et CSS.
Enfin, chargez les fonctionnalités CSS avancées, et si le navigateur prend en charge cette fonctionnalité, elle sera appliquée à l'élément HTML. Dans le cas contraire, le contenu HTML de la page Web reste accessible. Ainsi, même si un navigateur moderne ne prend pas en charge certaines fonctionnalités, il peut toujours restituer correctement le contenu HTML.Détection de fonctionnalités
让我们通过下面的示例来理解。
Exemple
"JavaScript" "Conteneur"类名连接到类名字符串中。
所以，我们在这里检测了div元素是否支持classList类，根据这一点，我们使用了不同的技术来向div元素添加类名。
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background-color: red;
border: 3px solid green;
border-radius: 12px;
}
#output {
font-size: 20px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> feature detection technique </i> for the graceful degradation in the web development</h3>
<div id = "element"> </div>
<div id = "output"> </div>
<script>
var myDiv = document.getElementById('element');
let output = document.getElementById('output');
if ('classList' in myDiv) {
myDiv.classList.add('container');
output.innerHTML = 'classList is supported';
} else {
myDiv.className += ' container';
output.innerHTML = 'classList is not supported';
}
</script>
</body>
</html>
添加备选选项
Les applications CSS Les applications CSS et HTML ainsi que les applications Web.示例（为CSS渐变添加回退选项）
Dans l'exemple ci-dessous, nous avons créé l'élément card div et utilisé la fonction CSS line-gradient() pour définir le dégradé d'arrière-plan. De plus, nous avons écrit le CSS de secours si le navigateur ne prend pas en charge la fonction CSS Linear-gradient().
<html>
<head>
<style>
.card {
width: 400px;
height: auto;
font-size: 2rem;
background-color: orange;
background-image: linear-gradient(to right, #14f71f, #d46a06);
color: white;
text-align: center;
}
/* Fallback styles */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.card {
background-image: none;
background-color: orange;
}
}
</style>
</head>
<body>
<h3>Using the <i> fallback options for the gradient </i> for the graceful degradation in the web development</h3>
<div class = "card"> This is a card element </div>
</body>
</html>
Dans l'exemple ci-dessous, nous avons ajouté l'option de repli de l'animation CSS. Ici, nous avons créé trois éléments div et ajouté l'animation « rebond » dans tous les éléments. L'animation de « rebond » déplace le div vers le haut de sa position et le ramène à sa position initiale.
<html>
<head>
<style>
.square{
background-color: blue;
color: white;
width: 100px;
font-size: 1.5rem;
padding: 20px;
margin-bottom: 20px;
position: relative;
animation: bounce 2s ease-in-out infinite;
animation-direction: alternate;
animation-delay: 0.1s;
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes bounce {
0% {transform: translateY(0);}
100% {transform: translateY(-30px);}
}
/* Fallback styles */
.no-animation .square{
top: 0;
animation: none;
}
</style>
</head>
<body>
<h3>Using the <i> fallback options for the animation </i> for the graceful degradation in the web development</h3>
<div class = "square"> div1 </div>
<div class = "square"> div2 </div>
<div class = "square"> div3 </div>
<script>
window.onload = function () {
var squares = document.querySelectorAll('.square');
if (!('animation' in document.createElement('div').style)) {
for (var i = 0; i < squares.length; i++) {
squares[i].classList.add('no-animation');
}
}
};
</script>
</body>
</html>
优雅降级的最佳技术是设置备选方案。开发人员应仅使用标准的HTML et CSS属性，以确保在旧版浏览器中实现优雅降级。
Cependant, la maintenance d'une dégradation progressive est coûteuse, car les développeurs doivent ajouter des options de secours pour plusieurs fonctionnalités. Néanmoins, il offre une expérience Web fluide aux visiteurs visitant depuis n'importe quel navigateur Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le téléphone ne parvient pas à se connecter au casque Bluetooth
La visionneuse d'images Windows ne peut pas afficher une mémoire insuffisante
Comment supprimer des éléments dans jquery
solution d'exception d'instanciationexception
attributusage
Solution d'erreur 3004 inconnue
Comment formater le disque dur sous Linux
Explication détaillée de l'opérateur de déplacement Java
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
