Forum Wisibility

WEB => Dreamweaver => Discussion démarrée par: Sam Moss le mars 16, 2012, 16:36:29 pm

Titre: Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Sam Moss le mars 16, 2012, 16:36:29 pm
Bonjour,

Je souhaiterais savoir si la propriété « coin arrondi » (border-radius) du html5 est utilisable sur Explorer.
J'ai testé sur du Safari/Chrome et Firefox : ça marche.
   border-radius: (valeur)px;
   -webkit-border-radius: (valeur)px;
   -moz-border-radius: (valeur)px;

Quelle est le script pour être lu dans tous les navigateurs et surtout dans Explorer ?
Faut-il placer le script dans la page html ou sur la feuille de style externe ?
Merci.
Titre: Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Eddy le mars 16, 2012, 16:45:48 pm
Bonsoir.

Jette un œil par là (http://www.w3schools.com/cssref/css3_pr_border-radius.asp) ou par là (http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html)
Titre: Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Sam Moss le mars 17, 2012, 10:20:42 am
Bonsoir.

Jette un œil par là (http://www.w3schools.com/cssref/css3_pr_border-radius.asp) ou par là (http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html)

Merci encore.
Titre: Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Eddy le mars 17, 2012, 10:34:11 am
Mets-le en favoris, c'est un site incontournable pour qui souhaite apprendre à faire un bon travail ! Il regorge de tels conseils.
Aussi je me suis procuré un bouquin sur l'approche du HTML5 et CSS3 dont l'auteur est Raphaël Goetter, gérant d'Alsacréations.fr.
Bouquin intéressant pour une transitions entre (x)HTML + CSS vers HTML5 + CSS3
Titre: Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Sam Moss le mars 18, 2012, 17:16:57 pm
Mets-le en favoris, c'est un site incontournable pour qui souhaite apprendre à faire un bon travail ! Il regorge de tels conseils.
Aussi je me suis procuré un bouquin sur l'approche du HTML5 et CSS3 dont l'auteur est Raphaël Goetter, gérant d'Alsacréations.fr.
Bouquin intéressant pour une transitions entre (x)HTML + CSS vers HTML5 + CSS3


C'est un site épatant. Je vais me procurer le livre. Merci pour la référence.
J'ai une autre question.
J'ai testé ma page avec un élément à coins arrondis qui marche sur tous les navigateurs mais l'habillage avec une bordure en pointillé n'ai pas reconnu sur Firefox.
Voici le code de la bordure pointillée : border: 4px dashed #FFF;
J'ai ajouté : -moz-border: 4px dashed #FFF;
Sans effet.

Que faire ?
Merci.
Titre: Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Eddy le mars 19, 2012, 10:51:00 am
border: 4px dashed #fff; est suffisant, pas besoin de préfixe pour une bordure et je viens de faire un test avec ce code sur FF afin de m'assurer et tout est normal !
Titre: Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Sam Moss le mars 19, 2012, 17:21:55 pm
border: 4px dashed #fff; est suffisant, pas besoin de préfixe pour une bordure et je viens de faire un test avec ce code sur FF afin de m'assurer et tout est normal !

Voici le style de mon accroche suivi de deux captures (la première sur Safari 5 et la seconde sur Firefox 11 Mac).

.video {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
text-align: center;
border: 4px dashed #FFF;
border-radius: 125px;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
behavior: url(../PIE.htc);
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-ms-transform: rotate(340deg);
-o-transform: rotate(340deg);
transform: rotate(340deg);
 }

Titre: Re : Le HTML5 dans les navigateurs : les coins arrondis
Posté par: Eddy le mars 19, 2012, 19:34:27 pm
J'imagine que certains navigateurs appliquent les bordures à l'intérieur des éléments et Firefox à l'extérieur. Pour un test, change la couleur de la bordure en noir afin de la voir partout !

EDIT : Ah non, tu as raison, on dirait que FF n'applique pas de bords à tirets au une div ronde. Comme quoi le HTML5 et CSS3 ne sont pas encore à 100% compris pas tous de la même manière !
Mais là tu te compliques la vie pour pas grand chose, une image comme celle là serait très légère et bien plus accessible pour tous les navigateurs et internautes.