العنصر <link>
يُحدِّد العنصر <link> العلاقات بين المستند الحالي وبين مورد خارجي (external resource)؛ من استخدامات هذا الوسم تتضمن تعريف علاقة بين الصفحات للتنقل بينها، بيد أنَّ أكثر استخدامات هذا العنصر شيوعًا هو تضمين صفحات الأنماط.
استخدام الشكل الآتي للعنصر <link> لتضمين صفحة أنماط في المستند:
<link href="style.css" rel="stylesheet">
- 72 ساعة فيديو تدريبية
- من الصفر دون الحاجة لخبرة مسبقة
- شهادة معتمدة من أكاديمية حسوب
- متابعة أثناء الدورة من فريق مختص
بطاقة العنصر
| تصنيفات المحتوى | البيانات الوصفية |
|---|---|
| المحتوى المسموح | لا يوجد، فهذا العنصر فارغ. |
| الوسم المختصر | لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية. |
| العناصر الأب | أي عنصر يقبل وجود عناصر البيانات الوصفية ضمنه. |
| واجهة DOM | HTMLLinkElement |
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
as
هذه الخاصية تستخدم عند استخدام العلاقة rel="preload" فقط مع العنصر <link>. إذ تُحدِّد نوع المحتوى الذي سيُحمّل عبر العنصر <link>، وهذا ضروري لتحديد أولويات للمحتوى وإرسال طلبية صحيحة وغير ذلك.
disabled
تستخدم هذه الخاصية لتعطيل علاقة عبر العنصر <link>، وتستعمل هذه الخاصية مع شيفرات JavaScript لتفعيل وتعطيل صفحات أنماط معيّنة ديناميكيًا.
يجدر بالذكر أنَّ من المستحسن عدم استعمال هذه الخاصية أبدًا، وذكرناها لغرض العلم بها.
href
تُحدِّد هذه الخاصية رابط URL للمورد المعيّن، وقد يكون رابط URL مطلقًا (absolute) أو نسبيًا (relative).
hreflang
تُحدِّد هذه الخاصية لغة المورد المشار إليه، وهنالك قائمة بالقيم المسموحة في مستند BCP47.
يمكن استخدام هذه الخاصية إذا كانت خاصية href متوافرة فقط.
مثال عن استخدام هذه الخاصية لتحديد أنَّ لغة الصفحة الأب هي اللغة العربية، أشرنا إلى العلاقة إلى الصفحة الهدف عبر الخاصية rel:
<link href="arabic-page.html" rel="parent" hreflang="ar">
media
تُحدِّد هذه الخاصية ما هي media query التي يُطبَّق المورد الحالي إليها، أي يجب أن تكون قيمة هذه الخاصية إحدى أنواع media query. هذه الخاصية مفيدة عند ربط أكثر من صفحة أنماط خارجية مما يسمح للمتصفح باختيار أفضل صفحة أنماط تناسب الجهاز الذي يستعمل المتصفح.
في أيام HTML 4، كان يسمح باستخدام قائمة مفصولة بفراغات لبعض أنواع media query مثل: print و screen و aural و braille. لكن أتت HTML5 ووسعت القائمة السابقة لتشمل جميع أنواع media query.
مثال عن توفير صفحتَي أنماط مختلفتين واحدة للشاشات والأخرى للطباعة:
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
rel
تُحدِّد هذه الخاصية العلاقة بين المستند المُشار إليه في العنصر <link> وبين المستند الحالي؛ ويجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفراغات من أنواع العلاقات المسموحة.
أشهر استخدام لتلك الخاصية هو إضافة علاقة إلى صفحة أنماط خارجية، وذلك عند ضبط قيمة هذه الخاصية إلى stylesheet، وأن تشير الخاصية href إلى رابط URL لصفحة الأنماط الخارجية التي ستستعمل لتنسيق الصفحة.
مثال عن استخدام العلاقة icon لتعيين أيقونة للمستند:
<link rel="icon" href="/favicon.ico">
sizes
تُعرِّف هذه الخاصية أحجام الأيقونات للوسائط المرئية الموجودة ضمن المورد المُشار إليه، ويمكن استخدام هذه الخاصية إذا كانت العلاقة (rel) هي icon. ويمكن أن تأخذ هذه الخاصية القيم الآتية:
any، وهذا يعني أنَّ الأيقونة يمكن إعادة تحجيمها إلى أيّ قياس، أي أنَّه صورة متجهية (vector)، مثلimage/svg+xml.- قائمة بالقياسات مفصولٌ بين عناصر بفراغٍ وحيد، ويمثَّل فيها كل قياس بالصيغة
«العرض بالبكسل»x«الارتفاع بالبكسل»أو«العرض بالبكسل»X«الارتفاع بالبكسل». يجب أن تكون جميع القياسات المذكورة متضمَّنة في المورد.
ملاحظة: أغلبية صيغ الأيقونات قادرة على تخزين أيقونة واحدة فقط، أي أنَّ أغلبية خاصيات sizes ستحتوي على قياس وحيد.
ملاحظة: لا يدعم نظام iOS هذه الخاصية، لأنَّ أجهزة iPhone و iPad تستعمل قيمة غير معيارية للخاصية rel لتعريف الأيقونات (apple-touch-icon و apple-touch-startup-icon).
title
الخاصية title لها شكل خاص في العنصر <link>، وعندما تستعمل مع العلاقة <link rel="stylesheet"> فستعرِّف أنماطًا بديلةً، واستعمالها بشكل خطأ سيؤدي إلى تجاهل صفحة الأنماط كليًّا.
يمكن للمستخدم اختيار صفحة أنماط معيّنة لتطبيقها على الصفحة (يمكن فعل ذلك في متصفح Firefox عبر قائمة View>Page Style). وهذا ما يمنح المستخدمين القدرة على رؤية نسخ متنوعة التنسيق من الصفحة.
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
type
تستخدم هذه الخاصية لتعريف نوع المحتوى المشار إليه عبر العنصر <link>، وقيمة هذه الخاصية يجب أن تكون نوع MIME صالح مثل text/html أو text/css وهلم جرًا.
أكثر استعمال شائع لهذه الخاصية هو تعريف نوع صفحة الأنماط وأكثر قيمة شائعة لهذه الخاصية هي text/css، والتي تُشير إلى صيغة «Cascading Style Sheet»، وتستعمل هذه الخاصية أيضًا في علاقات rel="preload" كيلا ينزّل المتصفح أيّة ملفات لا يدعمها.
<link rel="stylesheet" type="text/css" href="theme.css">
ملاحظات
- يمكن أن يتواجد العنصر
<link>ضمن العنصر<head>فقط، لكن يمكن تكراره لأي عدد. - تُعرِّف مواصفات HTML و XHTML معالجات أحداث (event handles) للعنصر
<link>، لكن من غير الواضح كيف تستعمل. - يُشتَرَط في معيار XHTML 1.0 أن يُضاف خط مائل في العناصر الفارغة مثل
<link>مثل<link />.
أمثلة
أحداث تحميل صفحات الأنماط
يمكنك تحديد ماذا يحدث عندما يكتمل تحميل صفحة الأنماط عبر مراقبة وقوع الحدث load، وبشكلٍ مشابه يمكنك معرفة إن وقت خطأٌ ما أثناء تفسير صفحة الأنماط بمراقبة وقوع الحدث error:
<script>
function sheetLoaded() {
// فعل شيءٍ ما عند تحميل صفحة الأنماط
}
function sheetError() {
console.log("حدث خطأ أثناء تحميل صفحة الأنماط");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
لاحظ أنَّ الحدث load سيقع عندما تحمّل وتفسَّر صفحة الأنماط وكل محتوياتها (بما في ذلك المحتوى المضمّن فيها)، وقبل البدء بتطبيق الأنماط على عناصر الصفحة مباشرةً.
التنسيق الافتراضي
تخفي أغلبية المتصفحات العنصر <link> بضبط الخاصية display إلى none:
link {
display: none;
}