كل ما تريد معرفته عن العنصرين الزائفين after:: وbefore::

يُعتبر هذين العنصرين من العناصر المهمة التي يجب على أيّ مطور ويب أن يعرفها ويعرف كيفية استخدامها في بناء المواقع وفي هذا الدرس سوف تتعرف عليها وعلى كيفية استخدامها وسوف نتطرق للعديد من الأمثلة حتى تكون الفائدة أكبر.

تعريف بالعنصرين

يُستخدم هذين العنصرين لإدخال محتوى معين (نص، أيقونة...الخ) بعد أو قبل المحتوى الموجود داخل أحد عناصر الصفحة (يمكنك من الاسم معرفة أنّ after:: تقوم بإدخال المحتوى بعد وأنّ before:: تقوم بإدخال المحتوى قبل). ويتم إدخال المحتوى باستخدام الخاصية content ويتم عرض المحتوى المُدخل بجانب - أي على نفس الخط (inline)- المحتوى الأصلي للعنصر.

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

هنا يأتي دور هذين العنصرين، فيمكن باستعمالهما أن نُضيف الأيقونة التي نريدها إمّا في بداية/قبل الروابط (باستعمال before::) أو نهاية/بعد (باستعمال after::) الروابط، وفي هذا المثال سوف نستعمل after:: لإضافة الأيقونة  في نهاية جميع الروابط التي لها class بالاسم "external".

Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together! 

الكود التالي يوضح كيفية فعل ذلك، بحيث تظهر الأيقونة إلى جانب الرابط على نفس الخط:

.external::after {
  content: url(external-link.png);
  padding-left: 5px; /* create some space between the image and the content before it */
}

لاحظ أننا استعملنا الخاصية content مع الدالة ()url لإضافة الصورة. ضع في الحسبان أنّ الصّور التي يتم إدخالها باستخدام العناصر الزائفة لا يمكن إعادة ضبط حجمها لذلك يجب عليك أن تضبط حجمها قبل أن تستعملها.

معاينة النتيجة النهائية

لنأخذ مثالًا آخر ولكن هذه المرة باستعمال before::. تخيّل أنّ هناك عنصر blockquote وبداخله يوجد بعض النصوص، فيمكننا باستعمال before:: أن نقوم بتزيين هذا العنصر عن طريق إدخال علامة اقتباس قبل النص الموجود بداخله، بحيث سيتم إضافة علامة الاقتباس ولكنها لن تظهر في DOM.

<blockquote>
    Your present circumstances don't determine where you can go; they merely determine where you start.—Nido Qubein
</blockquote>

الكود التالي سيقوم بإضافة علامة الاقتباس إلى عنصر blockquote باستعمال before::، وسوف تظهر علامة الاقتباس إلى جانب النص.

blockquote::before {
    content: "\201C";
    /* style the quote */
    color: deepPink;
    font-size: 3em;
    position: relative;
    top: 20px;
}

قمنا باستعمال خاصية content ووضعنا داخلها قيمة اليونيكود (Unicode) الخاصة بعلامة الاقتباس (201C\). هذه هي الطريقة التي يتم بها عادة إضافة الرموز (glyphs) في CSS.
معاينة النتيجة النهائية.

وبما أنّ المحتوى الذي يتم إدخاله باستخدام الفئات الزائفة لا يتم إدخاله وإظهاره في DOM فإنّك لن تستطيع رؤيته أو التعديل عليه باستخدام أدوات المطورين (Developer tools) الموجودة في المتصفحات. ولكن لحسن الحظ فإنّ متصفحات Google Chrome+32 وإضافة Firebug الخاصة بمتصفح Firefox يسمحون لك برؤية مكان وجود العناصر الزائفة في DOM، وأيضًا يمكنك رؤية تنسيقات CSS الخاصة بتلك العناصر والتعديل عليها.

ولرؤية ذلك بشكل مباشر يمكنك الدخول على المعاينات الموجودة في الأعلى ووضع مؤشر الفأرة على الأيقونة والنقر عليها بزر الفأرة الأيمن ومن ثم اختيار "Inspect element" (يجب أن ترى شيء شبيه بالصورة التالية):

