CSS/url

نوع البيانات <url> في CSS يُشير إلى أحد الموارد (resources)، مثل الصور أو الخطوط، وتُستخدَم روابط URL في الكثير من الخاصيات، مثل background-image و cursor و list-style.

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الرئيسي	1.0	1.0	3.0	3.5	1.0

الشكل العام

نوع البيانات <url> يُمثَّل عبر الدالة url()‎، ويمكن أن يوضع الرابط داخلها دون علامات اقتباس، أو محاطًا بعلامات اقتباس مفردة أو مزدوجة؛ ويُسمَح باستخدام روابط URL النسبية (relative URLs)، وسيكون مسارها نسبةً إلى ملف الأنماط، وليس لرابط URL لصفحة الويب.

url("http://mysite.example.com/mycursor.png")
url('http://mysite.example.com/mycursor.png')
url(http://mysite.example.com/mycursor.png)

لاحظ أنَّ هنالك اختلافٌ بين URI و URL، إذ إنَّ URI هو مُعرِّف موحّد للموارد، بينما URL هو نوع من أنواع URI الذي يصف مكان ذلك المورد؛ فيمكن أن يكون URI إما URL أو اسمًا (URN) للمورد.

في مواصفة CSS Level 1 كانت الدالة url()‎ لا تصف إلا روابط URL الحقيقية، أما في CSS Level 2 وُسِّع تعريف الدالة url()‎ لتصف أيّ رابط URI سواءً كان URL أو URN، واستعملتُ آنذاك الدالة url()‎ لإنشاء نوع البيانات <uri>، وهذا أثار جدلًا وعقّد الأمور دون داعٍ، لأنَّ أسماء الموارد URN لم تُستعمَل في CSS، لذا أعادت مواصفة CSS Level 3 تعريف هذه الدالة إلى ما كان عليه، أي أنَّ الدالة url()‎ لا تصف إلا روابط URL الحقيقية في نوع البيانات <url>.

أمثلة

مثال عن استخدام رابط URL مُحاطٌ بعلامتَي اقتباس مع الخاصية background:

.topbanner {
  background: url("topbanner.png") #00D no-repeat fixed;
}

مثال عن استخدام رابط URL دون علامات اقتباس مع الخاصية list-style:

ul {
  list-style: square url(http://www.example.com/redball.png);
}

انظر أيضًا

• صفحة الخاصية background-image التي تضبط صورةً أو أكثر على أنها خلفية للعنصر.
• صفحة الخاصية cursor التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
• صفحة الخاصية list-style وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات list-style-type و list-style-image و list-style-position.

مصادر ومواصفات

• مواصفة CSS Values and Units Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.