تعلم تطوير الويب تنسيق الروابط باستخدام CSS

نناقش في هذا المقال طريقة تنسيق الروابط في لغة CSS ونعرفك على طرق مختلفة لتحسين مظهرها على موقع الويب الخاص بك، ونعرفك على الحالات المختلفة للروابط وطريقة تنسيقها بفعالية أكبر بالاستفادة من آلية استخدام الأصناف الزائفة pseudo classes في CSS، ونناقش تنسيق الروابط في المواضع المألوفة المختلفة مثل روابط قوائم التنقل، والتبويبات الفرعية tabs.

ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS.

لنلق نظرة على بعض الروابط التشعبية

اطلعنا في مقال سابق على أفضل الطرق المتبعة في إنشاء وإضافة الروابط التشعبية إلى صفحات HTML، وسنتابع في هذا المقال استعراض أفضل الممارسات المتبعة في تنسيق هذه الروابط.

حالة الرابط

لا بد قبل كل شيء من فهم مصطلح "حالة الرابط link state" والذي يدل على الحالات المختلفة التي يكون عليها الرابط. إذ يجري تنسيق الرابط وفقًا لحالته باستخدام الأصناف الزائفة:

• حالة الرابط Link: وهي الحالة التي يكون فيها للرابط وجهة (وليس مجرد مربط anchor باسم محدد). تُنسّق هذه الحالة من خلال الصنف الزائف link:.
• حالة رابط جرت زيارته Visited: وهي الحالة التي نُقر فيها على الرابط وخزّن ذلك في ذاكرة المتصفح. تُنسّق هذه الحالة باستخدام الصنف الزائف visited:.
• حالة رابط عند مرور مؤشر الفأرة Hover: تُنسّق هذه الحالة باستخدام الصنف الزائف hover:.
• إضافة أيقونات إلى الروابط حالة تركيز الدخول إلى الرابط Focus: وذلك من خلال الانتقال إليه عبر الضغط المتكرر على زر Tab في لوحة المفاتيح أو برمجيًا باستخدام ()HTMLElement.focus وتُنسّق هذه الحالة باستخدام الصنف الزائف focus:.
• حالة الرابط الفعّال Active: وهي الحالة التي يُنقر فيها على الرابط وتُنسّق باستخدام الصنف الزائف :active.

التنسيقات الافتراضية

يعرض المثال التالي الطريقة التي يبدو عليها الرابط وطريقة سلوكه الافتراضي، إذ تقوم لغة CSS بتكبير حجم النص وتجعله في المنتصف كي يبرز ويصبح أكثر وضوحًا. ستتمكن في هذا المثال من مقارنة السلوك أو المظهر الافتراضي لروابطك مع سلوك ومظهر الروابط الأخرى المنسّقة باستخدام خاصيات CSS إضافية، إذ يكون للروابط ذات التنسيق الافتراضي الخصائص التالية:

• تحتوي خطوطًا أسفلها.
• تكون الروابط التي لم تُزر بعد زرقاء اللون.
• تكون الروابط التي جرت زيارتها بنفسجية اللون.
• يغيّر تحريك مؤشر الفأرة فوق الرابط أيقونة الفأرة إلى أيقونة على شكل يد.
• يحيط إطار بالروابط التي اكتسبت تركيز الدخل. يمكنك نقل التركيز على رابط في الصفحة بالضغط المتكرر على زر Tab (في نظام ماك لا بد من الضغط على زري Option و Tab معًا).
• تكون الروابط الفعالّة حمراء اللون. حاول أن تنقر وتستمر بالضغط على الرابط.

تكون شيفرة HTML للرابط كما يلي:

<p><a href="#">A simple link</a></p>

أما شيفرة CSS فهي كالتالي:

p {
  font-size: 2rem;
  text-align: center;
}

لتعطي النتيجة التالية:

ملاحظة: تنقلك جميع روابط الأمثلة إلى أعلى الصفحات التي تضمها، وتُستخدم الأجزاء الفارغة "#"=href لإنشاء أمثلة بسيطة والتأكد أن الأمثلة المعروضة والمحتواة ضمن إطار <iframe> تعمل جيدًا.

