پنج ویژگی زبان HTML که احتمالا نمی‎دانستید

اضافه کنید، سپس تمامی عناصر Child که از ورودی متن برخوردارند، از ویژگی این صفت بهره مند خواهند شد.

بررسی املاء کلمات (Spell Checking) در تمامی ورودی‌های متن <input> از جمله: url، search، text و email قابل اجرا است. همچنین بر روی <textarea> و عناصر قابل ویرایش (عناصر با خصیصه contenteditable ) کار می کند.

مقدار این صفت، می‌تواند یک رشته متنی خالی و یا یکی از عبارات true یا false باشد. دقت داشته باشید در صورتی که مقدار صفت، خالی و یا true باشد، این صفت فعال شده و به بررسی املاء متون می‌پردازد.

<input type="text" spellcheck="true"
placeholder="Type something here">
<p contenteditable="true" spellcheck="true">
  Type something here
</p>

در مثال بالا، در هر دو تگ <div> و <p>هنگامی که کاربر به نوشتن بپردازد، درستی املاء متون بررسی خواهد شد. دقت داشته باشید که اگر تنظیمات مربوط به بررسی املاء متون در مرورگر کاربر غیر فعال شده باشد، حتی اگر این صفت فعال شده باشد، بررسی انجام نخواهد شد.

۲. از خطرات منابع CDN در امان باشید!

در شبکه‌های تحویل محتوا (CDN) استفاده از اسکریپت‌ها و شیوه نامه‌ها مرسوم است؛ اگر شبکه انتقال محتوا در معرض خطر قرارگیرد، فایل‌های مشترک و موجود درهاست نیز در معرض خطر قرار می‌گیرند. بنابراین سایت شما نیز در معرض این خطرات احتمالی قرار خواهد گرفت. برای درک بهتر این موضوع، در ادامه به صحبت‌های شبکه توسعه دهنده موزیلا می‌پردازیم:

« استفاده از Content Delivery Network، همواره با ریسک همراه است. اگر یک هکر کنترل شبکه انتقال محتوا را در دست گیرد، می‌تواند محتوای مخربی را به فایل‌های شبکه تزریق کند (یا فایل‌هایی را جایگزین کند)؛ بدین ترتیب می‌تواند سایت‌هایی که درحال انتقال فایل با شبکه بوده‌اند را نیز در معرض این خطرات قرار دهد.»

برای جلوگیری از این نوع خطرات احتمالی، سیستم یکپارچگی زیرساختار (SRI)، در اوایل سال ۲۰۱۴ توسط W3C معرفی شد. این طرح، مقادیر Hash یک منبع را برای سنجش اعتبار آن مقایسه می‌کند.

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

فرض می‌کنیم که فایلی با پسوند جاوا اسکریپت در آدرس https://example.com/example.js وجود دارد. در ابتدا باید یک تابع hash بر روی فایل مورد نظر اعمال کنیم. سپس مقدار hash تولید شده را به صفت integrity از تگ <script> اضافه می‌کنیم. بدین ترتیب فایل example.js به سایت شما اضافه می‌شود. به قطعه کد زیر دقت نمایید:

<script src="https://example.com/example.js"
integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"
crossorigin="anonymous"></script>

با اعمال کد بالا، هرگاه یکی از صفحات سایت شما قصد بارگذاری با قطعه کد بالا را داشته باشد، مرورگر ابتدا تابع hash را اعمال می‌کند و تنها زمانی که مقدار هش با مقدار integrity همخوانی داشته باشد، فایل example.js بارگذاری خواهد شد.

اکنون اگر سایت example.com در معرض خطر قرار گرفته باشد و فایل example.js در آن خطر مداخله کرده باشد، بنابراین مقدار hash example.js با مقدار integrity همخوانی نخواهد داشت و در نتیجه شما از خطرات احتمالی مصون خواهید ماند.

در حال حاضر، اکثریت شبکه‌های انتقال محتواء (CDNS)، ارزش‌های یکپارچگی SRI را در اولویت خود قرار داده‌اند؛ با این حال شما می‌توانید با مراجعه به این لینک یک مقدار hash خلق کنید.

۳. دکمه‌های ارسال در HTML

اکثریت شما با صفت target آشنا هستید؛ صفتی که تصمیم می‌گیرد یک منبع هایپرلینک در کجا بازشوید (برای مثال در همان صفحه یا زبانه ای جدید). همچنین ممکن است بدانید همان صفت target در تگ <form> تصمیم می‌گیرد که اطلاعات ثبت شده در فرم کجا نمایش داده شود.

در یکی از پیش نویس های HTML5، ویژگی formtarget به همراه چهار ویژگی formmethod , formaction , formenctype , formaction و formnovalidate تعریف شده‌اند. کاربرد این ویژگی‌ها در دکمه‌های ارسال اطلاعات است.
بنابراین هنگامی که یک فرم با دکمه ای که ویژگی formtarget دارد به ثبت می‌رسد، پاسخ بجای target در <form>، با توجه به formtarget نمایش داده می‌شود. برای درک بهتر این مطلب به مثال زیر توجه کنید:

<form action="/save" target="_self" >
  <input type="submit" name="save"  />
  <input type="submit" name="print" formaction="/print"
  formtarget="_blank" />
</form>

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

۴. پنهان کردن عناصر

گاهی اوقات ممکن است بخواهیم چیزی را از دید عموم مخفی نگاه داریم.می‌توانیم از راه‌های متفاوتی در CSS بهره بگیریم مانند: opacity:0 و visibility:hidden و height:0; width:0 و display:none و text-indent:-999px

<div hidden>...</div>

هر یک از روش‌ها با هدف خاصی اجرا می‌شوند و هیچکدام بی خاصیت نیستند. اما قابلیت جدید Html این موضوع را سهل کرده است. اگر یک عنصر با ویژگی hidden مشخص شود، به هیچ‌وجه نمایش داده نخواهد شد. طبق قانونی که در CSS وجود دارد، این ویژگی کاملاً مشابه display:none; عمل می‌کند.
به هرحال این ویژگی (hidden)، با معنای مناسبی جلوه می‌کند، لذا تغییرات اخیر HTML5 همگی درباره معناپذیری است. همچنین زمانی که یک عنصر با ویژگی hidden ترکیب می‌شود، نه تنها در مرورگرها بلکه بر روی تمامی سیستم عامل‌ها مخفی خواهد بود (تلویزیون‌ها، پروژکتورها و…).

دقت داشته باشید که این ویژگی به هیچ‌چیز وابسته نیست؛ لذا اگر شما تغییراتی در استایل، کد و یا نویسنده کد ایجاد کنید، عنصر همچنان در حالت مخفی باقی خواهد ماند. در حالتی که در صفت display:none; بدین شکل نخواهد بود. بنابراین باید تصور کنید که hidden یک ویژگی قوی تر و مورد اعماد تر از display:none; است.

۵. اضافه کردن کلیدهای میانبر صفحه کلید
صفت گلوبال accesskey در نسخه چهارم HTML تعریف شده بود. این صفت یک میانبر صفحه کلید ایجاد می‌کرد که به کاربر امکان اجرای عناصر مختلف در صفحه را ارائه می‌داد. در نسخه اخیر این صفت با تغییراتی مواجه شده است که قصد داریم به آن بپردازیم.

ترکیب کلید میانبر به دو مورد بستگی دارد:

• مقدار صفت accesskey که به یک عنصر اختصاص می‌دهیم.
• کلیدهای اختصاصی مروگر که از پیش به همان عنصر اختصاص داده شده است.

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

<button accesskey="v" onclick="alert('View Click')">
  View
</button>

در مثال بالا اگر در مرورگر فایرفاکس، کلیدهای Alt + Shift + V (Alt + Ctrl + V در سیستم عامل مک) را همزمان بفشارید، پیام View Clicked باز می‌شود. بنابراین از آنجا که کلیدهای میانبر مرورگرها از پیش تعریف شده است و با هر مرورگر و سیستم عامل متفاوت است، توصیه می‌شود کاربران را از این کلیدهای میانبر مطلع سازید.