الفرق بين المراجعتين ل"CSS/:visited"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 21: سطر 21:
 
شيفرة HTML:
 
شيفرة HTML:
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
<a href="#test-visited-link">Have you visited this link yet?</a><br>
+
<a href="#test-visited-link">هل قمت بزيارة هذا الرابط حتى الآن؟</a><br>
<a href="">You've already visited this link.</a>
+
<a href="">لقد قمت بالفعل بزيارة هذا الرابط</a>
  
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">

مراجعة 10:17، 11 أكتوبر 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">هل قمت بزيارة هذا الرابط حتى الآن؟</a><br>
<a href="">لقد قمت بالفعل بزيارة هذا الرابط</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

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