Qu'est-ce que la dégradation gracieuse en CSS ?
什么是优雅降级？
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.
Différentes techniques pour la dégradation gracieuse
在上面的部分中，我们了解了什么是优雅降级以及为什么开发人员应该确保它。现在，我们将通过示例学习不同的优雅降级技术。
Amélioration progressive
在这种技术中，开发人员需要将代码分解成不同的包，并逐个加载每个包。因此，成功加载网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
在这种方法中，我们检查浏览器是否支持特定的JavaScript功能。如果是，网站允许用户使用该功能来Il s'agit d'une version HTML de la version HTML.样式。
让我们通过下面的示例来理解。
Exemple
在下面的示例中，我们创建了一个div元素并给了它一个'id'为'element'。同时，我们在CSS中定义了'class'为'con tainer'的类，并将一些CSS属性包含在其中。
"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().
Dans la sortie, les utilisateurs peuvent observer qu'il affiche soit le dégradé, soit la couleur d'arrière-plan.
<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.
En JavaScript, nous créons un nouvel élément div et vérifions si son style contient la propriété 'animation'. Si oui, l'animation s'appliquera automatiquement. Sinon, nous devons ajouter une classe « no_animation » à chaque élément div en utilisant JavaScript, qui définit « animation : none ».
<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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Ajout d'ombres de boîte aux blocs et éléments WordPress
Mar 09, 2025 pm 12:53 PM
Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.
Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques
Mar 08, 2025 am 09:45 AM
Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans
Créez un formulaire de contact JavaScript avec le cadre Smart Forms
Mar 07, 2025 am 11:33 AM
Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.
Créer un éditeur de texte en ligne avec l'attribut satisfaistable
Mar 02, 2025 am 09:03 AM
La construction d'un éditeur de texte en ligne n'est pas triviale. Le processus commence par rendre l'élément cible modifiable, gérer des exceptions potentielles de syntaxerror en cours de route. Créer votre éditeur Pour créer cet éditeur, vous devrez modifier dynamiquement le contenu
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Téléchargement de fichiers avec Multer dans Node.js et Express
Mar 02, 2025 am 09:15 AM
Ce tutoriel vous guide dans la création d'un système de téléchargement de fichiers à l'aide de Node.js, Express et Multer. Nous couvrirons les téléchargements de fichiers uniques et multiples, et nous ferons même de la démonstration de stockage d'images dans une base de données MongoDB pour une récupération ultérieure. Tout d'abord, configurez votre projec
Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
Mar 04, 2025 am 10:22 AM
Cet article explore les meilleurs scripts de générateur de formulaires PHP disponibles sur le marché Envato, en comparant leurs fonctionnalités, leur flexibilité et leurs design. Avant de plonger dans des options spécifiques, comprenons ce qu'est un constructeur de formulaires PHP et pourquoi vous en utiliseriez un. Un formulaire PHP
