کنترل انتخاب متن (text selection) با استفاده از CSS

شما با استفاده از CSS می‌توانید نحوه‌ی عملکرد و ظاهر انتخاب متون را در سند خود تحت کنترل داشت باشید. با استفاده از این قابلیت‌های CSS می‌توانید در موقعیت‌های مختف، در صورت نیاز تجربه‌ی استفاده از وب سایتتان را بهبود دهید.

انتخاب تمام متن

بعضی وقت‌ها نیاز است که در قسمتی از وبسایتی، تمام یک متن را انتخاب کنیم. چه بهتر که این اتفاق با یک کلیک بر روی هر بخشی از آن متن، اتفاق بیفتد و کارمان راحت‌تر شود. بیش‌تر استفاده‌ی این قابلیت برای کپی کردن یک متن نسبتا طولانی است.

این کار را می‌توانید با استفاده از قطعه کد ساده‌ی CSS زیر به راحتی و بدون استفاده از جاوااسکریپت،‌انجام دهید:

div {
    -webkit-user-select: all; /* for Safari */
    user-select: all;
}

البته لازم به ذکر است که select all بر روی iOS کار نمی‌کند.

انتخاب تمام متن و بعد انتخاب بخشی از آن

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

ابتدا باید از tabindex استفاده کنید تا بتوانید المنتی که حاوی متن مورد نظر شماست، قابل فوکوس (focuse) شود. شما با این کار به CSS امکان تشخیص این را می‌دهید که بداند چه وقتی المنت کلیک شده است:

<code tabindex="0">code snippet goes here</code>

سپس این قطعه CSS را باید استفاده کنید:

code {
    -webkit-user-select: all;
    user-select: all;
}

code:focus {
    animation: select 100ms step-end forwards;
}

@keyframes select {
    to {
        -webkit-user-select: text;
        user-select: text;
    }
}

ایده‌ی قطعه کد CSS بالا این است که در کلیک اولیه‌ی کاربر user-select: all; رخ دهد و از بعد آن بعد فوکوس شدن روی متن توسط کاربر، به حالت عادی user-select: text; برگردیم تا در نهایت بشود به شکلی آزادانه قسمت دلخواهی از متن را انتخاب کرد. قسمت جالب این کد زمان‌بندی آن است. اگر از قسمت انیمیشن کد بالا صرف نظر کنیم، در همان کلیک اول کاربر (بدون درنگ پس از انتخاب شدن تمام متن) قسمت مورد نظر سند شما وارد فاز بعدی که انتخاب بخش دلخواهی از متن است نیز می‌شود. پس در این جا ما با استفاده از انیمیشن سی اس اس توانسته ایم که انتخاب شدن قسمتی از متن را از انتخاب تمام متن با یک کلیک سریع اولیه، متمایز کنیم.

باز هم باید گفت که select all بر روی iOS کار نمی‌کند. اما سافاری دسکتاپ از این قابلیت پشتیبانی کرده.

جلوگیری از انتخاب متن

علاوه بر موارد بالا، ما می‌توانیم با استفاده از CSS از انتخاب شدن یک متن نیز جلوگیری کنیم:

label {
    -webkit-user-select: none;
    user-select: none;
}

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

اگر بخواهیم چند مورد استفاده از این قابلیت CSS را بگوییم می‌توان به disclosure widgetها و دکمه‌های تقلبی که به عنوان مثال با <div> ساخته می‌شوند، اشاره کرد. البته که ترجیح بر این است که در موارد لازم از خود <button> به جای دکمه‌های تقلبی که با استفاده از دیگر تگ‌های HTML ساخته می‌شوند استفاده کنید؛ هم به دلایل معنایی (semantic) و هم به دلایل دسترسی بخشی (accessibility) به صفحات وب‌مان.

به شکل گزینشی حق انتخاب متون را بدهید

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

پس می‌توان از user-select: none; بر روی بخش‌های دلخواهی از متن استفاده کرد تا آن بخش‌ها به طور خودکار در هنگام کپی یا پیست شدن، در متن غایب باشند.

استایل دادن به متن انتخاب شده

شما می‌توانید با استفاده از سودو المنت psedu element) ::selection) باز هم به راحتی با استفاده از فقط CSS به تغییر دادن ظاهر متن انتخاب شده توسط کاربر، بپردازید. البته که گزینه‌هایی که برای این استایل‌دهی دارید، محدود هستند و فقط ۳ قابلیت در این دسته می‌گنجد. رنگ (color)، رنگ پس‌زمینه (background-color) و سایه‌ی متن (text-shadow). دیگر پراپرتی‌هایی هم برای این مورد وجود دارند که بهتر است از استفاده‌ از آن‌ها پرهیز کنید؛ چرا که برخی مرورگرها به خوبی با آن‌ها سازگاری ندارند.

در زیر مثالی از استایل‌دهی به تگ <p> که انتخاب شده است را می‌بینیم:

p::selection {
    color: #fffaa5;
    background-color: #f38630;
    text-shadow: 2px 2px #31808c;
}

آخرین نکته

یک پراپرتی دیگر نیز در این زمینه وجود دارد که بیان آن خالی از لطف نیست. User-select: contain را می‌توانید برای محدود کردن متن انتخابی به داخل یک المنت استفاده کنید. المنتی مانند <textarea>. البته این قابلیت پشتیبانی خوبی در مرورگرهای مختلف ندارد.

تمام المنت‌های قابل ویرایش توسط کاربر، مثل textarea، به گونه‌ای طراحی شده‌اند که گویی user-select: contain; را در درون خود دارند و البته که سودو المنت‌های ::before و ::after نیز غیرقابل انتخاب هستند به نحوی انگار که user-select: none را در دل خود دارند. شما نمی‌توانید این ویژگی‌ها را بازنویسی (override) کنید.

نتیجه‌گیری

این مقاله در رابطه با CSS بود و به همین جهت تمام نکات آن عاری از هر گونه جاوااسکریپت بود تا شما نیز بتوانید با قابلیت‌های کم‌تر دیده شده‌ی CSS آشنا شوید و بدانید بسیاری از کارهایی که با JS انجام می‌دهید، به سادگی با CSS قابل اجرا به شکلی ساده‌تر و سبک‌تر و بهینه‌تر هستند. امیدوارم شما از آن دسته افرادی نباشید که CSS را دست‌کم می‌گیرند!

اگر نیاز به کنترل همه جانبه و کامل بر روی انتخاب متون (text selection) در صفحات وب‌تان دارید، پیشنهاد می‌کنم که API انتخاب جاوااسکریپت را مطالعه کنید و نکته‌ی دیگر این که باید بدانید با استفاده از جاوااسکریپت می‌توانید بر روی کلیپ بورد (clipboard) کابران نیز دسترسی داشته باشید و با آن تعامل کنید.

منبع