يمكنك من خلال المعاينة أو الصورة الموجودة في الأعلى ملاحظة أنّ المحتوى المُضاف باستخدام after:: يظهر/يتموضع بجانب وبعد المحتوى الموجود داخل علامتي الإقتباس.

يمكنك أيضًا من خلال الصورة الموجودة في الأعلى ملاحظة أنّ المحتوى المُضاف باستخدام before:: يظهر/يتموضع بجانب وقبل المحتوى الموجود داخل علامتي الإقتباس.

وبما أنّ محتوى after:: يتم إدخاله بعد المحتوى الأصلي للعنصر فإنّ هذا يعني أنّ العنصر الزائف نفسه (after:: في حالتنا هذه) سوف يظهر فوق العناصر الأخرى التي تأتي قبله في DOM. (نقصد بكلمة "فوق" هنا كيفية ظهور/تكدُّس العناصر فوق بعضها البعض بالنسبة للخاصية z-index).

ونفس الأمر ينطبق على ::before، فالمحتوى المُدخل بواسطته يتم إدخاله بعد المحتوى الأصلي للعنصر وهذا يعني أنّ العنصر الزائف نفسه (::before في حالتنا هذه) سوف يظهر أسفل العناصر الأخرى التي تأتي بعده في الـDOM.

ضع في الحسبان أنّه يمكنك إدخال أي نوع من المحتوى مع العناصر الزائفة، فيمكنك مثلًا إدخال حروف خاصة (characters)، نصوص أو حتى صور. فعلى سبيل المثال جميع التعريفات/الأكواد التالية صحيحة:

.element::after {
    content: url(path/to/image.png); /* an image, for example, an icon */
}

.element::after {
    content: "(To be continued...)"; /* a string */
}

.element::after {
    content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}

