الخاصية content في Css

ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية.

الخاصيةcontent

بطاقة الخاصية

---

القيمة الابتدائية	normal
تُطبَّق على	العنصرين الزائفين ‎::before و ‎::after.
قابلة للوراثة	لا
قابلة للحركة	لا
القيمة المحسوبة	ستكون القيمة هي normal دومًا إذا طُبِّقت هذه الخاصية على العناصر العادية. وإذا كانت القيمة normal وطُبِّقَت على العنصرين الزائفين ‎::before و ‎::after فستكون القيمة المحسوبة هي none. إذا استخدمنا روابط URL النسبية فستحوِّل إلى روابط مطلقة. إذا استخدمنا الدالة attr(x)‎ فستحوِّل القيمة إلى سلسلة نصية. فيما عدا ذلك، ستكون القيمة المحسوبة هي نفس القيمة المُحدَّدة.

/* كلمات محجوزة لا يمكن دمجها مع بقية القيم */
content:normal;
content:none;
/* <string> سلاسل نصية */
content:"prefix";
/* <url> روابط */
content:url("http://www.example.com/test.png");
/* <counter> قيم */
content:counter(chapter_counter);
content:counters(section_counter,".");
/* attr() HTML استخدام قيم خاصيات */
content:attr(valuestring);
/* كلمات محجوزة يختلف أثرها حسب الموضع أو اللغة */
content:open-quote;
content:close-quote;
content:no-open-quote;
content:no-close-quote;
/* يمكن استخدام أكثر من قيمة معًا */
content:open-quotechapter_counter;
/* القيم العامة */
content:inherit;
content:initial;
content:unset;

أمثلة

مثال على إضافة علامات اقتباس حول العنصر <q> وإضافة الكلمة Chapter قبل الترويسات:

<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
 <qcite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
 حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<h1>6</h1>
<p>According to the Mozilla Manifesto,
 <qcite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
 حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>

شيفرة CSS، لاحظ وجود فراغ بعد الكلمة Chapter لإضافة فاصل بينها وبين محتوى العنصر <h1>:

q{
 color:blue;
}
q::before{
 content:open-quote;
}
q::after{
 content:close-quote;
}
h1::before{
 content:"Chapter ";
}

هذا المثال سيضع نصًا إضافيًا بعد عناصر خاصة في القائمة:

---

<h2>في مهمة لتطوير العالم العربي</h2>
<ol>
 <li>مستقل</li>
 <liclass="new-entry">خمسات</li>
 <li>إعلانات حسوب</li>
 <liclass="new-entry">أكاديمية حسوب</li>
</ol

شيفرة CSS، لاحظ وجود فراغ قبل الكلمة New لفصلها عمّا قبله من المحتوى:

---

.new-entry::after{
 content:" New!";
 color:red;
}

أما هذا المثال فسيضيف صورةً قبل كل رابط، ويضع قيمة الخاصية id بعده:

 <ul>
 <li><aid="link1"href="http://example.com/">
 example.com</a></li>
 <li><aid="link2"href="https://example.org/">
 example.org</a></li>
</ul>

شيفرة CSS:

a{
 text-decoration:none;
 border-bottom:3pxdottednavy;
}
a::after{
 content:" ("attr(id)")";
}
#link1::before{
 content:url("favicon.ico");
}
#link2::before{
 content:url("image.png");
}
li{
 margin:1em;
}

---

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	8.0	7.0	1.0

البنية العامة

---

الخاصية content تقبل القيم الآتية.

none

لن يولّد عنصرٌ زائف (pseudo-element).

normal

هذه القيمة ستحوّل إلى none في العنصرين الزائفين ::before و ::after.

<string>

سلسلة نصية تحتوي على محرف أو أكثر.

<url>

يُشير رابط URL إلى مورد خارجي (مثل الصور)، وإذا لم يمكن المتصفح من عرض ذاك المورد، فإما أن سيتجاهله أو سيعرض محتوى بديل عنه.

<counter>

قيمة عداد في CSS، ويكون عادةً رقميًا، ويمكن عرضه باستخدام الدالة counter() أو الدالة counters()‎.

attr(x)‎

استخدام قيمة الخاصية x كسلسلة نصية، وإذا لم تكن تلك الخاصية موجودةً فستُعاد سلسلة نصية فارغة.

open-quote أو close-quote

ستُستبدَل هاتان القيمتان بما يناسبهما من السلاسل النصية المضبوطة في الخاصية quotes.

no-open-quote أو no-close-quote

لن تؤدي هاتان القيمتان إلى عرض علامات اقتباس، لكنهما ستؤديان إلى زيادة مستوى الاقتباس (level of nesting) في العنصر (انظر صفحة الخاصية quotes للتفاصيل).

البنية الرسمية

---

content:normal|none|[<content-replacement>|<content-list>][/<string>]?;

حيث:

<content-replacement>=<image>

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا