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

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

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

CSS Selection  -  انتخابگر متن در 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; }

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

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

تمرکز موضوع: ,,,, نوشته شده در: ۲۲ آذر ۱۳۸۹

درباره محمد رشیدی

من یک کارآفرین خلاق و جوان هستم. تحصیلات، تخصص و فعالیتم در حوزه وب و تجارت الکترونیک است. عاشقانه و با تمام وجود در این زمنیه تلاش و فعالیت میکنم. تفکری بلندمدت دارم. به کیفیت به شدت اهمیت میدهم. به عنوان یک مخاطب به موسیقی هم خیلی علاقه دارم. در ابعاد مختلف وب، برنامه نویسی حرفه‌ای میکنم و در سالهای اخیر، بخش بسیار زیادی از مطالعاتم در زمینه کسب و کار، داده کاوی، وب اپلیکیشن، طراحی رابط کاربری، کاربردپذیری و تجربه کاربر قرار گرفته است.
نظرات و دیدگاهها (6)
    • از این همه لطف واقعا سپاسگذارم.

      ممنونم دوست من.

      من این بلاگ رو راه اندازی کردم و به دلیل مشغله بسیار زیاد وقت بروز رسانیش رو ندارم.

      از طرفی هم سایت مجله علمی کائسنا که کار اصلی من روی اون هست اجازه فعالیت و همراهی با شما رو بهم نمیده.

      میتونیم همدیگه رو لینک کنیم.

      موفق و پایدار باشید.

  1. سلام

    نمیدونم جای درستی برای مطرح کردنش هست یا نه

    من یه قالب وردپرسو برای خودم (البته نه کاملا استاندارد!)فارسی کردم .. (قالب سمفونی از Yoo theme)

    قالب خوبیه .. راضی ام … فقط تنها مشکلی که باعث شده نتونم ازش استفاده کنم .. مشکل بهم ریختگی در متنه موقعی که کلمات فارسی و انگیلیسی باهم استفاده میشن ..

    در ضمن برای راست چین کردنش از Rtl استفاده نکردم ..

    در قسمت Body از Text-align:right; استفاده کردم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>