الفرق بين المراجعتين لصفحة: «HTML/link»

المراجعة الحالية بتاريخ 08:55، 23 يونيو 2022

يُحدِّد العنصر <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;
}

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

معيار HTML Living Standard.
مواصفة HTML5، أضافت هذه المواصفة دعمًا للخاصية sizes، ووسعت القيم التي تقبلها الخاصية media، وأضافت علاقات عديدة للخاصية rel.
مواصفة HTML 4.01.

@@ سطر 1: / سطر 1: @@
-<noinclude>{{DISPLAYTITLE:الوسم <code><link></code>}}</noinclude>
+<noinclude>{{DISPLAYTITLE:العنصر <code><link></code>}}</noinclude>
-يُحدِّد العنصر <code><link></code> العلاقات بين المستند الحالي وبين مورد خارجي (external resource)؛ من استخدامات هذا الوسم تتضمن تعريف علاقة بين الصفحات للتنقل بينها، بيد أنَّ أكثر استخدامات هذا العنصر شيوعًا هو تضمين صفحات الأنماط.
+يُحدِّد العنصر <code><link></code> [[HTML/Link Types|العلاقات]] بين المستند الحالي وبين مورد خارجي (external resource)؛ من استخدامات هذا الوسم تتضمن تعريف علاقة بين الصفحات للتنقل بينها، بيد أنَّ أكثر استخدامات هذا العنصر شيوعًا هو تضمين صفحات الأنماط.
 استخدام الشكل الآتي للعنصر <code><link></code> لتضمين صفحة أنماط في المستند:<syntaxhighlight lang="html">
 <link href="style.css" rel="stylesheet">
 </syntaxhighlight>
+{{Course|course=frontend}}
+__TOC__
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 41: / سطر 44: @@
 === <code>as</code> ===
