R032: إزاحات أفقية للظلال حساسة للاتجاه بلا نظير للاتجاه من اليمين إلى اليسار

box-shadow أو text-shadow المزاح جانبيًا يقع في الجهة نفسها في العربية، فالضوء الذي يوحي به قد يناقض تخطيطًا عُكس في كل ما عداه.

الفحص

المعرّف: R032
الفئة: CSS باتجاهات فيزيائية
الخطورة الافتراضية: منخفضة

متى يُطلق ملاحظة

منخفضة · ثقة منخفضة
على صفحة من اليمين إلى اليسار لا تحمل أوراق أنماطها أي تجاوز [dir=rtl] على الإطلاق، box-shadow لعنصر ظاهر مزاح 4px أو أكثر إلى جانب، أو text-shadow مزاح 2px أو أكثر. ملاحظة واحدة تمثل كل العناصر التي تتشارك الظل نفسه.
الإصلاح: اعكس الإزاحة الأفقية للاتجاه من اليمين إلى اليسار، أو استخدم قيمًا متماثلة.

ما الذي يتجاهله عمدًا

أي صفحة تحمل أوراق أنماطها تجاوزات [dir=rtl] في أي مكان، على أساس أن صاحبها يملك أصلًا طريقة للعكس؛ والظلال المزاحة إلى الأعلى أو الأسفل فقط؛ وtext-indent، فهي منطقية ولا تحتاج إلى عكس.

قبل الإصلاح وبعده

before.css

.card {
  box-shadow: 10px 6px 18px rgba(0, 0, 0, 0.1);
}

after.css

.card {
  box-shadow: 10px 6px 18px rgba(0, 0, 0, 0.1);
}
[dir="rtl"] .card {
  box-shadow: -10px 6px 18px rgba(0, 0, 0, 0.1);
}

افحصه يدويًا

حدّد العنصر وشغّل [getComputedStyle($0).boxShadow, getComputedStyle($0).textShadow] في وحدة تحكم DevTools. أول طول بعد اللون هو الإزاحة الجانبية: rgba(0, 0, 0, 0.1) 10px 6px 18px 0px يقع 10px إلى اليمين.

ما يعرضه لك التقرير

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

problems: كل إزاحة جانبية وُجدت، مع مقدارها.
boxShadow: box-shadow المحسوب للعنصر، للعثور على القاعدة التي تضبطه.

هل تخفق صفحتك في الفحص R032؟

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

افحص صفحة مجانًا تصفّح الفحوص