1. قضايا التحقق من صحة CSS
أولاً وقبل كل شيء، وفقًا لمتطلبات المنافسة، يجب أن تتوافق المشاركات مع معايير XHTML، ويجب أن تجتاز CSS المقدمة التحقق من W3C. يعد موقف التحقق من CSS مثاليًا. فشلت 8 إدخالات فقط من بين الإدخالات في التحقق من CSS2.0. أخطاء التحقق الرئيسية هي: "Line: 0 Font-family: يوصى بتحديد عائلة النوع كخيار أخير."
توصي W3C أنه عند تعريف الخطوط، يجب أن ينتهي بفئة من الخطوط بدلاً من خط واحد. على سبيل المثال، يتم استخدام "sans-serif" لضمان إمكانية عرض خطوط الويب تحت أنظمة تشغيل مختلفة.
على الرغم من أن معظم الأشخاص يحددون "sans-serif" على علامة النص، إلا أنه إذا تم حذف sans-serif عند تحديد الخط مرة أخرى في معرفات أو فئات أخرى، فسيتم اعتبار فشل التحقق. هذا الخطأ ليس خطيرًا جدًا ويمكن تجنبه بقليل من الاهتمام.
2. اقتراحات كتابة CSS
إضافة تعليقات إلى ملفات CSS. ستوفر التعليقات الراحة لصيانتك المستقبلية. يوصى بإضافة تعليقات إلى ملفات CSS قدر الإمكان، ولا تقلق بشأن إضافة عدد صغير من البايتات.
حاول تقصير بناء جملة CSS قدر الإمكان. على سبيل المثال، يمكن اختصار قيمة اللون "#FFFFFF" كـ "#FFF"؛ ويمكن اختصار "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" بـ " الحشو: 30 بكسل 0 10 بكسل "20 بكسل؛". هناك المزيد من تقنيات الحفظ في تحديد التقنيات، وكلما أصبحت أكثر كفاءة في تطبيقات CSS، سوف تستمر في اكتشاف طرق أفضل.
3. مشكلات التحقق من صحة XHTML
نظرًا لأنها كانت عبارة عن منافسة على ورقة الأنماط، فقد أولى الجميع المزيد من الاهتمام للتحقق من CSS، ولكن تم إهمالهم قليلاً فيما يتعلق بالامتثال لـ XHTML، وحدثت العديد من الأخطاء ذات المستوى المنخفض. القضايا الرئيسية مذكورة أدناه:
target="_blank"، بناء الجملة هذا صحيح في HTML4.0، لكنه غير مسموح به في XHTML1.0. أحد الحلول هو كتابة الهدف = "جديد"، والحل الآخر هو استخدام JS لمعالجة جميع الأهداف؛
من الأفضل عدم تضمين ورقة الأنماط، فمن الأسهل الاحتفاظ بملف ورقة الأنماط بشكل مستقل. إذا تم تضمين <style>، فيجب كتابته كـ <style type="text/css">، ولا يمكن تجاهل النوع، وإلا فلن يتمكن XHTML من تحديد الغرض من استخدام النمط الخاص بك.
يجب كتابة <br> بالشكل <br />. يتطلب XHTML أن تكون جميع العلامات غير المقترنة متبوعة مباشرة بـ "/".
إعادة استخدام نفس المعرف. لا يمكن استخدام المعرف إلا مرة واحدة في XHTML إذا كنت بحاجة إلى الرجوع إلى النمط عدة مرات، فيجب عليك استخدام الفئة.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />من الواضح أن هناك علامة اقتباس إضافية في قيمة سمة المحتوى.
طريقة تضمين الفلاش خاطئة. كان <embed> في الأصل علامة خاصة لـ Netscape، على الرغم من أنه تم دعمه لاحقًا بواسطة IE، إلا أنه لم يتم التعرف عليه مطلقًا بواسطة W3C. لا توجد علامة <embed> في HTML4.0. يدعو W3C إلى استخدام علامة <object>. لحل مشكلة التوافق بين المتصفحات المختلفة، الحل البديل هو استخدام كلا العلامتين. نموذج التعليمات البرمجية الكامل كما يلي (خلفية الفلاش شفافة): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase = " http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
العرض = "300" الارتفاع = "100"> <param name = "الجودة" value = "عالية"> <param name = "wmode" value = "transparent">
<param name = "SRC" value = "test.swf"> <embed src = "test.swf" wmode = "transparent" جودة = "عالية"
صفحة الإضافات =" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type = "application/x-shockwave-flash" width = "300" height = "100"> </embed> </object>
لكن كتابته مباشرةً بتنسيق XHTML لا يزال غير ممكن. الآن لا يمكننا خداع عملية التحقق إلا عن طريق كتابة الكود أعلاه في ملف flash.js ثم استدعائه.
<script type="text/javascript" src="flash.js"></script>
ما إذا كان الفلاش يفي بالمعايير هي مسألة مثيرة للجدل. مزيد من التعليمات: راجع http://www.blueidea.com/tech/site/2004/1920.asp
يجب كتابة الرموز مثل id=header class=title على النحو التالي id='header' class='title'. إن اقتباس قيم السمات هو قاعدة بناء جملة XHTML الأساسية.
4. قضايا التوافق
هناك 12 عملاً تكون مشوهة ومنحرفة عند عرضها في IE6.0 وMozilla Firefox1.0 وOpera 7.12. (لم أختبر مع IE5.0، كنت كسولًا :) IE5.0 يمثل تحديًا لجميع مصممي تخطيطات CSS).
يتمركز في IE، ولكن ليس في Mozilla. يمكن أن يؤدي ضبط النص {TEXT-ALIGN: center;} في IE إلى توسيطه بالفعل، ولكن في Mozilla يجب عليك إضافة إعدادات النمط التالية إلى الطبقة التي تحتاج إلى توسيطها: MARGIN-RIGHT: auto;MARGIN-LEFT: auto; العرض. تبدو الصفحة عادية في Mozilla، لكنها مشوهة في IE لأنها تتجاوز العرض، ويتم نقل الطبقات المتجاورة إلى الأسفل. يحدث هذا الموقف بسبب التفسيرات المختلفة لنموذج الصندوق بين IE وMozilla. هناك العديد من الحلول، مثل الطريقة "!مهم".
بشكل عام، معظم المشاركات مؤهلة بشكل عام، وقد تم تحقيق الغرض من هذه المسابقة بشكل أساسي وقد تم فهم وإتقان معايير الويب وتخطيط CSS من قبل المزيد والمزيد من المصممين. أما بالنسبة للفن السيئ لبعض الأعمال، أعتقد أن هذه عملية يجب على كبار المصممين أن يتذكروا أنه عندما ظهر تخطيط الجدول لأول مرة، كانت معظم صفحات الويب بسيطة للغاية. بعد فترة من الهضم والفهم والتطبيق لتخطيط CSS، سيكون هناك المزيد من صفحات الويب التي تأخذ كل من التكنولوجيا والجماليات في الاعتبار مثل المشاركة بالجائزة الأولى.