العناصر الافتراضية

The CSS Podcast - 014: Pseudo-elements

إذا كانت لديك مقالة محتوى وتريد أن يكون الحرف الأول حرفًا كبيرًا مميّزًا أكبر حجمًا بكثير، كيف يمكنك تحقيق ذلك؟

في CSS، يمكنك استخدام العنصر الصوري ::first-letter لتحقيق هذا النوع من تفاصيل التصميم.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

يشبه العنصر الزائف إضافة عنصر إضافي أو استهدافه بدون الحاجة إلى إضافة المزيد من علامات HTML. هذا المثال على الحلّ، الذي يستخدم العنصر ::first-letter، هو أحد العناصر الزائفة العديدة. لها مجموعة من الأدوار، وفي هذا الدرس، ستتعرّف على العناصر الزائفة المتاحة وكيفية استخدامها.

::before و::after

ينشئ كل من العنصرَين الصوريَين ::before و::after عنصرًا ثانويًا داخل أحد العناصر فقط إذا حدّدت السمة content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

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

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

بعد إنشاء عنصر ::before أو ::after، يمكنك تصميمه بالطريقة التي تريدها بدون حدود. لا يمكنك إدراج عنصر ::before أو ::after إلا في عنصر يقبل العناصر الفرعية (العناصر التي تحتوي على شجرة مستند)، لذلك لن تعمل عناصر مثل <img /> و<video> و<input>.

: input[type="checkbox"] هو استثناء. يُسمح بوجود عناصر ثانوية وهمية.

::first-letter

لقد تعرّفنا على هذا العنصر الاصطناعي في بداية الدرس. يُرجى العِلم أنّه لا يمكن استخدام جميع خصائص CSS عند استهداف ::first-letter. في ما يلي السمات المتاحة:

• color
• مواقع background (مثل background-image)
• مواقع border (مثل border-color)
• float
• مواقع font (مثل font-size وfont-weight)
• سمات النص (مثل text-decoration وword-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

ملاحظة: يمكنك استخدام :first-letter فقط في حاويات الكتل. لذلك، لن يعمل إذا حاولت إضافته إلى عنصر يتضمّن display: inline.

::first-line

سيتيح لك العنصر النائب ::first-line تنسيق السطر الأول من النص فقط إذا كان العنصر الذي تم تطبيق ::first-line عليه يحتوي على قيمة display من block أو inline-block أو list-item أو table-caption أو table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

مثل العنصر الصوري ::first-letter، تتوفّر مجموعة فرعية فقط من خصائص CSS التي يمكنك استخدامها:

• color
• background مكانًا للإقامة
• font مكانًا للإقامة
• text مكانًا للإقامة

::backdrop

إذا كان لديك عنصر معروض في وضع ملء الشاشة، مثل <dialog> أو <video>، يمكنك تصميم الخلفية، أي المساحة بين العنصر وبقية الصفحة، باستخدام العنصر الزائف ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

يتيح لك العنصر النائب ::marker تصميم الرمز النقطي أو الرقم لعنصر قائمة أو السهم لعنصر <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

تتوفّر مجموعة فرعية صغيرة فقط من خصائص CSS في ::marker:

• color
• content
• white-space
• font مكانًا للإقامة
• الموقعان animation وtransition

يمكنك تغيير رمز العلامة باستخدام السمة content. يمكنك استخدام هذا الإجراء لضبط رمزَي الجمع والطرح للحالات المغلقة والفارغة للعنصر <summary>، على سبيل المثال.

::selection

يتيح لك العنصر النائب ::selection تصميم مظهر النص المحدّد.

::selection {
  background: green;
  color: white;
}

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

كما هو الحال مع العناصر الزائفة الأخرى، يُسمح فقط بمجموعة فرعية من خصائص CSS:

• color
• background-color ولكن ليس background-image
• text مكانًا للإقامة

::placeholder

Browser Support

• 57
• 79
• 51
• 10.1

Source

يمكنك إضافة تلميح مساعد إلى عناصر النموذج، مثل <input> مع سمة placeholder. يتيح لك العنصر النائب ::placeholder تنسيق هذا النص.

input::placeholder {
  color: darkcyan;
}

لا يتيح ::placeholder سوى مجموعة فرعية من قواعد CSS:

• color
• background مكانًا للإقامة
• font مكانًا للإقامة
• text مكانًا للإقامة

ملاحظة: placeholder ليس <label> ويجب عدم استخدامه بدلاً من <label>. يجب تصنيف عناصر النموذج وإلا لن يكون بالإمكان الوصول إليها.

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

آخر عنصر في هذه الجولة حول العناصر الزائفة هو العنصر الزائف ::cue. يتيح لك ذلك تصميم إشارات WebVTT، وهي مقاطع الترجمة والشرح لعنصر <video>.

يمكنك أيضًا تمرير أداة اختيار إلى ::cue، ما يتيح لك تصميم عناصر معيّنة داخل الترجمة والشرح.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

التحقّق من فهمك

اختبِر معلوماتك عن العناصر الزائفة

أيّ مما يلي ليس عنصرًا زائفًا؟

::before

لا تنسَ إضافة content: '';.

::first-paragraph

لا تتوفّر هذه السمة في CSS.

::after

لا تنسَ إضافة content: '';.

::marker

هذا هو عنصر النقطة عند استخدام عنصر قائمة أو نوع عرض.

::pencil

لا تتوفّر هذه السمة في CSS.

:active

هذه فئة زائفة وليست عنصرًا زائفًا.

يمكن العثور على العناصر الزائفة في ملف HTML.

True

على الرغم من أنّ "أدوات مطوّري البرامج" قد تعرض العناصر الزائفة في لوحة "العناصر"، لن يتم العثور على العناصر الزائفة في رمز HTML، لأنّها مملوكة للمتصفح.

خطأ

ويمكن استهدافها باستخدام CSS ولكن لن يتم العثور عليها في HTML.