تیک تم بازاریابی اینترنتی سئو و بهینه سازی وب سایت آموزش وردپرس 
"
بخش سی و هفتم-پشتیبانی HTML5
| قدم قبلی > | < قدم بعدی |
در این آموزش html به پشتیبانی HTML5 می پردازیم.
پشتیبانی مرورگر از HTML5
شما می توانید با مرورگرهای قدیمی تر به درستی HTML5 را اجرا کنید.
HTML5 در تمام مرورگرهای مدرن پشتیبانی می شود.
علاوه بر این، تمام مرورگرهای قدیمی و جدید، به طور خودکار عناصر نامعلوم را به عنوان عناصر درون خطی اداره می کنند.
به همین دلیل، شما می توانید “آموزش” مرورگرهای قدیمی تر برای اداره عناصر HTML ناشناخته.
شما حتی می توانید آموزش IE6 (ویندوز XP 2001) نحوه اداره کردن عناصر ناشناخته HTML را آموزش دهید.
عناصر معنایی را به عنوان عناصر بلوک تعریف کنید
HTML5 هشت عنصر معنایی جدید را تعریف می کند. همه این عناصر سطح بلوک هستند.
برای اطمینان از رفتار صحیح در مرورگرهای قدیمی، می توانید ملک نمایش CSS را برای این عناصر HTML تنظیم کنید:
1 2 3 | header, section, footer, aside, nav, main, article, figure { display: block; } |
عناصر جدید به HTML اضافه کنید
شما همچنین می توانید عناصر جدید را به یک صفحه HTML با ترفند مرورگر اضافه کنید.
این مثال یک عنصر جدید به نام <myHero> را به یک صفحه HTML اضافه می کند و یک سبک را برای آن تعریف می کند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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”برای ایجاد یک عنصر جدید در IE 9 و قبل از آن لازم است.
مشکل اینترنت اکسپلورر ۸
شما می توانید از راه حل توصیف شده در بالا برای تمام عناصر HTML5 جدید استفاده کنید.
با این حال، IE8 (و قبل از آن) اجازه نمی دهد یک ظاهر طراحی شده از عناصر ناشناخته!
خوشبختانه Sjoerd Visscher HTML5Shiv را ایجاد کرد! HTML5Shiv یک راه حل برای جاوا اسکریپت است تا سبکی از عناصر HTML5 را در نسخه های اینترنت اکسپلورر قبل از نسخه ۹ فعال کند.
شما باید از HTML5shiv برای ارائه سازگاری برای مرورگرهای IE قدیمی تر از IE 9 استفاده کنید.
نحو برای HTML5Shiv
HTML5Shiv در داخل برچسب <head> قرار دارد.
HTML5Shiv یک فایل جاوا اسکریپت است که در تگ <script> اشاره شده است.
شما باید هنگام استفاده از عناصر HTML5 جدید مانند <article>، <section>، <side>، <nav>، <footer> از HTML5Shiv استفاده کنید.
1 2 3 4 5 | <head> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <![endif]--> </head> |
مثال HTML5Shiv
اگر نمیخواهید سایت HTML5Shiv را دانلود و ذخیره کنید، می توانید نسخه موجود در سایت CDN را ارجاع دهید.
اسکریپت HTML5Shiv باید در عنصر <head> بعد از هر شیوه ای قرار گیرد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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 |
| گام قبلی > | < گام بعدی |
