تمامی ویژگی های جذاب اضافه شده به HTML5 می تواند برای مرورگرهای قدیمی ناامید کننده باشد ، چرا که آن ها قادر به شناسایی و اجرای این کدهای جدید نمی باشند . خوشبختانه برای حل این معضل polyfilling وارد شد . شرایط polyfil ابتدا توسط Remy Sharp در سال 2009 نوشته شد .
بخش هشتم – طراحی وب واکنش گرا ، Polyfilling
تمامی ویژگی های جذاب اضافه شده به HTML5 می تواند برای مرورگرهای قدیمی ناامید کننده باشد ، چرا که آن ها قادر به شناسایی و اجرای این کدهای جدید نمی باشند . خوشبختانه برای حل این معضل polyfilling وارد شد . شرایط polyfil ابتدا توسط Remy Sharp در سال 2009 نوشته شد .
Remy تکه کدی را نوشت که همانند یک API می تواند به کدها اضافه نمود تا بدرستی در مرورگرهای قدیمی تر کار کنند . شما می توانید شرح مطلب در مورد Polyfill را در لینک زیر می خوانید :
http://remysharp.com/2010/10/08/what-is-a-polyfill
بر اساس تعریف Remy ، یک Polyfill در واقع یک تکه کد است که به سادگی به توابع غیرقابل اجرا در مرورگر اضافه می شود که توسط جاوااسکریپت قابل اجراست . این به آن معنا نیست که مرورگرهای قبلی همیشه موجب دردسر در برابر مرورگرهای جدید خواهند بود ، اما ما به Polyfill نیاز داریم تا بتوانیم آخرین ویژگی ها را بدرستی اجرا نماییم .
چند مورد از عمده ترین موارد Polyfill قابل استفاده در HTML5 را که بطور معمول استفاده می شوند در ادامه می خوانید :
1- فایل respond.js در آدرس : https://github.com/scottjehl/Respond
این فایل جهت پشتیبانی از min/max-width در CSS3 جهت استفاده از رسانه ها در نسخه های قدیمی اینترنت اکسپلورر (IE6-8) استفاده می گردد
2- HTML5 Shiv : آدرس دریافت : https://github.com/aFarkas/html5shiv
جهت پشتیبانی نسخه های قدیمی اینترنت اکسپلورر از المان های معنایی در HTML5 می باشد .
3- CupCake ، دریافت در آدرس : http://www.rivindu.com/p/cupcakejs.html
پشتیبانی از هر مورد localStorage و sessionStorage را با یک API عمومی اضافه می کند .
4- FlashCanvas ، دریافت در آدرس : http://flashcanvas.net/
Canvas polyfill براساس استفاده از Adobe flash
اعتبارسنجی صفحات HTML5
شما شاید در گذشته برای اعتبارسنجی صفحات HTML خود از اعتبارسنج W3C استفاده می کردید . به هر حال شاید آگاه نباشید که آن اعتبارسنج بر اساس خصیصه های جدید HTML5 بروزرسانی شده است .
برای اعتبارسنجی HTML ، نگاهی به اعتبارسنج W3C ( validator.w3.org ) انداخته و ورود مستقیم URL خود و یا کپی و پیست کردن کدهای HTML خود می توانید اعتبارسنجی را انجام دهید .
اعتبارسنجی HTML می توانید برای موارد زیر بکار گرفته شود :
1. بعنوان یک ابزار دیباگ کردن : ساده ترین ابزار خطایاب که اگر کدی را به اشتباه بنویسید که وجود نداشته باشد براحتی با خط کشی زیر مشکل آن را به شما نشان داده و شما می توانید آن را تصحیح نمایید .
2. بالا نگهداشتن کیفیت کد : شما با اعتبارسنجی مداوم با استفاده از W3C می توانید کیفیت کدهای خود را همیشه بالا نگه دارید .
3. اطمینان از سهولت تعمیر و نگهداری : شاید در کوتاه مدت ، خطاهای کدنویسی در سایت شما آنچنان مشکل ساز نباشد ، اما در ادامه و در طولانی مدت اصلاح و نگهداری و رفع باگ های کدهای شما بسیار سخت خواهد شد . شما با اعتبارسنجی مدوام می توانید این تعمیر و نگهداری را بسادگی انجام دهید .
چه چیزهایی در CSS3 جدید می باشد؟
CSS3 سومین ویرایش از CSS می باشد ، که به ما این فرصت را می دهد تا بتوانید رابط های کاربری عمیق تر و بهتری بسازیم . قبل از اینکه شما به طراحی واکنش گرا وارد شوید ، بسیار مهم است که بدانید با استفاده از CSS3 چه امکاناتی در این زمینه در اختیار خواهید داشت تا بتوانید با تسلط برآن امکانات از آن ها استفاده نمایید.
پیشوندهای مرورگر در CSS3
قبل از اینکه وارد مثال هایی از CSS3 بشویم شما نیاز به آن دارید تا پیشوندهای مربوط به مرورگرها را دانسته و با آن ها آشنا شوید . استفاده از این پیشوندها برای این است که ما از کدهای غیراستانداردی استفاده خواهیم کرد که قابلیت پشتیبانی در همه ی مرورگرها را نخواهد داشت . مثالی از این پیشوندها را در زیر می بینید :
1- -moz- پیشوندی برای فایرفاکس و مرورگر موزیلا می باشد .
2- -webkit- این پیشوند برای مرورگرهای سافاری ، گوگل کروم و وب کیت می باشد .
3- -o- این پیشوند مربوط به مرورگر اپرا می شود .
4- -ms- این پیشوند مربوط به مرورگر اینترنت اکسپلورر می شود .
در اکثر کدهای CSS خود نیازی به استفاده از این پیشوندها نداریم ، چرا که کدها توسط تمامی مرورگرها استفاده خواهند شد و بدرستی رندر می شوند . اما برخی از دستورات در مرورگرهای مختلف متفاوت است که برای آن ها از پیشوندهای مربوطه استفاده می نماییم .
لیست کاملی از این پیشوندها را می توانید از طریق لینک زیر پیدا کنید :
http://peter.sh/experiments/vendor-prefixed-css-property-overview/.
مثال هایی از CSS3
برای اینکه بفهمید که با CSS3 چه کارهایی می توانید انجام دهید ، اجازه دهید تا مثال هایی در این زمینه برای شما بیاوریم تا بهتر با این موضوع آشنا شوید :
دکمه ها
وب سایت های برای مقاصد مختلف از دکمه ها استفاده می کنند ، که یکی از موارد معمول آن این است که برای فراخوانی یک عمل از دکمه استفاده می شود . مانند دکمه ی submit و دکمه action . از لحاظ تاریخی شما از دکمه های style دار می توانید برای نمایش تصاویر سایه دار روی دکمه استفاده نمایید . اما هنگامی که ما دکمه ها در اندازه های مختلفی داریم ، آنگاه نیاز به تصاویر مختلف در سایزهای مختلف خواهیم داشت . اما در CSS3 ما همه ی این امکانات و افکت ها را با استفاده از کدنویسی خواهیم داشت و دیگر نیازی به استفاده از سایزهای عکس مختلف نمی باشد . نه تنها دیگر نیاز به عکس نمی باشد ، بلکه برای تعیین سایزهای مختلف از دکمه خود بدون تعریف دوباره ی آن می توانید دکمه ی خود را با استفاده از مقیاس دهی تغییر اندازه دهید . در مثال زیر شما تعریف یک دکمه را با سایه ملاحظه می کنید :
و این کدها در نهایت دکمه ای را می سازد که در زیر مشاهده می کنید
سیستم رنگ RGBA
در CSS ، سیستم رنگ ها براساس هگزا دسیمال و RGB تعریف می شود . اگر ما بخواهیم این رنگ ها را بصورت پس زمینه شفاف استفاده کنیم ، در سیستم قدیم باید از عکس های 24 بیت از نوع png استفاده می کردیم . اما در CSS3 ، می توانیم از RGBA استفاده کنیم . که در این سیستم A یک مقدار آلفا برای نمایش میزان شفافیت می باشد . یکی از فواید این سیستم این است که دیگر نیازی به استفاده از تصاویر نمی باشد . برای نمایش چگونگی استفاده از این سیستم در ادامه مثالی را برای شما می آوریم :
همانگونه که مشاهده می کنید ، در این کدها برای عکس مورد نظر خود شفافیت 50 درصد را در نظر گرفته ایم که این شفافیت براساس عددی اعشاری که در اینجا 0.5 می باشد کدنویسی می گردد . نتجه ی کار را در زیر مشاهده می نمایید :
شاد و سلامت باشید
محمد جعفری فوتمی