تگ bdi و کاربرد آن در html

تگ bdi و کاربرد آن در html

 تگ bdi مخفف Bi-Directional Isolation یک عنصر جدا کننده دو جهته است و یک قسمت از متن که ممکن است در جهتی خلاف دیگر بخش های متن به نمایش درآید را جدا میکند.

به مثال زیر توجه کنید :

در اینجا ۳ نام کاربری به همراه امتیازاتشان در یک مسابقه نشان داده شده است. اگر عنصر bdi در مرورگر پشتیبانی نمی شود، نام کاربری عربی در متن در مکان درست قرار نمی گیرد (شماره “۹۰” به جای کلمه “إیان” در کنار کلمه “user” قرار میگیرد).

توجه: عنصر bdi در حال حاضر فقط در فایرفاکس و کروم پشتیبانی می شود.

نتیجه متفاوت این مثال را هم در مرورگر هایی که از این عنصر پشتیبانی میکنند (تصویر شماره ۱) و هم در مرورگرهایی که از آن پشتیبانی نمیکنند (تصویر شماره ۲) ، میبینید :

 تصویر شماره ۱:

تگ bdi و کاربرد آن در html

تگ bdi و کاربرد آن در html

تصویر شماره ۲:

تگ bdi و کاربرد آن در html

تگ bdi و کاربرد آن در html

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

اگر چه از نظر بصری با استفاده قانون unicode-bidi در CSS به نتیجه یکسانی خواهیم رسید اما اگر مرورگرها، مجاز به نادیده گرفتن استایل CSS باشند بهترین راه، استفاده از عنصر bdi است .

تفاوت بین HTML 4.01 و HTML5

عنصر <bdi> یک تگ جدید در HTML5 است.

خاصیت ها:

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

تگ <bdi> هیچ خاصیت ویژه ای ندارد .

خاصیت های عمومی

تگ <bdi> از خاصیت های عمومی HTML پشتیبانی میکند

accesskey

hiddenitemtype

class

idlang
contenteditableinert

spellcheck

contextmenu

itemidstyle

dir

itemprop

tabindex

draggableitemref

title

dropzoneitemscope

translate

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

 خاصیت های رویداد

تگ <bdi> از خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabort

onendedonmousewheel
oncancelonerror

onpause

onblur

onfocusonplay
oncanplayonformchange

onplaying

oncanplaythrough

onforminputonprogress
onchangeoninput

onratechange

onclick

oninvalidonreadystatechange
oncontextmenuonkeydown

onscroll

ondblclick

onkeypressonseeked
ondragonkeyup

onseeking

ondragend

onloadonselect
ondragenteronloadeddata

onshow

ondragexit

onloadedmetadataonstalled
ondragleaveonloadstart

onsubmit

ondragover

onmousedownonsuspend
ondragstartonmousemove

ontimeupdate

ondrop

onmouseoutonvolumechange
ondurationchangeonmouseover

onwaiting

onemptied

onmouseup

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

اعداد مشخص شده در جدول زیر ، اولین نسخه ی مرورگرهایی که به طور کامل از این عنصر پشتیبانی میکنند را مشخص میکند .

عنصر
گوگل کروم
اینترنت اکسپلورر
فایرفاکس
سافاری
اپرا
<bdi>۱۶٫۰پشتیبانی نمی کند۱۰٫۰پشتیبانی نمی کند

پشتیبانی نمی کند

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *