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

در دسته انتخاب کننده‌های زبان طراحی css اگر مقالات قبلی را حتی به شکل گذرا مطالعه کرده باشید ، متوجه شدید که اکثر انتخاب کننده‌هایی که بصورت : و یا :: بودند را بررسی کردیم و اکنون به یک گزینه جدید بنام سلکتور lang رسیدیم . اکثر انتخابگر هایی که معرفی شده است تقریبا Full Support هستند و در تمامی نسخه‌های مرورگر ها پشتیبانی می‌شوند . این سلکتور را نیز می‌توانید با خیال راحت برای پروژه‌های طراحی سایت خودتان استفاده کنید .

سلکتور lang کمی نسبت به بقیه متفاوت است اما کاربرد بسیار جالبی دارد . شاید برای شما نیز پروژه هایی وجود داشته باشد که داخل صفحاتی از آن ، هم زبان فارسی وجود داشت باشد و هم زبان انگلیسی ، یا هر نوع دیگری از این مثال ، برای نمونه زبان انگلیسی و زبان فرانسه در یک صفحه استفاده شود . از آنجایی که باید توسط دستور font-face خانواده فونت های لازم را به پروژه خودتان متصل کنید ، در این بخش می‌توان توسط چندین font-face خانواده های فونت مختلف یا همان font-family هایی را به شکل مجزا تعریف کرد . مثلا برای زبان فارسی یک font-family با نام dana و یک فونت انگلیسی با نام Manrope تعریف کنیم . به مثال زیر توجه کنید :

@font-face{
	src: url("fonts/dana.woff") format("woff");
	font-family: "dana";
	font-size: 1rem;
}
@font-face{
	src: url("fonts/Manrope.woff") format("woff");
	font-family: "Manrope";
	font-size: 1rem;
}

برای اینکه از این دو فونت بتوانیم استفاده کنیم ، ساده ترین راه این است که یک کلاس تعریف کنیم و داخل این کلاس ، به font-family مدنظر اشاره کنیم . سپس از نام این کلاس برای تغییر فونت هر بخشی که نیاز داشتیم استفاده کنیم . همانند مثال زیر :

.dana-font{
	font-family:"dana";
}
.Manrope-font{
	font-family:"Manrope";
}

اکنون توسط این دو بخشی که اضافه کردیم ، می‌توانیم یک فونت را بعنوان فونت اصلی در نظر بگیریم ، مثلا فونت دانا را برای کل پروژه به شکل زیر استفاده کنیم :

body , html {
	font-family: "dana";
}

اگر اکنون بخشی در سایت داشتیم که نوشته های آن قسمت انگلیسی بود و نیاز به فونت انگلیسی بود ، می‌توان بسادگی و بدون درگیر شدن با هرچیز دیگری از نام کلاس Manrope-font استفاده کرد ، به شکل زیر :

<p class="Manrope-font">Lorem ipsum dolor sit amet .</p>

خب این روش در حالت اولیه مشکلی ندارد ، اما هنگام داینامیک سازی وب سایت ، امکان قراردادن نام کلاس Manrope-font برای تمامی بخش‌ها وجود ندارد . در حالتی ساده‌تر می‌توان از انتخابگر lang استفاده کرد . یک نمونه از مثال برای این مورد را در ادامه خواهید دید .

چرا و چگونه از انتخابگر lang باید استفاده کنیم ؟

انتخابگر lang باید توسط یک صفت که به تگ‌های html نسبت داده خواهد شد در کدهای css استفاده شود . برای اینکه توسط خاصیت lang بتوانیم font-family و یا حتی سایر ویژگی های یک بخش خاص را کنترل کنیم ، باید ابتدا کد خود را به شکل زیر تغییر دهیم :

<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>

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

*:lang(en) {
  font-family: "Manrope-font";
  border: 1px solid #414141;
}

دقت داشته باشید که وقتی سلکتور lang را استفاده می‌کنیم ، به این دلیل که باید مشخص کنیم برای چه مقادیری از صفات lang داخل صفحه قصد استایل نویسی داریم ، باید مثل یک تابع با آن برخورد کنیم و توسط یک پرانتز بازوبسته ، مقدار صفت را داخل آن معرفی کنیم . دقیقا همانند مثال بالا که خدمتتان معرفی کردیم .

یک نکته مهم در مورد lang

فعلا زمانی که این مقاله در حال انتشار است ، اگر شما قصد داشته باشید تا به چندین انتخابگر lang به شکل همزمان استایل دهید ؛ مثلا برای تمامی زبان های غیرفارسی مثل انگلیسی و آلمانی و … تنها یک فونت اختصاص دهید ، کدی وجود دارد که به شکل زیر است :

*:lang(en,de) {
  color: green;
}

اما این حالت فعلا در داخل مرورگر Firefox و نسخه 114 به بالا پشتیبانی می‌شود و برای سایر مرورگرها باید از حالت های سینگل استفاده کرده و استایل نویسی کنید . پس حتما به این نکته نیز توجه لازم را داشته باشید . این سلکتور تقریبا از سلکتورهای جدید است و هنوز تا شناخته شدن کامل و جا افتادن در بستر طراحی ، کمی زمان نیاز دارد . امیدواریم این محتوا برای شما مفید بوده باشد . پاینده باشید .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا