PDA

View Full Version : آموزش: اموزش استفاده از کتابخانه جاوا اسکریپت Modernizr


amirtc
چهارشنبه 21 آبان 1393, 15:20 عصر
Modernizr (مادر نیزر)کتابخانه ی جاوا اسکریپتی است که به ما اجازه میدهد تا از تک تک قابلیت هایhtml5 در مرورگر کاربر،تست بگیریم.به جای تست یک مرورگر خاص وتصمیم گیری بر اساس آن،Modernizr به ما اجازه میدهد که سوالی اینگونه را مطرح کنیم:((آیا این مرورگر از قابلیت تعیین موقعیت مکانی پشتیبانی میکند؟)) و در جوابنیز به روشنی yes,no دریافت میکنیم.
اولین قدم در استفاده از کتابخانهmodernizr این است که این کتابخانه را از سایتش (http://modernizr.com/) دریافت کنیم.
زمانی که یک کپی از این اسکریپت دریافت کردیم ،باید آن رابه صفحه خود لینک کنیم.ما این اسکریپت را در بخش head سندمان اضافه میکنیم.


<!doctype html><html><head><meta charset="utf-8"><title>Modernizr</title><script src="modernizr.js"></script></head>
نکته:این کتاب خانه باید در تگ head باشد(نمیتوان انرا در تگ bodyیا... استفاده کرد) به این دلیل که اول کد های این کتاب خانه خوانده شود.
از Modernizr به دو صورت میتوان استفاده کرد با cssو با javascript
استفاده از modernizr به همراه css
هنگامی که modernizr اجرا میشود.تعدادی نام کلاس را به خصیصه class در بر چسب html اضافه میکند .نام این کلاس ها بر اساس قابلیت هایی است که در مرورگر شناسایی شده است .نام قابلیت هایی که در مرورگر پشتیبانی شوند،در قالب به برچسب html اضاه میشود واگر مرورگر قابلیتی راپشتیبانی نکند، نام آن قابلیت به همراه پیشوند-no به شکل کلاس بر رچسب html اضافه خواهدشد.
برای مثال اگر شما از سفاری 5 استفاده کنید تقریبا از همهی قابلیت های html5 وcss3 پشتیبانی میکند،برپسب<html> شما بعد از اجرا شدن modernizr به اینشکل خواهد بود.

<html class="js flexbox canvas canvastext no-weblg no-thouch geolocation postmessage websaldatabase no-indexeddb hashcharge history dragandrop websckets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimation csscolumns cssgradient cssreflections csstransforms csstransforms3d csstransition fontface video audio localstorage sessionstorage webworkers appilicationcache svg no-inlinsvg smil svgclippath">

برای استفاده از این قابلیت نخست باید برچسب no-js را به برچسب html اضافه کینم.

<html class=""no-js">
چرا باید اینکار را بکینم ؟ اگر جاوا اسکریپت بر روی مرورگر کار بر فعال نباشد ،modernizr اصلا اجرا نخواهد شد ،اما اگر جاوا اسکریپت فعال باشد ، اولین کاری که توسط modernizr انجام میشود تعویض کلاس no-js باjs است.اگر تکه کد قبل که مربوط به مرور گر سافاری است نگاه کنید در این کد کلاس js نیز دیده میشود به ای طریق میتوانید کد های css شرطی بنویسید که در زمان فعال بودن ویا فعال نبودن جاوا اسکریپت به صفحه اعمال شود.
ما میتوانیم با اسم این کلاس ها دو دستور مختلف css بنویسیم یکی برای مرور گر هایی که از یک قابلیت پشتیبانی میکنند ویکی هم برای مرور گر هایی که از قابلیت مورد نظر ماپشتیبانی نمی کنند.

تااینجا بحث رو میبندیم به دلیل کمبود وقت ادامه اموزش رو در پست بعد مطرح میکنم.
امیدوارم استفاده کرده باشید.
amirtc
چهارشنبه 21 آبان 1393, 23:04 عصر
از اونجایی که این کلاس ها به برچسب html اضافه میشوند میتوان از گزینشگر فرزند در css استفاده کرد وبر اساس پشتیبانی مرورگر از یک قابلیت ،عنصری را در صفحه اتخاب کنیم.در اینجا مثالی رو انجام میدیم.هر عنصری که id با مقدار ad2# داشته باشد و خود نیز در داخل عنصر دیگری باشند که کلاس cssgradients دارد، تحت تاثیر این کد قرار میگیرد . وبه عبارت دیگر این کد ما زمانی اجرا میشود که مرور گر از قابلیت های توالی رنگ در css پشتیبانی کند. در این حالت کلاس cssgradient به برچسب html اضافه میشود .اگر ما دستورمان را به شکلcssgradient #ad2.بنویسیم ،تنهامرورگر هایی کهاز قابلیت توالی رنگ پشتیبانی کنند .این کد را به عنصر مورد نظرمان اعمال میکنند.
مثال

.cssgradient #ad2{
*/gradients are supported! let's use some */
background-image:
-moz-linear-gradients(0% 0% 270deg,
rgba(0,0,0.4)0,
rgba(0,0,0.0)37%,
rgba(0,0,0.0)83%,
rgba(0,0,0.06)92%,
rgba(0,0,0.0)37%),


}



