ویژگی های

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

ویژگی ها چیزی هستند که HTML را بسیار قدرتمند می کنند. ویژگی‌ها نام‌هایی هستند که با فاصله از هم جدا شده‌اند و جفت‌های نام/مقدار در تگ آغازین ظاهر می‌شوند و اطلاعاتی درباره و عملکرد عنصر ارائه می‌دهند.

ویژگی ها رفتار، پیوندها و عملکرد عناصر را تعریف می کنند. برخی از ویژگی ها سراسری هستند، به این معنی که می توانند در تگ آغازین هر عنصر ظاهر شوند. سایر ویژگی‌ها برای چندین عنصر اعمال می‌شوند اما نه همه، در حالی که سایر ویژگی‌ها مختص عنصر هستند و فقط به یک عنصر مربوط می‌شوند. در HTML، تمام ویژگی ها به جز ویژگی های بولی و تا حدی شمارش شده، به یک مقدار نیاز دارند.

اگر مقدار مشخصه شامل یک فاصله یا کاراکترهای خاص باشد، مقدار باید نقل قول شود. به همین دلیل و برای بهبود خوانایی، نقل قول همیشه توصیه می شود.

در حالی که HTML به حروف بزرگ و کوچک حساس نیست، برخی از مقادیر مشخصه حساس هستند. مقادیری که بخشی از مشخصات HTML هستند به حروف بزرگ و کوچک حساس نیستند. مقادیر رشته هایی که تعریف شده اند، مانند نام کلاس و شناسه، به حروف بزرگ و کوچک حساس هستند. اگر یک مقدار مشخصه در HTML به حروف کوچک و بزرگ حساس باشد، زمانی که به عنوان بخشی از انتخابگر ویژگی در CSS و جاوا اسکریپت استفاده شود، به حروف بزرگ و کوچک حساس است. در غیر این صورت، این نیست.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

ویژگی های بولی

اگر یک ویژگی بولی وجود داشته باشد، همیشه درست است. ویژگی‌های بولی شامل autofocus ، inert ، checked ، disabled ، required ، reversed ، allowfullscreen default, loop ، autoplay ، controls ، muted ، readonly ، multiple, و selected . اگر یک (یا چند) از این ویژگی‌ها وجود داشته باشد، عنصر غیرفعال، الزامی، فقط خواندنی و غیره است. اگر وجود نداشته باشد، غیرفعال است.

مقادیر بولی می توانند حذف شوند، روی یک رشته خالی تنظیم شوند، یا نام ویژگی باشند. اما لازم نیست مقدار در واقع روی رشته true تنظیم شود. همه مقادیر، از جمله true ، false و 😀 ، در حالی که نامعتبر هستند، به true تبدیل می شوند.

این سه تگ معادل هستند:

<input required>
<input required="">
<input required="required">

اگر مقدار مشخصه نادرست است، ویژگی را حذف کنید. اگر مشخصه درست است، ویژگی را وارد کنید اما مقداری ارائه نکنید. به عنوان مثال، required="required" یک مقدار معتبر در HTML نیست. اما همانطور که required بولی است، مقادیر نامعتبر به true تبدیل می شوند. اما از آنجایی که ویژگی‌های برشماری نامعتبر لزوماً به همان مقدار مقادیر از دست رفته حل نمی‌شوند، عادت کردن به حذف مقادیر آسان‌تر از یادآوری این است که کدام ویژگی‌ها در مقابل شمارش‌شده‌های بولی هستند و به طور بالقوه یک مقدار نامعتبر ارائه می‌کنند.

هنگام جابجایی بین true و false، به جای تغییر مقدار، ویژگی را به طور کامل با جاوا اسکریپت اضافه و حذف کنید.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

توجه داشته باشید که در زبان‌های XML، مانند SVG، همه ویژگی‌ها باید دارای یک مقدار باشند، از جمله ویژگی‌های بولی.

صفات برشمرده شده

گاهی اوقات ویژگی های برشماری شده با ویژگی های بولی اشتباه گرفته می شوند. آنها ویژگی های HTML هستند که دارای مجموعه محدودی از مقادیر معتبر از پیش تعریف شده هستند. مانند ویژگی های بولی، اگر مشخصه موجود باشد اما مقدار از دست رفته باشد، آنها دارای یک مقدار پیش فرض هستند. به عنوان مثال، اگر <style contenteditable> را وارد کنید، به طور پیش فرض <style contenteditable="true"> است.

