انتخابگر target: از انتخابگرهای نوع pseudo-class می باشد و این امکان را به ما می دهد تا بتوانیم زمانی که بر روی لینک داخلی کلیک شد, CSS آن قسمتی که هدف لینک هست را تغییر دهیم.

ادامه مطلب

 

قطعا شما با لینک های داخلی یک صفحه آشنایی دارید همان هایی که با # تعریف می شوند. استفاده از این لینک ها زمانی است که ما بخواهیم کاربر با کلیک بر روی آن لینک به قسمت یا بخش خاصی از همان صفحه منتقل شود. به عنوان مثال کد زیر را در نظر بگیرید:

<a href="#section"> لینک داخلی </a>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
<section id="section"> قسمتی خاص در همان صفحه </section>

اگر قسمتی که هدف ما برای انتقال کاربر به آنجا است در صفحه دیگری باشد کافی است به آن قسمت در صفحه دیگر به روش بالا id بدهیم و آدرس لینک را به صورت زیر تعریف کنیم:

<a href="complete-page-address/#section"></a>

<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->

<!-- قسمت مورد نظر در صفحه ای دیگر -->
<section id="section"></section>

به عنوان مثال می خواهیم زمانی که قسمت مورد نظر در دید کاربر قرار گرفت رنگ پس زمینه اش تغییر کند, داریم:

section:target
{
  background-color: yellow;
}

این CSS می گوید: ای تگِ section زمانی که هدفِ (target) لینک داخلی شدی رنگت باید زرد شود ;)

مثال زیر را بررسی کنید.

    حال اگر بخواهیم مثالمان را کاربردی کنیم به طوری که کاربر فقط در لحظه اولی که قسمت هدف جلوی دیدش قرار می گیرد فقط و فقط یک لحظه پس زمینه را رنگی ببیند و بعد از آن لحظه رنگ به حالت اول بازگردد. در واقع می خواهیم قسمت مورد نظر را highlight کنیم تا اثر بهتری در دید و تمرکز کاربر داشته باشد. برای این کار کافی است به وسیله animation ها در CSS برای یک لحظه پس زمینه را رنگی کنیم و بعد رنگش را به حالت اول بازگردانیم, داریم:

section:target
{
  animation: highlight .8s ease-out;
}

@keyframes highlight
{
  0%   { background-color: #FFFF66; }
  100% { background-color: #FFFFFF; }
}

  مثال را ببینید:  

 

 

قطعا برای استفاده از این قابلیت ایده هایی به ذهن شما هم خواهد رسید که می توانیم با هم به اشتراک بگذاریم. به عنوان آخرین مطلب ایده جالب ساخت یک گالری تصویر با کمک این قابلیت CSS که در سایت موزیلا دیدم را با هم می بینیم.

 

 

پشتیبانی مرورگرها

target: در مرورگرهای کروم, فایرفاکس,سافاری, اپرا +9.5 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.