Vous vouliez savoir comment faire pour créer des bordures arrondies qui soient de surcroit compatibles avec tous les navigateurs ? Et bien c'est assez simple, surtout que pour que vous puissiez gagner du temps, Roundedcornr se propose de vous aider, et après avoir renseigné quelques couleurs et envies, vous obtiendrez gratuitement et directement le précieux code, ce sésame tant convoité. En fait, plus que de simples bordures arrondies, vous pourrez aussi jouer, si vous le voulez, sur des couleurs dégradées, histoire d'obtenir un cadre un peu mieux fini. Une autre option vous propose aussi de créer pour vous, les images des coins avec les dégradés et couleurs de vos choix. il ne vous retsera plus qu'à les ajouter ensuite vous-même dans vos blocs de textes. Non, franchement, Roundedcornr.com est bien sympa, bien fait, et peut vraiment s'avérer utile, surtout grâce au temps qu'il fait gagner.

Oui, je vous vois venir. Quelle méthode il utilise ? Bien tout simplement celle qui propose de placer une image par coin, et une éventuelle image pour l'intérieur du cadre. Comme je disais plus haut, si cette méthode garantie la compatibilité avec tous les navigateurs, elle n'en reste pas moins plutôt lourde, notamment dans la maintenance du code à long terme. En effet, si côté CSS, quelques lignes suffisent, côté HTML, ce n'est pas la même chose. On peut même dire qu'elle souffre d'une "divite" aigüe. Il vous faudra ainsi gérer au moins quatre DIVs - à ouvrir et fermer - pour un simple bloc décoré. Si on multiplie cette méthode pour une petite dizaine de blocs, vous imaginez un peu le souk. Alors, c'est vrai que pour éviter la répétition d'un code similaire, on peut utiliser des INCLUDE en PHP, mais je ne suis pas super excité avec cette idée.

Voici l'exemple du code HTML avec nos DIVs copiées depuis Roundedcornr

<div class="roundedcornr_box_636724">
   <div class="roundedcornr_top_636724"><div></div></div>
      <div class="roundedcornr_content_636724">
         Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.
      </div>
   <div class="roundedcornr_bottom_636724"><div></div></div>
</div>

Dans ce cas, quelle solution privilégier ? Pour ma part, c'est difficile à dire, parce qu'il y en a plusieurs mais à part la précédente aucune n'est réellement compatible avec tous les navigateurs, notamment les plus anciens. De plus elle est entièrement valide. Une autre solution consiste à utiliser celle de l'image en SVG, mais ça peut paraitre compliquée pour un néophyte. En même temps, c'est toujours l'heure d'apprendre, hein ! Voici un article sur le blog d'omblog, dans lequel vous trouverez un exemple simple à faire.

Actuellement, celle que j'ai choisie pour mon prochain design, vous savez la version 5 citée en début d'article, n'est pas idéale, mais c'est aussi celle qui est la plus simple, à la fois en terme de codage et de poids. Elle est en revanche un peu avant-gardiste, car elle s'appuie sur une hypothétique version 3 du CSS, que chaque navigateur, pour le moment, traduit à sa sauce. Ainsi, j'écris ceci dans la feuille de style :

.exemple-de-cadre-arrondi {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-border-radius: 20px;
}

Alors, c'est vrai, ma méthode n'est pas compatible avec Internet Explorer, mais avec lui, de toute manière, ne comptez pas sur les autres méthodes que celle de Roundedcornr.com pour que ça marche. Ici, vous devriez quand même obtenir gain de cause dans Safari, Firefox et Konqueror. Pour Opera il faudra se mettre au SVG cité plus haut les développeurs ayant abandonné l'idée, à tord selon moi, de reconnaitre ce genre de code dans une feuille de style. On attend donc avec impatience les recommandations de la W3C pour qu'enfin on puisse commencer à laisser libre-cours à notre imagination.