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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS: border-right-width-ltr-source: physical; c'est quoi?! [résolu]

logx

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 :

.header h1
{
font-weight: 700;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
color: #f9f9f9;
border-top-width: medium;
border-right-width-value: medium;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
[etc. bla bla encore plein des pareils...]
border-left-color-value: -moz-use-text-color;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
line-height: 2em;
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 :

.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}

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

Publicité

flo850

moi je

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

FlorentG

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 :

<!DOCTYPE html>
<style>
#the-id {
    -moz-margin-start: 100px;
}
.the-class {
    margin-right: 50px;
}
</style>
<div id="the-id" class="the-class" dir="rtl">
    Pouet
</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]

flo850

moi je

tu es un grand malade :jap:

FlorentG

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.

logx

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

FlorentG

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 :

<p>
<table>...</table>
</p>

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

Code :

<p></p>
<table></table>
<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.

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Forcer le port source en TCP/IP client	Besoin d'aide - Tableau HTML CSS
[CSS] Texte qui centre après chargement	[CSS] Réalisation d'un site trois colonnes flottantes dans Div
[CSS] Problème avec .class et id	Soulignement de <li> avec <ul> imbriqué (CSS)
Système open source de gestion de matériels	code source en Cpp
changer la source d'une iframe	[ Juridique ] Vente de licence de code source
Plus de sujets relatifs à : CSS: border-right-width-ltr-source: physical; c'est quoi?! [résolu]

Page générée en 0.037 secondes