Le secret pour maîtriser les CSS

Le secret pour maîtriser les CSS (le 24 juin 2005)

En fait, j'avoue : j'ai un secret pour utiliser correctement les CSS...

C'est une astuce un peu ancienne, mais qui marche toujours bien, et qui permet de se dépatouiller dans 95% des cas problématiques.

Etes-vous prêts à connaître cette technique ancestrale qui me permet de sortir de beaucoup d'impasses ? Si ce n'est pas le cas, ne lisez pas la suite, si c'est bon, retenez votre souffle, je vous livre ce secret.

Tout tient en une formule, sa simplicité apparente ne doit pas pour autant vous faire sous-estimer sa puissance, elle m'aide souvent dans énormément de cas de figures, que ce soit pour faire une implémentation CSS correcte, ou pour corriger des bugs, surtout sous un navigateur infâme qui respecte mal les standards dont je ne citerai pas le nom.

Voici le secret :
border:1px solid #f00; (à appliquer sans limite à divers blocs)

Ne me dites surtout pas "ce n'est qu'une simple bordure rouge", il ne faut surtout pas sous-estimer la puissance de ce concept.

Et oui, ça permet beaucoup de choses :

  • de voir comment s'articulent vos positionnements CSS,
  • de mieux comprendre pourquoi tel bloc s'affiche ainsi,
  • de voir comment le navigateur affiche réellement le bloc,
  • et tout simplement de faire des CSS correctes !

Bref, une méthode élégante, légère et fiable !

Remarquez toute la puissance du concept : concentré en 23 caractères, c'est pas cher payé pour une méthode universelle de debugging, je l'emploie très souvent.

Ne me remerciez pas, c'est bien naturel !

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=654

9 commentaires

Posté par Nico le 24/06/2005, à 11:11:15
Je vois que l'on utilise la même technique (clin d’oeil)

J'alterne également cette technique avec la fameuse technique un peu plus bourrin du :
background-color: red;
(22 caractères (clin d’oeil)
Posté par Camille Boulière le 24/06/2005, à 11:26:29
Perso j'utilise aussi :

*:hover { border : 1px solid red; }
Posté par Fabrice Bonny le 24/06/2005, à 12:00:56
Remplacer #f00 par red -> réduction de 4,35%... (Sourire qui tue)
Posté par Bastien le 24/06/2005, à 12:32:48
Le mieux c'est quand même la developer bar Firefox qui te permet d'afficher tous les cadres de tous les blocs en un seul clic (sourire)

Mais j'avoue utilisé ton astuce mais en noir pour moi ^^
Posté par Denis le 24/06/2005, à 13:55:35
Ouaip, pour moi aussi c'est en noir que vont les bordures...
Posté par Romuald le 25/06/2005, à 0:16:20
Je préfère utiliser background.
Avec MSIE c'est quand même bien plus pratique car avec un width défini, border ça va chier dans la colle.
Si seulement outline..
Posté par Nico le 25/06/2005, à 10:49:14
Tous> héhéhé, on va bientôt pouvoir faire : "les 10 secrets de l'intégrateur CSS !"
Posté par Thomas le 03/12/2010 à 17:42:55
On utilise la même technique o/

Pour commencer mon investigation, j'essaye souvent un petit "zoom:1;position:relative;"
Ça doit marcher une fois sur 5.

Que ça marche ou que ça marche pas, je réfléchi après d'habitude :P

Bonne soirée,
Thomas.
Posté par Nico le 05/12/2010 à 21:14:11
Thomas : preuve que c'est une technique universelle ! (sourire)

Genre quand on entend "put.. y a un truc qui disparait sous IE", le réflexe : "bug de Haslayout" ! En général, on tombe juste d'ailleurs.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.