CSS

Ce petit hack CSS qui va vous faciliter la vie

Prist Team
[object Object]
annotation

Je me baladais comme à l’accoutumer sur le /r/webdev quand je suis tombé sur un petit post Reddit "My favorite CSS Hack". Plutôt friand à l'idée d'un hack CSS mais frileux à la vue de ce genre de titre, ma curiosité m'a fait craquée et je suis allé voir ce qu'il en était exactement.
Résultat un hack css de qualité. Clair, léger, compréhensible, transportable sur tous les projets.

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

Résultat de ces quelques lignes ? Je suis certain que vous avez une petite idée. Ces quelques lignes vont vous permettre de mettre en lumière les éléments imbriqués de votre site internet.

Voici par exemple le site du Time, difficile de distinguer les différents éléments et la manière dont ils sont imbriqués.

Ainsi tous les éléments de la page apparaissent en surbrillance, avec margin, padding, et surtout on peut voir si des éléments sont superposés les uns aux autres.

© 2020 - Powered by Gatsby & Prismic