-هذه الخاصية تستخدم عند استخدام العلاقة <code>rel="preload"‎</code> فقط مع العنصر <code><link></code>. إذ تُحدِّد نوع المحتوى الذي سيُحمّل عبر العنصر <code><link></code>، وهذا ضروري لتحديد أولويات للمحتوى وإرسال طلبية صحيحة وغير ذلك.
+هذه الخاصية تستخدم عند استخدام العلاقة <code>[[HTML/Link Types#preload|rel="preload"‎]]</code> فقط مع العنصر <code><link></code>. إذ تُحدِّد نوع المحتوى الذي سيُحمّل عبر العنصر <code><link></code>، وهذا ضروري لتحديد أولويات للمحتوى وإرسال طلبية صحيحة وغير ذلك.
 === <code>disabled</code> ===
@@ سطر 72: / سطر 75: @@
 === <code>rel</code> ===
-تُحدِّد هذه الخاصية العلاقة بين المستند المُشار إليه في العنصر <code><link></code> وبين المستند الحالي؛ ويجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفراغات من أنواع العلاقات المسموحة.
+تُحدِّد هذه الخاصية العلاقة بين المستند المُشار إليه في العنصر <code><link></code> وبين المستند الحالي؛ ويجب أن تكون قيمة هذه الخاصية هي قائمة مفصولة بفراغات من [[HTML/Link Types|أنواع العلاقات المسموحة]].
-أشهر استخدام لتلك الخاصية هو إضافة علاقة إلى صفحة أنماط خارجية، وذلك عند ضبط قيمة هذه الخاصية إلى <code>stylesheet</code>، وأن تشير الخاصية <code>href</code> إلى رابط URL لصفحة الأنماط الخارجية التي ستستعمل لتنسيق الصفحة.
+أشهر استخدام لتلك الخاصية هو إضافة علاقة إلى صفحة أنماط خارجية، وذلك عند ضبط قيمة هذه الخاصية إلى <code>[[HTML/Link Types#stylesheet|stylesheet]]</code>، وأن تشير الخاصية <code>href</code> إلى رابط URL لصفحة الأنماط الخارجية التي ستستعمل لتنسيق الصفحة.
-مثال عن استخدام العلاقة <code>icon</code> (التي تأتي عادةً مع العلاقة <code>shortcut</code>) لتعيين أيقونة للمستند:<syntaxhighlight lang="html">
+مثال عن استخدام العلاقة <code>[[HTML/Link Types#icon|icon]]</code> لتعيين أيقونة للمستند:<syntaxhighlight lang="html">
-<link rel="shortcut icon" href="/favicon.ico">
+<link rel="icon" href="/favicon.ico">
 </syntaxhighlight>
 === <code>sizes</code> ===
-تُعرِّف هذه الخاصية أحجام الأيقونات للوسائط المرئية الموجودة ضمن المورد المُشار إليه، ويمكن استخدام هذه الخاصية إذا كانت العلاقة (<code>rel</code>) هي <code>icon</code>. ويمكن أن تأخذ هذه الخاصية القيم الآتية:
+تُعرِّف هذه الخاصية أحجام الأيقونات للوسائط المرئية الموجودة ضمن المورد المُشار إليه، ويمكن استخدام هذه الخاصية إذا كانت العلاقة (<code>rel</code>) هي <code>[[HTML/Link Types#icon|icon]]</code>. ويمكن أن تأخذ هذه الخاصية القيم الآتية:
 * <code>any</code>، وهذا يعني أنَّ الأيقونة يمكن إعادة تحجيمها إلى أيّ قياس، أي أنَّه صورة متجهية (vector)، مثل <code>image/svg+xml</code>.
 * قائمة بالقياسات مفصولٌ بين عناصر بفراغٍ وحيد، ويمثَّل فيها كل قياس بالصيغة <code>«العرض بالبكسل»x«الارتفاع بالبكسل»</code> أو <code>«العرض بالبكسل»X«الارتفاع بالبكسل»</code> . يجب أن تكون جميع القياسات المذكورة متضمَّنة في المورد.
@@ سطر 89: / سطر 92: @@
 === <code>title</code> ===
-الخاصية title لها شكل خاص في العنصر <code><link></code>، وعندما تستعمل مع العلاقة <code><link rel="stylesheet"‎></code> فستعرِّف أنماطًا بديلةً، واستعمالها بشكل خطأ سيؤدي إلى تجاهل صفحة الأنماط كليًّا.
+الخاصية <code>title</code> لها شكل خاص في العنصر <code><link></code>، وعندما تستعمل مع العلاقة <code><link rel="stylesheet"‎></code> فستعرِّف أنماطًا بديلةً، واستعمالها بشكل خطأ سيؤدي إلى تجاهل صفحة الأنماط كليًّا.
 يمكن للمستخدم اختيار صفحة أنماط معيّنة لتطبيقها على الصفحة (يمكن فعل ذلك في متصفح Firefox عبر قائمة View>Page Style). وهذا ما يمنح المستخدمين القدرة على رؤية نسخ متنوعة التنسيق من الصفحة.<syntaxhighlight lang="html">
@@ سطر 112: / سطر 115: @@
 == أمثلة ==
-==== <code></code>أحداث تحميل صفحات الأنماط ====
+==== أحداث تحميل صفحات الأنماط ====
 يمكنك تحديد ماذا يحدث عندما يكتمل تحميل صفحة الأنماط عبر مراقبة وقوع الحدث <code>load</code>، وبشكلٍ مشابه يمكنك معرفة إن وقت خطأٌ ما أثناء تفسير صفحة الأنماط بمراقبة وقوع الحدث <code>error</code>:<syntaxhighlight lang="html">
 <script>
@@ سطر 120: / سطر 123: @@
 function sheetError() {
-   console.log("An error occurred loading the stylesheet!");
+   console.log("حدث خطأ أثناء تحميل صفحة الأنماط");
 }
 </script>
-<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()"
+<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
-  onerror="sheetError()">
 </syntaxhighlight>لاحظ أنَّ الحدث <code>load</code> سيقع عندما تحمّل وتفسَّر صفحة الأنماط وكل محتوياتها (بما في ذلك المحتوى المضمّن فيها)، وقبل البدء بتطبيق الأنماط على عناصر الصفحة مباشرةً.
+== التنسيق الافتراضي ==
+تخفي أغلبية المتصفحات العنصر <code><link></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>none</code>:<syntaxhighlight lang="css">
+link {
+  display: none;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-link-element HTML Living Standard].
 *مواصفة [http://www.w3.org/TR/html5/document-metadata.html#the-link-element HTML5]، أضافت هذه المواصفة دعمًا للخاصية <code>[[#sizes|sizes]]</code>، ووسعت القيم التي تقبلها الخاصية <code>[[#media|media]]</code>، وأضافت علاقات عديدة للخاصية <code>[[#rel|rel]]</code>.
 *مواصفة [http://www.w3.org/TR/html401/struct/links.html#h-12.3 HTML 4.01].
-[[تصنيف:Metadata]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-__لصق_فهرس__
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML]]
+[[تصنيف:HTML Metadata|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]