اگر توالی رنگ ما در مرور گر پشتیبانی نشود چه میشود میتوانیم یک تکه کد دیگری برای این مرور گر ها بنویسیم وجای توالی رنگ های از یک تصویر png استفاده کنیم و توالی رنگ را در عکس شبیه سازی کنیم
مثال

.no-cssgradients #ad2{
background-image:url(.../images/put_a_replacement_img_here.png);
}

این کلاس ها اضافه شده توسط modernizr در جای دیگری نیز به کارمان می ایند مثال مرورگر opera از قابلیت drap and drop پشتیبانی نمی کندچرا باید این dap رو به این کاربران نشان دهیم درحالی که کار نمی کند .میتوانیم از Modernizr استفاده کنیم واین drag and drop را در مرورگرهایی که پشتیبانی نمیکنند پنهان کنیم.
در قسمت بعد به کار گیری ازmodernizr را در جاوا اسکریپت اموزش میدهیم.
amirtc
پنج شنبه 22 آبان 1393, 17:05 عصر
میتوانیم از modernizr به همراه جاواسکریپت استفاده کنیم وتوسط آن fallback هایی را برای آن دسته از مرورگر هایی که از قابلیت هایhtml5 پشتیبانی نمیکنندایجاد کنیم. زمانی که modernizr اجرامیشود.جدا از کلاس هایی که به برچسب <html>اضافه کند،یکآبجکت سراسری جاوا اسکریپت نیز ایجاد میکند که میتوانید از آن برای تست قابلیت ها، استفاده کنید.نام این ابجکت modernizr است وبرای هر یکاز قابلیت های html5 یک خصوصیت برایش در نظر گرفته شده است.
مثال

Modernizr.draganddrop;
Modernizr.geolocation;
Modernizr.textshadow;

هر کداماز این خصوصیت ها بر اساس اینکه مرورگر کاربر از یک قابلیت پشتیبانی بکند یا خیر ،میتواند مقدار true یا false داشته باشد .
در اینجا از یک بلوک کد if/else استفاده کردیم تا پشتیبانی از قابلیت تعیین موقعیت مکانی را با استفاده از Modernizr تست میکنیم:

if(Modernizr.geolocation){
//go ahead and use the Html5 geolocation API.
//it's supported!


}
else{
//There is no support for Html5 geolocation.
//We may try another library , like Google gear
//(http"//gear.google.com/).to locatetheuser.
}

در قسمت بعد به برسی پشتیبانی از سبک دهی برچسب هایhtmlدر ie8 ونسخه های قدیمیتر میپردازیم.
amirtc
جمعه 23 آبان 1393, 00:02 صبح
انگار کسی به طراحی استاندارد وب علاقه ای نداره !
soroush.r70
جمعه 23 آبان 1393, 21:13 عصر
انگار کسی به طراحی استاندارد وب علاقه ای نداره !

متشکرم دوست عزیز
چرا دوست عزیز همه علاقه دارن متاسفانه برای غروره که کسی زحمتی میکشه و تاپیک مفیدی ایجاد میکنه ازش تشکر نمیکنن که تعداد تشکرکردنشون از تشکرشدهاشون بیشتر نشه در کل زحمت شما بیشتر از تشکرهای ما ارزش داره
hojjat.bandani
سه شنبه 12 آبان 1394, 13:18 عصر
سلام amirtc عزیز برعکس من خیلی دنبال این مطلب بودم سایتای خارجیم خیلی بد توضیح داده بودن توضیحت واقعا جامع و در عین حال ساده بود ممنونم ازت واقعا جامعه برنامه نویس ها به افرادی مثل شما نیاز دارن