Discussion :

[troumad]

Bonjour

J'essaie les -moz-border-radius / border-radius . Comme je teste sur firefox, j'ai donc les -moz-border-radius . Je trouve bien dommage que ff n'utilise pas border-radius

Je suis arrivé à faire de joli cadre sur certains éléments :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  .tete ul li
  {
   display:inline;border: 1px ridge #000;font-size : 12px; padding:8px;line-height:26px;margin-left:2px;margin-right:2px; 
   -moz-border-radius : 20px 10px; 
   border-radius : 20px;
  }

J'essaie de faire le même effet sur un input de type select : il est imperméable à mes essais !

[Bisûnûrs]

Il y a certains éléments de formulaire qui sont très difficilement customisables. Les select en font partie.

[troumad]

Et on trouve où ses éléments modifiables ou les non modifiables ?

C'est donc pour ça que je ne trouvais pas d'exemple simple pour ces boutons

[Bisûnûrs]

On trouve ça nulle part, on teste et on remarque juste que ça marche pas.
Mieux, on découvre aussi que sur certains navigateurs des choses fonctionnent mais pas toutes, et sur d'autres c'est l'inverse.

[troumad]

Donc, pour le moment, rien n'est encore clair sur le sujet !
Il n'y a pas de norme...

[devyan]

Bonjour,

Pour ton cas, tu peux quand même y arriver mais il faut "tricher" en enveloppant les INPUT.

1/ tu enlève les bordures du INPUT (ça c'est possible )
2/ tu mets un DIV autour du INPUT
3/ tu appliques la bordure arrondie au DIV

devyan

[Bisûnûrs]

1/ tu enlève les bordures du INPUT (ça c'est possible )

Ce n'est malheureusement pas possible sur IE (en parlant des select qui sont le problème initial) ...

[devyan]

Ce n'est malheureusement pas possible sur IE (en parlant des select qui sont le problème initial) ...

Oui tout à fait ! (dsl je croyais qu'on parlait de INPUT)
Pour le SELECT c'est un peu plus ardu mais faisable et cela nécessite un peu de JavaScript en plus du CSS

devyan

[troumad]

Je viens de tester un point particulier avec firefox : les vieilles versions (3.0.2) ne prennent pas en compte toute les border-radius pris en compte par les nouvelles (3.6). Donc peut-être qu'il suffit d'attendre pour que ça arrive aussi au input !

[thelvin]

Bah, un jour ou l'autre, et si ça reste spécifié pour que, oui.

De manière générale, styliser les contrôles des formulaires est encore assez expérimental, et les spécifications ne sont pas garanties de rester inchangées avant version stabilisée (raison pour laquelle il ne faut pas encore proposer border-radius: ce que ça va faire peut ne pas être ce qu'on croit maintenant que ça va faire).

[troumad]

Bonjour

Je reviens sur le sujet...
Firefox 4 fait de gros progrès !
J'avais mis sur un site des css du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  .tete ul li
  {
   display:inline;border: 1px ridge #000;font-size : 12px; padding:8px;line-height:26px;margin-left:2px;margin-right:2px; 
   -moz-border-radius : 20px 10px; 
   border-radius : 20px;
  }

Je viens de voir que ff4 bêta 7 applique les border-radius, mais plus les -moz-border-radius.

Les border-radius sont pris en compte pour les input :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  .rond, input
  {
   -moz-border-radius : 20px; 
   border-radius : 20px;
  }

Ça m'a surpris de voir le changement de look ce matin !

Et sous Internet explorer, je crois que tous mes coins sont carrés ! Sans décoration.

[adiGuba]

Salut,

Quelques remarques :

Comme je teste sur firefox, j'ai donc les -moz-border-radius . Je trouve bien dommage que ff n'utilise pas border-radius

Les propriétés préfixés par -moz- sont des extensions propriétaire des CSS spécifique à Firefox (plus précisément à son moteur de rendu Gecko également utilisé par quelques autres navigateurs).

Ce préfixe est important car il indique qu'on utilise une propriété non-standard. En effet la propriété a été implémentée alors même qu'elle n'avait pas été standardisée par le W3c.

C'est très courant dans le monde des navigateurs, et chaque navigateur/moteur utilise son propre prefixe ( -webkit- pour Webkit/Chrome/Safari, -o- pour Opera, -ms- pour Microsoft/IE).

Ceci principalement pour deux raisons :

• Soit pour implémenter une propriété inexistante dans les standards, pour un besoin spécifique au navigateur.
• Soit pour implémenter une propriété non-finalisé, à partir des documents de travail du W3c.
  C'est très important d'utiliser un préfixe dans ce cas là, afin de ne pas utiliser le vrai nom sur une mauvaise implémentation au cas où les spécifications évolueraient...

C'est pour cette seconde raison que Mozilla utilise -moz-border-radius, et ce depuis la sortie de Firefox 1.0 (ce qui nous fait quand même remonter à novembre 2004). D'ailleurs les autres navigateurs font pareil, comme Webkit avec -webkit-border-radius.


Cette approche consistant à implémenter les propriétés en même temps que le W3c travaille sur la norme permet beaucoup de chose, comme des démos techniques qui peuvent amener à mieux définir les besoins...

Bref au lieu de faire les normes puis de les implémenter après, les deux travaillent en même temps, ce qui permet de faire remonter les problèmes plus facilement et d'améliorer les specs...

Je viens de tester un point particulier avec firefox : les vieilles versions (3.0.2) ne prennent pas en compte toute les border-radius pris en compte par les nouvelles (3.6).

Normal : les spécifications ont évoluées, et donc son implémentation aussi...

C'est d'ailleurs à cause de ces changements de spécifications que -webkit-border-radius et -moz-border-radius ont une comportement différent sur certaines syntaxes.

Ces changements ne devront plus avoir lieu avec border-radius !

Je viens de voir que ff4 bêta 7 applique les border-radius, mais plus les -moz-border-radius.

En fait FF4 supporte les deux.

En décembre 2009, le W3c a passé le document "Backgrounds and Borders CSS3" en "Candidate Recommendation", ce qui fait que les navigateurs ont commencé à implémenter/intégrer ses propriétés (dont border-radius) sous leurs noms standards.

Donc dans Firefox 4, border-radius est désormais parfaitement reconnu, mais -moz-border-radius a été conserver pour des raisons de compatibilité, et correspond simplement à un alias.

Bien sûr si tu utilises les deux, seul le dernier fera effet

Et sous Internet explorer, je crois que tous mes coins sont carrés ! Sans décoration.

border-radius n'est implémenté qu'à partir d'IE9 beta...




Pour info Mozilla dispose d'un wiki assez complet décrivant les propriétés CSS de Firefox standard ou propriétaire :

• CSS reference
• [https://developer.mozilla.org/en/CSS...nsions]Mozilla CSS extensions[/url]

C'est très pratique même pour les autres navigateurs, car les propriété sont généralement assez bien détaillés, avec des exemples et surtout bien souvent un tableau de compatibilité des différents navigateurs !!! Très pratique !


Exemple pour border-radius : https://developer.mozilla.org/en/css/border-radius


a++