Discussion :

[Trebly]

Bonjour,

Je suis en train de mettre au point un site WP "portable" sur PC et mobiles.

Ayant rencontré un problème de cascade avec @media, et ne trouvant pas de solution, j'ai entrepris de rédiger un sujet.
A la fin de la rédaction j'ai trouvé la solution.

Il s'agit d'un cas d'école.
Supprimer, ce serait dommage compte tenu je pense de l'exemple, publié résolu directement c'est bizarre en première approche.
Je laisse donc le soin au modérateur d'en faire quelque chose.

Voici le cas.

Le CSS tout comme l'affichage du débogger et qui correspond l'affichage ( invalide?) comprend :
nota : en rouge les attributs ignorés

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* ligne 984 */
media="all"
.site-main .sidebar-inner {
    margin-right: 70px;
    float: right;
    max-width: 1040px;
    height: 100px;
    width: inherit;

/* ligne 3966 - 4048 */
@media (max-width: 999px)
.sidebar-inner {
    margin: 0 auto; /* sur mobile le sidebar-inner passe sous le contenu et doit être centré */
    float: none;
}

L'anomalie que je ne comprend pas est l'ordre de prise en compte :

Détails du paramétrage
A l'exécution les attributs margin et float définis après les paramètres écran standard (max-width > 1000) ne sont pas pris en compte pour l'élément défini et l'ordre d'affichage du CSS est .
Par il le sont pour d'autres.

Configuration générale :
Le mobile LG G4 (pixels 2560 x 1440) est vu, dans le rapport devicePixelRatio qui est de 4, avec:
window.screen.width = 360 window.screen.height = 640 en portrait.

L'affichage correspond globalement (sauf autre anomalie non encore vue) au CSS défini pour un media all suivi d'une cascade en fonction de max-width

1. All
2. @media (max-width: 1069px)
3. @media (max-width: 999px)
4. @media (max-width: 767px)
5. @media (max-width: 643px)

Pour l'élément unique de classe .sidebar-inner la règle de cascade n'est pas appliquée (pour les définition données ci-dessus dans le CSS) qui apparaissent comme dans le CSS.

Par contre pour l'élément unique de classe .site-title on va trouver un ordre correct :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* index:337 */
.site-title, .site-description {
    color: #7a1e3a;
}

/* style2:4103 */
@media (max-width: 643px)
.site-title {
    font-size: 30px;
}

/* style2:4072 */
@media (max-width: 767px)
.site-title {
    font-size: 36px;
    padding: 8px 0 10px;
}

/* style2:1033 */
.site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
}

Où est l'erreur ?

La solution (trouvée grâce à l'effort fait pour communiquer ici) :

Le sélecteur
.site-main .sidebar-inner
défini dans All

reste prioritaire sur
.sidebar-inner
défini plus loin dans le block @media (max-width: 999px)

Fatigue ? Inattention, j'avais déja 10h de développement....

Cordialement

Trebly



Chrome Android (5.1) 47.0.2526.83 déboggeur sous Windows.

[NoSmoking]

Bonjour,
il s'agit d'un problème de spécificité de sélecteurs

• Règles d'application des styles CSS et gestion des conflits
• Specificity Calculator

[Olivier C]

Le sélecteur
.site-main .sidebar-inner
défini dans All

reste prioritaire sur
.sidebar-inner

C'est effectivement tout à fait normal. Si vous voulez que la nouvelle règle soit prise en compte il ne suffit pas de l'ajouter après le code précédent, il faut aussi que sa capacitée de sélection soit au moins égale au poid de la sélection précédente. D'où l'importance d'ailleurs de ne pas trop "sursélectionner" (c'est bien de ne pas descendre au-delà de 2 sélecteurs quand c'est possible).

[Trebly]

Bonjour,

Bien d'accord, c'est ce que je pensais avoir exprimé.

Mais je pense que le cas est intéressant pour bien comprendre, car il combine plusieurs questions, qui ont été un moment un piège à mon attention :

• Le sélecteur : ".site-main .sidebar-inner" désigne .sidebar-inner dans ".site-main" par conséquent, c'est bien connu, redéfinir des paramètres de .sidebar-inner n'affectera pas ceux qui ont été précisés, avant ou après d'ailleurs, dans ".site-main .sidebar-inner" qui sera appliqué pour tout élément appartenant à la classe .sidebar-inner inclus dans un élément ayant la classe .site-main, sinon il sera ignoré, dans le débogger ".sidebar-inneril" apparaitra toujours après avec ses propriétés ignorées (ce qui m'avait surpris de prime abord en ne voyant que la classe... pourquoi ?).
  
