صفت‌های Global در HTML

مقدمه

صفت‌های عمومی یا سراسری (global attributes) مجموعه‌ای از صفت‌های HTML هستند که برای هر عنصر HTML در دسترس و قابل تنظیم هستند. ممکن است یک صفت عمومی روی یک عنصر HTML هیچ تأثیری نداشته باشد اما با این حال، برای آن عنصر قابل استفاده است. علاوه بر این، صفت‌های عمومی را می‌توان روی عناصری که بخشی از استاندارد HTML محسوب نمی‌شوند نیز به کار برد؛ البته در آن صورت، سند ما سازگار با استاندارد HTML نخواهد بود. برای درک این موضوع، کد زیر را در نظر بگیرید:

HTML

<test hidden>Hello World!</test>

در مستندات HTML عنصری با نام test وجود ندارد اما رفتار HTML با یک عنصر ناشناخته به گونه‌ای است که به جای نادیده گرفتن آن، فرض می‌کند که قادر به شناسایی و پشتیبانی از این عنصر نیست و لذا آن را یک عنصر بدون بار معنایی (مانند div) در نظر می‌گیرد و محتوای آن را نمایش می‌دهد. البته که حساب یک validator از یک مرورگر جداست و به خاطر استفاده از عنصر ناشناخته‌ی test کد بالا را غیراستاندارد گزارش می‌کند. اما جالب اینجاست که وقتی از یک صفت عمومی مانند hidden روی این عنصر غیراستاندارد استفاده می‌کنیم، مرورگر آن را روی عنصر test اعمال می‌کند و با توجه به نقش صفت عمومی hidden محتوای عنصر test را مخفی می‌کند. مخلص کلام اینکه: صفت‌های global روی هر عنصر HTML و حتی روی عناصر غیراستاندارد و ناشناخته قابل استفاده هستند.

علاوه بر hidden، تعدادی صفت عمومی دیگر در HTML تعریف شده که البته برخی از آنها را در فصول گذشته دیده‌ایم اما در اینجا قصد داریم بدون توجه به آشنایی قبلی که با برخی از این صفت‌ها داریم، یک معرفی و بررسی کامل از صفت‌های عمومی HTML داشته باشیم.

تعریف کلید میانبر با صفت accesskey

با استفاده از صفت عمومی accesskey می‌توانیم یک کلید میانبر برای فعال کردن یک عنصر یا فوکوس روی آن تعیین کنیم. البته برای استفاده از این قابلیت، باید کلید مشخص‌شده را به همراه کلیدهایی مثل alt و shift و ctrl به کار برد و این کلید یا کلیدهای کمکی در مرورگرهای مختلف با هم فرق دارد. در مورد مرورگرهای edge، chrome و safari و نسخه‌های بالاتر از 15 مرورگر opera باید از کلید alt به همراه کلید مشخص شده استفاده کرد و در مورد مرورگرهای opera نسخه‌ی قبل از 15 باید از کلیدهای shift و esc به همراه کلید مشخص‌شده و برای مرورگر firefox از کلیدهای alt و shift به همراه کلید مشخص‌شده استفاده کرد.

به عنوان مثال، استفاده از صفت accesskey برای یک عنصر a باعث می‌شود که کاربر بتواند با فشردن ترکیبی از کلید مشخص‌شده با کلیدهای alt، control و shift لینک مورد اشاره‌ی عنصر a را دنبال کند. به عنوان مثال، اگر کدهای بالا را با مرورگر chrome آزمایش کنیم، با فشردن کلیدهای ترکیبی alt و g به صفحه‌ی اصلی وبسایت گوگل منتقل می‌شویم.

HTML

<a href="https://google.com" accesskey="g">Google Search Engine</a>

توجه داشته باشید که صفت عمومی accesskey می‌تواند به جای یک کاراکتر، چندین کاراکتر را که با فاصله از هم جدا شده‌اند، به عنوان مقدار دریافت کند تا از بین آنها اولین کلیدی که در صفحه‌کلید کامپیوتر وجود داشته باشد، ملاک عمل واقع شود.

گروه‌بندی عناصر با صفت class

