Comportamento CSS cambiato dopo aggiornamento software

Contribuisci UX
1

Ho aggiornato Discourse due giorni fa alla versione 2.7.0beta4 e ho iniziato a notare un cambiamento nel comportamento del CSS personalizzato. In precedenza, avevo il seguente codice CSS (semplificato) per nascondere determinati tag agli utenti che non sono membri dello staff:

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

Ho notato recentemente che i tag sono stati nascosti anche agli utenti dello staff. Mi chiedo se ciò sia dovuto all’aggiornamento. Se è così, come posso apportare la modifica necessaria? Grazie!

1 Mi Piace
2

Dovrebbe ancora funzionare, l’ho testato sul mio sito di sviluppo e funziona come previsto… è l’unico CSS che ha smesso di funzionare?

4 Mi Piace
3

Sì, è l’unica cosa che ho notato comportarsi diversamente. Non sono sicuro del motivo per cui nasconde i tag allo staff, dato che quando visito il mio sito come membro dello staff vedo chiaramente <body class="staff navigation-categories categories-list">.

1 Mi Piace
4

Ce l’hai fatta a risolvere?

1 Mi Piace
5

No, non l’ho fatto. Ho provato a riscrivere il codice CSS in diversi modi (ad esempio html:not(.staff), body:not(.staff) o raggruppando gli elementi in una riga), ma il codice continua a nascondere gli elementi selezionati per lo staff.

1 Mi Piace
7

Hmm… puoi provare a inserire questo CSS in fondo al file contenente il tuo altro CSS? Mi chiedo se ci sia un conflitto con qualche altro CSS da qualche parte, e questo potrebbe confermarlo.

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

Se hai un sito pubblico, sentiti libero di pubblicare il link qui e posso dare un’occhiata più da vicino per vedere se c’è qualcosa di evidente.

2 Mi Piace
8

Grazie! Il sito è: Marketplace - Leasehackr Forum

In sostanza, volevo che determinati tag all’interno della categoria Marketplace e delle sue sottocategorie fossero nascosti a chi non è staff.

Grazie per aver dato un’occhiata!

1 Mi Piace
9

Scusa per il ritardo nella risposta. Hai scoperto qual era il problema? Vedo che alcuni tag sono nascosti ai non membri dello staff quando si visualizza il tuo sito ora.

10

Non ho ancora elaborato una soluzione. I tag sono ancora nascosti per .staff oltre che per i non staff. Grazie!

11

Penso che ci siano due problemi qui: il primo è che dovresti aggiungere body prima di :not, altrimenti :not potrebbe corrispondere a qualsiasi div senza la classe.

Il secondo problema è che questi stili entrano in conflitto tra loro:

: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;
}

Il primo stile nasconderà il tag “wagon” se non sei staff… ma il secondo e il terzo stile nasconderanno il tag “wagon” se il tuo gruppo principale non è anche “dealers” o “brokers”. Dovresti essere tutti e tre per evitare display: none;.

Penso invece che tu voglia combinarli così:

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

Il primo approccio, con i tre stili separati, agisce come un “non e”:

non staff e primary-group-dealers e primary-group-brokers

Il secondo approccio, con :not concatenati, agisce come un “o”:

non staff o primary-group-dealers o primary-group-brokers

4 Mi Piace
12

Questo risolve il problema! Grazie mille!

1 Mi Piace