آموزش ویژگی user-select در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی user-select در CSS با من همراه باشید.

آموزش ویژگی user-select در CSS

Free-Learn

ویژگی user-select در CSS

با استفاده از ویژگی user-select در CSS میتوان مشخص کرد که آیا کاربر حق انتخاب کردن متن / محتوا را داشته باشد یا خیر! مثلا میتونیم کاری کنیم که کاربر نتونه متن رو با ماوس انتخاب کنه که بخواد کپیش کنه.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی user-select را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : در باکس اول کاربر نمیتونه متن رو با ماوس انتخاب کنه ولی در باکس دوم به محض کلیک بروی متن، کل متن در حالت انتخاب شده قرار میگیرد.

امتحان کنید

Free-Learn

جدول مشخصات ویژگی user-select در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.userSelect=”none”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی user-select در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- و -ms- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام ویژگی Chrome Firefox Opera Safari IE
user-select ۵۴٫۰
۴٫۰ -webkit-
۶۹٫۰
۲٫۰ -moz-
۶۸٫۰
۱۵٫۰ -webkit-
۳٫۱ -webkit- ۱۰٫۰ -ms-

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی user-select در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – توسط مرورگرها مشخص میشود
none اجازه انتخاب متن به کاربر داده نمیشود
text اجازه انتخاب فقط متن به کاربر داده میشود
all وقتی بروی متن کلیک شود ، بصورت خودکار تمامی متن به حالت انتخاب شده در میاد
contain انتخاب محتوای موجود در یک عنصر محدود شده
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

مقدار auto که توسط مرورگرها مشخص میشود، تحت شرایط زیر می باشد، یعنی مقدار auto در حالت های زیر میتونه متفاوت باشه :

  • اگر بروی شبه عناصر before:: و after:: استفاده شود مقدارش میشه none
  • اگر بروی یک عنصر قابل ویرایش ( Editable ) استفاده شود مقدارش میشه Contain
  • در غیراینصورت اگر مقدار ویژگی user-select در عنصر پدر برابر باشد با all مقدار auto میشه all
  • در غیراینصورت اگر مقدار ویژگی user-select در عنصر پدر برابر باشد با none مقدار auto میشه none
  • اگه هیچکدوم از حالت های بالا نبود مقدار auto میشه text

برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.

  • -webkit- برای مرورگر کروم و سافاری و اُپرا
  • -moz- برای مرورگر موزیلا فایرفاکس
  • -ms- برای مرورگر اینترنت اکسپلورر

Free-Learn

دریافت PDF یا پرینت این مطلب