استخدام المحدد :target ضمن CSS لإنشاء تأثيرات واجهة المستخدم (UI) بدون JavaScript

تُعد تقنية CSS واحدة من الركائز الأساسية لتطوير واجهات المستخدم الحديثة، حيث تمنح المطورين القدرة على تصميم وتنسيق المحتوى بشكل مرئي وتفاعلي دون الحاجة إلى استخدام لغات برمجة أكثر تعقيدًا مثل JavaScript. ومن بين الأدوات المتقدمة والفعالة التي تقدمها CSS نجد المحدد :target، وهو ما يُعرف بالمُحدّد القائم على الحالة (State-Based Selector) الذي يُستخدم لتطبيق تأثيرات بناءً على عنصر تم “استهدافه” عبر جزء الرابط المعروف باسم المِرساة (Anchor fragment).

يُتيح هذا المحدد إمكانية بناء تأثيرات واجهة تفاعلية بالكامل دون الحاجة لأي كود JavaScript، مما يُسهّل عملية التطوير، ويُحسن الأداء، ويُقلل من تعقيد الصيانة. يتناول هذا المقال بشكل موسّع ودقيق آلية عمل المحدد :target، وتطبيقاته العملية، وميزاته، وقيوده، كما يتم استعراض أمثلة واقعية، وتمثيلات مرئية، وتطبيقات احترافية يمكن تنفيذها باستخدام هذه التقنية.

ما هو المحدد :target في CSS؟

المُحدِّد :target هو أحد مُحدِّدات الحالة في CSS الذي يُطبق على عنصر معين عندما يتطابق الـ ID الخاص به مع الجزء المُحدد في رابط المِرساة (fragment identifier) في شريط العنوان للمتصفح.

مثال بسيط:

html
CopyEdit
<a href="#section1">اذهب إلى القسم الأولa>
<div id="section1">هذا هو القسم الأولdiv>

ويمكن عبر CSS استخدام:

css
CopyEdit
#section1:target {
  background-color: yellow;
}

عند الضغط على الرابط، يتغير لون خلفية القسم الأول إلى الأصفر بسبب استهداف العنصر من خلال رابط المِرساة.

آلية عمل :target في المتصفح

عند النقر على رابط يحتوي على مِرساة (Anchor) مثل #section1، يقوم المتصفح تلقائيًا بالبحث عن عنصر يحمل هذا المعرف (id="section1"). إذا وُجد هذا العنصر في الصفحة، فإن CSS تُفعّل حالة :target على هذا العنصر. هذا يجعل من السهل استخدام هذه الآلية في إظهار وإخفاء عناصر، تغيير أنماطها، أو تنفيذ تأثيرات انتقالية أو تفاعلية، دون الحاجة لكتابة أي كود JavaScript.

فوائد استخدام :target في تصميم الواجهات التفاعلية

1. إزالة الاعتماد على JavaScript: من خلال استخدام :target يمكن تقليص عدد أسطر الشيفرة البرمجية، وتسهيل تطوير الواجهات دون القلق من تكامل أكواد CSS وJavaScript.

2. تحسين الأداء: CSS أخف وأسرع في التنفيذ مقارنة بجافاسكريبت، مما يؤدي إلى تحميل أسرع للصفحة وتفاعل فوري مع المستخدم.

3. سهولة في الصيانة والتحديث: عندما تكون التأثيرات مكتوبة بـ CSS فقط، فإن تعديلها أو تصحيحها يكون أسهل بكثير من التعامل مع وظائف JavaScript.

4. تحسين التوافق مع الأجهزة منخفضة الإمكانيات: CSS تعمل بكفاءة حتى في المتصفحات القديمة والأجهزة ذات الموارد المحدودة.

تطبيقات عملية باستخدام :target

1. إنشاء نظام علامات تبويب (Tabs)

يمكن استخدام :target لإنشاء واجهة من علامات التبويب تظهر محتويات مختلفة عند الضغط على كل تبويب.

html
CopyEdit
<div class="tabs">
  <a href="#tab1">تبويب 1a>
  <a href="#tab2">تبويب 2a>
  <a href="#tab3">تبويب 3a>

  <div id="tab1" class="tab-content">محتوى التبويب الأولdiv>
  <div id="tab2" class="tab-content">محتوى التبويب الثانيdiv>
  <div id="tab3" class="tab-content">محتوى التبويب الثالثdiv>
div>

css
CopyEdit
.tab-content {
  display: none;
  transition: opacity 0.3s ease;
}

.tab-content:target {
  display: block;
  opacity: 1;
}

2. القوائم المنسدلة التفاعلية

باستخدام روابط المِرساة، يمكن إظهار أو إخفاء قائمة منسدلة عند النقر على الزر.

html
CopyEdit
<a href="#menu" class="menu-toggle">القائمةa>
<div id="menu" class="dropdown-menu">عناصر القائمةdiv>

css
CopyEdit
.dropdown-menu {
  display: none;
  background: #eee;
  padding: 10px;
}

#menu:target {
  display: block;
}

3. النوافذ المنبثقة (Modals)

من الممكن بناء نافذة منبثقة كاملة التفاعل باستخدام :target.

html
CopyEdit
<a href="#modal1">فتح النافذةa>

<div id="modal1" class="modal">
  <div class="modal-content">
    <a href="#" class="close">×a>
    <p>هذه نافذة منبثقة باستخدام CSS فقط!p>
  div>
div>

css
CopyEdit
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;