7 نصائح هامة حول تخطيط CSS

أصعب شيء في CSS للحصول عليه بشكل صحيح هو تخطيط موقعك. فيما يلي بعض النصائح للتعامل مع ذلك. بعض هذه النصائح ليست جديدة تمامًا، أو علم الصواريخ، ولكن نأمل أن توفر على شخص ما القليل من الإزعاج في مكان ما!

نصيحة 1: امسح إعدادات الحشو والهامش الافتراضية قبل بدء العمل.
تختلف أحجام الهوامش والحشوات الافتراضية في المتصفحات المختلفة، لذا تريد أن تبدأ بسجل نظيف، إذا جاز التعبير. استخدم هذا الأمر:

*
{
الهامش: 0 ؛
حشوة: 0 ؛
الحدود: 0؛
}

لمسح جميع إعدادات الهوامش والحشوة الافتراضية. لاحظ أيضًا الحد الذي تم تعيينه على 0. يرجى ملاحظة أنه إذا قمت بذلك، فسوف تتخلص أيضًا من الحدود الأرجوانية المزعجة التي يمكن النقر عليها، على الرغم من أن بعض الأشخاص يجادلون بأن الحدود الأرجوانية ضرورية لسهولة الوصول وسهولة الاستخدام. لكن الكثير من الأشخاص لا يحبون الصور الدائرية ذات الحدود الأرجوانية، وهذه إحدى الطرق التي يمكنك من خلالها التخلص منها بضربة واحدة دون الحاجة إلى ضبطها حدود الصورة=0 لكل صورة (وهو ما يتعارض مع قواعد الترميز الصارمة في أي حال).

نصيحة 2: لتوسيط تخطيطك، استخدم حاوية div لاحتواء كل المحتوى الخاص بك
أعلن ذلك على النحو التالي:

#حاوية

{
الهامش: 0 تلقائي
العرض: xxxpx؛
}

هناك بضع نقاط هنا يجب مراعاتها. لا تعلن أن العرض هو 100%. يؤدي هذا إلى هزيمة الكائن بأكمله حيث سيتعين عليك فقط الإعلان عن العناصر الفرعية داخل الحاوية ثم توسيطها باستخدام الهامش: 0 تلقائي. هذا أمر سيء جدًا لأنه يعني أنه بدلاً من الإعلان عن التخطيط المركزي مرة واحدة، سيتعين عليك الإعلان عنه في أماكن متعددة لكل عنصر داخل الحاوية الخاصة بك.

نصيحة 3: العمل من الأعلى إلى الأسفل
ابدأ فعليًا العمل على تخطيط CSS الخاص بك بدءًا من أهم العناصر في تصميمك، بالإضافة إلى العناصر "الأعلى" في HTML الخاص بك، مثل النص، بالإضافة إلى الحاويات الرئيسية.

أعلن عن أوامر CSS الخاصة بك على أعلى مستوى ممكن وحاول الإعلان عن شيء ما مرة واحدة فقط واتركه يتتالي طوال الوقت. لا تتجاوز الأوامر في المستوى الأدنى إلا عند الضرورة القصوى. وهذا يمنع ملف CSS المطول الذي يصعب صيانته وفهمه. على سبيل المثال، إذا كان لديك {الهامش: 0 تلقائي} الإعدادات في كل قسم فرعي داخل الحاوية الخاصة بك - أنت في ورطة.

نصيحة 4: قم بتوثيق ما تفعله واستخدم Firebug ومتصفح Firefox لتصحيح الأخطاء
أنت لا تكتب رمز CSS الخاص بك لنفسك فقط، ففي يوم من الأيام سيتعين على بعض الأشخاص السيئين تصحيحه. قم بإدخال العديد من التعليقات داخل ملف CSS الخاص بك لشرح سبب قيامك بالأشياء بطريقة معينة.

وبالتوافق مع هذا، قد تجد نفسك مضطرًا إلى إصلاح CSS الخاص بشخص آخر أكثر مما تعتقد (أو حتى نظامك الخاص، في هذا الصدد). استخدم الوظيفة الإضافية Firebug لمتصفح Firefox لتصحيح أخطاء CSS لديك. يعد هذا منقذًا للحياة فيما يتعلق بإعطائك نظرة ثاقبة حول المكان الذي قد يتعطل فيه تصميمك بالضبط ولماذا.

المشكلة الوحيدة في ذلك هي أن تصميمك قد يعمل بشكل مثالي في Firefox، ولكن ليس في IE5 أو IE6 أو IE7. وهذا يقودنا إلى النصيحة التالية.

نصيحة 5: حدد المتصفحات التي ستقوم بإنشاء CSS لها واختبارها من البداية
يصر بعض الأصوليين على التأكد من أن موقع الويب الخاص بك يعمل مع جميع المتصفحات الممكنة، والبعض الآخر يجعله يعمل مع المتصفحات "الرئيسية" فقط. كيف تعرف بالضبط أي المتصفحات تستخدم أكثر؟ مرة أخرى، تأتي مدارس W3 للإنقاذ.

في الصفحة التالية، يمكنك معرفة المتصفحات الأكثر شيوعًا: http://www.w3schools.com/browsers/browsers_stats.asp. من هذه الصفحة يمكنك أن ترى أن شيئًا مثل IE5 يستخدمه حوالي 1.1% فقط من المتصفحات. الأمر متروك لك فيما إذا كنت ترى أنه من المفيد إنشاء CSS الخاص بك ليكون متوافقًا مع هذا المتصفح، أو ما إذا كنت ستختبر توافقك مع IE6 وIE7 وFirefox، على سبيل المثال. مهما كان ما تفعله، عندما تبدأ في إنشاء CSS الخاص بك، ابدأ من الأعلى، واختبر كل إعداد في كل متصفح أثناء تقدمك. ليس هناك ما هو أسوأ من إنشاء موقع ويب مثالي في Firefox، ثم اكتشاف مباشرة بعد قيامك بتشفير ملف CSS مكون من 1000 سطر أنه معطل في IE6. إن تصحيح أخطاء التعليمات البرمجية الخاصة بك وإصلاحها بعد ذلك هو كابوس.

نصيحة 6: إليك نصيحة صغيرة محرجة لإصلاح CSS الخاص بك في IE6 أو IE7
لنفترض أن تصميمك يعمل بشكل مثالي في Firefox، ولكنه معطل في IE6. لا يمكنك استخدام Firebug لتحديد مكان المشكلة لأنه يعمل في Firefox. ليس لديك ترف استخدام Firebug في IE6، فكيف يمكنك تصحيح أخطاء ورقة أنماط IE6 أو IE7؟ لقد وجدت في كثير من الأحيان أنه يساعد على الإضافة {الحدود: 1 بيكسل أحمر خالص} or {الحدود: 1 بيكسل أرجواني خالص} إلى العناصر الإشكالية. بهذه الطريقة يمكنك في كثير من الأحيان معرفة سبب عدم ملاءمة بعض العناصر للمساحة المتاحة. إنها نصيحة صغيرة محرجة لأنها بدائية وبسيطة للغاية، لكنها فعالة!

نصيحة 7: فهم العوامات
يعد فهم العناصر العائمة أمرًا ضروريًا للفهم، خاصة في سياق جعل العناصر العائمة تعمل في المتصفحات المختلفة!

بشكل أساسي، يتم تحريك العناصر مثل div إلى اليسار أو اليمين (وليس إلى الأعلى أو الأسفل أبدًا، بل إلى الجوانب فقط). فيما يلي بعض الأشياء التي يجب أخذها في الاعتبار مع العناصر العائمة. يجب أن يكون لكل عنصر عائم عرض واضح محدد. إذا كنت تستخدم divs العائمة لإنشاء تخطيط مكون من 3 أعمدة أو عمودين، فحدد العروض من حيث النسب المئوية بدلاً من العروض الثابتة، وإذا كنت تستخدم النسب المئوية، فتأكد من أن النسب المئوية لا تضيف ما يصل إلى 2 %، سيؤدي هذا غالبًا إلى انخفاض العمود الأيمن أسفل بقية الأعمدة، مما يشير بوضوح إلى أنك تحاول احتواء شيء ما في المساحة المتاحة التي تكون واسعة جدًا بالنسبة له. بدلاً من ذلك، استخدم النسب المئوية التي يصل مجموعها إلى أقل بقليل من 100%، مثل 100% و25% و49% للعمود الأيسر والعمود الأوسط والعمود الأيمن.

يمكن أن تكون العناصر العائمة معقدة للغاية في الفهم ومن المفيد قضاء بعض الوقت في المواقع الجيدة التي توفر إرشادات ونصائح محددة، مثل الموقف هو كل شيء موقع الكتروني.

وفي الختام
نأمل أن توفر لك نصائح CSS هذه للتخطيط بعض الوقت والجهد عندما يتعين عليك بعد ذلك التغلب على تصميم بدون جدول لتقديمه! كان هذا تدوينة ضيف كتبتها كريستين أندرسن.