بقيت هذه التنسيقات كما هي منذ الأيام الأولى للمتصفحات خلال تسعينات القرن الماضي، إذ يتوقع المستخدمون سلوك هذه الروابط بناءً على تلك الألوان وسيؤدي تغييرها إلى إرباك الكثيرين. ولا يعني هذا طبعًا التخلي عن تنسيق الروابط نهائيًا، بل عدم المغالاة في تنسيقها إلى درجة بعيدة عما هو متوقع، فعليك على الأقل أن:

• تستخدم خط أسفل الرابط فقط للرابط وليس لأية أغراض أخرى، وإن لم تشأ وضع هذا الخط حاول تظليل الرابط بطريقة أخرى.
• تمنح الرابط طريقةً يتفاعل فيها مع تمرير مؤشر الفأرة فوقه أو عندما ينتقل تركيز الدخل إليه، وأن تجد طريقةً مشابهةً ليتفاعل الرابط عند تفعيله.

يمكنك تغيير أو إلغاء هذه التنسيقات باستخدام خاصيات CSS التالية:

• color: لتلوين نص الرابط.
• cursor: لتنسيق مؤشر الفأرة، ولا تحاول إلغاء هذا التنسيق ما لم يكن السبب وجيهًا.
• outline: لتنسيق الإطار المحيط بالكتابة. والإطار أمر مشابهة للحواف borders، إلا أن الحواف ستشغل مساحة من صندوق العنصر على عكس الإطار الذي يتوضّع فوق الخلفية فقط، وللإطار فائدة في تحسين شمولية الوصول، ولا ينبغي إلغاؤه ما لم تجد طريقة أخرى لتدل على رابط تركيز focused link.

ملاحظة: لست مضطرًا إلى التقيد بالخاصيات السابقة فقط، بل يمكنك استخدام أية خاصيات تجدها مناسبة لتنسيق الروابط.

تنسيق بعض الروابط

بعد أن اطلعنا على التنسيقات الافتراضية بشيء من التفصيل، سنلقي نظرةً على مجموعة من التنسيقات النمطية التي نتخذها بمثابة قاعدة انطلاق ثم نملؤها بالقواعد التي نريد:

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

لترتيب القواعد في الشيفرة السابقة أهميته لأن تنسيقات الروابط تُبنى فوق بعضها بعضًا؛ إذ ستُطبّق مثلًا التنسيقات ضمن القاعدة الأولى على كل القواعد التي تليها، وعندما يُفعّل الرابط، يستجيب غالبًا إلى تمرير مؤشر الفأرة. لهذا، لو وضعت القواعد بترتيب خاطئ وحاولت تغيير نفس الخاصيات في كل قاعدة، فلن يعمل التنسيق كما تتوقع. إليك هذه العبارة لتتذكر الترتيب الصحيح لكتابة القواعد "LoVe Fears HAte" حيث يشير حرف L إلى حالة الرابط Link وحرف V إلى الحالة Visited …إلخ.

لنضع الآن بعض التنسيقات ضمن القواعد التي رتبناها قبل قليل:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}

إليك شيفرة HTML البسيطة التالية كي نطبّق عليها التنسيقات:

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
</p>

ستكون النتيجة على النحو التالي:

ما الذي فعلناه إذًا؟ يبدو مظهر الروابط مختلفًا عن التنسيق النمطي، لكنه يقدّم تجربةً مماثلة يفهم من خلالها الزائر ما الذي يحدث:

• لن نناقش أول قاعدتين فهما واضحتان تمامًا.
• تستخدم القاعدة الثالثة المحدد a للتخلص من إطار الرابط، والذي يختلف التعامل معه من متصفح لآخر.
• استخدمنا بعد ذلك المحددين a:link و a:visited لضبط بعض التغييرات اللونية للروابط التي زارها المستخدم والتي لم يزرها بعد ليستطيع التمييز بينهما.
• استخدمنا في القاعدتين التاليتين المحددين a:focus و a:hover كي لا يظهر خط أسفل الروابط التي يتحرك مؤشر الفأرة فوقها أو تكتسب تركيز الدخل مع تغيير لون الخلفية.
• استخدمنا أخيرًا المحدد a:active لمنح الرابط لونًا معاكسًا عند تفعيله كي يظهر أن أمرًا مهمًا قد حدث.

