Mise à jour du tutoriel sur les coins arrondis

Merci je vais me pencher un peu sur les comportements .htc.

J'ai justement tenté d'utiliser ça dernièrement et je n'avais pas réussi à le faire fonctionner.

Il faut mettre le border-radius.htc où bon nous semble et faire un lien dans le css après les autres attributs, c'est tout ?
Ca fonctionne pour IE6+ ?

@Skoua : oui et oui :)
il faut que la propriété border-radius: Xpx soit présente dans le bloc de règles, juste avant l'appel au .htc.

En passant, éviter de faire appel à border-radius.htc à partir d'un serveur différent, ça provoque un avertissement de sécurité sur IE.
En clair : hébergez vos .htc chez vous :)

@Raphael : J'ai fais tout ça mais ça n'a rien donné, je vais re-tester, peut-être que mon fichier .htc était mal codé ou je ne sais quoi.

Merci pour cet edit en tout cas, très utile (si j'arrive à le faire fonctionner). :)

HTC et JS sont 2 belles solutions qui évitent d'utiliser d'autres méthodes pleines de <div>.
Mais sur des pages autres qu'un simple portfolio, il faut faire attention aux perfs, en particulier sur notre browser préféré qu'est IE6

une chtite note en anglais d'un gourou de la perf web, à propos de ses tests sur HTC : http://bit.ly/7RAtbc
en gros, une instance est créée à chaque fois que le script doit être exécuté, ce qui doit tuer le proc et encombrer la RAM, pendant que le browser freeze

pour JS, des scripts comme roundies présentent 3 inconvénients :
- il faut attendre l'event DOMReady avant de l'exécuter, ce qui veut dire qu'il y a un moment plus ou moins long selon la page pendant lequel les coins sont carrés
- une fois qu'il se lance, il modifie le DOM, donc petit coup de freeze plus ou moins important selon le PC et selon la complexité de la page
- lorsqu'on importe du HTML en AJAX ou qu'on crée dynamiquement du markup supplémentaire, il faut relancer un coup de JS pour remodifer le code à peine créé

bref, pour des sites de prod un petit peu complexe, si on ne veut pas tuer les perfs sous les IE, il vaudra surement mieux utiliser une surcharge de markup non ?

@jpvincent : merci à toi, ton retour est effectivement pertinent et à méditer...

Avec la solution .htc, de mon côté la propriété border-radius ne s'applique pas sur les éléments en hover ou en focus, et le background du bloc arrondi est automatiquement répété. Deux problèmes assez gênant qui n'apparaissaient pas de mon côté avec l'utilisation de roundies.js

Il y a des solution à ces problèmes?

@Vaxilart : en ce qui me concerne, je n'arrive simplement pas à appliquer Roundies.js sur des éléments avec des images d'arrière-plan. Cela fonctionne chez toi ?!
Par contre, pour .htc et hover, pas de souci sur IE dans mes tests : http://www.alsacreations.com/xmedia/tuto/exem...

Pour Roundies.js, il ne fonctionne pas avec une image d'arrière plan en effet.

Cela dit, il doit bien y avoir une solution pour que le le HTC ne répète pas l'image d'arrière plan? (Pour les sites avec une largeur fixe ça ne pose pas problème)

Pour ma part, je crois que je vais simplement agrandir mon image d'arrière plan afin qu'elle couvre l'entier de l'espace quand le site est à son déploiement maximum. (Ou alors, faire des bords arrondis directement sur l'image...)

Arf, j'oubliais le hover!

Dans mon cas, c'est le hover qui fait apparaitre une boite arrondie avec border-radius et non seulement une modification de couleur pour le texte en hover avec la boite arrondie déjà en place. (Je sais pas si c'est suffisamment clair là...)

Perso, cela ne fonctionne pas chez moi si j'inclus les coins arrondis sur mon serveur local dans un fichier php. Cela supprimer tout bonnement les bordures et la couleur de fond du bloc.
Pour info je lis un fichier php au travers d 'internet explorer sur windows 7 au travers de virtualbox car mes fichiers php sont en local sur mon mac.

Bonjour,
Visiblement le comportement .htc ne fonctionne pas dans le cas où l'on ne veut faire par exemple que deux arrondis sur une boîte…

-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
behavior: url(js/border-radius.htc);

Le code ci-dessus ne fonctionnera pas, alors que le suivant fonctionne très bien:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(js/border-radius.htc);

… Ou alors j'ai (encore!) raté un truc?

@speedlab : oui j'en ai l'impression aussi.

La solution du fichier HTC a en effet cet inconvénient qu'il faut prendre en compte, ce qui ne le rend utilisable que dans le cas où tous les angles d'une boîte doivent être arrondis avec le même rayon.
Je me demande si ce HTC pourrait être "amélioré" pour pouvoir arrondir les angles de la même façon qu'on le ferait en CSS via les différentes valeurs de border-radius…

Sympa en effet.
Je n'ai jamais testé la méthode roundies, mais après avoir lu quelques informations dessus ça m'avait un peu refroidit.

A la vue des bonnes nouvelles sur ce fichier .htc j'ai tenté un test en local sur un serveur PHP et pour un template Joomla!, il semblerait que l'aperçu sous IE8 ne fonctionne pas à partir de cette installation.
Peut-être ai-je fait erreur, mais le code CSS me semble tellement simple à utiliser...

Quelqu'un aurait fait un test semblable ?

Merci pour cette info Raphaël ;)