با استفاده از صفت عمومی class می‌توانیم عناصر HTML را در گروه‌های مختلف قرار دهیم. برای هم‌گروه کردن چند عنصر با هم، باید مقدار یکسانی را به صفت class آنها اختصاص دهیم. البته باید توجه داشته باشید که یک عنصر می‌تواند در بیش از یک گروه عضو باشد و بنابراین، صفت class می‌تواند بیش از یک مقدار را دریافت کند که در این صورت، این مقادیر باید با فاصله از هم جدا شوند. با این حساب، اگر عنصری از صفت class به صورت class=”g1 g2 g3” استفاده کند، این عنصر به هر سه گروه یا کلاس g1، g2 و g3 تعلق دارد.

در کد زیر، عباراتی در صفحه که می‌توانند به عنوان کلمات کلیدی صفحه در نظر گرفته شوند، در یک عنصر span قرار داده شده‌اند و مقدار یکسان keyword به صفت class آنها اختصاص داده شده است. به این ترتیب، هر عنصری که مقدار keyword را به صفت class خود اختصاص داده باشد، یک عضو از این گروه است و وقتی در CSS از یک انتخابگر کلاس به صورت .keyword استفاده شود، استایل‌های تعریف شده برای این انتخابگر روی همه‌ی عناصر این گروه اعمال می‌شود.

HTML

<p>
  The term <span class="keyword">energy</span> is so broad that clear 
  definition is difficult to write. Technically <span class="keyword">energy</span> is 
  a scalar <span class="keyword">quantity</span> associated 
  with the state (or condition) of one or more objects. However, this definition is too vague to be 
  of help to us now. and the term <span class="keyword">force</span> is ....  
</p>

تعیین شناسه یکتا برای یک عنصر با صفت id

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

HTML

<p id="paragraph1">
  This paragraph has an ID so you can,
  for example, manipulate it from a script.
</p>

تعیین امکان ویرایش محتوای عناصر با صفت contenteditable

با استفاده از صفت عمومی contenteditable می‌توانیم تعیین کنیم که امکان ویرایش محتوای عنصر مورد نظر برای کاربر وجود داشته باشد یا خیر. این صفت دارای مقدار پیش‌فرض false است اما اگر مقدار true را به آن اختصاص دهیم و یا اینکه یک رشته‌ی خالی را به عنوان مقدار این صفت تعیین کنیم، عنصر مورد نظر قابل ویرایش می‌شود.

HTML

<p contenteditable="true">
  If your browser supports this attribute,
  you'll be able to edit this paragraph.
</p>

تعیین جهت‌گیری متن با صفت dir

صفت عمومی dir برای تعیین جهت‌گیری متن محتوای یک عنصر کاربرد دارد و می‌تواند یکی از سه مقدار زیر را دریافت کند:

• ltr: این مقدار به معنای left to right است و برای زبان‌های چپ‌به‌راست مانند انگلیسی مناسب است.
• rtl: این مقدار به معنای right to left است و برای زبان‌های راست به چپ مانند فارسی و عربی مناسب است.
• auto: این مقدار، تصمیم‌گیری در مورد جهت‌گیری متن را به مرورگر واگذار می‌کند.

HTML

<h2 dir="rtl">من از تو راه برگشتی ندارم</h2>

امکان کشیدن عناصر با صفت draggable

در همه‌ی مرورگرهای وب، امکان کشیدن یا drag کردن تصاویر، لینک‌ها و متون انتخاب شده (highlighted) وجود دارد. برای مثال، اگر لوگوی موتور جستجوی گوگل را drag کنید، می‌توانید آن را در هر جایی از کامپیوتر خود یا در نوار آدرس مرورگر و یا حتی درون یک عنصر input از نوع file رها (drop) کنید. در واقع، برای این عناصر عمل drag and drop به طور خودکار توسط مرورگرها پشتیبانی می‌شود اما این امکان در مورد سایر عناصر وجود ندارد.

در HTML5 صفت draggable با این هدف معرفی شد که امکان انجام عملیات drag and drop روی سایر عناصر HTML نیز ممکن شود. برای اینکه عنصری را به یک عنصر قابل drag کردن تبدیل کنیم، باید مقدار صفت draggable را برای این عنصر برابر با true قرار دهیم. البته این فقط نیمی از ماجراست و برای تکمیل فرایند drag and drop باید از یک API جاوااسکریپتی با نام Drag and Drop استفاده کنیم. در کد زیر دو عنصر div ابتدایی قابل drag کردن هستند و بر خلاف عنصر سوم، می‌توانید آنها را drag کنید اما drop کردن این عناصر امکانی است که باید با استفاده از Drag and Drop API فراهم شود.

