قبل عشر سنوات ، فقط أكثر مصممي المواقع المتطورة الذين يستخدمون CSS لتخطيط صفحة الويب والزينة. في ذلك الوقت ، كان دعم المتصفحات لتخطيط CSS غير مكتمل ومليء بالثغرات ، لذلك بينما أصر هؤلاء الأشخاص على توحيد الويب ، كان عليهم استخدام الاختراقات لعرض صفحاتهم بشكل طبيعي في جميع المتصفحات. واحدة من أكثر تقنيات الاختراق المستخدمة هي استنشاق المتصفح ، والذي يستخدم سمة navigator.useragent في JavaScript لتحديد العلامة التجارية وإصدار المستعرض الذي يستخدمه المستخدم. يمكن لتكنولوجيا استنشاق المتصفح أن تتفوق بسرعة لتطبيق تعليمات مختلفة على متصفحات مختلفة.
اليوم ، تعتبر التخطيطات المستندة إلى CSS شائعة جدًا بالفعل ، والمتصفحات تدعمها صلبة للغاية. ولكن الآن CSS3 و HTML5 موجودان هنا ، فقد استدار التاريخ وعاد إلى مكانه الأصلي - بدأ دعم هذه التقنيات الجديدة من قبل مختلف المتصفحات غير متساوية مرة أخرى. لقد اعتدنا منذ فترة طويلة على كتابة رموز أنيقة ومتوافقة مع المعيار ، ولن نستخدم بعد الآن اختراقات أو متصفحات CSS لاستنشاق التقنيات غير الموثوقة والمنخفضة المستوى. نعتقد أيضًا أن المزيد والمزيد من المستخدمين سيوافقون على فكرة أن مواقع الويب لا يجب أن تبدو كما هي في جميع المتصفحات. إذن في مواجهة هذا الموقف المألوف (دعم المتصفح المختلفة) الآن ، ماذا يجب أن نفعل؟ بسيط: استخدم الكشف عن الميزات ، مما يعني أنه لا يتعين علينا أن نسأل المتصفح من أنت؟ لجعل التكهنات غير الموثوقة. بدلاً من ذلك ، نسأل المتصفح إذا كان يمكنك القيام بذلك أو ذاك. من السهل اكتشاف المتصفحات ، ولكن لا يزال من الممل قضاء الوقت في اختبارها يدويًا واحدًا تلو الآخر. يمكن أن يساعدنا Modernizr في هذا الوقت.
Modernizr: مكتبة اكتشاف وظيفية تم تطويرها خصيصًا لـ HTML5 و CSS3
Modernizr هي مكتبة JS مفتوحة المصدر تسهل على المصممين الذين يطورون مستويات مختلفة من الخبرة بناءً على الاختلافات في متصفحات الضيوف (في إشارة إلى الاختلافات في دعم معايير جديدة). يسمح للمصممين بالاستفادة الكاملة من ميزات HTML5 و CSS3 للتطوير في المتصفحات التي تدعم HTML5 و CSS3 دون التضحية بالسيطرة على المتصفحات الأخرى التي لا تدعم هذه التقنيات الجديدة.
عندما تقوم بتضمين البرنامج النصي لـ Modernizr في صفحة ويب ، فسوف يكتشف ما إذا كان المتصفح الحالي يدعم ميزات CSS3 ، مثل @font-face و border-radius و border-image و box-shadow و rgba () ، وما إلى ذلك ، وسوف تكتشف أيضًا ما إذا كانت ميزات HTML5 مدعومة-مثل الصوت ، والفيديو ، والمتخزين المحلي ، و tage tage. على أساس الحصول على هذه المعلومات ، يمكنك استخدامها على المتصفحات التي تدعم هذه الميزات لتحديد ما إذا كنت تريد إنشاء عودة قائمة على JS أو ببساطة خفض تلك التي لا تدعمها. بالإضافة إلى ذلك ، يمكن لـ Modernizr أيضًا تمكين IE من دعم تطبيق أنماط CSS على عناصر HTML5 ، بحيث يمكن للمطورين استخدام هذه العلامات الدلالية على الفور.
تم تطوير Modernizr استنادًا إلى نظرية التحسين التدريجي ، لذلك يدعم ويشجع المطورين على إنشاء طبقة موقع الويب الخاص بهم. كل شيء يبدأ بمؤسسة خاملة مع تطبيق JavaScript ، مما يضيف طبقات التطبيق المحسّنة واحدة تلو الأخرى. نظرًا لاستخدام Modernizr ، فمن السهل عليك معرفة ما يدعمه المتصفح. دعونا نلقي نظرة على مثال على إنشاء مواقع الويب المتطورة من خلال تطبيق Modernizr.
ابدأ بتطبيق Modernizr
أولاً ، قم بتنزيل أحدث إصدار مستقر من Modernizr من www.modernizr.com (حاليًا ، تم حظر موقع Modernizr الرسمي في الصين ، ويمكننا تنزيله من Github. أو لتكون أكثر بساطة ، يمكنك تنزيل أحدث ملف نص الإصدار 1.7 من Master). على الموقع الرسمي ، يمكنك أيضًا رؤية قائمة بجميع الميزات التي تدعمها للكشف (الصفحة الأخيرة من هذه المقالة ستقدم هذه القوائم بحيث يمكن لأحذية الأطفال التي لا يمكن قلبها من خلال الجدار معرفة أي منها يدعمون). بعد تنزيل أحدث إصدار (يستخدم المؤلف الإصدار 1.5 عند كتابة هذه المقالة) ، أضفه إلى منطقة الصفحة:
بعد ذلك ، أضف فئة no-js إلى العنصر.
عند تشغيل Modernizr ، سيحول فئة NO-JS إلى JS لإعلامك بأنها تعمل. لا يقوم Modernizr بذلك فحسب ، بل يضيف أيضًا فصلًا فئة إلى جميع الميزات التي يكتشفها. إذا كان المتصفح لا يدعم ميزة ما ، فإنه يربح اسم الفصل المقابل للميزة بحلول. لذلك ، قد يصبح عنصرك هكذا:
ستقوم Modernizr أيضًا بإنشاء كائن JS يسمى Modernizr ، وهي قائمة بالنتائج المنطقية المقدمة لكل ميزة تم اكتشافها. إذا كان المتصفح يدعم عنصر قماش جديد ، فإن قيمة Modernizr.Canvas صحيحة ؛ إذا كان المتصفح لا يدعم هذا العنصر الجديد ، فإن القيمة المقابلة خاطئة. سيحتوي كائن JS أيضًا على معلومات أكثر تفصيلاً لوظائف معينة ، مثل Modernizr.Video.h264 سيخبرك ما إذا كان المتصفح يدعم برنامج الترميز الخاص هذا. سيخبرك Modernizr.InputTypes.Search ما إذا كان المتصفح الحالي يدعم نوع إدخال البحث الجديد ، إلخ.
تشبه صفحتنا الصغيرة غير المجهزة والمجهزة إلى حد ما نظام ما قبل الاختبار ، ولكن لديها دلالات أفضل وسهولة الوصول. دعنا نضيف نمطًا أساسيًا صغيرًا إليه: تنسيق نص صغير ولون وتخطيط لجعله يبدو أفضل. في الوقت الحاضر ، لا يوجد شيء جديد ، فقط أضف أنماط التعبير إلى صفحة HTML بنية دلالية ، وانظر إلى الصفحة بعد إضافة النمط.
أدناه ، نريد تعزيز هذه الصفحة لجعلها أكثر إثارة للاهتمام. أرغب في تطبيق تأثير نص غريب على H1 على الرأس ، وقسم قائمة ميزات الكشف إلى عمودين ، ثم احصل على كل شيء عن Modernizr مع صورة إلى اليمين. أريد أيضًا أن أجعل الحدود حول محتوى الصفحة جميلة. الآن ، تتيح لك CSS3 الأكثر قوة إضافة المزيد من الخصائص إلى قاعدة من شأنها أن تتجاهلهم إذا لم يدعمهم المتصفح. مع CSS Cascade (الميراث) ، يمكنك استخدام خصائص جديدة مثل حدود الحدود دون الاعتماد على Modernizr. ومع ذلك ، يمكن أن يوفر لك استخدام Modernizr بعض الميزات التي لا يمكن توفيرها بالوسائل الحالية: أسماء الفئات المعدلة ديناميكيًا استنادًا إلى الدعم التفاضلي للمتصفح للأشياء الجديدة. سأوضح هذا عن طريق إضافة قاعدتين جديدتين إلى صفحتنا:
تضيف القاعدة الأولى زاوية مدورة 12 بكسل إلى عنصر #Content. ولكن في الصفحة الحالية ، قمنا بتعيين حدود مع عنصر # -content مع قيمة سمة من 2px خارجية #666. هذا يبدو جيدًا عندما يكون الصندوق زوايا صحيحة ، ولكن ليس في زوايا مستديرة. بفضل Modernizr ، يمكنني تعيين حافة حقيقية 1 بكسل إلى المربع مع الحدود التي تدعمها المتصفح.
القاعدة الثانية أكثر تقدمًا قليلاً. أضفنا ظلًا إلى عنصر #-content وأزلنا سمة الحدود للمتصفحات التي تدعم سمات الشادو. لماذا؟ نظرًا لأن معظم المتصفحات لا توفر أداءً جيدًا لمجموعة من الحواف والزوايا مع الظلال (هذا عيب في متصفح يجب ملاحظة ، لكن علينا أن نتحمله الآن). بدلاً من استخدام الظلال واستخدام الحدود فقط ، أفضل استخدام الظلال لتطويق العناصر. وبهذه الطريقة ، يمكنني الحصول على أفضل أداء ودقيق وأفضل CSS في العالم: سيظهر ظل جميل في المتصفح الذي يدعم سمة المربع الشادو ؛ المتصفح الذي يدعم سمة الحدود فقط سيقدم حدودًا رقيقة مدورة جميلة ؛ بالنسبة لأولئك المتصفحات المكسورة التي لا تدعم هذين ، سنرى حدود بزاوية يمينية ثنائية بكسل.
أدناه نريد تطبيق خط خاص مخصص على الرأس. فيما يلي بياننا الحالي لـ H1 ، بدون تغييرات:
تعمل هذه العبارات بشكل جيد على صفحاتنا الأساسية ، وحجم نص 27 بكسل مناسب أيضًا لعرض تلك الخطوط التي حددناها لـ H1. لكن بالنسبة للخط ، سأستخدمه يسمى جميلة ، 27 بكسل صغيرة جدًا. هنا نريد إضافة قواعد أخرى لاستخدام هذا الخط المخصص:
أولاً ، نضيف إعلان @font-face ونحدد المسار واسم الملف واسم الخط لخطوطنا المخصصة. ثم نستخدم عبارة CSS لتحديد نمط الخط لـ H1 الخاص بنا. سترى أنني اخترت حجم خط كبير هنا ، لأن الخط الجميل نفسه أصغر بكثير من نص الخطوط الأخرى ، لذلك يجب علينا توجيه المتصفح لإعطاء H1 حجمًا كبيرًا عند عرض خطوطنا المخصصة.
بالإضافة إلى ذلك ، فإن نصنا الجميل المكتوب بخط اليد لديه بعض المشكلات التقديم مع تظليل النص ، لذلك يتعين علينا إلغاء تظليل النص عندما يقرر المتصفح استخدام نص مخصص. بالإضافة إلى ذلك ، يجب تقسيم قائمة أجزاء ميزة الكشف إلى عمودين. لتحقيق هدفي ، أريد استخدام سمة CSS Awesome CSS ، والتي ستمكن المتصفح من تقسيم القائمة بذكاء إلى أعمدة دون تعطيل ترتيبها. على الرغم من أن قائمتنا لا تحتوي على رقم رقمي ، إلا أنها مرتبة أيضًا بالترتيب الأبجدي. بالطبع ، لا تدعم جميع المتصفحات هذه الخاصية. بالنسبة لأولئك الذين لا يدعمون ، نستخدم Float لتحقيق الغرض من عمودين - بعد استخدام العائمة ، لن يتم ترتيب القائمة بعد الآن أبجديًا ، لكن هذا أفضل من لا شيء.
لقد استخدمت Modernizr مرة أخرى لوضع خصائص مختلفة لحالات مختلفة. إذا كان المتصفح يدعم أعمدة CSS ، فسوف يقسم القائمة تمامًا إلى عمودين. إذا لم يكن مدعومًا ، فيمكننا أيضًا استخدام طريقة عائمة لجعل القائمة في عمودين عن طريق العائمة. على الرغم من أنها ليست مثالية ، إلا أنها أفضل من تطبيق قائمة طويلة من الأعمدة المفردة مباشرة.
ربما تكون قد لاحظت أنني أضفت بادئات مختلفة (-moz- ، -webkit- ، -o-) إلى السمة. وذلك لأن مصنعي المتصفح المختلفة لديهم تعريفات مختلفة لتنفيذ هذه الوظيفة ، لذلك لتنفيذ هذه الوظيفة ، يحتاجون إلى إضافة بادئاتهم المقابلة إلى متصفحات مختلفة.
بعد هذه التغييرات ، تبدو صفحتنا الجديدة أفضل.
سنضيف المزيد من التحسينات التقدمية إلى صفحتنا لإنهاء هذا البرنامج التعليمي. تدعم المتصفحات المستندة إلى WebKit بعض المؤثرات الخاصة الرائعة ، مثل تحويل CSS والرسوم المتحركة والتحول ثلاثي الأبعاد. وأريد تطبيق بعض هذه المؤثرات الخاصة في صفحات المرحلة الأخيرة. مرة أخرى ، ستتم إضافة هذه الخصائص إلى CSS الحالية لدينا وتجاهلها في المتصفحات التي لا تدعمها. لذلك ، من المناسب استخدام Modernizr لهذا الموقف حيث لا يتم دعم التعزيز التدريجي من ناحية.
المجموعة الأولى:
تعد قاعدة @keyframes جزءًا من مواصفات الرسوم المتحركة الجديدة لـ CSS وتدعم حاليًا WebKit فقط. يتيح لك إعلان مسار الرسوم المتحركة الكامل لأي سمة وتغييرها في أي مرحلة تريدها. لمعرفة المزيد حول الرسوم المتحركة ، اقرأ مواصفات مشروع W3C.
نضيف هنا الرمز الذي يتسبب في تدوير عنصر في الفضاء ثلاثي الأبعاد:
نظرًا لأن الشعار يحتاج إلى تدوير ، وآمل أن يتوافق بشكل أكبر مع الخلفية عند تدويره ، لذلك يتم استخدام ملف تنسيق PNG هنا. لقد استخدمت أيضًا سعة فائض: سمة مخفية لإخفاء النص في الرأس مع البادئة-9999 بكسل. من المثير للاهتمام أن تجعل العناصر تدور في ثلاثية الأبعاد ، ولكنها ليست جميلة جدًا. أخيرًا ، اخترنا استخدام قاعدة الرسوم المتحركة ، ووضع فترة دورانها إلى ثانيتين ، وتناوبًا على طول المحور المركزي الخاص بها ، ولا تتوقف أبدًا.
تبدو الصفحة النهائية رائعة ، وحتى تحدد الرسوم المتحركة الممتعة لمتصفح WebKit. آمل حتى الآن أن تفهم كم يمكن أن تجعل معصمك مع تحكم Modernizr على موقع الويب الخاص بك ومدى بساطة ذلك يمكن أن يؤدي إلى تعزيز تدريجي حقيقي. هذه ليست مجرد الفائدة الكاملة لـ Modernizr ، بل يمكن أن تساعدك أيضًا في بناء عوامل احتياطية استنادًا إلى JS وتساعدك على تطبيق الميزات الجديدة الرائعة لـ HTML5.