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

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>.

::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-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

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

input::placeholder {
  color: darkcyan;
}

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

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

::cue

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

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

video::cue {
  color: yellow;
}

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

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

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

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