J'ai rédigé un document sur ce sujet : http://www.e-t172.net/index.php/2005/01/20/43-tout-en-rondeurs
J'aurais aimé connaître votre opinion
J'aurais aimé connaître votre opinion
28221 sujets
Salut,
Même réponse que sur le forum du Zéro
Intéressant
A savoir qu'il existe un sacré paquet de techniques différentes : http://css-discuss.incutio.com/?page=RoundedCorners
Je reviens sur certains points :
Utiliser la balise <img> pour des fins esthétiques n'est pas vraiment une hérésie, surtout si c'est (volontairement) pour éviter - comme dans les autres cas - une multitude de <div> imbriqués
Le choix est simple : ajouter plein de conteneurs div, ou deux images ? Quelle méthode est mieux, sémantiquement parlant ? (aucune sans doute, mais dire qu'il est excellent de rajouter des éléments de structure inutiles comme <div> est un peu... exagéré )
Autre chose, par rapport à la Souplesse et possibilités graphiques :
- la méthode desque tu as appelé "positions relatives" ne permet de n'avoir que des coins, alors que d'autres méthodes permettent d'avoir un cadre entier graphique. Je pense que le terme "excellent" pour ce critère est un peu exagéré.
Il y'a beaucoup de choses à prendre en compte, faire des coins arrondis tout simple est plutôt différent de l'approche "habillage graphique complet".
Pour conclure, je crois que tu n'as pas mentionné la meilleure technique, de très loin devant les autres au niveau sémantique, concision du code : l'utilisation des pseudo-classes :before et :after
Explications : http://www.nanoum.net/blog/5_before_et_after.html
Cette méthode cumule tous les avantages puisqu'il n'y a aucune balise ajoutée et qu'elle permet une séparation totale entre le fond et la forme... le seul hic est bien sûr son incompatibilité avec IE qui ne comprend pas ces pseudo-classes
Et là c'est vraiment un gros handicap du navigateur, vu les possibilités énormes offertes par before et after.
Deux autres exemples :
http://www.alsacreations.com/articles/ombre/#deux
http://www.alsacreations.com/articles/ongl...ets/onglets.htm
Même réponse que sur le forum du Zéro
Intéressant
A savoir qu'il existe un sacré paquet de techniques différentes : http://css-discuss.incutio.com/?page=RoundedCorners
Je reviens sur certains points :
a écrit :
Niveau sémantique Médiocre Détournement de la balise <img> à des fins esthétiques.
Niveau sémantique Excellent <div> est une balise neutre : aucun problème.
Utiliser la balise <img> pour des fins esthétiques n'est pas vraiment une hérésie, surtout si c'est (volontairement) pour éviter - comme dans les autres cas - une multitude de <div> imbriqués
Le choix est simple : ajouter plein de conteneurs div, ou deux images ? Quelle méthode est mieux, sémantiquement parlant ? (aucune sans doute, mais dire qu'il est excellent de rajouter des éléments de structure inutiles comme <div> est un peu... exagéré
)Autre chose, par rapport à la Souplesse et possibilités graphiques :
- la méthode desque tu as appelé "positions relatives" ne permet de n'avoir que des coins, alors que d'autres méthodes permettent d'avoir un cadre entier graphique. Je pense que le terme "excellent" pour ce critère est un peu exagéré.
Il y'a beaucoup de choses à prendre en compte, faire des coins arrondis tout simple est plutôt différent de l'approche "habillage graphique complet".
Pour conclure, je crois que tu n'as pas mentionné la meilleure technique, de très loin devant les autres au niveau sémantique, concision du code : l'utilisation des pseudo-classes :before et :after
Explications : http://www.nanoum.net/blog/5_before_et_after.html
Cette méthode cumule tous les avantages puisqu'il n'y a aucune balise ajoutée et qu'elle permet une séparation totale entre le fond et la forme... le seul hic est bien sûr son incompatibilité avec IE qui ne comprend pas ces pseudo-classes
Et là c'est vraiment un gros handicap du navigateur, vu les possibilités énormes offertes par before et after. Deux autres exemples :
http://www.alsacreations.com/articles/ombre/#deux
http://www.alsacreations.com/articles/ongl...ets/onglets.htm
Copier-coller SdZ :
Merci pour vos réponses.
J'ai survolé les pages de ALA : à première vue, cela ne rentre pas dans le cadre du document car ça ne s'applique pas à n'importe quel bloc (si on veut utiliser ces techniques pour arrondir un <div> sans s'occuper de ce qu'il y a dedans, on retombe sur une des techniques déjà énoncées dans mon document).
Je n'ai pas mentionné les pseudo classes before et after pour une bonne raison : elles ne rendent le document extensible que dans un seul sens (hauteur ou largeur). Mon document présente uniquement les techniques extensibles dans les deux sens (dans le cadre d'un design fluide par exemple)
Problème de IE : je devrais le faire disparaître en augmentant légèrement le padding. Je vois ça dès que j'ai le temps.
Merci pour vos réponses.
J'ai survolé les pages de ALA : à première vue, cela ne rentre pas dans le cadre du document car ça ne s'applique pas à n'importe quel bloc (si on veut utiliser ces techniques pour arrondir un <div> sans s'occuper de ce qu'il y a dedans, on retombe sur une des techniques déjà énoncées dans mon document).
Je n'ai pas mentionné les pseudo classes before et after pour une bonne raison : elles ne rendent le document extensible que dans un seul sens (hauteur ou largeur). Mon document présente uniquement les techniques extensibles dans les deux sens (dans le cadre d'un design fluide par exemple)
Problème de IE : je devrais le faire disparaître en augmentant légèrement le padding. Je vois ça dès que j'ai le temps.
/!\ ATTENTION /!\
La méthode des positions relatives pose quelques problèmes avec IE que je n'avais pas vus avant que Raphaël ne me le fasse remarquer.
Plus d'informations : http://www.e-t172.net/articles/round/#histo
La méthode des positions relatives pose quelques problèmes avec IE que je n'avais pas vus avant que Raphaël ne me le fasse remarquer.
Plus d'informations : http://www.e-t172.net/articles/round/#histo