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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خاصیت ها:

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

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

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

خاصیت عمومی

خاصیت رویداد

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

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

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

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

accesskey

hidden itemtype

class

id lang
contenteditable inert

spellcheck

contextmenu

itemid style

dir

itemprop

tabindex

draggable itemref

title

dropzone itemscope

translate

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

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

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

onabort

onended onmousewheel
oncancel onerror

onpause

onblur

onfocus onplay
oncanplay onformchange

onplaying

oncanplaythrough

onforminput onprogress
onchange oninput

onratechange

onclick

oninvalid onreadystatechange
oncontextmenu onkeydown

onscroll

ondblclick

onkeypress onseeked
ondrag onkeyup

onseeking

ondragend

onload onselect
ondragenter onloadeddata

onshow

ondragexit

onloadedmetadata onstalled
ondragleave onloadstart

onsubmit

ondragover

onmousedown onsuspend
ondragstart onmousemove

ontimeupdate

ondrop

onmouseout onvolumechange
ondurationchange onmouseover

onwaiting

onemptied

onmouseup

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

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

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

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

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

پاسخ دهید

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