소프트웨어 업데이트 후 CSS 동작이 변경되었습니다

기여 UX
1

2일 전에 Discourse를 2.7.0beta4로 업데이트한 후, 사용자 정의 CSS 동작이 변경된 것을 알아차렸습니다. 이전에는 다음과 같은 CSS 코드(단순화됨)를 사용하여 스태프가 아닌 사용자에게 특정 태그를 숨겼습니다:

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

최근에는 스태프에게도 태그가 숨겨지는 것을 발견했습니다. 이것이 업데이트와 관련이 있는지 궁금합니다. 관련이 있다면 어떻게 조정해야 할까요? 감사합니다!

1개의 좋아요
2

그건 여전히 작동해야 하는데, 개발 사이트에서 테스트해 봤을 때 예상대로 잘 작동했어요… CSS가 멈춘 건 그것뿐인가요?

4개의 좋아요
3

네, 다르게 동작하는 부분은 그것뿐인 것 같습니다. 스태프가 내 사이트를 방문할 때 <body class="staff navigation-categories categories-list">가 명확히 보이는데, 왜 스태프에게는 태그가 숨겨지는지 이유가 잘 모르겠습니다.

1개의 좋아요
4

해결하셨나요?

1개의 좋아요
5

아니요, 아직 해보지 않았습니다. CSS 코드를 몇 가지 방식으로 다시 작성해 보았지만 (예: html:not(.staff), body:not(.staff), 또는 요소를 한 줄에 그룹화하는 것), 여전히 스태프에게는 선택된 요소가 숨겨집니다.

1개의 좋아요
7

음… 다른 CSS가 있는 파일의 하단에 이 CSS를 넣어볼 수 있을까요? 어딘가에 다른 CSS와 충돌이 있는 것 같은데, 이렇게 하면 확인할 수 있을 것 같아요.

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

공개 사이트가 있다면 링크를 여기에 올려주세요. 그러면 더 자세히 살펴봐서 눈에 띄는 문제가 있는지 확인해 드릴게요.

2개의 좋아요
8

감사합니다! 사이트 주소는 다음과 같습니다: Marketplace - Leasehackr Forum

기본적으로 마켓플레이스 카테고리와 그 하위 카테고리에서 특정 태그를 staff가 아닌 사용자에게 숨기고 싶었습니다.

확인해 주셔서 감사합니다!

1개의 좋아요
9

답변이 늦어 죄송합니다. 문제의 원인을 파악하셨나요? 현재 사이트에서 비스태프 사용자에게 일부 태그가 숨겨져 있는 것을 확인했습니다.

10

아직 해결책을 찾지 못했습니다. 태그는 여전히 스태프가 아닌 사용자뿐 아니라 .staff에게도 숨겨져 있습니다. 감사합니다!

11

여기에는 두 가지 문제가 있을 것 같습니다. 첫 번째는 :not 앞에 body를 추가해야 한다는 점입니다. 그렇지 않으면 :not가 해당 클래스가 없는 어떤 div에도 적용될 수 있기 때문입니다.

두 번째 문제는 다음 스타일들이 서로 충돌하고 있다는 점입니다:

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

첫 번째 스타일은 staff가 아닌 경우 wagon 태그를 숨깁니다… 하지만 두 번째와 세 번째 스타일은 primary group이 dealers/brokers가 아닌 경우 wagon 태그를 숨깁니다. display: none;을 피하려면 이 세 조건을 모두 충족해야 합니다.

대신 3개를 다음과 같이 결합하는 것이 더 적합할 것 같습니다:

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

세 개의 개별 스타일을 사용하는 첫 번째 방식은 “not and”(그리고)처럼 작동합니다:

not staff and primary-group-dealers and primary-group-brokers

체인된 :not를 사용하는 두 번째 방식은 “or”(또는)처럼 작동합니다:

not staff or primary-group-dealers or primary-group-brokers

4개의 좋아요
12

그렇게 하면 문제가 해결됩니다! 정말 감사합니다!

1개의 좋아요