تعديلات CSS غير مطبقة على الأجهزة المحمولة

[Richie (Richie Rich)]

أتساءل عما إذا كان بإمكان شخص ما مساعدتي في بعض أكواد CSS من فضلك.

لقد كنت أتابع الدليل Making custom CSS changes on your site والتغييرات التي أجريها تؤخذ في الاعتبار على سطح المكتب، ولكن ليس على الهاتف المحمول.

في هذا المثال، أحاول إخفاء الموقع من صفحة ملف تعريف المستخدم ومن بطاقة ملف تعريف المستخدم.

لقد طبقت ما يلي في CSS > Common:

/* إخفاء موقع المستخدم من صفحة ملفه الشخصي العام */
.user-profile-location {
  display: none;
}
/* إخفاء موقع المستخدم من بطاقته */
.user-card .location-and-website .location {
  display: none;
}

الاختبار على Safari و Chrome على جهاز كمبيوتر محمول يعمل بنظام macOS، كلاهما مخفي:

الاختبار على Safari و Chrome على iPhone وكلاهما لا يزال مرئيًا جدًا

كما ذكر أعلاه، هذه هي الحالة على متصفحات متعددة.

وبالمثل، أستخدم أيضًا أكواد CSS هذه لإخفاء بعض حقول المستخدم المخصصة من ملفه الشخصي العام:

/* إخفاء منصات التواصل الاجتماعي من الجزء السفلي من صفحة ملفه الشخصي العام */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

وإخفاءها من بطاقة المستخدم:

/* إخفاء منصات التواصل الاجتماعي من الجزء السفلي من بطاقته */
.public-user-field__you-tube, .public-user-field__vimeo, .public-user-field__instagram, .public-user-field__x-\(twitter\), .public-user-field__facebook, .public-user-field__tik-tok {
    display: none;
}

ولكن هذه لا تزال مرئية أيضًا على الهاتف المحمول (على كل من الملف الشخصي والبطاقة)

هل يمكن لأحد أن يكتشف ما أفعله بشكل خاطئ؟

[Arkshine]

يمكنني رؤية تعديلك، ولكن نظرًا لأن الهدف ليس محددًا بما فيه الكفاية، فقد تم تجاوزه بواسطة CSS الأساسي.
يمكنك رؤيته عند فحص العنصر باستخدام المتصفح، على سبيل المثال:

تحتاج إما إلى إضافة !important إلى قواعدك أو أن تكون أكثر تحديدًا مثل على سبيل المثال:

.user-profile-location {
    display: none !important;
}

.user-main .about .details .user-profile-location {
    display: none;
}

يوصى عادةً بتحديد قاعدة بشكل صحيح أولاً لتجنب استهداف عناصر غير متوقعة.

[Richie (Richie Rich)]

@Arkshine

.user-main .about .details .user-profile-location

مثير للاهتمام، شكرًا @Arkshine

أود جدًا استهداف العناصر الدقيقة على وجه التحديد، بدلاً من أن أكون عامًا و/أو أستخدم تجاوزات !important.

كيف توصلت إلى أسماء العناصر المحددة هذه فقط:

.user-main .about .details .user-profile-location {

من لوحة الأنماط على الجانب الأيمن:

أم أنني بحاجة إلى التمرير لأعلى وتدوين العناصر الأصلية يدويًا؟

لماذا لا أحتاج إلى إضافة .primary .primary-textual

[Arkshine]

@Richie

كيف استنتجت أسماء العناصر المحددة هذه فقط:

لقد نسخت والصقت فقط ما يفعله النواة:

حتى لو طبقت نفس القاعدة، يتم تطبيق TC CSS بعد النواة، لذا يعمل ذلك.

المزيد حول خصوصية CSS: Specificity - CSS | MDN.

@Richie

أم أن الحالة هي أنني بحاجة إلى التمرير لأعلى وتدوين العناصر الأصلية يدويًا؟

لا تحتاج بالضرورة إلى تضمين كل عنصر أب، فقط القسم الرئيسي، لتقليل نطاق هدفك إلى نقطة محددة بما فيه الكفاية.

[Richie (Richie Rich)]

@Arkshine

لست بحاجة بالضرورة إلى تضمين كل والد

أعتقد أن هذا هو الجزء الذي أربكني.

إنه يعمل بشكل مثالي عبر سطح المكتب والجوال الآن، وتم استهدافه بشكل خاص بدلاً من كونه واسعًا أو استخدام !important.

شكرًا مرة أخرى على المساعدة والبصيرة

[Richie (Richie Rich)]

للاكتمال، وفي حال ساعد شخصًا آخر في المستقبل.

كانت تنسيقات CSS هذه التي حاولت استخدامها لإخفاء بعض حقول المستخدم المخصصة:

/* Hide the social media platforms from the lower part of their public profile page */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

كان يجب أن تصبح هذه لتعمل عبر سطح المكتب والجوال:

/* Hide the social media platforms from the lower part of their profile page */
.user-main .about .details .public-user-fields .you-tube, .user-main .about .details .public-user-fields .vimeo, .user-main .about .details .public-user-fields .instagram, .user-main .about .details .public-user-fields .x-\(twitter\), .user-main .about .details .public-user-fields .facebook, .user-main .about .details .public-user-fields .tik-tok {
    display: none;
}