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

بودكاست 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;
}

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

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