تطبيق عملي: نسق روابطك الخاصة

نطلب إليك في هذا التطبيق العملي أن تستفيد من مجموعة القواعد الفارغة التي تعاملنا معها سابقًا كي تضيف التنسيقات الخاصة بك كي تعرض الروابط بطريقة جميلة. استخدم مخيلتك وابتكر تنسيقات جديدة، فقد تصل إلى شيء جديد جميل ومفيد بقدر ما فعلناه.

إذا ارتكبت خطأً يمكنك النقر على الزر "Reset"، وإذا لم تتمكن من فعل شيء، ألق نظرةً على الحل بالنقر على زر "Show solution".

إضافة أيقونات إلى الروابط

من الممارسات الشائعة عند إنشاء الروابط تزويدها بأيقونة تشير إلى طبيعة المحتوى الذي يقود إليه كل رابط، لهذا سنلقي نظرةً على مثال بسيط يضيف أيقونة إلى رابط خارجي (يقود إلى موقع آخر). يبدو شكل هذه الأيقونة عادةً مثل سهم يشير إلى خارج الصندوق، وسنستخدم أيقونة من موقع icon8.com.

إليك شيفرة HTML و CSS التي ستساعدنا على عرض الفكرة:

• شيفرة HTML:

<p>
  For more information on the weather, visit our <a href="#">weather page</a>,
  look at <a href="https://en.wikipedia.org/">weather on Wikipedia</a>, or check
  out
  <a href="https://www.nationalgeographic.org/topics/resource-library-weather/">
    weather on National Geographic</a>.
</p>

