آموزش سلکتور focus: در css

یکی از حالت‌ها یا بهتر است بگوییم event و رویدادهایی که داخل سایت و خصوصا طراحی فرم می‌تواند وجود داشته باشد حالت focus است . focus زمانی اتفاق خواهد افتاد که شما روی یک المان کلیک کنید ، به نوعی می‌توان گفت تشابه زیادی با حالت click در جاوا اسکریپت و جی کوئری دارد .

توسط حالت focus می‌توانیم مشخص کنیم که وقتی روی المان خاصی روی صفحه وب کلیک شد ، چه اتفاقاتی رخ دهد . ویژگی focus عموما روی المان های فرم و تگ هایی همچون input و textarea بخوبی قابل مشاهده است .

جهت ایجاد یک تجربه کاربری مناسب یا به عبارتی یک UX خوب ، باید تا حد امکان به واکنش های کاربر داخل صفحه پاسخ داد ، دو حالت بسیار کاربردی برای ایجاد واکنش در صفحه وب حالت های focus و حالت های hover هستند که بازهم کارایی حالت hover بیشتر از حالت focus است . بخش مربوط به hover را در مقالات آتی خدمتتان آموزش خواهیم داد .

چرا باید از حالت focus استفاده کنیم ؟

همانطور که گفته شد حالت focus بیشتر برای المان های فرم کاربرد دارد و زمانی که شما بروی المان های خاصی از فرم مثلا input کلیک کردید ، یک تغییر استایل جزئی داخل آن ایجاد شود تا کاربر متوجه شود که اکنون در داخل این input قرار گرفته و باید آن را تکمیل کند .

معمولا استایل هایی که برای این رویداد یعنی focus استفاده می‌شوند ، تغییر در قسمت border مثل رنگ و یا بهتر از هر استایلی ، تغییر در حالت box shadow است .

تغییر در ضخامت border مسبب به هم ریختگی استایل خواهد شد از این جهت اگر قصد دارید تا با focus شدن روی input تغییر حالتی در border آن ایجاد کنید ، بهتر است روی رنگ border انجام دهید .

input:focus {
  border-color: blue;
}

اما همانطور که گفته شد ، بهترین حالت برای ایجاد تغییر روی المان های فرم استفاده از دستور box-shadow است که مسبب به هم ریختگی در نظم ساختاری صفحه شما نخواهد شد :

input:focus {
  box-shadow:0 0 0 5px #818181;
}

اینکه چه استایلی را برای این بخش ایجاد کنید کاملا بستگی به سلیقه خود شما و روانشناسی و تم رنگ سایت داشته و هیچ اجباری در استفاده از طرح های مشخص برای این بخش وجود ندارد .

در فرم های فریمورک بوت استرپ دستورات focus به شکلی زیبا استفاده شده است و دستوری که داخل این فریمورک برای بخش focus درنظر گرفته شده است به شکل زیر است :

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

خروجی این تصویر بروی input ها و درکل هر المانی از بوت استرپ که کلاس form-control را داشته باشد به شکل زیر است :

همانطور که مشاهده می‌کنید با اعمال شدن این دستور برای المان های فرم ، خاصیت active شدن آنها بیشتر مشخص خواهد شد لذا بعنوان یک طراح باید جهت بهبود تجربه کاربری به آن توجه داشته باشید . بنابراین هنگام کدنویسی برای طراحی پروژه ، بهتر است حالتی را برای focus شدن و یا کلاس خاصی را برای آن تعریف کنید تا وجه فرم های پروژه شما بسیار زیبا باشد .

این انتخاب کننده بسیار کاربردی و در عین حال ساده ، تاثیر بسزایی در UX سایت شما دارد و لذا دوستانی که بعنوان طراح قالب سایت قصد فعالیت دارند باید برای قسمت فرم های سایت که اهمیت بسیاری را یدک می‌کشد ، حالت های focus و disabled و read only و … را به درستی طراحی کنند تا هرزمان صاحب وب سایت داخل فرم های سایت از چنین بخش هایی استفاده کرد ، بتواند طراحی متمایزی نسبت به سایر المان های ساده در فرم داشته باشد . برای مطالعه سایر سلکتور های جذاب در css میتوانید قسمت مقالات طراحی سایت در بلاگ ما را مشاهده کنید .