کاربردهای انتخابگر target

در این مطلب به بررسی مثال هایی می پردازیم که تا الان امکان ساخت آنها فقط با استفاده از جاوااسکریپت وجود داشت. و نشان خواهیم داد که می توان با استفاده از انتخابگر target در سی اس اس آنها را پیدا سازی کرد.

پیشنیازها

1. :target
2. :not

آشکار و مخفی کردن محتوا

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

فرض کنید می خواهیم قسمت نظرات در حالت عادی مخفی باشد و وقتی بر روی دکمه ای کلیک می شود آشکار شود. به جای اینکه از جاوااسکریپت استفاده کنیم می توانیم به این انتخابگر پناه ببریم.

برای این کار کافی است قسمت نظرات را بجز زمانی که در حالت target قرار دارد مخفی کنیم:

<a href="#comments">Show Comments</a>

<section id="comments">
  <h3>Comments</h3>
  <!-- Comments here... -->
  <a href="#">Hide Comments</a>
</section>

#comments:not(:target) {
  display: none;
}
#comments:target {
  display: block;
}

فعال سازی SideNav

برای اینکه این نوع منو را بصورت کشویی وارد صفحه نمایش بکنیم می توانیم در حالت target با تغییر مقدار تابع translate3d برای ویژگی transform منو را به داخل صفحه بیاوریم که البته می توانیم از transition نیز برای اعمال افکت بر روی آن استفاده کنیم:

#nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 80%;
  max-width: 400px;
}

#nav:not(:target) {
  transform: translate3d(-100%,0,0);
  transition: transform 1.5s;
}

#nav:target {
  transform: translate3d(0,0,0);
  transition: transform 1s;
}

دموی زیر را بررسی کنید:

 

See the Pen SideNav no js by Mojtaba Seyedi (@seyedi) on CodePen.

 

ساخت مدال

برای باز و بسته کردن یک مدال نیز می توان از این تکنیک استفاده کرد:

#modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 70%;
  background: #fff;
  padding: 20px;
  text-align: center;
}

#modal-container:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}

#modal-container:target {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s, visibility 1s;
}

اعمال تغییرات سراسری

فرض کنید بخواهیم با کلیک کردن بر روی یک دکمه رنگ های خاصی از سایت تغییر کنند یا این چیدمان سایت عوض شود. اگر بخواهیم از جاوااسکریپت برای این کار استفاده کنیم در زمانی که بر روی دکمه کلیک می شود یک کلاس به عنصر body می دهیم و زمانی که دوباره کلیک می شود آن کلاس را می گیریم و با استفاده از آن کلاس می توان تغییراتی که نیاز داریم را در فرزندان body اعمال کنیم.

با استفاده از این روش می توانیم به جای اینکه به body کلاس بدهیم، تغییرات را در زمانی که body در حالت target قرار می گیرد اعمال کنیم.

در مثال زیر از این روش برای آشکار و مخفی کردن ستون کناری استفاده می شود:

#body:not(:target) {
  main { width: 60%; }
  aside { width: 30%; }
  .show-sidebar-link { display: none; }
}

#body:target {
  main { width: 100%; }
  aside { display: none; }
  .hide-sidebar-link { display: none; }
}

نکته

دو مشکل در این روش وجود دارد:

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

نکته دوم اینکه کلیک بر روی لینک تاریخچه مرورگر کاربر را تغییر می دهد و این قضیه باعث می شود مثلا اگر کاربر از دکمه Back استفاده کند نتیجه آن چیزی که می خواهد نباشد.

هدف از بیان این مطلب این بود که با چنین تکنیکی آشنا باشیم و اینکه بدانیم می توانیم از پتانسیل های به ظاهر مخفی CSS استفاده کنیم.

همچنین می توان از این تکنیک به عنوان راه حل پشتیبان استفاده کرد مثلا فرض کنید به هر دلیلی در مرورگر کاربر جاوااسکریپت اجرا نمی شود. با استفاده از این روش هنوز هم می توان تعاملاتی برای کاربر بوجود آورد.

منبع

• The :target Trick