CSS: border-right-width-ltr-source: physical; c'est quoi?! [résolu]

CSS: border-right-width-ltr-source: physical; c'est quoi?! [résolu] - HTML/CSS - Programmation

Marsh Posté le 08-01-2011 à 21:43:59    

Bonjour tous,
 
un truc m'échappe. Dans un code CSS affiché par lextension Web Developer de Firefox, je trouve des attributs étranges que je n'ai jamais vu avant. Extrait :
 

Code :
  1. .header h1
  2. {
  3. font-weight: 700;
  4. margin-top: 0px;
  5. margin-right: 0px;
  6. margin-bottom: 0px;
  7. margin-left: 0px;
  8. padding-top: 0px;
  9. padding-right: 0px;
  10. padding-bottom: 0px;
  11. padding-left: 20px;
  12. color: #f9f9f9;
  13. border-top-width: medium;
  14. border-right-width-value: medium;
  15. border-right-width-ltr-source: physical;
  16. border-right-width-rtl-source: physical;
  17. [etc. bla bla encore plein des pareils...]
  18. border-left-color-value: -moz-use-text-color;
  19. border-left-color-ltr-source: physical;
  20. border-left-color-rtl-source: physical;
  21. line-height: 2em;
  22. font-size: 2em;


 
Ça vient de où ce cauchemar ? C'est quoi ces "border-right-width-ltr-source: physical;" et Co ? Ce sont des nouveautés CSS 3 ?? Je croyais être relativement correct en connaissances CSS mais là je me sens totalement dépassé. Plus étrange encore: quand on consulte le fichier css directement, pour cette même classe, on retrouve du code assez classique (copié/collé de Visual Studio) :
 

Code :
  1. .header h1
  2. {
  3.     font-weight: 700;
  4.     margin: 0px;
  5.     padding: 0px 0px 0px 20px;
  6.     color: #f9f9f9;
  7.     border: none;
  8.     line-height: 2em;
  9.     font-size: 2em;
  10. }


 
Web Developer a donc "inventé" ces attributs tarabiscotés ?? Il doit bien les prendre de quelque part ! J'ai fait des recherches mais le peu d'infos que je trouve sont des questions liées à ces choses étranges. Jamais une explication de ce que c'est...
 
Un idée quelqu'un ??


Message édité par logx le 10-01-2011 à 20:14:18
Reply

Marsh Posté le 08-01-2011 à 21:43:59   

Reply

Marsh Posté le 08-01-2011 à 22:19:40    

non, ce sont les styles par défaut du navigateur  
chaque navigateur à les siens  
 
Je ne connais pas cette prorpieté , mais voila ce que j'en comprends  
border : bordure
-right : droite  
-width : largeur  
-ltr : left to right ( texte ce lisant de gauche a droite )  
-source : je ne sais pas  
 
C'est dont l'apparence de la bordure droite d'un h1 pour les textes qui se lisent de gauche à droite

Reply

Marsh Posté le 09-01-2011 à 00:11:02    

Etrange ce truc, j'ai investigué [:clooney2]  
 
Alors j'ai trouvé une référence et un début d'explication de tout de brol dans le code source de Gecko [:clooney11]  
 
Ça a avoir avec les propriétés *-left et *-right, la cascade, la gestion de la direction du texte (donc gauche à droite, ou droite à gauche pour les langues genre arabe et tout). J'ai pas réussi par contre à faire afficher de -rtl-source tout le temps, j'ai dû utiliser un -moz-margin-start pour que ça apparaisse.
 
Alors ce que j'ai pigé, c'est que les propriété -ltr-source ou -rtl-source ne sont que des trucs à usage interne, impossible de les définir dans son propre CSS (même avec !important et tout) [:clooney18]  
 
Donc je les ai fait apparaître avec le code suivant :

Code :
  1. <!DOCTYPE html> 
  2. <style> 
  3. #the-id { 
  4.     -moz-margin-start: 100px; 
  5. } 
  6. .the-class { 
  7.     margin-right: 50px; 
  8. } 
  9. </style> 
  10. <div id="the-id" class="the-class" dir="rtl"> 
  11.     Pouet 
  12. </div>


 
Un div avec direction rtl pour voir, et 2 règles dessus, qui vont forcer le navigateur à cascader (donc trouver quelle règle appliquer lorsqu'il y a conflit).
 
Déjà un mot sur -moz-margin-start. Quand on met par exemple une marge à gauche, quand on inverse la direction du texte, elle reste à gauche. Pas cool, on voudrait sûrement qu'elle s'inverse aussi et se mette à droite. Du coup ils ont inventé les concepts de *-start et *-end, qui s'inversent automatiquement. Genre -moz-margin-start sera mappé sur margin-left si gauche à droite, et mappé sur margin-right si droite à gauche.
 
Alors revenons à notre cascade. Là j'ai mis une marge droite sur la classe. Et une marge start sur l'id. Alors comme je suis en direction droite à gauche, le marge start sera utilisé (on aura une marge à droite de 100px). Ok super logique, mais d'où sort alors ce rtl-source bidule là [:clooney5]  
 
C'est en fait uniquement à usage interne. Lorsque gecko rencontre un -start, il regarde la direction du texte, et définit la propriété *-source pour que lors du calcul de la cascade, il sait quelle propriété utiliser.
 
Donc il va se passer tout ça (partont de la classe pour simplifier) :

  • Ha ! Une classe s'applique à notre élément, avec marge droite 50px
  • Hé ! Voyons si y'a d'autres règles avec plus de poids
  • Hi  ! Un id aussi, ça a donc plusse de poids
  • Ho ! Voyons si la marge droite est écrasé par cette règle avec id
  • Hu ! Je vois que la propriété margin-right-rtl-source est définie, avec pour valeur logical ! Donc je dois regarder non pas dans margin-right, mais -moz-margin-start
  • Hy ! Y'a bien un -moz-margin-start, dans l'id, ça a plusse de poids, alors je prend celui-là


Alors si dans Firebug vous modifiez logical en physical, là il ne prend pas -moz-margin-start, mais margin-right... qui n'est pas définie dans la règle avec id, donc il garde la valeur qu'on trouve dans la règle avec classe (50px).
 
Voilà [:clooney19]

Reply

Marsh Posté le 09-01-2011 à 21:05:49    

tu es un grand malade :jap:

Reply

Marsh Posté le 09-01-2011 à 22:14:27    

Vrai [:pingouino]
 
N'empêche, ils pourraient un peu documenter tout ça plus explicitement que juste dans les commentaires d'une fonction dans le source. Ça fait très bricolage pour se simplifier la vie. Même si c'est valable, un peu de doc ne fait pas de mal.

Reply

Marsh Posté le 10-01-2011 à 20:13:14    

Waw... *Impressionné*  
 
Je confirme, t'es un grand malade lol ;-) Mais merci pour l'explication !! :-)
 
Et je suppose que ce sont des raisons identiques qui expliquent que dans Web Developer, lorsqu'on édite le HTML, le code éditable qui s'affiche est parfois très différent du code original visible par ctrl-u...


Message édité par logx le 10-01-2011 à 20:20:07
Reply

Marsh Posté le 10-01-2011 à 20:51:57    

Ouais voilà. Quand t'édites l'HTML, t'aura la version "live", avec les possibles corrections du navigateurs.
 
Genre si tu mets un <table> dans un <p> :

Code :
  1. <p>
  2.   <table>...</table>
  3. </p>


C'est pas légal en HTML. Le navigateur va donc corriger de lui-même en :

Code :
  1. <p></p>
  2.   <table></table>
  3. <p></p>


C'est cette dernière version que tu verra avec Web Developper.
 
Même chose si tu tritures les éléments avec JavaScript, tu verra la version modifiée.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed