پشتیبانی مرورگر html5

پشتیبانی مرورگر  html5  چگونه است؟ و چطور می توانیم تنظیمات مربوطه را انجام دهیم ؟

آموزش  HTML 5  درس دوم

پشتیبانی مرورگر html5  :  در درس قبل در مورد معرفی  html5  یاد گرفتید . الان می توانید مرورگرهای قدیمی تر را برای اینکه به  html 5  به درستی دسترسی داشته باشید یاد بگیرید.

پشتیبانی مرورگر  html 5

Html5 همه مرورگرهای مدرن را پشتیبانی می کند. به علاوه، همه مرورگرها، قدیمی و جدید، به طور خودکار به عناصر نامشخص به عنوان عناصر درون خطی دسترسی دارند. به همین دلیل، شما می توانید مرورگرهای قدیمی تر را یاد بگیرید تا به عناصر ناشناخته  html  دسترسی داشته باشید. می توانید حتی  IE6(Windows XP 2001) رابرای چگونگی دسترسی به عناصر ناشناخته  html  یاد بگیرید.

پشتیبانی مرورگر html5
پشتیبانی مرورگر html5

عناصر Semantic را به عنوان عناصر Block تعریف کنید

 Html5  ۸ عنصر Semantic جدید را تعریف می کند. همه این ها عناصر block-level هستند. برای اطمینان از رفتار درست مرورگرهای قدیمی شما می توانید خصوصیات نمایش  CSS را برای عناصر  html  به block را تعریف کنید:

 

header, section, footer, aside, nav, main, article, figure {
    display: block; 
} 

اضافه کردن عناصر جدید به  html

شما می توانید عناصر جدید را به یک صفحه  html  با یک حقه مرورگری اضافه کنید. این مثال یک عنصر جدید که برای یک صفحه  html  است و یک استایل برای آن تعریف می کند، <myHero> نامیده می شود :

حتما بخوانید:  راهنمای style و Coding Conventions

مثال :

<!DOCTYPE html>
<html>
<head>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
      display: block;
      background-color: #dddddd;
      padding: 50px;
      font-size: 30px;
  } 
  </style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html> 

 

 

document.createElement(“myHero”) نیاز دارد که یک عنصر جدید در  IE9 و مرورگرهای  قدیمی تر ایجاد کند.

مشکل Internet Explorer 8

شما می توانید از توصیف راه حل ها  در بالا برای عناصر جدید  html 5 استفاده کنید. با این حال IE8 (و مرورگرهای قدیمی تر) اجازه نمی دهند که استایل آنها با عناصر ناشناخته باشد!

خوشبختانه، Sjoerd Visscher ، HTML5Shiv را ایجاد کرد! HTML5Shiv یک راه حل برای جاوا اسکریپت است تا استایل عناصر  html 5  را در نسخه های اینترنت اکسپلورر تا نسخه ۹ را فعال می کند. شما به HTML5Shiv نیاز خواهید داشت تا با مرورگرهای اینترنت اکسپلورر قدیمی تر تا اینترنت اکسپلورر ۹ سازگاری ایجاد شود.

Syntax For HTML5Shiv

HTML5Shiv درون تگ <head> قرار می گیرد. HTML5Shiv یک فایل javascript است که در تگ <script> اشاره شده است. شما باید هنگام استفاده از عناصر HTML5 جدید مانند <article>، <section>، <side>، <nav>، <footer> از HTML5Shiv استفاده کنید.

حتما بخوانید:  چیدمان HTML

 

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head> 

مثال HTML5Shiv

اگر نمی خواهید HTML5Shiv را در روی سایت خود دانلود و ذخیره کنید، شما می توانید نسخه را برای پیدا کردن سایت CDN ارجاع دهید. اسکریپت HTML5Shiv باید درون عنصر <head> بعد از هر عنصر stylesheets قرار گیرد:

مثال :

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>Famous Cities</h1>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>

</section>

</body>
</html> 


امتیاز کاربران به این مطلب
۱ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

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

9 − 2 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی