Css et logique

Bonjour

Existe ti l une documentation qui référence les problèmes de logique notamment dans le cas ou une propriété css ( et sa valeur ) est valide syntaxiquement ( comme le xml) mais que la valeur associé à la propriété ne peut pas s'appliquer car
-il manque une propriété css pour la rendre active interprétable par le moteur css
-il existe une propriété de nom différente qui prime sur la propriété en question .

on parle de spécificité en comparant les sélecteurs . Le cas que j 'aborde n'est pas de la spécificité qui voudrait que le navigateur choisit au sein d'un même sélecteur plusieurs propriétés ( le nom pas la valeur ) identique la première dont il sait interpréter la valeur /fonction / ? .

par exemple : un selecteur avec display:Inline ignore width et height
par exemple : un border sans style avec une couleur n apparait pas
pouquoi display prime sur width et height et pas l inverse ?
Est ce que ce genre de relation est documentée ?

cordialement
Modifié par 75lionel (22 Nov 2014 - 21:21)

Bonjour Lionel,

Voilà une excellente question pour un samedi matin !

Il existe bien des outils qui sont actuellement souvent plus intéressants que des simples validateurs syntaxiques, ce sont des "linter" (il existe des linters pour de nombreux langages de code et ils sont généralement très simples à utiliser au quotidien, via des plugins sur l'éditeur de code par exemple).

L'un de ces linters est CSSlint. En ce qui me concerne, je consulte toujours les conseils qu'il prodigue.

Par contre, il ne va pas aussi loin que ce que tu souhaites.

Tout simplement parce que tu souhaites est bien plus complexe à appréhender que ce que tu penses.

Par exemple, quand tu dis que "un selecteur avec display:Inline ignore width et height "... eh bien ce n'est pas toujours vrai ! Si l'élément est hors du flux (position, float), alors width et height s'appliqueront bien qu'il soit déclaré en display inline.
Et si on va encore plus loin, en prenant toujours le même élement et en modifiant la valeur de display par "none", toutes les lois sus-citées disparaissent.
Bref, tout peut facilement s'enchaîner.

En fait, les règles que tu cites sont "tout simplement" décrites dans les spécifications CSS. Ce sont elles qui expliquent très exactement comment le navigateur doit se comporter dans telle ou telle situation.

Toujours est-il qu'à ma connaissance il n'existe pas d'outil qui va couvrir précisément ce que tu souhaites.

Raphael a écrit :

Toujours est-il qu'à ma connaissance il n'existe pas d'outil qui va couvrir précisément ce que tu souhaites.

Si ce n'est un éditeur de texte ou un IDE qui offre un accès rapide à la spec.

Certes, mais il faut vérifier propriété par propriété dans ce cas.

(et celui de Brackets est mieux fichu selon moi )

Merci pour vos réponses .

J'ai testé certains outils pour savoir comment est géré la valeur width dans une boite inline :

en utilisant le debug des differents navigateurs


*chrome debug 41.0.2226.0 canary ( maj ce jour !!!)
chrome affiche un "width : auto" au lieu du "width : 46.8%"mais en utilisant l onglet "computed" pas l'onglet "styles" ou la propriété width ( nom et valeur aurait pu être barré ( invalide, override) .
Donc d'après la documentation de width provenant de la capture d'écran de kustolovic , seul chrome respecte la norme en affichant auto . Combien d'outils css supportant la complétion pour la doc affiche pour notre problème la bonne information ? Il ne suffit pas d avoir acces rapide à la documentation , il faut que celle ci soit utile. Est toujours le cas ?

Dreamweaver
......completion pour le nom et la valeur des propriétes CSS
......pas de completion automatique pour la docuemntation
......documentation par pointeur dans le nom de la prorpriété CSS et Maj F1
......documentation provenant de Oreilly
......documentation n a pas de paragraphe computed !!

Modifié par 75lionel (23 Nov 2014 - 15:22)

Dans l onglet computed pour width l unité et donc la valeur affiché n'est pas la même entre la liste et le box model selon les navigateurs .

J'ai comparé les valeurs affichées dans le "box model" pour deux unités ( em % ) dans 3 navigateurs différent ( FF Chrome IE) :
--tous les unités em semblent se transformer en pixel pour le 3 navigateurs
--pour les untiés en % seul FF affiche tout en pixel , les autre en %
-------FF affiche tout en pixel ( margin padding width )
--pour le width ----------
*IE affiche l unité utilisée dans le css
*FF affiche en pixel
*chrome affiche auto

Donc en se basant sur l inspection du box model et du width du parent on detecte bien que le width de la box ne s applique pas . Dans ce cas FF peut aussi nous aider a détecté que width ne s applique pas . IE n est d aucune utilité dans notre cas .


Enfin si on change le width du browser tout en visualisant la valeur de la propriété ( width et les autres ) de la fenêtre de debug ( panel "style compute" , ou "box model" ) ; seul chrome met à jour en temps réel les données ( ou pas selon le contexte de l' unité ) . Les autres navigateurs demandent de changer le focus de la souris au sein du navigateur ou de cliquer ailleurs pour revenir sur la fenêtre de debug ( après changement du width du navigateur) . Sous windows chrome est lent et bug ( freeze ) mais cette fonctionnalité existe et me semble utile . Dans tous les cas , l outil CSlint en ligne est bien plus rapide .

cordialement

Modifié par 75lionel (23 Nov 2014 - 14:53)

bracket ne fait pas mieux

documentation succinte avec Ctr K ( affiche)
Ctr K fonctionne si curseur apres premier caractère du nom de la propriété css et avant ";"
chaque fenêtre de documentation ouverte ne se ferme pas automatiquement Ctrl K !!
documentation d origine https://docs.webplatform.org/wiki/css/properties/width




cordialement



Il y a un bug ( j utilise FF browser ) changer l image d'un post change les images des autres post !!! effacer les cookies ne change rien .une seule image par post ?
Modifié par 75lionel (23 Nov 2014 - 15:27)

Bonjour,

ah oui intéressant de prendre la problématique par ce bout-là.

- display, position et float sont dans un bateau, est-ce qu'on le voit flotter ? http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
- :before et :after sans content = pas grand chose
- clip() sans positionnement idem (mais c'est deprecated paraît-il... 'fin ça fonctionne encore en tout cas)
- top, right, bottom et left ne s'appliquent qu'en cas de positionnement
- vertical-align, c'est mieux avec inline-block et table-cell

75lionel a écrit :
Il y a un bug ( j utilise FF browser ) changer l image d'un post change les images des autres post !!! effacer les cookies ne change rien .une seule image par post ?

À ma connaissance, non, il faut donner un nom différent à tes images

6l20 a écrit :

À ma connaissance, non, il faut donner un nom différent à tes images

Le nom du fichier sélectionné coté desktop ne change pas coté formulaire HTML .
j'ai posté 2 fois et à chaque fois j'ai sélectionné une image différente.En postant une 3 eme fois , je sélectionne un fichier image toujours différent ( quel interet de selectionner la même ?) et les images des 2 post précédent que je n édite pas se transforme après validation ( sur le serveur ) par l 'image que j 'ai uploader dans le post 3 ... véridique !! je devrais suivre une formation B2i ....??!!

Le nom du fichier sélectionné coté desktop ne change pas coté formulaire HTML .
j'ai posté 2 fois et à chaque fois j'ai sélectionné une image différente.En postant une 3 eme fois , je sélectionne un fichier image toujours différent ( quel interet de selectionner la même ?) et les images des 2 post précédent que je n édite pas se transforme après validation ( sur le serveur ) par l 'image que j 'ai uploader dans le post 3 ... véridique !!
Ou il y a un problème d ergonomie, pas intuitif ..... !!!! En fait tout a été OK pour les 2 premier post avec image différente , pas le troisième avec une nouvelle image !!
je devrais suivre une formation B2i ....??!!
Modifié par 75lionel (25 Nov 2014 - 02:16)