با این حال، بر خلاف ویژگی های بولی، حذف ویژگی به معنای نادرست بودن آن نیست. یک ویژگی فعلی با یک مقدار گمشده لزوما درست نیست. و پیش‌فرض مقادیر نامعتبر لزوماً با یک رشته تهی یکسان نیست. در ادامه مثال، contenteditable به طور پیش‌فرض به inherit در صورت گم شدن یا نامعتبر بودن، می‌تواند به صراحت روی false تنظیم شود.

مقدار پیش فرض به ویژگی بستگی دارد. برخلاف مقادیر بولی، ویژگی‌ها در صورت وجود، به‌طور خودکار «درست» نیستند. اگر <style contenteditable="false"> را وارد کنید، عنصر قابل ویرایش نیست. اگر مقدار نامعتبر باشد، مانند <style contenteditable="😀"> ، یا، در کمال تعجب، <style contenteditable="contenteditable"> ، مقدار نامعتبر است و به طور پیش فرض به inherit می رسد.

در بیشتر موارد با ویژگی های شمارش شده، مقادیر گم شده و نامعتبر یکسان هستند. به عنوان مثال، اگر مشخصه type در یک <input> وجود نداشته باشد، اما بدون مقدار باشد، یا دارای مقدار نامعتبر باشد، پیش‌فرض text است. اگرچه این رفتار رایج است، اما یک قانون نیست. به همین دلیل، مهم است که بدانیم کدام ویژگی‌ها در مقایسه با برشماری‌های بولی هستند. در صورت امکان مقادیر را حذف کنید تا اشتباه نکنید و مقدار مورد نیاز را جستجو کنید.

ویژگی های جهانی

ویژگی‌های سراسری ویژگی‌هایی هستند که می‌توانند روی هر عنصر HTML، از جمله عناصر در <head> تنظیم شوند. بیش از 30 ویژگی جهانی وجود دارد. در حالی که در تئوری، همه اینها را می توان به هر عنصر HTML اضافه کرد، برخی از ویژگی های سراسری وقتی روی برخی از عناصر تنظیم می شوند، تأثیری ندارند. به عنوان مثال، تنظیم hidden در یک <meta> به عنوان محتوای متا نمایش داده نمی شود.

id

id مشخصه جهانی برای تعریف یک شناسه منحصر به فرد برای یک عنصر استفاده می شود. اهداف بسیاری از جمله: - هدف شناسه قطعه پیوند. - شناسایی یک عنصر برای اسکریپت نویسی. - مرتبط کردن یک عنصر فرم با برچسب آن. - ارائه برچسب یا توضیحات برای فناوری های کمکی. - سبک های هدف گیری با (ویژگی بالا یا به عنوان انتخابگر ویژگی) در CSS.

مقدار id یک رشته بدون فاصله است. اگر حاوی یک فاصله باشد، سند خراب نمی شود، اما باید id را با کاراکترهای فرار در HTML، CSS و JS خود هدف قرار دهید. همه کاراکترهای دیگر معتبر هستند. یک مقدار id می تواند 😀 یا .class باشد، اما ایده خوبی نیست. برای آسان‌تر کردن برنامه‌نویسی برای خود فعلی و آینده‌تان، اولین کاراکتر id را به یک حرف تبدیل کنید و فقط از حروف ASCII، ارقام، _ و - استفاده کنید. این تمرین خوبی است که یک قرارداد نامگذاری id ایجاد کنید و سپس به آن پایبند باشید، زیرا مقادیر id به حروف بزرگ و کوچک حساس هستند.

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

شناسه قطعه پیوند

نوار پیمایش شامل چهار لینک است. ما بعداً عنصر پیوند را پوشش خواهیم داد، اما در حال حاضر، متوجه شوید که پیوندها به URL های مبتنی بر HTTP محدود نمی شوند. آنها می توانند شناسه های قطعه برای بخش هایی از صفحه در سند فعلی (یا در اسناد دیگر) باشند.

در سایت کارگاه یادگیری ماشین، نوار پیمایش در هدر صفحه شامل چهار پیوند است:

