ソフトウェアアップデート後にCSSの動作が変更されました

貢献 UX
1

2日前に Discourse を 2.7.0beta4 に更新したところ、カスタム CSS の動作に変化があることに気づきました。以前は、staff（スタッフ） ではないユーザーから特定のタグを非表示にするために、以下のような CSS コード（簡略化版）を使用していました。

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

最近、staff からもこれらのタグが非表示になっていることに気づきました。これは更新によるものなのでしょうか？もしそうであれば、どのように調整すればよいでしょうか？よろしくお願いいたします！

「いいね！」 1
2

それでも動作するはずです。開発サイトでテストしたところ、期待通りに動作しました。動作しなくなったのはその CSS のみでしょうか？

「いいね！」 4
3

はい、それが私が異なって動作していると感じた唯一の点です。なぜスタッフからタグが非表示になっているのか分かりません。私がスタッフとしてサイトを訪問すると、明らかに <body class="staff navigation-categories categories-list"> が表示されるからです。

「いいね！」 1
4

これ、解決しましたか？

「いいね！」 1
5

いいえ、まだ試していません。CSS コードをいくつかの方法で書き換えてみました（例：html:not(.staff)、body:not(.staff)、または要素を1行にまとめるなど）が、それでもスタッフに対して選択された要素が非表示のままです。

「いいね！」 1
7

うーん、他の CSS が含まれているファイルの一番下にこの CSS を入れてみてください。どこか別の CSS と競合している可能性があり、これで確認できるかもしれません。

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

もし公開されているサイトがあれば、リンクをここに貼っていただければ、明らかな問題がないか詳しく確認します。

「いいね！」 2
8

ありがとうございます！サイトはこちらです：Marketplace - Leasehackr Forum

基本的に、Marketplace カテゴリとそのサブカテゴリ内の特定のタグを、staff 以外のユーザーには非表示にしたいと考えています。

ご確認いただき、ありがとうございます！

「いいね！」 1
9

返信が遅くなり申し訳ありません。問題は解決されましたか？現在、あなたのサイトを確認すると、特定のタグがスタッフ以外には表示されていないようです。

10

まだ解決策は見つけていません。.staff 以外のユーザーに加え、.staff のタグもまだ非表示になっています。ありがとうございます！

11

ここにはおそらく2つの問題があります。まず1つ目は、:not の前に body を追加すべきだということです。そうしないと、:not はクラスを持たない任意の div 要素に適用されてしまいます。

2つ目の問題は、これらのスタイルが互いに競合していることです。

: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 タグを非表示にします。しかし、2番目と3番目のスタイルは、あなたのプライマリーグループが dealers や brokers でもない場合に wagon タグを非表示にしてしまいます。つまり、display: none; を回避するには、3つの条件すべてを満たす必要があります。

その代わりに、以下のように3つを組み合わせることをお勧めします。

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

3つの個別のスタイルを用いた最初の方法は、「かつ（and）」として機能します。

staff でなく、かつ primary-group-dealers でなく、かつ primary-group-brokers でない

一方、:not を連結した2番目の方法は、「または（or）」として機能します。

staff でない、または primary-group-dealers でない、または primary-group-brokers でない

「いいね！」 4
12

これで問題が解決しました！本当にありがとうございます！

「いいね！」 1