تغيير لون ولون خلفية خلفية النص المُحدّد

عندما يتعلق الأمر بتخصص مواقعنا الخيارات المتوفرة لنا لا حدود لها, فمثلا في ووردبريس و كما رأينا سابقا يمكننا فعل أشياء كثيرة منها, تغيير لون تعليقات الأعضاء, تغيير شكل القوائم الغير مرتبة, تخصيص صفحة تسجيل الدخول, عرض محتوى المقالات على شكل أعمدة…

هذه الأشياء قد تبدو دون قيمة بالنسبة لبعض الأشخاص و لا تفيد الموقع في شيء, لكن إذا فكرت في الأمر جيدا ستجد أن من خلال هذا النوع من التخصيصات يمكنك خلق الإختلاف و جعل موقعك منفردا و مميزا عن باقي المواقع التي هي متشابهة في أغلبيتها.

موضوعنا اليوم يا سادة هو تغيير لون الخلفية عند تحديد النص, إفتراضيا المتصفحات تضع خلفية زرقاء و لون خط أبيض للنصوص عند تحديدها, لكن بواسطة المحدد ::selection يمكننا التحكم في هذا التنسيق و جعله كما نريد.

اقرأ أيضا: كيف أستفيد بشكل كامل من محرر ووردبريس؟

فمثلا إذا قمت الآن بتحديد أي كلمة, جملة أو فقرة في هذه التدوينة ستجد أن الخلفة تصبح سوداء عوض الخلفية الزرقاء الإفتراضية, للحصول على هذا فقط عليك إضافة المحدد ::selection إلى ملف تنسيقات CSS للقالب المفعل و تطبق التنسيقات التي تفضلها, كهذا المثال:

::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
::selection {
background-color: #2e2f33;
color: #fff;
}

طبعا, بإمكانك تغيير الكود السداسي العشري للخلفية و للون الخط لجعله يتناسب مع التنسيقات العامة لموقعك.

المحدد ::selection يدعم color, background, background-color و text-shadow. أما background-image فيتم تجاهلها. هو مدعوم من طرف IE9+, Opera, Google Chrome y Safari. و المحدد الآخر ::-moz-selection هو الذي يدعمه Firefox.

اقرأ أيضا: نصائح مهمة لتحسين أرشفة موقعك في محركات البحث

يمكنك أيضا تطبيق هذا التنسيق فقط على أماكن معينة من الموقع, فمثلا لتطبقه فقط على الفقرات يمكنك جعله هكذا:

p ::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
p ::selection {
background-color: #2e2f33;
color: #fff;
}

هل أعجبك شرح اليوم؟ هل ستطبقه على موقعك؟
لا تبخل علينا برأيك فهو يهمنا.