نگاهی به انتخابگر متن در CSS یا CSS Selection Styling

همیشه وقتی متنی از یک وبسایت رو با کلیک سمت چپ موسمون انتخاب میکنیم، یک رنگ آبی خاصی میاد زیرش. مثلا همین الان این جمله رو با موستون انتخاب کنید! میبینید که رنگ متن تغییر کرد (حالا زیرش آبی نشد ایندفعه) !

CSS ابزاری هست که به ما کمک میکنه آرایش متن و صفحه رو مطابق میلمون تغییر بدیم و چیزی رو بسازیم که دوست داریم. درسته؟ خب روزبه‌روز CSS در حال پیشرفته و امکانات جدید رو در اختیار طراحان وب قرار میده. نکته ای که امروز میخوام دربارش کمی صحبت کنم، کنترل انتخابگر متن در CSS هست. همینطور که در تصویر مجاور میبینید، میشه رنگ زمینه رو به دلخواه تغییر داد. من اینجا یه رنگ آبی باز استفاده کردم.

CSS Selection – انتخابگر متن در CSS

بله باور کنید، این امکان در CSS وجود داره! اما خب هر مرورگری هم نمیشناسه این رو! در ادامه خواهیم دید که تنها مرورگرهای وبکیت ( webkit ) و موزیلا و از همه جالبتر(!) اینترنت اکپلورر ۹ به بعد (خدارحم کنه!) اون رو پشتیبانی میکنن!

این رنگ به صورت پیشفرض در ویندوز یک رنگ آبی زشت هست! درحالی که مک کمی این رنگ رو آرومتر انتخاب کرده و کمی به کاربراش رحم کرده! :دی

برای استفاده از این امکان در CSS کافیه از کد زیر استفاده کنید:

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

البته در صورتی که از کد بالا استفاده کنید، ممکنه جواب نگیرید یا اینکه این رنگها روی تمام صفحه شما اعمال بشه! اما اگر به صورت زیر، آدرس دقیقتری بدید و بگید مثلا کدوم بخش از صفحه، رنگ زمینه متن انتخاب شدش اینطوری باشه، خیلی بهتره.

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }

/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }

این امکان بسیار ساده و خوب، میتونه یکی از نکات مثبت وبسایت شما باشه.

چقدر ساده بود. مگه نه؟