• Maintenant cela ne se corse pas vraiment quant à la logique, mais par contre beaucoup quant aux risques d'erreur lorsque l'on redéfinit un ou plusieurs bloc @media qui vont altérer en cascade les propriétés en tout ou partie.

Pourquoi le problème se complique ?
En effet, en général, vous m'aurez compris, si l'on définit la classe ".sidebar-inner" et qu'il y a un cas spécifique ".site-main .sidebar-inner" on les aura placés en toute rigueur à la suite, question de clarté d'écriture.

Quand il y a des blocs distants et 5000 lignes de CSS la vérification et les contrôles sont bien plus délicats.

Un éditeur de CSS qui permet de visualiser pour chaque classe la cascade générée devient indispensable pour ne pas avoir trop mal à la tête après 10 heures de développement, ou bien d'avoir le sentiment de l'avoir bien fatiguée inutilement cette tête.

Rester fiable et efficace en toute circonstance est nécessaire. Comment s'y prendre ?

Voilà ce sur quoi mon cas d'école peut ouvrir, il y a-t-il d'autres idées ?

Cordialement

Trebly

[Olivier C]

Quand il y a des blocs distants et 5000 lignes de CSS la vérification et les contrôles sont bien plus délicats.

Un éditeur de CSS qui permet de visualiser pour chaque classe la cascade générée devient indispensable pour ne pas avoir trop mal à la tête après 10 heures de développement, ou bien d'avoir le sentiment de l'avoir bien fatiguée inutilement cette tête.

Rester fiable et efficace en toute circonstance est nécessaire. Comment s'y prendre ?

L'inspecteur de votre navigateur ne vous aide pas à cela ? Étant donné qu'il vous donne la ligne et les feuilles de styles pour les règles impliquées...

Il vous donnera même les lignes des feuilles de votre préprocesseurs (Sass, Less, Stylus...) pour peu que vous génériez une maps. Inspectez par exemple un élément de cette page (que j'ai codé avec Stylus) : votre inspecteur vous donnera directement les lignes stylus impliquées.

[Trebly]

Bonjour,

Oui bien sur, j'utilise en fait une dizaine d'inspecteurs ( Chrome, Firefox, IE, Safari, Opera les inspecteurs internes ou FireBug et le debug du Kit de développement Google pour Android...).
En effet je vise la portabilité sur les cinq navigateurs version PC et Mobile.
Par contre je n'ai pas d'outils pour Apple ni encore de matériel de test.

C'est totalement indispensable tant pour le débug que pour le développement de base. Par contre, bien sur, c'est au cas par cas en analysant chaque page reçue, pour la mise au point. Ceci est vrai même si l'on entreprend un balayage systématique de tous les objets des pages.

PhpStorm que j'utilise comme éditeur contient de plus l'analyseur de symboles qui va permettre de retrouver non seulement les occurrences dans un CSS mais dans les autres CSS ou dans le code (et commentaires - doc) de tout un projet.

Eh bien, malgré tout, je suis passé au travers du cas que je cite, dont j'ai pu trouver la solution rapidement grâce à l'analyseur de Chrome Mobile Android en mode développeur sous Windows.

Cependant j'ai du me contraindre à rédiger le premier message pour découvrir, mon erreur d'inattention, presque à la fin de la rédaction, donc en expliquant à un tiers.

Je pense que je fais d'ailleurs ajouter une macro et un raccourci avec phpStrom pour exécuter des analyses plus systématiques.

Cependant phpStorm donnera bien la liste des instances, mais pas l'arbre de décision des attributs applicables à un sélecteur (par exemple mon ".sidebar-inner" seul : quels attribut peuvent se trouver appliqués).

Cordialement

Trebly

[NoSmoking]

On en reviens à une chose essentielle

D'où l'importance d'ailleurs de ne pas trop "sursélectionner" (c'est bien de ne pas descendre au-delà de 2 sélecteurs quand c'est possible).

d'autant que ton CSS ne décrit qu'un modèle de boîte à en voir les propriétés misent en place.

Code :

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

1
2
3
4
5
6
.sidebar-inner {
    margin-right: 70px;
    float: right;
    max-width: 1040px;
    height: 100px;
    width: inherit;

Eh bien, malgré tout, je suis passé au travers du cas que je cite

cela nous guète/arrive à tous