Ceci contre cela

Online Coding Courses for Kids

Voici un joli site de Phuoc Nguyen, que j’ai déjà noté tout un talent pour les sites intelligents. Ceci contre cela oppose différents concepts liés les uns aux autres en tant que thème d’un article. Par exemple, CSS a display: none;, opacity: 0;, et visibility: hidden; et ils tous, en surface, «cachent» quelque chose, mais ils sont tous très différents d’une manière qu’il est important de comprendre. C’est l’un des articles. Le contenu est open source aussi, si vous avez envie d’ajouter quelque chose.

Cela me rappelle ce stylo d’Adam Thompson:

CodePen Embed Fallback

Tout ce que Pen fait, c’est définir les couleurs de certaines boîtes à pilules, mais il le fait littéralement de sept manières différentes – dans ce cas, aucune d’entre elles n’est «meilleure» qu’une autre:

  1. Échangez une classe
  2. Permuter une classe, les couleurs définies dans Sass @mixin
  3. Swap une classe, classe échange la valeur d’une propriété personnalisée
  4. Permuter la valeur d’une propriété personnalisée
  5. Échange la valeur d’une propriété personnalisée, les couleurs stockées dans JavaScript uniquement
  6. Définir des styles en ligne
  7. Manipuler le CSSOM
  8. Définir un attribut de couleur non standard

Ils font tous finalement la même chose. Et il pourrait y en avoir beaucoup plus: changer de classe sur un parent supérieur. Utilisation data-* les attributs. Utilisez une sorte de filtre de changement de teinte. Utilisez les mathématiques des couleurs en JavaScript pour manipuler les teintes. Utilisez le hack de case à cocher pour changer de style. Il y en a sûrement des dizaines d’autres.

Lien direct vers l’article – Permalien


La poste Ceci contre cela est apparu en premier le Astuces CSS.

Vous pouvez soutenir CSS-Tricks en étant un Supporteur MVP.

Close Menu