HTML

<div class="container">
  <div draggable="true" class="box">A</div>
  <div draggable="true" class="box">B</div>
  <div class="box">C</div>
</div>

مخفی کردن عناصر با صفت hidden

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

HTML

<p>This is the first paragraph.</p>
<p hidden>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

نکته‌ی مهمی که در ارتباط با صفت hidden باید بدانید این است که پراپرتی display در CSS می‌تواند این صفت را بی‌اثر کند. یعنی اگر برای عنصری که صفت hidden روی آن اعمال شده، پراپرتی display با هر مقدار به‌جز none تنظیم شود، عنصر مورد نظر نمایش داده می‌شود.

تعیین پیکربندی کیبورد مجازی با صفت inputmode

در دستگاه‌هایی مانند موبایل‌ها و تبلت‌ها وقتی کاربر اقدام به وارد کردن داده در یک فیلد متنی (و یا عنصری که از صفت contenteditable با مقدار true استفاده کرده باشد) می‌کند، یک کیبورد مجازی (virtual keyboard) که on-screen keyboard نیز گفته می‌شود، برای کاربر نمایش داده می‌شود تا با استفاده از آن مقدار مورد نظرش را وارد کند. صفت inputmode یک صفت عمومی است که با هدف تعیین نوع کیبوردی که باید نمایش داده شود، کاربرد دارد.

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

