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

بودكاست CSS - 014: عناصر زائفة

إذا كانت لديك مقالة تتضمن محتوى وتريد أن يكون الحرف الأول أكبر بكثير - كيف يمكنك تحقيق ذلك؟

في 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;
}

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

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