يمكن أيضًا للخاصية content أن تحتوي على عدّاد (counter) ويمكنك كذلك أن تتركها فارغة إن أردت. فمن أحد استعمالات العناصر الزائفة عندما تكون خاصية content الخاصة بها فارغة هو التخلص من floats في عنصر ما. يمكنك أيضًا تنسيق العناصر الزائفة مثلها مثل أي عنصر آخر، فتستطيع مثلًا إعطائها الخصائص float ،position أو حتى animation ( ضع في الحسبان أنّ خاصية animation لا يمكن استعمالها مع العناصر الزائفة في جميع المتصفحات، فالمتصفحات التي تدعم ذلك هي (Chrome 26+، Firefox 4+، Safari 6.1+، Opera (post Blink وكذلك متصفحات +Internet Explorer 10. إنّ قدرتنا على تنسيق العناصر الزائفة كما لو كانت عنصرًا حقيقيًا في الصفحة أدى إلى استعمال هذه العناصر في معظم الحالات لأغراض تجميلية، فالعناصر الزائفة مستخدمة بكثافة لإنشاء الأشكال الهندسية (geometric shapes) في CSS. فيمكننا مثلًا أن نقوم بإنشاء نجمة ثمانية باستخدام عنصر ما والعنصر الزائف الخاص به، وحتى نحصل على هذه النجمة سنقوم بإنشاء مربّعين؛ الأول باستعمال العنصر نفسه والثاني باستعمال العنصر الزائف بحيث نقوم بتنسيق العنصر الزائف ونعطيه عرض (width) وارتفاع (height) بنفس عرض وارتفاع العنصر الأب/الرئيسي ومن ثم موضعته إلى أعلى العنصر الأب باستعمال position: absolute وأخيرًا تدويره بمقدار 45 درجة.

/* 
    The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. 
    By removing the opacity values, you can see a fully opaque eight-point star 
*/
.element {
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    position: relative;
    margin: 100px auto;
}

.element:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    transform: rotateZ(45deg);
}

لاحظ أننا تركنا الخاصية content فارغة وذلك لأننا استخدمنا العنصر الزائف لأغراض تجميلية فقط.

معاينة النتيجة النهائية.

ضع في الحسبان أنّه يمكننا الحصول على نفس النتيجة السابقة باستعمال before:: فلن يكون هناك أي اختلاف في النتيجة.

بعض الملاحظات

1. هل تستعمل (:) أم (::)

قد تكون قد صادفت في أحد المرات وجود العنصر الزائف after بهذا الشكل after: بدلًا من after:: (نفس الأمر ينطبق على العنصر الزائف before:).

في CSS1 وCSS2 كان يتم تعريف العناصر الزائفة باستعمال (:) بدل (::) كما هو الحال في الفئات الزائفة (hover: على سبيل المثال). ولكن الأمر تغيّر في CSS3 فقد أصبح يتم تعريفها باستعمال (::) بدل (:) وذلك حتى نستطيع التمييز بينها وبين الفئات الزائفة، أي أنّ العناصر الزائفة أصبحت تُكتب باستعمال (::) والفئات الزائفة بقيت تُكتب باستعمال (:).

/* old CSS2 syntax */
.element:after {
    /* content and styles here */
}

/* new CSS3 syntax */
.element::after {
    /* content and styles here */
}

جميع المتصفحات التي تدعم (::) تقوم أيضًا بدعم (:) (أي أنّك إذا كتبت العناصر الزائفة بهذا الشكل: after: أو after:: فلن يكون هناك مشكلة)، ولكن إذا أردت أن تدعم متصفح Internet Explorer 8 فعليك أن تستخدم (:) لأنّ هذا المتصفح لا يدعم العناصر الزائفة إذا كُتبت باستعمال (::).

لاحظ أننا استعملنا (:) بدل (::) في جميع المعاينات والأكواد التي عرضناها سابقًا وذلك حتى نضمن أفضل دعم لجميع المتصفحات وحتى يستطيع مستخدموا Internet Explorer 8 من رؤية المعاينات بدون مشاكل.

2. الوصولية (Accessibility)

قلنا مسبقًا بأنّ المحتوى المُضاف بواسطة العناصر الزائفة لا يتم إدخاله أو إظهاره في DOM وإنّما يظهر بصريًا فقط (أي يمكنك رؤيتها على الشاشة). وبالتالي فإنّ قارئات الشاشة (screen readers) لن تكون قادرة على رؤية المحتوى المُضاف بواسطة العناصر الزائفة أو الوصول إليه. ولهذا السبب فإنّه يُنصح بعدم استعمال العناصر الزائفة لإدخال أي محتوى تعتقد أنّه مهم في الموقع.

فالعناصر الزائفة تُستخدم في الغالب لإدخال وتنسيق المحتوى التجميلي ولا يجب عليك استخدامها في إدخال المحتوى المهم والذي قد يكون له صلة بمعنى المحتوى واكتماله في الصفحة.

وبما أنّ المحتوى المُضاف بواسطة العناصر الزائفة لا يتم إدخالها أو إظهارها في DOM، فهذا يعني أننا لن نستطيع ربطها بمعالجات الأحداث (event handlers) في لغة جافاسكربت.

أمثلة إضافية

يمكن استعمال العناصر الزائفة مثل ::after لفعل الكثير من الأشياء وإنشاء الكثير من التأثيرات، فبالإضافة إلى الأمثلة التي رأيتها سابقًا فيمكنك الإطلاع على المقالات التالية للمزيد من المعلومات عن هذه العناصر.

• استخدام العناصر الزائفة :after و:before.
  1- استخدام after:: لتنسيق الروابط الموجودة في تنسيقات الطباعة (print style sheets).
  أحد أكثر الاستخدامات المفيدة للعنصر الزائف after:: يظهر في تنسيقات الطباعة، ففي الأوراق المطبوعة لا يمكننا النقر على الروابط كما هو الحال في الأجهزة الالكترونية كالحواسيب والهواتف، وبالتالي فسوف تحتاج في الغالب بأن تضع عنوان الرابط (URL) بجانب الرابط مباشرة حتى يستطيع القارئ ان يقوم بزيارة الرابط إن أراد ذلك. ولمعرفة كيفية فعل ذلك أنظر إلى الكود التالي:

  @media print { a[href]::after { content: " (" attr(href) ")"; } } 

  يحتوي المثال في الأعلى على عدة مبادئ من مبادئ CSS مثل مُحدّد الصفة (a[href]) (attribute selector) وخاصية content وكاذلك الدالة ()attr وهذا شرح لما تفعله كل واحدة منها:
• يقوم مُحدّد الصفة ([a[href) بتحديد جميع الروابط (وسوم a) الموجودة في الصفحة والتي تملك الصفة href.
• يُخبر العنصر الزائف after:: المتصفح بأن يختار الروابط التي تم تحديدها وأن يقوم بإدخال القيمة الموجودة في الخاصية content إلى نهاية المحتوى الموجود في كل رابط.
• يمكن للخاصية content أن تقبل العديد من القيم وأحد هذه القيم هو النصوص/سلسلة محارف (string) ويمكن أن يتم تقسيم سلسلة المحارف إلى عدة أجزاء وكل جزء يجب أن يكون موجودًا داخل علامات اقتباس، وإذا كان هناك مجموعة من هذه السلاسل (multiple strings) فسوف يتم دمجها.

• تقوم الدالة ()attr بأخذ ما هو موجود داخل أحد الصفات (attribute) وتقوم بإرجاعه على شكل سلسلة محارف للخاصية content الموجودة في العنصر الزائف (after:: في حالتنا هذه).
  إذاً فالشيفرة البرمجية الموجودة في الأعلى تختار جميع الروابط التي لها صفة href (وذلك باستعمال مُحدّد الصفة) ومن ثم تقوم باستخراج القيمة الموجودة في صفة href (باستعمال دالة ()attr) وبعد ذلك تقوم باستخدام تلك القيمة كقيمة للخاصية content وأخيرًا تظهر القيمة الموجودة في الخاصية content في نهاية الروابط كما نريد.
  لاحظ أيضًا أننا استخدمنا media print@ وذلك لأننا نريد أن يظهر نص الرابط فقط عندما يقوم أحدهم بطباعة الصفحة على ورقة.
  يمكنك معاينة النتيجة النهائية من هنا (ضع في عين الإعتبار أننا لم نقم باستعمال media print@ في هذه المعاينة لأننا نريد توضيح الفكرة فقط).

معاينة مباشرة لبعض الأمثلة

المعاينة التالية سوف تستخدم after:: لإضافة سهم صغير إلى بعض عناصر القائمة الرئيسية التي تحتوي على قوائم فرعية بداخلها، وعندما يقوم المستخدم بوضع مؤشر الفأرة على أحد تلك العناصر فإنّ القوائم الفرعية تظهر ويتم أيضًا استبدال السهم بسهم آخر وذلك عن طريق تغيير القيمة الموجودة في الخاصية content.
مشاهدة المعاينة
إنّ استبدال القيمة الموجودة في الخاصية content (استبدال السهم الذي رأسه لأسفل بسهم آخر رأسه للأعلى) يمكن أن يحدث بسبب أنّه يمكن استخدام العناصر الزائفة والفئات الزائفة مع بعضها، فعلى سبيل المثال يمكن استخدام li:hover::after بحيث يتم تحديد الفئة الزائفة after:: عندما يقوم المستخدم بوضع مؤشر الفأرة فوق أحد عناصر القائمة الرئيسية التي تحتوي عناصر فرعية.
يمكنك الاطلاع على هذه المعاينة أيضًا لمثال آخر.

دعم المتصفحات

إنّ دعم المتصفحات للعناصر الزائفة after: وbefore: ممتاز فهو مدعوم في جميع المتصفحات تقريبًا، ولكن كما قلنا سابقًا فإنّ متصفح Internet Explorer 8 لا يدعم استخدام (::) في العناصر الزائفة، لذلك إن أردت دعم هذا المتصفح فإن عليك استخدام (:) بدلًا من (::).

ملاحظة: متصفحات Internet Explorer لا تدعم استخدام الخاصية z-index مع العناصر الزائفة.

ترجمة -وبتصرّف- للمقال after:: لصاحبته Sara Soueidan.