Quand j'ai écrit l'article "5 façons dont JavaScript et CSS interagissent que vous ne connaissez peut-être pas", les gens ont été surpris de voir à quel point JavaScript et CSS se chevauchent. Aujourd'hui, je vais souligner 7 choses que vous pouvez faire avec CSS, sans JavaScript ni images.
CSS@supports
Tout bon développeur front-end doit effectuer des tests de fonctionnalités lorsqu'il utilise des fonctionnalités qui peuvent ne pas être disponibles dans certains navigateurs. Les tests de fonctionnalités ont toujours été effectués en JavaScript, et de nombreuses personnes utilisent Modernizr, un excellent utilitaire composé de nombreux cas bien testés, pour effectuer des tests de fonctionnalités. Une nouvelle API : @supports, en tout cas, est apparue pour les développeurs, qui permet de faire des tests de fonctionnalités avec CSS. Voici quelques exemples simples du fonctionnement des @supports :
/* utilisation réelle */
@supports (display : flex) {
div { display: flex }
>
/* tester également les préfixes */
@supports (affichage : -webkit-flex) ou
(affichage : -moz-flex) ou
(affichage : flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
Cette nouvelle fonctionnalité @supports a également une version JavaScript correspondante, mais elle a expiré. Nous avons hâte de l'utiliser bientôt !
Filtre CSS
Écrivez un service pour changer la tonalité de couleur d'une image, et vous pourrez ensuite le vendre à Facebook pour des milliards de dollars. Bien sûr, c'est une évidence, mais écrire des filtres d'image n'est pas une science. Un petit programme que j'ai écrit au cours de ma première semaine chez Mozilla (qui a remporté un prix, hein, je viens de le dire) utilisait des mathématiques basées sur JS pour créer des filtres d'image à l'aide de Canvas, mais nous pouvons désormais créer des images à l'aide de CSS Filtered.
/* filtre avancé */
.myElement {
-webkit-filter : flou (2px) niveaux de gris (.5) opacité (0,8) teinte-rotation (120deg);
}
Ce type de filtre modifie simplement l'apparence originale de l'image. Ledit filtre n'est pas utilisé lors de l'enregistrement ou de l'exportation de l'image, mais il est très utile lorsque vous avez besoin d'embellir la photo ou de traiter l'affiche.
Événements de pointeur et clics de brique
La propriété CSS Pointer Events fournit un moyen de désactiver efficacement un élément. De ce fait, via JavaScript, cliquer sur un lien ne déclenchera pas d'événement de clic :
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});
Dans l'exemple ci-dessus, l'événement click ne se déclenchera pas en raison de la valeur CSS pointer-events. J'ai trouvé cela d'une grande aide, vous n'avez pas besoin de vérifier le nom de classe ou les propriétés partout pour vous assurer qu'un élément est désactivé.
Réduire et développer le menu
CSS nous permet de créer des effets de transition et des animations, mais nous avons souvent besoin de bibliothèques JavaScript pour nous aider à modifier certaines choses et à contrôler les animations. Une animation très populaire est l’effet de menu pliant et agrandi. Beaucoup de gens ne savent pas qu’il peut être réalisé en utilisant uniquement CSS !
propriété de transition : tout ;
durée de transition : 0,5 s ;
fonction de synchronisation de transition : cubique-bézier (0, 1, 0,5, 1);
>
/* fermez-le avec la classe "closed" */
.slider.closed {
max-height: 0;
}
Une utilisation intelligente de Max-height peut permettre aux éléments de s'effondrer et de s'étendre selon l'effet souhaité.
Compteur CSS
Le terme « compteur » nous fait souvent rire de ce qu'il signifie sur le Web, mais les compteurs CSS sont une autre chose qui nous fait rire encore plus. Les compteurs CSS permettent aux développeurs d'incrémenter un compteur sur des éléments spécifiés en utilisant :before et :after :
/* incrémente le compteur */
ol.slides > li {
counter-increment: slideNum;
}
/* afficher la valeur du compteur */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}
Vous voyez souvent des compteurs CSS utilisés dans les effets de diaporama et les listes comme le contenu d'un formulaire.
Nom du style CSS Unicode
Il existe de nombreux documents sur les meilleures pratiques CSS, et ils commencent tous par la façon de nommer les styles CSS. Vous ne verrez jamais de document indiquant de nommer vos styles avec des symboles Unicode :
.❤ {
arrière-plan : vert clair ;
bordure : 1px vert uni ;
}
Veuillez ne pas utiliser ces symboles. Sauf si vous le pouvez !
Cercle CSS
Le triangle CSS est une tâche technique, et il en va de même pour le cercle CSS. En abusant du CSS border-radius, vous pouvez créer des cercles parfaits !
Vous pouvez ajouter des dégradés à vos cercles, et vous pouvez même utiliser des animations CSS pour faire bouger vos cercles ! CSS est sur le point de disposer d'API plus unifiées pour ces formes, mais pour l'instant, vous pouvez créer des cercles de cette façon.
Voilà, 7 choses que vous pouvez faire avec CSS qui vous surprendront, certaines d'entre elles sont très utiles, et d'autres dont vous n'aurez pas besoin au travail. S'il vous plaît dites-moi s'il me manque d'excellentes méthodes CSS au travail que vous utilisez régulièrement.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