ویژگی href، هایپرلینکی را فراهم می کند که فعال کردن پیوند کاربر را به آن هدایت می کند. وقتی یک URL شامل یک علامت هش ( # ) به دنبال آن یک رشته از کاراکترها باشد، آن رشته یک شناسه قطعه است. اگر آن رشته با id یک عنصر در صفحه وب مطابقت داشته باشد، قطعه یک لنگر یا نشانک برای آن عنصر است. مرورگر به نقطه ای که لنگر تعریف شده است پیمایش می کند.

این چهار پیوند به چهار بخش از صفحه ما اشاره می کنند که با ویژگی id آنها مشخص شده است. هنگامی که کاربر روی هر یک از چهار پیوند در نوار پیمایش کلیک می کند، عنصری که توسط شناسه قطعه به آن پیوند داده شده است، عنصری که حاوی شناسه منطبق منهای # است، به نمایش در می آید.

محتوای <main> کارگاه یادگیری ماشینی دارای چهار بخش با شناسه است. هنگامی که بازدیدکننده سایت روی یکی از پیوندها در <nav> کلیک می‌کند، بخش دارای شناسه قطعه به نمایان می‌رود. نشانه گذاری مشابه است:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

با مقایسه شناسه های قطعه در پیوندهای <nav> ، متوجه خواهید شد که هر کدام با id یک <section> در <main> مطابقت دارند. مرورگر یک لینک رایگان "بالای صفحه" به ما می دهد. تنظیم href="#top" ، غیر حساس به حروف بزرگ، یا به سادگی href="#" ، کاربر را به بالای صفحه پیمایش می‌کند.

جداکننده علامت هش در href بخشی از شناسه قطعه نیست. شناسه قطعه همیشه آخرین قسمت URL است و به سرور ارسال نمی شود.

انتخابگرهای CSS

در CSS، می‌توانید هر بخش را با استفاده از یک انتخاب‌کننده شناسه، مانند #feedback یا، برای جزئیات کمتر، انتخاب‌کننده ویژگی حساس به حروف بزرگ، [id="feedback"] هدف‌گیری کنید.

اسکریپت

در MLW.com، یک تخم مرغ عید پاک فقط برای کاربران موش وجود دارد. با کلیک روی کلید چراغ، صفحه روشن و خاموش می شود.

نشانه گذاری تصویر سوئیچ نور به این صورت است: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> ویژگی id می تواند به عنوان پارامتر برای متد getElementById() و با پیشوند # به عنوان بخشی از یک پارامتر برای متدهای querySelector() و querySelectorAll() .

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

یک تابع جاوا اسکریپت ما از این توانایی برای هدف قرار دادن عناصر با ویژگی id آنها استفاده می کند:

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

عنصر <label> HTML دارای یک ویژگی for است که به عنوان مقدار id کنترل فرمی که با آن مرتبط است می گیرد. ایجاد یک برچسب صریح با گنجاندن یک id در هر کنترل فرم و جفت کردن هر کدام با ویژگی برچسب for تضمین می کند که هر کنترل فرم دارای یک برچسب مرتبط است.

در حالی که هر برچسب می تواند دقیقاً با یک کنترل فرم مرتبط شود، یک کنترل فرم ممکن است بیش از یک برچسب مرتبط داشته باشد.

اگر کنترل فرم بین تگ‌های باز و بسته <label> تودرتو باشد، ویژگی‌های for و id مورد نیاز نیستند: این برچسب "ضمنی" نامیده می‌شود. برچسب‌ها به همه کاربران اجازه می‌دهند بدانند هر کنترل فرم برای چه چیزی است.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

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

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

وقتی دکمه‌های رادیویی را اضافه می‌کنیم، همانطور که برچسب‌ها ارزش دکمه‌های رادیویی را توصیف می‌کنند، همه دکمه‌های همنام را در یک <fieldset> با <legend> برچسب یا سوال برای کل مجموعه می‌کنیم.

سایر کاربردهای دسترسی

استفاده از id در دسترس‌پذیری و قابلیت استفاده به برچسب‌ها محدود نمی‌شود. در مقدمه متن ، یک <section> با ارجاع به id یک <h2> به عنوان مقدار aria-labelledby <section> برای ارائه نام قابل دسترسی، به نشانه منطقه تبدیل شد:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

بیش از 50 حالت و ویژگی aria-* وجود دارد که می توان از آنها برای اطمینان از دسترسی استفاده کرد. aria-labelledby , aria-describedby , aria-details و aria-owns به عنوان مقدار خود فهرست مرجع id جدا شده با فاصله را در نظر می گیرند. aria-activedescendant ، که عنصر اصلی متمرکز فعلی را مشخص می کند، یک مرجع id واحد را به عنوان مقدار خود می گیرد: عنصر واحدی که فوکوس دارد (در هر زمان فقط یک عنصر را می توان فوکوس کرد).

توجه: با استفاده از aria-labelledby ، می‌توانید یک ارتباط معکوس از یک کنترل فرم به چندین برچسب، از جمله متنی که در یک <label> تودرتو نیست، ایجاد کنید، چه برچسب‌های متنی بیش از یک فرم کنترل داشته باشد یا نه. اگر یک کنترل دارای هر دو <label> و aria-labelledby باشد، aria-labelledby دارای اولویت است. کاربران متن <label> را نمی شنوند مگر اینکه aria-labelledby شامل شناسه برچسب باشد.

class

مشخصه class راه دیگری برای هدف قرار دادن عناصر با CSS (و جاوا اسکریپت) فراهم می کند، اما هیچ هدف دیگری در HTML ندارد (اگرچه چارچوب ها و کتابخانه های مؤلفه ممکن است از آنها استفاده کنند). صفت class به عنوان مقدار خود، فهرستی از کلاس‌های حساس به حروف کوچک و بزرگ برای عنصر را به‌عنوان مقدار می‌گیرد.

توجه: عناصر را می‌توان با انتخابگرهای CSS و روش‌های DOM بر اساس نام عناصر، ویژگی‌ها، مقادیر ویژگی، موقعیت در درخت DOM و غیره انتخاب کرد. تفاوت منحصربه‌فرد بین گنجاندن نام کلاس و استفاده از document.getElementsByClassName() در مقابل عناصر هدف‌گیری بر اساس ویژگی‌ها و ساختار صفحه با ()document.querySelectorAll قوی‌تر این است که اولی یک لیست گره زنده را برمی‌گرداند، دومی ثابت است.

ساختن یک ساختار معنایی سالم، هدف قرار دادن عناصر را بر اساس مکان و عملکرد آنها ممکن می سازد. ساختار صدا استفاده از انتخابگرهای عنصر نزول، انتخابگرهای رابطه ای و انتخابگرهای ویژگی را امکان پذیر می کند. همانطور که در سراسر این بخش در مورد ویژگی ها یاد می گیرید، در نظر بگیرید که چگونه عناصر با ویژگی ها یا مقادیر مشخصه یکسان می توانند استایل بندی شوند. این به این معنا نیست که شما نباید از ویژگی class استفاده کنید، بلکه بیشتر توسعه دهندگان متوجه نمی شوند که اغلب نیازی به این کار ندارند.

تا کنون، MLW از هیچ کلاسی استفاده نکرده است. آیا می توان یک سایت بدون نام کلاس راه اندازی کرد؟ خواهیم دید.

style

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

سبک‌ها فقط برای عنصری اعمال می‌شوند که ویژگی روی آن تنظیم شده است، در صورتی که توسط اعلان‌های سبک دیگر در عناصر تودرتو یا در بلوک‌ها یا شیوه نامه‌های <style> لغو نشود، مقادیر ویژگی‌های ارثی را به ارث می‌برند. از آنجایی که مقدار معادل محتویات یک بلوک سبک منفرد است که فقط برای آن عنصر اعمال می‌شود، نمی‌توان از آن برای محتوای تولید شده، ایجاد انیمیشن‌های فریم کلیدی یا اعمال هر قانون دیگر استفاده کرد.

در حالی که style در واقع یک ویژگی جهانی است، استفاده از آن توصیه نمی شود. در عوض، استایل ها را در یک فایل یا فایل های جداگانه تعریف کنید. همانطور که گفته شد، ویژگی style می تواند در طول توسعه برای فعال کردن یک ظاهر طراحی سریع مانند اهداف آزمایش مفید باشد. سپس سبک "راه حل" را انتخاب کنید و آن را در فایل CSS پیوند شده خود بچسبانید.

tabindex

ویژگی tabindex را می توان به هر عنصر اضافه کرد تا بتواند فوکوس را دریافت کند. مقدار tabindex تعیین می‌کند که آیا به ترتیب برگه‌ها اضافه می‌شود یا نه، و به صورت اختیاری، به ترتیب غیرپیش‌فرض برگه‌ها اضافه می‌شود.

ویژگی tabindex به عنوان مقدار خود یک عدد صحیح می گیرد. یک مقدار منفی (قرارداد استفاده از -1 است) باعث می‌شود یک عنصر بتواند فوکوس را دریافت کند، مثلاً از طریق جاوا اسکریپت، اما عنصر را به دنباله Tabing اضافه نمی‌کند. مقدار tabindex 0 باعث می شود عنصر از طریق Tabing قابل تمرکز و دسترسی باشد و آن را به ترتیب کد منبع به ترتیب برگه پیش فرض صفحه اضافه می کند. مقدار 1 یا بیشتر عنصر را در یک دنباله فوکوس اولویت بندی شده قرار می دهد و توصیه نمی شود.

در این صفحه، یک عملکرد اشتراک گذاری با استفاده از عنصر سفارشی <share-action> وجود دارد که به عنوان یک <button> عمل می کند. tabindex صفر برای افزودن عنصر سفارشی به ترتیب جدول‌بندی پیش‌فرض صفحه‌کلید گنجانده شده است:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

role button به کاربران صفحه خوان اطلاع می دهد که این عنصر باید مانند یک دکمه رفتار کند. جاوا اسکریپت برای اطمینان از اجرای وعده عملکرد دکمه استفاده می شود. از جمله رسیدگی به رویدادهای کلیک و کلید داون و همچنین مدیریت کلیدهای Enter و Space.

کنترل‌های فرم، پیوندها، دکمه‌ها و عناصر قابل ویرایش محتوا قادر به دریافت فوکوس هستند. هنگامی که کاربر صفحه کلید کلید تب را می زند، فوکوس به عنصر قابل فوکوس بعدی منتقل می شود، گویی tabindex="0" را تنظیم کرده است. سایر عناصر به طور پیش فرض قابل فوکوس نیستند. افزودن ویژگی tabindex به آن عناصر آنها را قادر می سازد تا فوکوس را دریافت کنند در حالی که در غیر این صورت نمی توانستند فوکوس دریافت کنند.

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

تغییر ترتیب Tabing می تواند تجربه کاربری بسیار بدی ایجاد کند. تکیه بر فناوری کمکی - صفحه کلید و صفحه‌خوان‌ها به طور یکسان - برای پیمایش محتوای خود دشوار می‌کند. مدیریت و نگهداری آن به عنوان یک توسعه دهنده نیز دشوار است. تمرکز مهم است؛ یک ماژول کامل در مورد تمرکز و ترتیب تمرکز وجود دارد.

role

ویژگی role بخشی از مشخصات ARIA است نه مشخصات WHATWG HMTL . ویژگی role می‌تواند برای ارائه معنای معنایی محتوا مورد استفاده قرار گیرد، و خوانندگان صفحه را قادر می‌سازد تا کاربران سایت را از تعامل کاربر مورد انتظار یک شی مطلع کنند.

چند ویجت معمولی رابط کاربری مانند جعبه‌های ترکیبی ، منوبارها ، فهرست‌ها ، و شبکه‌های درختی وجود دارند که معادل HTML بومی ندارند. به عنوان مثال، هنگام ایجاد یک الگوی طراحی زبانه‌دار، می‌توان از نقش‌های tab ، tablist و tabpanel استفاده کرد. شخصی که می تواند به صورت فیزیکی رابط کاربری را ببیند، به تجربه آموخته است که چگونه ویجت را پیمایش کند و با کلیک بر روی برگه های مرتبط، پانل های مختلف را قابل مشاهده کند. گنجاندن نقش tab با <button role="tab"> هنگامی که از گروهی از دکمه‌ها برای نشان دادن پانل‌های مختلف استفاده می‌شود، به کاربر صفحه‌خوان این امکان را می‌دهد که بداند <button> که در حال حاضر فوکوس دارد، می‌تواند یک پانل مرتبط را به جای اجرای معمولی تغییر دهد. عملکرد دکمه مانند

ویژگی role رفتار مرورگر را تغییر نمی دهد یا تعاملات صفحه کلید یا نشانگر دستگاه را تغییر نمی دهد—افزودن role="button" به <span> آن را به <button> تبدیل نمی کند. به همین دلیل است که استفاده از عناصر HTML معنایی برای هدف مورد نظر توصیه می شود. با این حال، زمانی که استفاده از عنصر مناسب امکان‌پذیر نیست، ویژگی role به کاربران صفحه‌خوان اطلاع‌رسانی می‌کند که یک عنصر غیر معنایی در نقش یک عنصر معنایی به‌روز شده است.

contenteditable

عنصری با ویژگی contenteditable که روی true تنظیم شده است قابل ویرایش است، قابل تمرکز است و به ترتیب برگه ها اضافه می شود که گویی tabindex="0" تنظیم شده است. Contenteditable یک ویژگی برشماری است که از مقادیر true و false پشتیبانی می کند و در صورتی که ویژگی موجود نباشد یا دارای مقدار نامعتبر باشد، مقدار پیش فرض inherit است.

این سه تگ افتتاحیه معادل هستند:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

اگر <style contenteditable="false"> را وارد کنید، عنصر قابل ویرایش نیست (مگر اینکه به طور پیش فرض قابل ویرایش باشد، مانند <textarea> ). اگر مقدار نامعتبر باشد، مانند <style contenteditable="😀"> یا <style contenteditable="contenteditable"> ، مقدار پیش‌فرض به inherit می‌رسد.

برای جابجایی بین حالت ها، مقدار ویژگی HTMLElement.isContentEditable فقط خواندنی را پرس و جو کنید.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

همچنین، این ویژگی را می توان با تنظیم editor.contentEditable روی true ، false یا inherit تعیین کرد.

ویژگی های سراسری را می توان برای همه عناصر، حتی عناصر <style> اعمال کرد. می توانید از ویژگی ها و کمی CSS برای ایجاد یک ویرایشگر CSS زنده استفاده کنید.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

سعی کنید color style را به چیزی غیر از inherit تغییر دهید. سپس style را به یک انتخابگر p تغییر دهید. ویژگی نمایش را حذف نکنید وگرنه بلوک سبک ناپدید می شود.

ویژگی های سفارشی

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

می توانید با افزودن پیشوند data- ، هر ویژگی سفارشی را که می خواهید ایجاد کنید. می‌توانید هر چیزی را که با data- شروع می‌شود نامگذاری کنید و سپس هر سری کاراکتر با حروف کوچک که با xml شروع نمی‌شود و حاوی دو نقطه ( : ) نیست، نامگذاری کنید.

در حالی که HTML بخشنده است و اگر ویژگی های پشتیبانی نشده ای ایجاد کنید که با data شروع نمی شود، یا حتی اگر ویژگی سفارشی خود را با xml شروع کنید یا یک : داشته باشید، خراب نمی شود، ایجاد ویژگی های سفارشی معتبر که با data- شروع می شود مزایایی دارد. . با ویژگی های داده های سفارشی، می دانید که به طور تصادفی از نام ویژگی موجود استفاده نمی کنید. ویژگی های داده های سفارشی برای آینده قابل اثبات هستند.

در حالی که مرورگرها رفتارهای پیش‌فرض را برای هیچ ویژگی خاص پیشوند data- پیاده‌سازی نمی‌کنند، یک API داده داخلی برای تکرار از طریق ویژگی‌های سفارشی شما وجود دارد. ویژگی های سفارشی یک راه عالی برای برقراری ارتباط با اطلاعات خاص برنامه از طریق جاوا اسکریپت است. ویژگی های سفارشی را به عناصر به شکل data-name اضافه کنید و از طریق DOM با استفاده از dataset[name] در عنصر مورد نظر به آنها دسترسی داشته باشید.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

می‌توانید از getAttribute() با استفاده از نام ویژگی کامل استفاده کنید، یا می‌توانید از ویژگی ساده‌تر dataset استفاده کنید.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

ویژگی dataset یک شی DOMStringMap از ویژگی های data- هر عنصر را برمی گرداند. چندین ویژگی سفارشی در <blockquote> وجود دارد. ویژگی مجموعه داده به این معنی است که برای دسترسی به نام ها و مقادیر آنها نیازی به دانستن این ویژگی های سفارشی ندارید:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

ویژگی‌های این مقاله جهانی هستند، به این معنی که می‌توان آن‌ها را برای هر عنصر HTML اعمال کرد (اگرچه همه آنها تأثیری بر آن عناصر ندارند). در مرحله بعد، نگاهی به دو ویژگی از تصویر مقدماتی می اندازیم که به آنها اشاره نکردیم target و href - و چندین ویژگی خاص عنصر دیگر همانطور که نگاه عمیق تری به پیوندها می اندازیم.

درک خود را بررسی کنید

دانش خود را از ویژگی ها آزمایش کنید.

یک id باید در سند یکتا باشد.

نادرست

دوباره امتحان کنید.

درست است

درسته!

ویژگی سفارشی درست شکل گرفته را انتخاب کنید.

data-birthday

صحیح

birthday

دوباره امتحان کنید.

data:birthday

دوباره امتحان کنید