• شيفرة CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus,
a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href^="http"] {
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

النتيجة:

ما الذي حدث إذًا؟ سنتجاوز توضيح أغلب شيفرة التنسيقات لأننا تحدثنا عنها قبل قليل وننتقل إلى القاعدة الأخيرة المهمة. لقد وضعنا صورة خلفية مخصصة للرابط وهي أيقونة الموقع الخارجي، وبنفس الطريقة التي اتبعناها في إضافة نقاط مخصصة إلى القوائم في المقال السابق. لكننا استخدمنا هنا الخاصية المختصرة background بدلًا من ضبط كل خاصية على حدى، كما ضبطنا مسار الصورة واستخدمنا القيمة no-repeat كي لا تظهر سوى نسخة واحدة من الصورة. ضبطنا كذلك موقع الصورة كي يكون 100% إلى يمين النص دون أن يكون لها هامش علوي 0px.

استخدمنا أيضًا الخاصية background-size لتحديد أبعاد الصورة. ومن الأفضل عمليًا أن نختار صورة أكبر ثم نعيد ضبط أبعادها كما يتطلبه صفحات ويب المتجاوبة. لن تعمل هذه الطريقة طبعًا على المتصفحات الأقدم من IE9، لهذا عليك أن تغير أبعاد الصورة بنفسك ثم تستخدمها، إذا أردت دعم تلك المتصفحات.

ضبطنا أخيرًا قيمة الحاشية من جهة اليمين باستخدام الخاصية padding-right كي نعطي صورة الخلفية مساحة كافية لتظهر دون أن تتداخل مع النص.

كلمة أخيرة: كيف لنا أن تختار فقط الروابط الخارجية لتنسيقها بهذا الشكل مع وجود روابط داخلية؟ إذا كتبت عناوين روابط HTML بالشكل الصحيح، عليك في هذه الحالة استخدام عناوين URL المطلقة للروابط الخارجية، وسيكون من المفيد استخدام العناوين النسبية للروابط الداخلية (كما في الرابط الأول في المثال السابق). لهذا السبب ستظهر العبارة "http" في العناوين الخارجية فقط (كما في العنوانين الثاني والثالث في المثال السابق)، وعندها يمكننا استخدام محدد الخواص التالي ["a[href^="http الذي يحدّد عن عناصر <a> ولكن فقط التي تمتلك الخاصية href مع قيمة تبدأ بالكلمة http، وهذا كل مافي الأمر. حاول أن تعود إلى التطبيق العملي السابق وأن تطبق هذه التقنية.

ملاحظة: قد تبدو قيمة الخاصية href في مثالنا غريبة فقد استخدمنا روابط وهمية لا تنقلك إلى أي مكان، والسبب في ذلك أنك ستتمكن من تحميل هذه الروابط ضمن المحرر التفاعلي لو كانت حقيقية وبالتالي ستفقد الشيفرة الموجودة.

ملاحظة: لا تقلق إن لم تكن لديك معرفة بالخلفيات أو بتصميم الويب المتجاوب فقد شرحناها في مقالات أخرى يمكنك الاطلاع عليها.

تنسيق الروابط على هيئة أزرار

يمكنك استخدام الأساليب التي خبرتها حتى الآن في مقالنا بطرق أخرى، حيث يمكنك استخدام حالة تمرير مؤشر الفأرة مع عناصر أخرى مثلًا وليس بالضرورة مع الروابط، وقد ترغب أن تتفاعل الفقرات وعناصر القوائم وغيرها مع مرور مؤشر الفأرة فوقها.

ومن الشائع أيضًا تنسيق الروابط لتبدو مثل الأزرار في بعض الحالات، كما في قائمة التنقل ضمن الموقع، إذ تُوصّف عناصر القائمة على هيئة روابط وتُنسّق بعدها لتبدو مثل مجموعة من أزرار التحكم التي تنقل المستخدم من صفحة إلى أخرى في الموقع نفسه.

لنرى كيف نفعل ذلك. إليك شيفرة HTML:

<nav class="container">
  <a href="#">Home</a>
  <a href="#">Pizza</a>
  <a href="#">Music</a>
  <a href="#">Wombats</a>
  <a href="#">Finland</a>
</nav>

وشيفرة CSS:

body,
html {
  margin: 0;
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 0.625%;
}

a {
  flex: 1;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 3;
  color: black;
}

a:link,
a:visited,
a:focus {
  background: palegoldenrod;
  color: black;
}

a:hover {
  background: orange;
}

a:active {
  background: darkred;
  color: white;
}

ستكون النتيجة على النحو التالي:

نُعرّف في شيفرة HTML عنصر قائمة التنقل <nav> التي تمتلك صنف التنسيق "container". تضم هذه القائمة الروابط المطلوبة، بينما تُنسق شيفرة CSS القائمة والروابط معًا.

• تنص القاعدة الثانية على ما يلي:
  • الحاوية هي Flexbox: أي أن العناصر ضمنها مرنة، وتتوضع على نحوٍ متجاور حتى تملأ المساحة المخصصة لها.
  • ستكون المسافة بين العناصر 0.625% من اتساع القائمة.
• تُنسِّق القاعدة الثالثة الروابط:
  • يعني التصريح flex: 1 أن اتساع العناصر سيكون مضبوطًا كي تشغل جميعها المساحة المخصصة للحاوية.
  • ألغينا الخط أسفل الرابط text-decoration والإطار الذي يحيط به outline عند انتقال التركيز إليه، كي لا يفسدا مظهر الأزرار.
  • تُستخدم التصريحات الثلاثة الأخيرة لتوسيط النص ضمن الرابط، وضبط ارتفاع العنصر على القيمة 3 عبر الخاصية line-height لمنح الرابط بعض الارتفاع والمساعدة على توسيط النص عموديًا، وأخيرًا ضبط لون النص ليكون أسودًا.

الخلاصة

نأمل أن تكون المعلومات التي قدمناها في مقالنا قد لامست فعلًا ما تحتاجه في تنسيق الروابط، وسننتقل في المقال التالي إلى تفصيل طريقة استخدام خطوط الكتابة المخصصة (أو خطوط الويب كما هو شائع) ضمن موقعك.

ترجمة -وبتصرف- للمقال- Styling Links

اقرأ المزيد

• المقال السابق تنسيق القوائم في CSS.
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS.
• أساسيات لغة CSS.
•  تأثيرات حركية على عناصر قوائم HTML باستخدام CSS