فهرست مطالب أ 1. مقدمه................ 3 1-1. ویژگی های Modernizr 4 2. Modernizr چیست؟ 6 2-1. نصب Modernizr 6 2-2. متدهای Polyfills و Modernizr 6 2-3. تابع Modernizr.load 7 3. چگونگی عملکرد 8 3-1. مرورگرهایی که توسط Modernizr پشتیبانی می شوند 9 3-2. کلاس های Modernizr متناسب با ویژگی های CSS 9 3-3. کلاس های Modernizr متناسب با ویژگی های HTML5 11 3-4. ویژگیهای دیگری که توسط Modernizr پشتیبانی می شوند 11 3-5. لیست متدهای Modernizr 12 4. سایت Modernizr.com 13 4-1. دانلود 13 4-2. مستندات 15 4-3. نصب modernizr 16 4-4.متدهای Polyfills and Modernizr 16 4-5. آموزش Modernizr.load() 17 5. چگونهModernizr کار می کند؟ 19 6. عناصرHTML5 در IE 19 7. مرورگرهای پشتیبانی شده 20 8. ویژگی های شناسایی شده توسط Modernizr 20 8-1. ویژگی های CSS 20 8-1-1. مدل جعبه انعطاف پذیر flexbox 21 8-1-2. hsla() 21 8-1-3. پس زمینه های متعدد 21 8-1-4. انیمیشن CSS 21 8-1-5. ستون CSS 21 8-1-6. شیب CSS 22 8-1-7. سایر ویژگی ها 22 8-2. ویژگی های HTML5 23 8-3. تصویری HTML5 23 8-4. صفات ورودی 24 8-5. انواع ورودی 24 8-6. متفرقه 24 8-7. رویدادهای لمسی 25 8-7-1. آزمون های اضافی موجود در پلاگین 25 9. متدها و روش های modernizr 25 9-1.روش Modernizr.prefixed() 25 9-2. تست رسانه پرس و جو MQ () 27 10. توسعه پذیری 28 10-1. API های افزونه addTest() 28 10-2. متد testStyles() 28 10-3. متد testProp() 29 10-4. متد testAllProps() 29 10-5. متد hasEvent() 30 10-6. متد _prefixes & _domPrefixes 30 مقدمه در زمان معرفی رسمی نسل جدید HTML5از سوی کنسرسیوم جهانی وب (W3C) تعداد مرورگرهایی که تگ های HTML5 را پشتیبانی می کردند بسیار محدود بوند، از این رو شرکت های بزرگ مانندMozilla ،Google ،Microsoft و... با چالش جدیدی بر سر راه ساخت مرورگرهای جدید خود مواجعه شدند. این چالش در حالی بود که عقب ماندن از محصول شرکت رغیب برای آنها در پاره ای از مواقع به معنای از دست دادن بازار بود. از این رو اقدام به ساخت مرورگرهایی که بتوانند تمامی تگ هایHTML5 را پشتیبانی نمایند، نمودند. اما این امر تا حدودی غیرممکن به نظر می رسید چرا که تکنولوژیHTML5 بسیار نوظهور بوده و ممکن بود تگ هایی در آینده ساخته شوند و یا به کلی کنار گذاشته شوند. بنابراین آنها تصمیم گرفتند با دادن نسخه های به روز شده بتوانند جوابگوی نیاز روز افزون مشتریان خود باشند. اما تمامی آنها قادر به این کار دشوار نبودند، به شکلی که شرکت مایکروسافت از نسخه 9 به بعد تصمیم گرفت تگ های HTML5 را در مرورگری که کاربران زیادی داشت (IE) پشتیبانی کند، اما شرکت (بنیاد) موزیلا بسیار در این عرصه پخته تر عمل کرده و از نسخه 3.5 به بعد مرورگر Firefox، یعنی حدود یک سال زودتر از مرورگرIE ، تگ های محدودی از HTML5 را پشتیبانی می کرد. چنین رفتاری از سوی مایکروسافت برای کاربران حرفه ای وب، بسیار ناهنجار و ناخوشایند بود. طراحان وب و برنامه نویسان وب نمی خواستند لذت استفاده از فناوری جدید را از دست دهند. اما می بایست عمل Cross Browsing را نیز رعایت می کردند. چرا که ممکن بود در صفحه خود از تگی استفاده کنند که کاربری با یک مرورگر قدیمی تر اصلا سایت را نبیند یا بسیاری از قسمت های در نظر گرفته شده را از دست بدهد.
فهرست مطالب أ 1. مقدمه................ 3 1-1. ویژگی های Modernizr 4 2. Modernizr چیست؟ 6 2-1. نصب Modernizr 6 2-2. متدهای Polyfills و Modernizr 6 2-3. تابع Modernizr.load 7 3. چگونگی عملکرد 8 3-1. مرورگرهایی که توسط Modernizr پشتیبانی می شوند 9 3-2. کلاس های Modernizr متناسب با ویژگی های CSS 9 3-3. کلاس های Modernizr متناسب با ویژگی های HTML5 11 3-4. ویژگیهای دیگری که توسط Modernizr پشتیبانی می شوند 11 3-5. لیست متدهای Modernizr 12 4. سایت Modernizr.com 13 4-1. دانلود 13 4-2. مستندات 15 4-3. نصب modernizr 16 4-4.متدهای Polyfills and Modernizr 16 4-5. آموزش Modernizr.load() 17 5. چگونهModernizr کار می کند؟ 19 6. عناصرHTML5 در IE 19 7. مرورگرهای پشتیبانی شده 20 8. ویژگی های شناسایی شده توسط Modernizr 20 8-1. ویژگی های CSS 20 8-1-1. مدل جعبه انعطاف پذیر flexbox 21 8-1-2. hsla() 21 8-1-3. پس زمینه های متعدد 21 8-1-4. انیمیشن CSS 21 8-1-5. ستون CSS 21 8-1-6. شیب CSS 22 8-1-7. سایر ویژگی ها 22 8-2. ویژگی های HTML5 23 8-3. تصویری HTML5 23 8-4. صفات ورودی 24 8-5. انواع ورودی 24 8-6. متفرقه 24 8-7. رویدادهای لمسی 25 8-7-1. آزمون های اضافی موجود در پلاگین 25 9. متدها و روش های modernizr 25 9-1.روش Modernizr.prefixed() 25 9-2. تست رسانه پرس و جو MQ () 27 10. توسعه پذیری 28 10-1. API های افزونه addTest() 28 10-2. متد testStyles() 28 10-3. متد testProp() 29 10-4. متد testAllProps() 29 10-5. متد hasEvent() 30 10-6. متد _prefixes & _domPrefixes 30 مقدمه در زمان معرفی رسمی نسل جدید HTML5از سوی کنسرسیوم جهانی وب (W3C) تعداد مرورگرهایی که تگ های HTML5 را پشتیبانی می کردند بسیار محدود بوند، از این رو شرکت های بزرگ مانندMozilla ،Google ،Microsoft و... با چالش جدیدی بر سر راه ساخت مرورگرهای جدید خود مواجعه شدند. این چالش در حالی بود که عقب ماندن از محصول شرکت رغیب برای آنها در پاره ای از مواقع به معنای از دست دادن بازار بود. از این رو اقدام به ساخت مرورگرهایی که بتوانند تمامی تگ هایHTML5 را پشتیبانی نمایند، نمودند. اما این امر تا حدودی غیرممکن به نظر می رسید چرا که تکنولوژیHTML5 بسیار نوظهور بوده و ممکن بود تگ هایی در آینده ساخته شوند و یا به کلی کنار گذاشته شوند. بنابراین آنها تصمیم گرفتند با دادن نسخه های به روز شده بتوانند جوابگوی نیاز روز افزون مشتریان خود باشند. اما تمامی آنها قادر به این کار دشوار نبودند، به شکلی که شرکت مایکروسافت از نسخه 9 به بعد تصمیم گرفت تگ های HTML5 را در مرورگری که کاربران زیادی داشت (IE) پشتیبانی کند، اما شرکت (بنیاد) موزیلا بسیار در این عرصه پخته تر عمل کرده و از نسخه 3.5 به بعد مرورگر Firefox، یعنی حدود یک سال زودتر از مرورگرIE ، تگ های محدودی از HTML5 را پشتیبانی می کرد. چنین رفتاری از سوی مایکروسافت برای کاربران حرفه ای وب، بسیار ناهنجار و ناخوشایند بود. طراحان وب و برنامه نویسان وب نمی خواستند لذت استفاده از فناوری جدید را از دست دهند. اما می بایست عمل Cross Browsing را نیز رعایت می کردند. چرا که ممکن بود در صفحه خود از تگی استفاده کنند که کاربری با یک مرورگر قدیمی تر اصلا سایت را نبیند یا بسیاری از قسمت های در نظر گرفته شده را از دست بدهد.