()dir یک pseudo-class است که برای انتخاب و استایل دهی به عناصر بر اساس جهت تعریف شده برای آنها استفاده می شود.
جهت سند HTML یا همان صفحه وب بصورت پیشفرض از چپ به راست (LTR: Left to Right) است و نیازی به مشخص کردن آن نیست اما برای ما فارسی زبان ها نیاز است تا جهت صفحه را بوسیله ویژگی dir تبدیل به راست به چپ (RTL) کنیم. و معمولا این کار را با تعیین کردن این ویژگی برای عنصر html بصورت زیر انجام می دهیم:
<html dir="rtl"></html>
اکنون جهت تمام عناصر صفحه از راست به چپ می باشد.
کار این انتخابگر این است که عناصر را بر اساس جهتشان انتخاب کند. به عنوان نمونه فرض کنید عناصری بصورت زیر داریم:
<html dir="rtl">
<body>
<section></section>
<section dir="ltr"></section>
</body>
</html>
حال اگر قصد انتخاب sectionهایی که جهت RTL دارند را داشته باشیم بصورت زیر عمل می کنیم:
section:dir(rtl) {
}
که با این کار فقط section اول انتخاب می شود به این دلیل که جهت را از عنصر html به ارث برده است. اما برای section دوم بصورت جداگانه dir تعریف شده است و جهتش متفاوت است پس انتخاب نمی شود.
پارامترها
این تابع تنها یک پارامتر می پذیرد و مقدار آن پارامتر فقط می تواند ltr یا rtl باشد.
اگر به دنبال عنصری هستیم که جهت آن راست به چپ است, می نویسیم:
.element:dir(rtl) {
}
و برای مورد چپ به راست بودن می نویسیم:
.element:dir(ltr) {
}
توجه داشته باشید که برای انتخاب کردن عناصر توسط این انتخابگر نیازی نیست که خود عنصر ویژگی dir را داشته باشد. در حالت پیشفرض تمام عناصر ltr هستند پس همه آنها می توانند توسط این انتخابگر هدف گرفته شوند. و در مورد rtl هم کافی است یکی از اجداد عنصر ویژگی dir را داشته باشد تا بتوانیم آن عنصر را انتخاب کنیم.
ویژگی direction در این ماجرا
در CSS ویژگی direction که کار آن تعیین جهت صفحه می باشد هیچ تاثیری بر روی این انتخابگر ندارد:
<html dir="rtl">
<body>
<section></section>
<section></section>
</body>
</html>
در مورد این مثال اگر در CSS داشته باشیم:
section {
direction: ltr;
}
section:dir(ltr) {
/* هیچ کدام انتخاب نمی شوند */
}
از آنجایی که یکی از عناصر پدر sectionها یعنی html دارای ویژگی dir با مقدار rtl است, انتخابگر dir() این عناصر را نمی تواند به عنوان ltr (چپ به راست) هدف قرار دهد با آنکه در CSS جهت این عناصر توسط ویژگی direction تغییر کرده است.
پشتیبانی مرورگرها
()dir: فعلا فقط در مرورگر فایرفاکس آن هم با استفاده از پیشوند -moz- کار می کند:
section:-moz-dir(rtl) {
}
طراحی صفحات دو جهته
برای طراحی صفحات دو جهته یعنی آنهایی که هم به زبان فارسی هستند و هم به زبان انگلیسی و نیاز است تا جهت چیدمان عناصر بر اساس زبان تغییر کند بهتر است با توجه به اینکه این انتخابگر بخوبی در مرورگرها پشتیبانی نمی شود از انتخابگر ویژگی کمک بگیریم.
یعنی با توجه به زبان, جهت را برای html تعیین کنیم:
<html lang="en-UK"></html> <!-- پیشفرض ltr -->
<!-- یا -->
<html lang="fa-IR" dir="rtl"></html>
سپس بصورت زیر اول استایل مربوط به چپ به راست و سپس استایل های مربوط به راست به چپ را بنویسیم:
.element {
}
[dir="rtl"] .element {
/* استایل های مربوط به جهت راست به چپ */
}
برای درک بهتر این روش کد زیر را با دقت بررسی کنید و همچنین ویژگی dir عنصر html را تغییر دهید تا مطلب روشن شود:
تفاوت dir() و [dir=""]
استفاده از انتخابگر ویژگی [dir=""] تنها زمانی کاربرد دارد که عنصر در HTML دارای این ویژگی باشد. مانند مثال زیر:
<div dir="rtl"></div>
در مقابل اگر عنصری جهت را از پدرانش به ارث برده باشد انتخابگر dir() می تواند آن جهت را تشخیص دهد و عنصر را انتخاب کند و نیازی به ویژگی dir برای آن عنصر نیست.
dir
,selectors
,انتخابگر css
,انتخابگر جهت صفحه
,ساخت سایت دو زبانه
,صفحه آرایی دو جهته
