ویژگی user-select در CSS تعیین می‌کند که آیا متن توسط کاربر قابل انتخاب است یا خیر، با تأثیری بر عناصر محتوایی که به عنوان بخشی از رابط کاربری مرورگر (کروم) بارگذاری شده‌اند (مثل جعبه‌های متن) جزو ندارد.
هنگامی که ویژگی user-select به‌صورت به‌صورت ارث‌بری نمی‌شود، اما مقدار اولیه “auto” آن اغلب باعث می‌شود که انگار این ویژگی به‌صورت ارث‌بری شده باشد. مرورگرهای مبتنی بر WebKit/Chromium این ویژگی را به‌صورت موروثی پیاده‌سازی می‌کنند که با مشخصات درگیر می‌شود و مشکلاتی ایجاد می‌کند. Chromium در حال حل این مشکلات برای تطابق با رفتار مشخص شده است.
مقادیر ممکن برای این ویژگی عبارتند از:
-
none: متن عنصر و زیر-عناصر قابل انتخاب نیست، اما این عناصر ممکن است در شیء انتخاب حضور داشته باشند. -
auto: مقدار auto به صورت زیر تعیین می‌شود:-
مقدار برای عناصر شبه عنصرهای ::before و ::after none است.
-
برای عناصر قابل ویرایش، مقدار استفاده شده contain است.
-
اگر والدین این عنصر مقدار user-select را all داشته باشند، مقدار استفاده شده all است.
-
اگر والدین این عنصر مقدار user-select را none داشته باشند، مقدار استفاده شده none است.
-
مقدار استفاده شده text است.
-
-
text: کاربر می‌تواند متن را انتخاب کند. -
contain: انتخاب اجازه می‌دهد که درون عنصر شروع شود، اما انتخاب را به محدوده آن عنصر محدود می‌کند. -
all: محتوای عنصر باید به صورت اتمی انتخاب شود: اگر یک انتخاب بخشی از یک عنصر را شامل شود، باید همچنین تمامی فرزندان آن شامل شود. اگر یک دابل‌کلیک یا کلیک راست در یک زیر-عنصر اتفاق بیفتد، انجمن بالاترین پدر با این مقدار انتخاب می‌شود.
none Value
این مثال نشان می‌دهد که ویژگی user-select با مقدار none از کاربران جلوگیری می‌کند تا متن را انتخاب کنند:
<html>
<head>
<style>
.text-none {
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<p>This text should be selectable.</p>
<p class="text-none">This text cannot be selected.</p>
</body>
</html>در این مثال، متن دو پاراگراف وجود دارد. پاراگراف اول عادی است و متن آن قابل انتخاب است. اما پاراگراف دوم که دارای کلاس “text-none” است، باعث می‌شود که متن آن قابل انتخاب نباشد. این امکان را برای کاربران ایجاد می‌کند که متن را انتخاب نکنند یا از طریق کپی‌برداری آن را به سایر جاها کپی نکنند.
auto Value
این مثال نشان می‌دهد که ویژگی user-select با مقدار auto به کاربران امکان انتخاب متن را می‌دهد:
<html>
<head>
<style>
p {
-webkit-user-select: auto;
user-select: auto;
}
</style>
</head>
<body>
<p>This text should be selectable.</p>
</body>
</html>در این مثال، یک پاراگراف وجود دارد که متن آن قابل انتخاب است. با استفاده از ویژگی user-select با مقدار auto، کاربران می‌توانند متن را انتخاب کنند و از طریق آن کپی بگیرند یا اقدامات دیگری روی آن انجام دهند.
text Value
این مثال نشان می‌دهد که ویژگی user-select با مقدار text به کاربران امکان انتخاب متن را می‌دهد:
<html>
<head>
<style>
p {
-webkit-user-select: text;
user-select: text;
}
</style>
</head>
<body>
<p>This text should be selectable.</p>
</body>
</html>در این مثال، یک پاراگراف وجود دارد که متن آن قابل انتخاب است. با استفاده از ویژگی user-select با مقدار text، کاربران می‌توانند متن را انتخاب کرده و از آن برای اقداماتی مانند کپی کردن یا انتقال متن به جای دیگر استفاده کنند.
all Value
این مثال نشان می‌دهد که ویژگی user-select با مقدار all به کاربران امکان انتخاب متن را با یک کلیک می‌دهد:
<html>
<head>
<style>
p {
-webkit-user-select: all;
user-select: all;
}
</style>
</head>
<body>
<p>This text can be selected with a single click.</p>
</body>
</html>در این مثال، یک پاراگراف وجود دارد که متن آن می‌تواند با یک کلیک انتخاب شود. با استفاده از ویژگی user-select با مقدار all، کاربران می‌توانند با یک کلیک بر روی متن، تمام متن موجود در پاراگراف را انتخاب کنند، بدون اینکه نیاز به کشیدن موس برای انتخاب متن باشد.
contain Value
این مثال نشان می‌دهد که ویژگی user-select با مقدار contain به کاربران امکان انتخاب متن را در محدودهٔ مرزهای پاراگراف می‌دهد:
<html>
<head>
<style>
p {
-webkit-user-select: contain;
user-select: contain;
}
</style>
</head>
<body>
<p>This text can be selected within the paragraph's boundaries.</p>
</body>
</html>در این مثال، یک پاراگراف وجود دارد که متن آن می‌تواند در محدودهٔ مرزهای پاراگراف انتخاب شود. با استفاده از ویژگی user-select با مقدار contain، کاربران می‌توانند متن را داخل محدودهٔ پاراگراف انتخاب کنند ولی از محدودهٔ پاراگراف بیرون نتوانند انتخاب کنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام