بودكاست 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;
}
التحقق من فهمك
اختبر معلوماتك حول العناصر الزائفة
أي مما يلي ليس من العناصر الزائفة؟
::first-paragraph
::after
:active
::before
::marker
::pencil
يمكن العثور على عناصر زائفة في ملف HTML.