@Riku Asakura :
J'ai testé également et le résultat n'est pas concluant.

En résumé :
- ça ne fonctionne pas avec des images d'arrière-plan.
- le htc est inutile si tous les angles ne sont pas chanfreinés de la même manière.
- et le htc ne fonctionne pas sous ie8.

On est donc bien loin de pouvoir s'en servir...

@Corinne S. : L'exemple réalisé avec .htc (http://www.alsacreations.com/xmedia/tuto/exemples/arrondis/htc.html) a été testé sans problème sur IE6, IE7 et IE8, avec arrondis *et* image d'arrière-plan.
Il faudrait peut-être voir pourquoi dans ton cas précis cela ne fonctionne pas avant cette conclusion péremptoire, non ? ;)

@Raphael et Corinne : exact, le HTC fonctionne sur IE8. J'ai essayé et n'ai vu aucun problème à l'utilisation, la seule limitation étant que ça ne fonctionne QUE si les 4 angles sont courbés selon le même rayon.

Merci pour ces retours, j'en ai profité pour ajouter ces restrictions dans l'article.

Il y a un résultat bizarre quand on utilise des shadows (pour IE, voir code ci-dessous) sur la div, cela transmet les ombrage au élément fils à la div

Code:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;

Bon, après d'autres tests, il y a effectivement d'autres cas qui ne fonctionnent pas sur IE8 avec .htc, même des pages statiques sans particularités.
Il y a un fil de discussion des problèmes rencontrés et résolus à cette adresse :
http://code.google.com/p/curved-corner/issues...
Il faudrait prendre le temps de décortiquer tout ça.

Si j'ai bien compris ce que j'ai survolé, il se pourrait que cela provoque des conflits avec d'autres scripts JS (jquery, prototype, ?)

@Raphael : Pas cool du tout. La solution .htc aurait-elle plus d'inconvénients que d'avantages ?
Je vais me rabattre sur la solution des Roundies, pour IE, en ce cas.

Je n'arrivais pas à faire fonctionner le htc chez moi, je suis donc passé à Roundies et ça fonctionne parfaitement.
C'est peut-être pas aussi "safe" que le htc mais bon ça fonctionne partout tant que js est activé.

@Skoua : .htc est également un fichier qui contient du javascript ;)

Bonjour,

Il ya quand même un problème dans l'utilisation du htc sur une div de fond. J'ai laissé un message que je ne réédite pas sur le forum(voir DIV DE FOND PASSE SOUS LA PRECEDENTE)Voici le lien ou le bug est visible. La div coins arrondis verte devrait rester visible sur la précédente (grise).
A part ça,...ca fonctionne....

http://www.lhomme-madjora.com/coins/index.htm...

Je me suis dit qu'on pourrait faire des ronds avec la propriété css3 border-radius, mais je ne comprends pas la relation entre la mesure de taille (width et height) et l'angle indiqué par border-radius… Quelqu'un saurait à quoi correspond la mesure border-radius?

Le code css ci-dessous n'a été testé qu'avec Safari 4, il est appelé avec <div id="test"></div>:
#test {
width: 80px;
height: 80px;
border-radius: 240px;
-moz-border-radius: 240px;
-webkit-border-radius: 240px;
background-color: red;
border: solid 5px black;
}

