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

في بعض الأحيان وعوضاً عن الانتقال إلى صفحة جديدة، فإن الروابط (الوسم <a>) تنقلنا إلى فقرة أو عنصر آخر موجود ضمن نفس الصفحة، هذا الأسلوب هو المستخدم للتنقل ضمن مواقع الانترنت ذات الصفحة الواحدة.

يستخدم المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما. حيث يتم تطبيق هذه التنسيقات على الفقرة الهدف عند النقر على ذلك الرابط.

على سبيل المثال، لو كان لدينا رابط يشير إلى فقرة لديها المعرّف "further-reading"، أي بشكل مشابه للشِفرة التالية:
 

<a href="#further-reading" title="Further reading resources" />
<!– ... –>
<section id="further-resources" >
  <!— ... —>
</section>

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

#further-resources:target {
  animation: highlight .8s ease-out;
}

@keyframes highlight {
  0% { background-color: #FFFF66; }
  100% { background-color: #FFFFFF; }
}

نستخدم الخاصية animation ضمن CSS لتطبيق تنسيق ما بشكل متدرج، وبالتالي فإننا سنستعمل هذه الخاصية من أجل تطبيق فكرة الإضاءة وبالتالي تغيير لون الخلفية ضمن فترة زمنية كافية لملاحظتها من قبل القارئ.

يمكن مشاهدة هذا المثال، يقوم المثال بتطبيق تنسيق معين على الفقرة المشار إليها عبر الرابط، يمكننا أيضاً تطبيق تأثيرات أخرى مثل زيادة حجم العناصر أو تغيير حالة ظهورها واختفائها والعديد غيره.

مؤخراً قمت باستخدام هذه التقنية على موقعي الخاص، ضمن الترويسة الرئيسية في الصفحة، حيث أضفت رابط لعملية البحث وعند الضغط عليه يتم إظهار عنصر <div> كطبقة تغطي الصفحة بأكملها (تتراكب فوق محتوياتها) ويظهر ضمنها مربع البحث.

<a href="#search">Search</a>
<!– ... –>
<div id="search">
  <a href="#" class="overlay-close">Close</a>
  <h4>Search articles archive.</h4>
  <!– ... –>
</div>

عنصر التراكب <div> (طبقة البحث) بالبداية يكون غير ظاهر وذلك عبر إعطاء خاصية الشفافية opacity القيمة صفر 0، ولكي يبقى هذا العنصر ثابتاً في مكانه نقوم بإعطاء الخاصية position القيمة fixed. كما يجب أن لاتمنع هذه الطبقة المتراكبة عمل باقي المحتويات التي تغطيها ولذلك نعطي الخاصية pointer-events القيمة none.

#search-overlay {
  position: fixed;
  top: 1em;
  bottom: 1em;
  right: 1em;
  left: 1em;
  /* ... */
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
}

عند الضغط على أيقونة البحث, يتم تطبيق الخصائص الموجودة ضمن المحدد target: للعنصر المشار إليه، وفي هذا المثال يتم إضهار طبقة البحث التي تغطي الصفحة وفيها مربع البحث، حيث تكون عملية الظهور بشكل انسيابي تدريجي عبر تطبيق الخاصية transition على خاصية الشفافية opacity.

#search-overlay:target {
  opacity: 1;
  pointer-events: auto;
}

إلى هنا نكون قد انتهينا من نصف المهمة وهي إظهار طبقة البحث، وبقى لدينا تنفيذ آلية إخفاء هذه الطبقة عندما يرغب المستخدم بذلك. وبالتالي يجب أن تحتوي طبقة البحث على رابط إغلاق يعيد إظهار الصفحة كسابق عهدها، يمكن تطبيق هذا عبر إعطاء معرف ID إلى الوسم body أو html، ومن ثم نحدد هذا المعرف كقيمة للخاصية href التابعة لرابط إغلاق طبقة البحث. يمكن بأسلوب آخر إعطاء القيمة # للخاصية href السابقة ولكن هذا الأسلوب يؤدي إلى إضافة الرمز # على عنوان الصفحة URL.

حالما يتم الضغط على رابط الإغلاق، نقوم بتغيير خصائص طبقة البحث لإخفائها عبر إعطاء الخاصية opacity القيمة صفر 0. وهنا أيضاً يمكن تطبيق الخاصية transition على الخاصية opacity وذلك لجعل طبقة البحث تختفي بشكل تدريجي.

#search-overlay:target {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .3s ease-in-out;
}

يمكن تجربة هذا المثال، عموماً يمكن الاستفادة من تأثير الخاصية animation على باقي الخصائص لتطبيقها بشكل متدرج، حيث نستطيع استخدامها لتغير حجم العنصر أثناء انبثاقه للحصول على تأثير الصندوق المنبثق، حيث يظهر في منتصف الصفحة بشكل واضح ومميز مع جعل باقي الصفحة تبدو بألوان باهتة. وبالتالي يمكن تطوير هذا الأمر أكثر للحصول على معرض صور كامل بأسلوب الصندوق المنبثق كما يظهر في هذا المثال (المثال من عمل Manoela Ilic).

مقالة أخرى تتحدث عن كيفية عمل معرض صور بأسلوب الصندوق المنبثق وباستخدام المحدد target: من تأليف Christian Heilmann، كما يوجد معارض صور أخرى مطبقة أيضا بواسطة CSS عبر المحدد target:.

إلى هنا نأتي إلى نهاية هذه المقالة، أرجو أن تكون قد اتضحت الصورة حول استخدام المحدد selector: مع بعض أشهر التطبيقات التي يتم استخدامه من أجلها.

ترجمة -وبتصرّف- للمقال: Using The CSS :target Selector To Create JavaScript-less UI Effects لصاحبته: سارة سويدان.