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