• none: از مرورگر خواسته می‌شود که هیچ کیبوردی را نمایش ندهد. کاربرد این مقدار به زمانی محدود می‌شود که صفحه کنترل ورودی کیبورد خودش را پیاده‌سازی کرده باشد.
• text: مقدار پیش‌فرض که انتخاب آن باعث می‌شود که از مرورگر خواسته شود که کیبورد استاندارد خود کاربر را برایش نمایش دهد.
• decimal: از مرورگر خواسته می‌شود که کیبوردی شامل اعداد و کاراکتر ممیز را نمایش دهد که برای وارد کردن اعداد اعشاری بهینه است.
• numeric: از مرورگر خواسته می‌شود که کیبوردی متشکل از اعداد صفر تا 9 را نمایش دهد که برای وارد کردن مقادیر عددی مناسب است.
• tel: از مرورگر خواسته می‌شود کیبوردی متشکل از اعداد و کاراکترهای asterisk(*) و pound(#) نمایش دهد که برای وارد کردن شماره تلفن مناسب است.
• search: از مرورگر خواسته می‌شود کیبوردی نمایش دهد که برای جستجوی مقدار ورودی بهینه شده باشد. برای مثال، یک چنین کیبوردی می‌تواند از عبارتی مثل search برای کلید Enter/Return استفاده کند.
• email: از مرورگر خواسته می‌شود که کیبوردی که برای وارد کردن آدرس ایمیل بهینه شده باشد، نمایش دهد.
• url: از مرورگر خواسته می‌شود که یک کیبورد بهینه شده برای وارد کردن آدرس‌های url نمایش دهد.

دقت کنید که عبارت "از مرورگر خواسته می‌شود" را برای مقادیر بالا به این دلیل استفاده کردیم که صفت inputmode تنها نقش یک راهنمایی، مشورت یا درخواست (hint) را برای مرورگر دارد و خود مرورگر در مورد آن تصمیم می‌گیرد.

اعلام زبان محتوای عناصر با صفت lang

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

HTML

<h2>Football Stars</h2>
<ul>
  <li>Lionell Messi</li>
  <li>Cristiano Ronaldo</li>
  <li>Zelatan Ibrahimovic</li>
  <li lang="fa">علی دایی</li>
</ul>

بسیار مهم است که برای هر عنصری از صفحه که محتوای آن به زبانی غیر از زبان اصلی صفحه است، از یک صفت lang با یک مقدار مناسب استفاده کنیم. این کار به مفسرهایی مانند صفحه‌خوان‌ها کمک می‌کند که از تلفظ مناسبی برای محتوای مورد نظر استفاده کنند.

بررسی گرامر و املای متن عناصر با صفت spellcheck

صفت عمومی spellcheck می‌تواند برای فعال یا غیرفعال کردن قابلیت بررسی گرامر و املای محتوای متنی یک عنصر به کار رود. این صفت از نوع بولین نیست و لذا نمی‌توانیم آن را بدون مقدار به کار بگیریم و مقادیر معتبر برای این صفت، مقادیر true و false هستند که به‌ترتیب باعث فعال و غیرفعال شدن قابلیت بررسی گرامری و املایی متن می‌شوند. در ضمن، اختصاص یک رشته‌ی خالی به عنوان مثدار این صفت نیز مشابه تخصیص مقدار true است.

توجه داشته باشید که صفت spellcheck تنها برای فیلدهای متنی قابل استفاده است و در مورد سایر عناصر، در صورتی می‌توان از این صفت استفاده کرد که صفت contenteditable نیز برای آن عنصر فعال شده باشد.

HTML

<p contenteditable="true" spellcheck="true">
  A friend in need is a friend inded
</p>

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

استایل‌دهی به عناصر با صفت style

اعمال استایل‌ها یا قواعد CSS روی عناصر HTML به چند روش مختلف امکان‌پذیر است و یکی از این روش‌ها که البته بیشتر برای اهداف آزمایشی مناسب است، روش درون‌خطی (inline) است. در این روش، از صفت عمومی style برای اعمال استایل‌های مورد نظر بر روی هر عنصر استفاده می‌شود. سینتکس کلی این صفت به صورت زیر است:

<element style=”property-1:value-1; property-2:value-2; ….; property-n:value-n>

در این سینتکس، element نام عنصری است که قصد استایل‌دهی به آن را داریم و هر جفت property و value نشان‌دهنده‌ی تنظیم یک استایل عنصر مورد نظر بر روی یک مقدار مشخص است. در کل، آنچه که به عنوان مقدار صفت style وارد می‌شود، به CSS مربوط است و با به‌کارگیری گرامری که در این زبان تدوین شده، ظاهر عنصر را تعیین می‌کند.

تأکید می‌کنم که استفاده از صفت style برای اعمال قواعد CSS روی عناصر HTML تنها یکی از روش‌های ممکن برای انجام این کار است که تنها برای اهداف آزمایشی مثل بررسی سریع نتیجه‌ی اعمال یک استایل کاربرد دارد و در پروژه‌های واقعی کدهای CSS در فایل‌ (فایل‌های) جداگانه نوشته می‌شود و با استفاده از یک عنصر link به صفحه‌ی HTML مرتبط می‌شود.

کنترل فوکوس روی عناصر با صفت tabindex

از بین عناصر HTML شش عنصر a، link، button، select، textarea و input به شرطی که از نوع hidden نباشد، از نوع تمرکزپذیر (focusable) هستند و لذا کاربر با فشردن کلید tab می‌تواند بین آنها جابجا شود و رفتار مرورگر در هنگام رسیدن به سایر عناصر، پرش از روی آنهاست. علاوه بر این، ترتیب دریافت فوکوس برای این شش عنصر به همان ترتیبی است که در صفحه تعریف شده‌اند. بنابراین، اگر کاربر با فشردن کلید tab قصد انتقال فوکوس بین عناصر صفحه را داشته باشد، این شش عنصر مذکور هستند که به همان ترتیبی که در صفحه قرار دارند، فوکوس را دریافت می‌کنند.

توجه داشته باشید که ترتیب تعریف عناصر ممکن است با ترتیب نمایش آنها در صفحه متفاوت باشد چون کدهای CSS می‌توانند موقعیت مکانی عناصر در صفحه را تغییر دهند. به هر حال، ملاک برای تعیین ترتیب انتقال فوکوس برای عناصر، ترتیب تعریف آنهاست نه شیوه‌ی نمایششان.

صفت tabindex یک صفت عمومی است که امکان تغییر رفتار پیش‌فرضی را که در پاراگراف بالا تشریح شد، به ما می‌دهد. در حقیقت، این صفت می‌تواند تعیین کند که عنصر مورد نظر فارغ از رفتار پیش‌فرضی که دارد، تمرکزپذیر باشد یا خیر و اگر پاسخ مثبت است، با چه اولویتی تمرکز را دریافت کند. این صفت می‌تواند روی هر عنصری اعم از تمرکزپذیر یا تمرکزناپذیر اعمال شود و مقداری که دریافت می‌کند، یک عدد صحیح است که می تواند مثبت، منفی یا صفر باشد و هر یک از این مقادیر معنای متفاوتی دارد:

• عدد صفر: اختصاص مقدار صفر به صفت tabindex مربوط به یک عنصر باعث می‌شود که آن عنصر تمرکزپذیر باشد و با همان اولویتِ تعیین‌شده‌ی پیش‌فرض، تمرکز را دریافت کند. بنابراین، استفاده از tabindex=0 برای عناصر شش‌گانه‌ی بالا که به‌طور پیش‌فرض تمرکزپذیر هستند، تغییری به همراه ندارد اما استفاده از این صفت و مقدار روی سایر عناصر باعث می‌شود که آنها به عناصری تمرکزپذیر تبدیل شوند و به همان ترتیبی که در صفحه ایجاد شده‌اند، تمرکز را دریافت کنند.
• عدد منفی: اختصاص یک عدد منفی (که معمولاً و بنابر قراردادی نانوشته از عدد 1- استفاده می‌شود)، باعث می‌شود که عنصر مورد نظر تمرکزناپذیر باشد. بنابراین، از tabindex=-1 زمانی استفاده می‌کنیم که بخواهیم یک عنصر از عناصر شش‌گانه‌ی بالا را تمرکزناپذیر کنیم.
• عدد مثبت: اختصاص یک عدد مثبت به صفت tabindex مربوط به یک عنصر باعث می‌شود که آن عنصر تمرکزپذیر باشد و همین عدد مثبت، تعیین‌کننده‌ی اولویت دریافت فوکوس برای این عنصر باشد. واقعاً هیچ دلیل خوبی برای استفاده از این صفت و مقدار وجود ندارد و بهتر است هیچ‌وقت این کار را برای هیچ عنصری انجام ندهید. اگر در شرایطی قرار گرفتید که فکر می‌کنید باید از این عنصر استفاده کنید، به احتمال زیاد کاری که در واقع باید انجام دهید، این است که ترتیب تعریف یک یا چند عنصر را تغییر دهید و با استفاده از CSS محل نمایش آن (آنها) در صفحه را مشخص کنید.

ارائه توضیح در مورد عنصر با صفت title

صفت عمومی title می‌تواند متنی را که به عنوان مقدار دریافت می‌کند، به عنوان یک برچسب، توضیح یا راهنمایی در مورد عنصری که به آن تعلق دارد، ارائه دهد. معمولاً مرورگرها مقدار این صفت را در قالب یک tooltip (یک جعبه متنی کوچک) و به عنوان پاسخ یک رفتار کاربر (مثل بردن ماوس روی عنصر مورد نظر) نمایش می‌دهند. در مثال زیر، وقتی کاربر ماوس را روی لینک موجود ببرد، مقدار متنی FIFA homepage در قالب یک tooltip برای وی نشان داده می‌شود.

HTML

<p>
  Put your mouse over the following link to see the "tool tip": 
  <a href="https://fifa.com" title="FIFA homepage">FIFA</a>
</p>

تعیین ترجمه شدن یا نشدن محتوای عنصر با صفت translate

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

در HTML5 صفت عمومی translate با این هدف ارائه شده که اعلام کنیم محتوای یک عنصر باید ترجمه شود یا خیر. مقادیر yes و no برای این صفت قابل انتخاب هستند که معنای روشنی دارند: مقدار yes باعث ترجمه‌ی محتوای عنصر و no باعث ممانعت از ترجمه‌ی محتوا می‌شوند.

HTML

<h2>Using HTML's <span class="keyword" translate="no">translate</span> attribute</h2>

در این مثال ساده، برای عنصر h2 واژه‌ی translate به عنوان نام یک صفت HTML نباید ترجمه شود و به همین دلیل این واژه را درون یک عنصر span قرار داده‌ایم و صفت translate مربوط به آن را روی مقدار no تنظیم کرده‌ایم.