التأثير الذي نريد تحقيقه هو إضافة رمز صغير إلى جميع الروابط التي تشير إلى غير هذا الموقع لإخبار المستخدمين أن النقر على هذا الرابط سينقلك بعيدًا عن هذا الموقع. بالطبع، يمكن تحقيق ذلك من خلال JavaScript أكثر تعقيدًا، ولكن يمكننا الآن تحقيق هذه الوظيفة من خلال محددات سمات CSS 3.
أ[href^=”http:”] {
الخلفية: url(images/externalLink.gif) أعلى اليمين بدون تكرار؛
الحشو الأيمن: 10 بكسل؛
}
معنى الكود أعلاه هو: جميع الروابط التي تبدأ بـ http: ستتم إضافتها بأيقونة سهم صغير لتذكير المستخدم بأن هذا رابط خارجي، وسيغادر المستخدم الموقع عند النقر عليه. يمكن القول أن هذه الوظيفة سهلة الاستخدام للغاية وتسلط الضوء على سهولة استخدام تصميم الويب.
بالطبع، وذلك لأن جميع الروابط التي تشير إلى هذا الموقع تستخدم عناوين نسبية. ماذا لو كان الرابط لهذا الموقع يبدأ أيضًا بـ http:، أو يستخدم العناوين المطلقة والنسبية؟ يمكننا استخدام الكود التالي:
a[href^=”http:”] {
الخلفية: url(images/externalLink.gif) أعلى اليمين بدون تكرار؛
الحشو الأيمن: 10 بكسل؛
}
أ [href*=”www.dudo.org”] {
الخلفية: لا شيء؛
الحشو: 0؛
}
القاعدتان المذكورتان أعلاه هما: جميع العناوين التي تبدأ بـ http: تتم إضافتها بأيقونة الرابط الخارجي، ولا يتم استخدام العناوين النسبية الطبيعية بـ http://www.dudo.org/ لن تظهر أيقونة السهم.
مصدر المقال: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm