Partagez quelques exemples étonnants de ce que CSS peut faire_Experience Exchange

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 :

Copier le code Le code est le suivant :

/* utilisation de base */
@supports( prop:value) {
/* plus de styles */
}

/* 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.

Copier le code Le code est le suivant :

/* filtre simple */
.myElement {
-webkit-filter : flou(2px);
}

/* 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 :

Copier le code Le code est le suivant :

/*ne rien faire lorsqu'on clique ou est activé* /
.disabled { pointer-events: none; }/* cela ne se déclenchera _pas_ à cause de l'application pointer-events: none */

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 !

Copier le code Le code est le suivant :

/* curseur à l'état ouvert */
. slider {
overflow-y : caché ;
hauteur maximale : 500 px /* hauteur maximale approximative */.

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 :

Copier le code Le code est le suivant :

/* initialiser le compteur */
ol. slides {
compteur-réinitialisation : slideNum;
}

/* 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 :

Copier le code Le code est le suivant :

.ಠ_ಠ {
bordure : 1px uni #f00 ;
fond : rose ;
}

.❤ {
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 !

Copier le code Le code est le suivant :

cercle {
bordure-rayon : 50%;
width: 200px;
height: 200px;
/* la largeur et la hauteur peuvent être n'importe quoi, tant qu'elles sont égales */
}

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.