نگاهی به انتخابگر متن در CSS یا CSS Selection Styling
نگاشته شده در دوشنبه ۲۲ آذر ۱۳۸۹ at ۱۰:۵۳ ب.ظ | کلیدواژه ها: css, css3, آموزش طراحی وب, اینترنت اکسپلورر, طراحی وب
CSS Selection - انتخابگر متن در CSS
همیشه وقتی متنی از یک وبسایت رو با کلیک سمت چپ موسمون انتخاب میکنیم، یک رنگ آبی خاصی میاد زیرش. مثلا همین الان این جمله رو با موستون انتخاب کنید! میبینید که رنگ متن تغییر کرد (حالا زیرش آبی نشد ایندفعه) !
CSS ابزاری هست که به ما کمک میکنه آرایش متن و صفحه رو مطابق میلمون تغییر بدیم و چیزی رو بسازیم که دوست داریم. درسته؟ خب روزبهروز CSS در حال پیشرفته و امکانات جدید رو در اختیار طراحان وب قرار میده. نکته ای که امروز میخوام دربارش کمی صحبت کنم، کنترل انتخابگر متن در 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; }
این امکان بسیار ساده و خوب، میتونه یکی از نکات مثبت وبسایت شما باشه.
چقدر ساده بود. مگه نه؟ 
مباحثه
ببینید دیگران چه نظری دارند...
خوب بوود دوست عزیز مقاله جالبی ترتیب دادی .
یه خواهش دارم اگر لطف کنی یا اجازه برداشت این مطلب بهمون بده یا اگر دوست داره بهمون بپیوند .
محمد رشیدی پاسخ در تاريخ آذر ۲۴م, ۱۳۸۹ ۲۰:۴۳:
سلام.
ممنونم.
با ذکر منبع برداشتش هیچ موردی نداره دوست عزیز.
ببخشید، آخر نظرتون رو متوجه نشدم. اگر ممکنه برات توضیح بدید خوشحال میشم.
موفق باشید
دوست عزیز یعنی اگر مایل بیا داخل والفا بنویس !
محمد رشیدی پاسخ در تاريخ دی ۱م, ۱۳۸۹ ۲۱:۲۵:
از این همه لطف واقعا سپاسگذارم.
ممنونم دوست من.
من این بلاگ رو راه اندازی کردم و به دلیل مشغله بسیار زیاد وقت بروز رسانیش رو ندارم.
از طرفی هم سایت مجله علمی کائسنا که کار اصلی من روی اون هست اجازه فعالیت و همراهی با شما رو بهم نمیده.
میتونیم همدیگه رو لینک کنیم.
موفق و پایدار باشید.
سلام
نمیدونم جای درستی برای مطرح کردنش هست یا نه
من یه قالب وردپرسو برای خودم (البته نه کاملا استاندارد!)فارسی کردم .. (قالب سمفونی از Yoo theme)
قالب خوبیه .. راضی ام … فقط تنها مشکلی که باعث شده نتونم ازش استفاده کنم .. مشکل بهم ریختگی در متنه موقعی که کلمات فارسی و انگیلیسی باهم استفاده میشن ..
در ضمن برای راست چین کردنش از Rtl استفاده نکردم ..
در قسمت Body از Text-align:right; استفاده کردم
محمد رشیدی پاسخ در تاريخ اسفند ۲۷م, ۱۳۸۹ ۱۸:۴۵:
سلام.
باید حتما direction:rtl قرار بدید تا وقتی از متنهای فارسی و انگلیسی باهم استفاده میکنید به هم نریزه. در غیر اینصورت کل جمله ها به هم میریزن و تقریبا غیرقابل خوندن.
موفق باشید.