Bonsoir,
j'arrive peut être comme un cheveux sur la soupe, mais pourquoi la technique uniquement en CCS n'est-elle pas évoquée/citée/retenue dans cette discussion ?
Ne serait-ce que cette technique (http://www.cssplay.co.uk/boxes/snazzy2.html) qui est compatible tout navigateur il me semble.
Non ?
Aurais-je râté quelque chose ?
A vous lire

@stonetatara : j'ai lu un peu en travers, mais avec la méthode que tu cites, il n'est pas possible de mettre des images en background, non?

@speedlab : OK, donc ta réponse confirme que je n'avais pas compris la problèmatique du sujet : à savoir l'intégration d'une image en background dans un block arrondi.J'étais complètement HS, dsl...
Je n'ai jamais été confronté à ce genre de problèmatique, je vais donc creuser davantage.

Chez moi la solution htc ne fonctionne pas sous ie8 (j'ai pas essayé les autres version) ....l'erreur est la suivante: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) sur une page xhtml valide !

chez moi htc ne fonctionne pas et fait même disparaître le fond (couleur unique pourtant) sur IE8 et IE7, roundies fonctionne mais fait passer un sous-menu déroulant sous la partie qui utilise le script (une partie de la sidebar)... pas glop donc.

Bonjour,
Très pratique le menu, grâce à la communauté alsa-créations j'ai pu faire en sorte de mettre en plus une couleur sur l'onglet sur lequel on se trouve pour bien marquer la page visitée.

1. Rajouter dans la partie HTML class="allume":
<li><a href="*" class="allume">onglet 1</a></li> pour la page correspondant à l'onglet 1, et ainsi de suite pour chaque page sélectionné par les onglets.

2. Rajouter dans la CSS :
#menu li a:hover, #menu li a:focus,#menu li a.allume {
background: #ffffff;
color: #1F497D;
}

Dom

@Vaxilart :
Bonjour, j'ai remarqué le même problème pour le cas d'une hover qui fait 1 display block. Et je n'arrive pas à faire fonctionner non plus roundies dans ce même cas...
Est-ce que quelqu'un peut confirmer que c'est impossible ou bien y a -t-il encore une petite astuce à ajouter ?

J'essaye de faire fonctionner le border-radius.htc sur Wordpress et pas moyen :-(
J'ai l'impression que c'est un problème de chemin vers le fichier htc. J'ai essayé de le mettre dans mon dossier de thème ou à la racine et rien n'y fait.
Quelqu'un aurait-il essayé sur un site Wordpress ?

Bon, la seule solution que j'ai trouvée c'est de mettre le style dans mon header :

#sidebar{
behavior: url('&lt;?php bloginfo("template_url"); ?&gt;/border-radius.htc');
}

J'aurai préféré plus propre...

Arf sous IE8 mon fond de couleur disparait

Tout ça pour des coins arrondis… c'est politiquement correct mais ça freeze l'entendement. :-)

Hello à tous j'avais le problème sur IE8 et 7 du fond qui disparait et aucune bordure arrondies. Une solution existe il suffit du placer la ligne suivante : position: relative;
z-index 0; sur l'élément supérieur à celui qui doit recevoir la bordure et ça marche.

@Aulren
Merci merci merci merci !!!
Une bonne dizaine de jours déjà que je cherche une solution pour IE (toutes versions).
Le position: relative; z-index: 0; sur l'élément père fonctionne à merveille.
J'ai maintenant de magnifiques coins arrondis.
Yessssss !! ;-D

Bonjour,

roundies.js fonctionne bien, mais avec une div position: fixed sur ie mes border ne sont pas arrondies.

Avez-vous une idée ?

J'ai testé la solution de @Aulren ci-dessus mais rien y fait.

Merci d'avance.

Bonjour à tous,

Je suis sous Mac et pour tester les sites que je fais sous IE, j'utilise ce site : http://ipinfo.info/netrenderer/index.php

J'ai donc utilisé le .htc : j'ai des coins arrondis mais mon site est complètement décalé. Et ça fait le même effet sur votre page de test (http://www.alsacreations.com/xmedia/tuto/exemples/arrondis/htc.html) lorsque je mets l'URL dans le site de test. Avez-vous une idée du problème ?