El comportamiento de CSS cambió después de la actualización del software

Contribuir UX
1

Actualicé Discourse hace dos días a la versión 2.7.0beta4 y empecé a notar el cambio en el comportamiento del CSS personalizado. Anteriormente, tenía el siguiente código CSS (simplificado) para ocultar ciertas etiquetas a los usuarios que no son personal:

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

Recientemente he notado que las etiquetas también están ocultas para el personal. Me pregunto si esto tiene que ver con la actualización. De ser así, ¿cómo puedo hacer el ajuste? ¡Gracias!

1 me gusta
2

Eso debería seguir funcionando, lo probé en mi sitio de desarrollo y funciona como se esperaba… ¿es ese el único CSS que ha dejado de funcionar?

4 Me gusta
3

Sí, eso es lo único que noté que se comporta de manera diferente. No estoy seguro de por qué oculta las etiquetas al personal, ya que veo claramente <body class="staff navigation-categories categories-list"> cuando visito mi sitio como miembro del personal.

1 me gusta
4

¿Lo lograste?

1 me gusta
5

No, no lo he hecho. He intentado reescribir el código CSS de varias formas (por ejemplo, html:not(.staff), body:not(.staff) o agrupando los elementos en una sola línea), pero el código sigue ocultando los elementos seleccionados para el personal.

1 me gusta
7

Hmm… ¿puedes probar poniendo este CSS al final del archivo que contiene tu otro CSS? Me pregunto si hay un conflicto con algún otro CSS en algún lugar, y esto podría confirmarlo.

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

Si tienes un sitio público, también siéntete libre de publicar el enlace aquí y puedo echar un vistazo más de cerca para ver si hay algo obvio.

2 Me gusta
8

¡Gracias! El sitio es: Marketplace - Leasehackr Forum

Básicamente, quería que ciertas etiquetas dentro de la categoría Marketplace y sus subcategorías estuvieran ocultas para quienes no son staff.

¡Gracias por revisar esto!

1 me gusta
9

Perdona la respuesta tardía. ¿Lograste averiguar cuál era el problema? Veo que ahora ciertos tags están ocultos para los no miembros del personal al visitar tu sitio.

10

Todavía no he encontrado una solución. Las etiquetas siguen ocultas para .staff, además de para los que no son personal. ¡Gracias!

11

Creo que podría haber dos problemas aquí. El primero es que deberías agregar body antes de :not; de lo contrario, :not podría coincidir con cualquier div que no tenga la clase.

El segundo problema es que estos estilos entran en conflicto entre sí:

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

El primer estilo ocultará la etiqueta “wagon” si no eres personal… pero el segundo y el tercer estilos ocultarán la etiqueta “wagon” si tu grupo principal tampoco es “dealers” o “brokers”. Tendrías que pertenecer a los tres grupos para evitar display: none;.

Creo que en su lugar deberías combinar los tres de la siguiente manera:

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

La primera forma, con los tres estilos separados, actúa como un “no y”:

no staff y primary-group-dealers y primary-group-brokers

La segunda forma, con los :not encadenados, actúa como un “o”:

no staff o primary-group-dealers o primary-group-brokers

4 Me gusta
12

¡Eso soluciona el problema! ¡Muchas gracias!

1 me gusta