تغير سلوك CSS بعد تحديث البرنامج

ساهم تجربة المستخدم
1

لقد قمت بتحديث 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

أعتقد أن هناك مشكلتين هنا، الأولى هي أنه يجب إضافة body قبل :not، وإلا فإن :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;
}

النمط الأول سيقوم بإخفاء علامة “wagon” إذا لم تكن عضوًا في الطاقم… لكن النمطين الثاني والثالث سيقومان بإخفاء العلامة إذا كانت مجموعتك الرئيسية أيضًا ليست من التجار/الوسطاء. سيتعين عليك أن تكون جميعًا الثلاثة الثلاثة لتجنب display: none;.

أعتقد أنك بدلاً من ذلك ستريد دمج الثلاثة معًا بهذه الطريقة:

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

الطريقة الأولى، مع الأنماط الثلاثة المنفصلة، تعمل كـ “ليس و”:

ليس staff و primary-group-dealers و primary-group-brokers

الطريقة الثانية، مع :not المتسلسلة، تعمل كـ “أو”:

ليس staff أو primary-group-dealers أو primary-group-brokers

4 إعجابات
12

هذا يحل المشكلة! شكرًا جزيلاً!

إعجاب واحد (1)