جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : codingplanet.ir تعداد بازدید : ۴۲۷ تاریخ : یک شنبه, ۱۵تیرماه ۱۳۹۳
آشنایی با Modernizr و کاربرد آن در HTML5
امتیاز دهید
تعداد رای 0 امتیاز 0

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

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

برای بهتر متوجه شدن موضوع به مثال زیر دقت کنید:

<input type="color" name="uColor">

در کد بالا ما یک تگ input داریم و صفت type آنرا برابر با color قرار دادیم که این کار باعث میشه در مرورگر یک پنجره برای انتخاب رنگ به کاربر نشان داده بشود.

 

اما این ویژگی در مرورگرهای chorme Version 28.0.1500.72 m پشتیبانی می شود اما در مرورگرهای firefox نسخه ۲۷ و در IE نسخه ۱۰ پشتیبانی نمی شود.

برای اطلاع دادن به کاربر و یا تشخیص این موضوع که مرورگر کاربر صفت یا تگ مورد نظر را پشتیبانی می کند یا نه ما از Modernizr استفاده می کنیم.

برای استفاده از Modernizr ابتدا آنرا از آدرس زیر دانلود کنید:

Modernizr

سپس فایل بالا به پروژه خود اضافه کنید. در ادامه ما قصد داریم با Modernizr تشخیص بدیم که مرورگر کاربر صفت type با مقدار color را پشتیبانی می کند یا نه .

اگر پشتیبانی کند که ما عملی انجام نمیدیم اما اگر نه به کاربر اطلاع میدیدم که در فیلد مورد نظر که به صورت یک فیلد متن نشان داده میشود کد هگزادیسمال یک رنگ را وارد کند.

کد ما برای غلبه به این مشکل به صورت زیر می باشد :

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="color" id="colorIn" name="uColor" required>
<input type="submit" value="register">
</form>
<script src="Scripts/modernizr-latest.js"></script>
<script>
if(! Modernizr.input.color){
alert("not Support Color");
var i = document.getElementById("colorIn");
i.setAttribute("value","Enter Color Hex Code");
}
</script>
</body>
</html>

ر کد بالا ما به input یک id دادیم تا در javaScript بتونیم بهش دسترسی پیدا کنیم . خب همانطور ک می بینید ایتدا فایل modernizr-latest.js را به کد خودمان اضافه کردیم. سپس در تگ script پایین آن با استفاده از modernizr چک کردیم که آیا صفت color تگ input پشتیبانی می شود یا نه .

 صورت کلی برای چک کردن یک صفت با modernizr به شکل زیر می باشد:

Modernizr.tag.property

اما در صورتی که مرورگر پشتیبانی نکند ما ابندا یک alert به کاربر می دیم و میگیم مرورگر شما color را پشتیبانی نمی کند و بعد برای اینکه در هنگام پر کردن فرم کاربر متوجه این موضوع باشد ابتدا با id تگ را پیدا کرده و آنرا در متغیر i قرار می دهیم و در نهایت  با استفاده از value به کاربر می گیم که در این فیلد یک کد هگزادیسمال رنگ وارد کند .

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
بزرگنمایی تصاویر با پلاگین جی کوئری

بزرگنمایی تصاویر با پلاگین جی کوئری

   تعداد بازدید: ۸۸۶
نمایش آمار بازدید روزانه با PHP

نمایش آمار بازدید روزانه با PHP

   تعداد بازدید: ۱۳۳۵
عناصر جدید فرم در HTML5

عناصر جدید فرم در HTML5

   تعداد بازدید: ۴۸۰
سفارشی کردن گوگل مپ

سفارشی کردن گوگل مپ

   تعداد بازدید: ۵۶۴
تغییر اندازه تصاویر بوسیله php

تغییر اندازه تصاویر بوسیله php

   تعداد بازدید: ۴۳۹