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

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
سطر 67: سطر 67:
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes CSS Level 2 (Revision 1)]‎، جعلت هذه المواصفة عدد الخاصيات التي يمكن تطبيقها مع هذا المُحدِّد محدودًا.
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes CSS Level 2 (Revision 1)]‎، جعلت هذه المواصفة عدد الخاصيات التي يمكن تطبيقها مع هذا المُحدِّد محدودًا.
*مواصفة [http://www.w3.org/TR/CSS1/#anchor-pseudo-classes CSS Level 1].
*مواصفة [http://www.w3.org/TR/CSS1/#anchor-pseudo-classes CSS Level 1].
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]

مراجعة 15:34، 28 يناير 2018

الصنف الزائف ‎:visited في CSS (أي pseudo-class) يُمثِّل عنصرًا تمت زيارته من قبل، ولأسباب تابعة للخصوصية فإنَّ عدد الخاصيات التي يمكن تغيير قيمتها باستخدام هذا المُحدِّد قليلةٌ جدًا.

a:visited {
  color: green;
}

الأنماط المُعرَّفة للصنف الزائف ‎:visited سيتم تجاوزها بأيّة أصناف زائفة تليها خاصة بالروابط (مثل ‎:active أو ‎:hover أو ‎:link) التي لها نفس درجة التحديد. ولتطبيق الأنماط تطبيقًا صحيحًا فضع قاعدة ‎:visited بعد قاعدة :link لكن قبل بقية القواعد الخاصة بالروابط وفق الترتيب ‎:link ثم ‎:visited ثم ‎:hover ثم ‎:active.

ملاحظة: استخدم المُحدِّد :any-link لتحديد الروابط جميعها سواءً زارها المستخدم من قبل أم لم يزرها.

لأسبابٍ تتعلق بالخصوصية، فإنَّ عدد الخاصيات التي مكن تطبيقها على هذا الصنف محدودةٌ جدًا:

  • الخاصيات المسموحة هي color و background-color و border-color و border-bottom-color و border-left-color و border-right-color و border-top-color و column-rule-color و outline-color.
  • خاصيات SVG المسموحة هي fill و stroke.
  • سيتم تجاهل قناة alpha لجميع الأنماط المُطبَّقة.
  • صحيحٌ أنَّ الخاصيات السابقة قد تُغيّر من مظهر الألوان للمستخدم النهائي، لكن الخاصية window.getComputedStyle ستكذب دومًا وستُعيد القيمة اللونية لحالات الرابط الأخرى (الحالات ما عدا الحالة ‎:visited)

الشكل العام لهذا المحدد:

:visited

أمثلة

شيفرة HTML:

<a href="#test-visited-link">Have you visited this link yet?</a><br>
<a href="">You've already visited this link.</a>

شيفرة CSS:

a {
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 3.0 3.5 1.0
جعل عدد الخاصيات محدودًا 6.0 4.0 8.0 ؟ 5.0

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