CSS هو الشكل السائد الحالي لتخطيط صفحة الويب، وهو أيضًا المحتوى الأساسي الذي يقدمه لك موقع 52CSS.com نظرًا لاستخدام CSS على نطاق واسع في جميع مواقع الويب تقريبًا، فلنأخذ بعض الوقت لإنشاء ورقة أنماط والتأكد من توافقها معايير جيدة. ستساعد النصائح التالية بشكل كبير مبتدئي CSS أثناء عملية التطوير. يمكنك التعرف على المهارات العشر التي يجب أن يعرفها مبتدئو DivCSS وفهمهم لمعايير الويب.
1. الفهرس ستساعدك التعريفات الواردة هنا أنت والمطورين الآخرين على فهم مواقع الويب وملفات CSS. يحتوي قسم الفهرس على فقرة تعليق CSS منسقة.
1. قم بإعطاء معلومات المؤلف عن ملف CSS 2. حدد تصميم موقع الويب (عدد الأعمدة، ثابت/ديناميكي) [الأعمدة، ثابت/سائل]
3. تتبع إصدارات الملف بشكل مستمر (مفيد جدًا عندما يكون للملف عدة مؤلفين أو يحتاج إلى الترقية في المستقبل)
2. نقطة الربط تشبه نقاط الارتساء الإشارات المرجعية داخل ملف CSS نفسه، حيث تسمح لك نقاط الارتساء بعرض ملف CSS بأكمله بوضوح والحفاظ عليه منظمًا.
يجب تحديد نقاط الارتساء في فهرس CSS (المذكور أعلاه)، وبما أن CSS لا يمتلك نظام ربط خاصًا به، فقد استخدمت خدعة بسيطة لتحديد نقاط الارتساء في المستند.
تتمثل الطريقة في استخدام حرف نادر نسبيًا لتحديد التعليق. عندما تريد العثور على نقطة ربط، يمكنك نسخ مُعرف نقطة الربط والبحث فيه من الفهرس والعثور على نقطة الربط.
3. إعادة التعريف إعادة التعريف هي طريقة تُستخدم لتجاوز أنماط العلامات الافتراضية لـ HTML وإعادة تعريفها. هل سبق لك أن رأيت كود CSS مثل هذا، فهو يريد فقط تصميم هذا العنصر المحدد!
أحد الاستخدامات الجميلة جدًا في CSS هو المحددات السياقية، فلنستخدمها:
4. قواعد التسمية أحد العوامل الرئيسية هو إعطاء العناصر أسماء دقيقة وواضحة، وهذا سوف يتجنب الارتباك ويجعل قراءة CSS الخاصة بك أسهل وأسرع.
5. الاختصار ميزة الاختصار في CSS هي خاصية تسمح لك بدمج العديد من الخصائص من نفس النوع في واحدة.
تجعل اختصارات CSS عملية التطوير أسهل وتحافظ على ملفات CSS نظيفة وقصيرة وقابلة للقراءة، إليك بعض الأمثلة:
6. العفاريت لا يبدو أن ترجمتها إلى قزم تعمق الفهم الإدراكي للمقالة، بل على العكس من ذلك، عندما قرأتها بالفعل باللغة الإنجليزية، لم أفهمها، لذلك ببساطة لم أترجمها. إن دمج جميع صور الخلفية في صورة واحدة واستخدام موضع الخلفية لعرض أجزاء مختلفة هو ما نسميه CSS Sprites.
يمكن لـ CSS Sprites تقليل عدد طلبات HTTP، وحفظ النطاق الترددي، وجعل القراءة أسرع. وفي الوقت نفسه، يمكن أيضًا تجنب عدم استقرار الصورة (على سبيل المثال، عندما يمرر الماوس فوق صورة واحدة، يمكن عرض تأثير صورة أخرى، وستنتظر الصورة الأخيرة لمدة نصف يوم على اتصال إنترنت بطيء لتظهر) .
أفضل وأشهر مثال على CSS Sprites هو نظام القائمة الموجود على موقع Apple الإلكتروني:
7. التوضيح إن توضيح المحدد هو عملية تحديد أولويات أي منها سيتم استخدامه عندما يمكن استخدام عدة قواعد لنفس العنصر.
ببساطة، كل محدد CSS له وزن. يحدد مجموع كل أوزان المحدد خصائصه في الوثيقة. يمكن أن يكون الوضوح مفيدًا جدًا عندما يكون مستند CSS كبيرًا جدًا لدرجة أنك لا تعرف العنصر الذي له وزن أكبر.
حسنًا، يعد الوضوح مجالًا كبيرًا في CSS، ومن الصعب شرحه في بضع جمل فقط، فلننظر إلى مثال:
8. إعادة تعيين السمة تضمن عمليات إعادة تعيين الملكية العامة ظهور موقع الويب بشكل متماثل تقريبًا في جميع المتصفحات. في كل حالة، تستخدم المتصفحات المختلفة مجموعتها الخاصة من إعدادات النمط الافتراضية لجميع مواقع الويب، مما سيؤدي إلى ظهور موقعنا بشكل مختلف في المتصفحات المختلفة. ستعمل إعادة تعيين الملكية العامة على تصحيح هذا الموقف وتسمح لك ببناء موقعك من قاعدة متسقة تمامًا.
لا أوصي دائمًا باستخدام أطر عمل CSS، لكنك لا تزال بحاجة إلى استخدام إعادة تعيين CSS. هناك العديد من طرق إعادة الضبط المختلفة، والتي تتراوح من البسيطة إلى المعقدة.
9. المأجورون CSS حتى لو كان CSS مثاليًا، فإنه لا يمكنه إنتاج نفس العرض تمامًا في جميع المتصفحات. كل متصفح لديه طريقة مختلفة لتفسير CSS. بشكل عام، إذا كنت تريد أن يكون موقع الويب الخاص بك متسقًا عبر جميع المتصفحات، فيجب عليك استخدام CSS Hacks.
سيؤدي استخدام CSS Hacks إلى تقليل الأخطاء عند التحقق من صحة CSS، أوافق على ذلك. هناك طريقة بديلة لتحقيق ذلك وهي استخدام ملف CSS واحد مختلف لكل متصفح وإخبار المتصفح بنوع CSS المحدد الذي يجب استخدامه من خلال تضمين العلامات الخاصة بالمتصفح في HTML. أقوم دائمًا بإنشاء "fuck-ie.css" في جميع مشاريعي :) (ملاحظة المترجم: يستخدم المؤلف هنا كلمات بذيئة للتعبير عن غضبه تجاه IE. إذا تمت ترجمته على أنه "التزاوج مع IE.css"، فلن يفعل العالم ذلك. هل يكون أكثر انسجاما؟)
بعد استخدام هذه الطريقة، سيتم التحقق من "ملف CSS الرئيسي" الخاص بك وفي نفس الوقت، سيتم أيضًا التحقق من ملف "fuck-ie.css"، ولكنه سيستبدل فقط "ملف CSS الرئيسي" في متصفح IE.
10. التحقق من المهم دائمًا التحقق من صحة CSS الخاص بك عند إنشائه، وهذا سيضمن أن CSS الخاص بك خالي من الأخطاء ويمكن تفسيره بشكل صحيح بواسطة جميع المتصفحات.
W3C Validator هي أداة شائعة جدًا للتحقق من صحة CSS عبر الإنترنت.
