Le comportement de CSS a changé après la mise à jour du logiciel

Contribuer UX
1

J’ai mis à jour Discourse il y a deux jours vers la version 2.7.0beta4 et j’ai remarqué un changement dans le comportement du CSS personnalisé. Auparavant, j’avais le code CSS suivant (simplifié) pour masquer certains tags aux utilisateurs qui ne sont pas du personnel :

:not(.staff){
    .topic-list{
        .category-marketplace{
            a[data-tag-name="wagon"]
            {
                display: none!important;
            }
        }
        
    } 
}

Récemment, j’ai constaté que les tags sont également masqués pour le personnel. Je me demande si cela est lié à la mise à jour. Si oui, comment puis-je apporter la modification ? Merci !

1 « J'aime »
2

Cela devrait toujours fonctionner, je l’ai testé sur mon site de développement et cela fonctionne comme prévu… est-ce le seul CSS qui ne fonctionne plus ?

4 « J'aime »
3

Oui, c’est la seule chose que j’ai remarquée qui se comporte différemment. Je ne sais pas pourquoi cela masque les balises au personnel, car je vois clairement <body class="staff navigation-categories categories-list"> lorsque je visite mon site en tant que membre du personnel.

1 « J'aime »
4

As-tu trouvé la solution ?

1 « J'aime »
5

Non, je ne l’ai pas fait. J’ai essayé de réécrire le code CSS de plusieurs manières (par exemple html:not(.staff), body:not(.staff), ou en regroupant les éléments sur une seule ligne), mais le code continue de masquer les éléments sélectionnés pour le personnel.

1 « J'aime »
7

Hmm… pouvez-vous essayer d’ajouter ce CSS en bas du fichier contenant votre autre CSS ? Je me demande s’il y a un conflit avec un autre CSS quelque part, et cela pourrait le confirmer.

body:not(.staff) .topic-list-item a[data-tag-name="wagon"] { 
  display: none !important; 
}

Si vous avez un site public, n’hésitez pas à partager le lien ici ; je pourrai alors examiner plus attentivement pour voir s’il y a quelque chose d’évident.

2 « J'aime »
8

Merci ! Le site est : Marketplace - Leasehackr Forum

Je voulais essentiellement que certains tags au sein de la catégorie Marketplace et de ses sous-catégories soient masqués pour les utilisateurs qui ne sont pas staff.

Merci d’avoir pris le temps d’examiner cela !

1 « J'aime »
9

Désolé pour la réponse tardive ici. Avez-vous trouvé quelle était le problème ? Je vois effectivement que certains tags sont masqués pour les non-membres du personnel lorsque vous consultez votre site actuellement.

10

Je n’ai pas encore trouvé de solution. Les balises sont toujours masquées pour .staff ainsi que pour les non-membres du personnel. Merci !

11

Je pense qu’il y a deux problèmes ici. Le premier est que vous devriez ajouter body avant :not, sinon :not pourrait correspondre à n’importe quel div sans la classe.

Le deuxième problème est que ces styles entrent en conflit les uns avec les autres :

:not(.staff) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-dealers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

:not(.primary-group-brokers) .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none !important;
}

Le premier style cachera le tag « wagon » si vous n’êtes pas membre du personnel… mais les deuxième et troisième styles le cacheront si votre groupe principal n’est pas « dealers » ou « brokers ». Vous devriez donc appartenir aux trois groupes pour éviter display: none;.

Je pense qu’au contraire, vous devriez combiner les trois comme ceci :

body:not(.staff):not(.primary-group-dealers):not(.primary-group-brokers)  .topic-list .category-marketplace a[data-tag-name="wagon"] {
  display: none;
}

La première méthode, avec les trois styles séparés, agit comme un « et » de négation :

pas staff et primary-group-dealers et primary-group-brokers

La deuxième méthode, avec les :not enchaînés, agit comme un « ou » :

pas staff ou primary-group-dealers ou primary-group-brokers

4 « J'aime »
12

Cela résout le problème ! Merci beaucoup !

1 « J'aime »