خاصية user-select
آخر تحديث: 2026-09-13
user-select خاصية user-select
تتحكم الخاصية user-select فيما إذا كان بإمكان المستخدمين تحديد النص باستخدام الماوس. عند ضبطها على none، لا يمكن تحديد النص داخل العنصر — وتُستخدم عادةً للأزرار والتسميات والأيقونات التي لا حاجة فيها للنسخ، مما يمنع التحديد العرضي لمحتوى غير ذي صلة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
user-select: auto | none | text | all;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | none | text | all | كلمة مفتاحية | سلوك تحديد النص للمستخدم |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| user-select | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： ليست user-select خاصية قياسية في CSS، لكن دعم المتصفحات لها واسع الانتشار؛ وللتوافق، استخدم أيضًا بادئة -webkit-user-select.
تحذير： لا تضبط user-select: none حيث يحتاج المستخدمون إلى نسخ المحتوى (كتل التعليمات البرمجية، النص المقتبس) — فذلك سيضر بقابلية الاستخدام.
❓ الأسئلة الشائعة
Qما الفائدة من قيمة user-select: all عند نسخ النص؟
Aيتيح all نقرة واحدة أو التحديد الأول لاختيار كل النص داخل العنصر دون سحب. وهو مناسب لرموز الدعوة، ومفاتيح API، وأرقام الطلبات， ومقتطفات التعليمات البرمجية — أي شيء يحتاج إلى تحديد الكل بنقرة واحدة للنسخ， ويسرّع النسخ بشكل ملحوظ. لاحظ أنه يلغي text/none على العناصر الفرعية： فيعمل الكتلة بأكملها كوحدة تحديد واحدة.
Qهل يمكن لـ user-select: none منع المستخدمين من نسخ محتوى الصفحة؟
Aلا. إنها قيود عرضية بحتة： لا يمكن تحديد النص بالسحب， لكن المحتوى لا يزال موجودًا في DOM， ويمكن للمستخدمين استرداده عبر عرض مصدر الصفحة， أو أدوات المطور， أو حتى بتعطيل CSS. ولا بد أن يعتمد حماية المحتوى الحقيقية على التحكم بالأذونات في الواجهة الخلفية. وأما user-select: none فلا تحسّن سوى تجربة الواجهة (تجنب التحديد العرضي)； وليست إجراءً أمنيًا.
Qما الفرق بين user-select والعنصر الزائف ::selection؟
Aتتحكم user-select فيما إذا كان يمكن تحديد النص من الأساس； أما ::selection فتتحكم في مظهر النص المحدد — لون الخلفية， ولون النص， وغير ذلك. والاثنان يكملان بعضهما： تسمح user-select: text بالتحديد， وتُنمِّق ::selection حالة التحديد. ادمجهما لبناء تأثيرات تحديد تحمل هوية العلامة التجارية.
Qلماذا أحتاج إلى بادئة -webkit-user-select لـ user-select؟
Aظلت user-select تجريبية لفترة طويلة. تقبل المتصفحات الحديثة الصيغة دون بادئة， لكن Safari والإصدارات القديمة من Chrome/Edge كانت تتطلب -webkit-user-select. وللتوافق مع المحركات الأقدم， جرت العادة على كتابة الأسطر الثلاثة： -webkit-user-select， و -moz-user-select， والخاصية دون بادئة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
