10 نصائح لصفحات أنماط انسيابية (CSS) أفضل
مدرج تحت قسم: دروس
تصميم صفحات الويب أصبح في الوقت الحالي ليس مجرد كتابة شيفرات برمجية، بل تعدى هذا المعنى بكثير وأصبح فن بحد ذاته، من اختيار العناصر المناسبة التي لها مدلوليتها في المكان المناسب، كاستخدام <p> للفقرات، <h1> للعناوين المهمة، إلى اختيار الهيكلة المناسبة لمحركات البحث، وضع المحتوى مثلا في المقدمة قبل قائمة التصفح.
كتابة CSS قد يكون كابوساً لمن ﻻ يعرف الأساسيات من ناحية تموضع العناصر، الفرق بين عناصر HTML المختلفة. في هذا المقال سأحاول تلخيص 10 نصائح لكتابة CSS بشكل أحسن وأرتب.
1- تأكد من أن جميع المتصفحات تتكلم بلغة واحدة
هناك عدة حيل وتقنيات لجعل المتصفحات تعيد خصائصها الافتراضية إلى ما تريد أنت لصفحتك، وحفظها في ملف reset.css، والميزة لإعادة هذه الخصائص هي عرض صفحتك بالشكل الذي تريده في جميع المتصفحات، ومن هذه التقنيات هي:
2- ابدأ بأبيض ورمادي
كأساس للصفحة أنصح بتخطيط الصفحة مسبقا على ورقة وقلم، وبعد هذا تنتقل إلى كتابة HTML وCSS ولكن فقط باستخدام لونين معاكسين، كالأبيض والرمادي، حيث بهذه الطريقة ستكون صفحتك مستقلة عن اختيار الألوان، هذا مناسب جدا للمصممين الذين يتعاملون مع عملاء متقلبي المزاج، ومن ثم تبدأ بإضافة الألوان والصور، يمكنك اعتبار هذه الخطوة كالمخطط الأزرق Blueprint الذي يستخدم عادة في بناء المباني الهندسية، وتصميم المواقع شبيه جدا بهندسة المباني.
3- توزيع ملفات CSS
استخدام ملف CSS أساسي للموقع وتوزيع باقي الأوامر كل على حسب مكانه في ملفات مستقلة سيوفر عليك عملية الصيانة، المتابعة، والوقت، بحيث مثلا لو أردت أن تغير حجم الخطوط في جميع الصفحات ستذهب إلى الملف الذي يهتم بالخطوط typography.css وتحدد القيمة التي تريدها وستطبق على جميع الموقع دون عناء.
محتوى master.css:
@import url("reset.css");
@import url("global.css");
@import url("structure.css");
وستستدعي الملف عن طريق السطر التالي في صفحة HTML، لاحظ أني أستخدم الأمر @import مع العلم أن هناك طريقة أخرى مشهورة لجلب الملف ولكن هذا ما سأشرحه في النقطة التالية:
<style type="text/css" media="screen,projection"> @import url("master.css"); </style>
4- استخدام @import لجلب ملفات CSS
حاول استخدام @import عندما تريد جلب ملفات CSS الأساسية إلى صفحات HTML، هذه الحيلة ستخفي ملف CSS الذي تريد جلبه عن المتصفحات القديمة، أتكلم عن IE5 وأقل، NE4، من يستخدم هذه المتصفحات إلى الآن ﻻ يستحق أن يرى إبداع صفحتك باستخدام CSS، لسبب بسيط وهو القصور التي تعاني منه هذه المتصفحات وبعضها ستتوقف عن العمل في بعض الأحيان إن صادفت أمر ﻻ تستطيع تحليله مسببة خطأ لدى المستخدم، لذا سيتم منع جلب الملف وستظهر له الصفحة بالنصوص والروابط التشعبية العادية، لذا جرب صفحتك مع وبدون CSS لتقيس مدى قابلية صفحتك.
5- أكثر من فئة class للعنصر الواحد
في الحقيقة لا أرى الكثير من المصممين يستخدمون هذه الميزة في CSS، تتيح لك هذه الميزة باستخدام أكثر من فئة واحدة class للعنصر، مثال:
<p class="float-left align-left width-50">فقرة</p>
6- احتفظ بمكتبة للفئات Classes
بما أنك تستطيع استخدام أكثر من فئة على العنصر الواحد، فمن المفيد أن تحتفظ بمكتبة لبعض الفئات لتعيد استخدامها أكثر من مرة لأكثر من عنصر، ولكن مع مراعاة أن ﻻ تستخدمها عند الإنتهاء من مشروعك، استخدامك لهذه الفئات سيخلط بين التقديم والتوصيف Presentation and Markup.
.width-100 { width: 100%; }
.font-100 { font-size: 100%; }
.float-right { float: right; }
.float-left { float: left; }
.align-right { text-align: right; }
.align-left { text-align: left; }
.clear-me { clear: both; }
7- تخلص من ترقيعات المتصفحات
لعله يكون السبب الرئيس في ظهور الصفحة بشكل خاطئ على متصفح IE7، الكثير من المصممين استخدموا ترقيعات المتصفحات CSS Hacks حتى يتمكنوا من تعديل خاصية معينة في متصفح IE6، ومنها:
html > body * html body > element
وللأسف آتت أكلها عندما ظهر IE7 بدأ بتطبيق هذه الخواص والتي كانت مخفية عن IE6 مما سبب هذه الأخطاء في الصفحات، لهذا ينصح دائما باتباع المعايير القياسية، وفي حالة الانترنت اكسبلورر يمكنك اعتماد الجمل الشرطية التي وفرتها مايكروسوفت لتطبيق قواعد CSS الخاصة بها.
8- استخدم عناصر HTML المتوفرة أولا
أرى الكثير من المطورين يعقدون مسألة CSS بشكل كبير وخلطها بشكل غير مناسب مع HTML، إما لعدم فهمهم لها بالشكل الصحيح، أو لعدم معرفتهم بعناصر HTML (ملف PDF) ومدلولياتها، أرى بعض الناس يستخدمون:
<div class="header-page"><strong>عنوان 1</strong></div>
أهذا أفضل، أم هذا؟
<h1>عنوان 1</h1>
والكثير من هذه الأخطاء والتعقيدات مما يؤدي إلى كبر ملفات CSS للموقع، وتشعب عناصر HTML، وكسر قانون فصل المحتوى عن التوصيف، وعدم المحاظفة على نظافة وبساطة HTML، وهي النقطة الجوهرية لوجود CSS.
9- التموضع ليس لكل شيء
ابدأ بعناصر HTML فقط، دون وضع أي قواعد CSS للتحكم في وضعها، إن لم تتمكن من وضع العنصر في المكان الذي تريده عندها إبدأ باستخدم float وposition.
10- استخدم ضاغط ملفات CSS
ضاغط ملفات CSS يمكنه أن يقلل من المساحة لملفات CSS لديك عن طريق بعض التقنيات الخاصة والتخلص من المساحات الفاضية وبالتالي تسريع عملية تنزيل هذه الملفات، ولكن هناك مساوئ ومنها أنك ستفقد التنسيق الذي يستطيع الانسان قرائته، أي بمعنى آخر احتفظ بنسخة لك للتعديل عليها ونسخة مضغوطة للموقع.
عن الكاتب
عبدالرحمن العتيبة أحد مؤسسي ورئيس التحرير في موقع المشروع، يهوى برمجة وتطوير الويب بكافة أنواعها، وله خبرة تتعدى 10 سنوات في هذا المجال، يعتبر نفسه من "أشد" مناصري المصادر المفتوحة، وأنها "في يوم ما" ستقضي على كل برنامج محتكر ومغلق مصدره. يعتقد بوجود القمر، ولكنه للأسف لم يصل إليه إلى الآن. يمكنك متابعته على twitter وعلى مدونته.
السلام عليكم,,
درس جميل جداً اخى عبد الرحمن بارك الله فيك :) .. وكل سنة وانت طيب :)
نصائح ذهبية فعلا استفدت كتير منها
لم اكن اعرف عن دمج اكثر من فئة للعنصر الواحد ولم اسمع من قبل عن ضاغط ملفات CSS
و جعل المتصفحات تعيد خصائصها الافتراضية الى ما اريده انا ،
ساقرا المقالات بتمعن وان شاء الله اروض الانترنت اكسبلورر اللي مجنني
جزاك الله كل خير ، و عساكم من عوادة :D
فعلاً نصائح قيمة..
لطالما تساءت عن وضعك بعض الأوامر في ملف reset.css .. عرفت الآن
بصراحة.. هذه إذاً طريقة مهمة جداً، أشكرك عليها
لدي سؤالان..
في النقطة السادسة قلت:
لم أفهم هذا..
الأمر الآخر هو في النقطة السابعة:
[css]
html > body
* html
body > element
[/css]
هل لي أن أعرف وظيفة هذا الأمر؟
شاكراً لك هذه الطرح القوي
@ Developer
وعليكم السلام ورحمة الله وبركاته، وفيكم بارك، وأنت بخير وعافية.
@ Hawy_PHP
وجزاكم الله خيرا.
@ المبدع العربي
بالنسبة للسؤال الأول، في الواقع هو اسلوب لتحافظ على فصل المحتوى عن الترميز، بمعنى آخر لو استخدمت الفئة التي اسمها float-right لعنصر، فمعناه أنك تبني التقديم على الترميز Presentation over Markup، وستصعب عليك عملية الصيانة، حيث ستضطر دائما إلى الذهاب بين ملفات HTML وملفات CSS لتعديل موضع عنصر ما، مما يذهب بنا إلى مرحلة ما قبل ظهور تقنية CSS، بعكس إذا ما أسميتها header مثلا، فإنك تعرف أن الفئة header هي تابعة للترميز الخاص بالترويسة.
أما السؤال الثاني، في بعض الأحيان يريد مطورو CSS أن يرسلوا أوامر وقواعد فقط لمتصفح الانترنت اكسبلورر، لذلك وجدوا بعض العيوب في هذا المتصفح نظرا لعدم تطبيقه للمعايير القياسية تتيح لهم اصطياده، وللتوضيح أكثر هذا مثال:
[css]
html > body p {
beackground-color: red;
}
[/css]
هذا مثال لتطبيق خلفية حمراء لكل الفقرات في المستند، وهو مطابق للمعايير القياسية، ولكن بسبب ان IE6 لا يطبق هذه القاعدة فستكون مطبقة لجميع المتصفحات عدا IE6.
جزاك الله خير أخونا عبدالرحمن
موضوع قيم للغاية
وعيدك سعيد وعساك من عواده
جميل..
فهمت الآن..
وأرجوا أن تكتب لنا فيما بعد ان استطعت، كيفية صنع أوامر تتعامل مع المتصفحات ما عدا اكسبلورر 6 أو العكس
السلام عليكم ورحمة اللة وكل عام وانتم بخير
مقال رائع ومفيذ للبنية التحتية لمفاهيم الcss
عن نفسي اشعر بالغموض في اوامر الcss واحياناً احسها تخرج عن المنطق الى
الحفظ فقط فبدلاً من ان افهم امر ما ومن اسمة افهم وظيفتة 100%، اطر الى حفظة
وحفظ ووظيفتة لكي يترسخ في عقلي.
قد يكون رأي شز عن البقية ولكن اظن هذا هو اللي مرهقني في الcss رغم اني تعلمت
80% من خصائصة واوامره.
شكراً لك،
لمقالك اثر كبير في طريقة تفكيري الان ففكرت الBLUEPRINT رائع جداً ولم اطبقها الا في مجال الجرافك والان وجدت لها تطبيق اخر بمساعدتك
تحياتي
السلام عليكم
يعطيك العافيه اخوي درس جميل جدا وانا دائما يهمني التقليل من احجام الصفحات باستخدام ملفات خارجيه تخفف من اكواد الصفحه وموضوعك ايضا يندرج تحت الجافا سكربت بفصل المحتوى
بارك الله فيك وفي علمك
@ عمرو فهمي
وجزاكم، وتقبل الله منا ومنكم.
@ المبدع العربي
في الغالب يكون متصفح الانترنت اكسبلورر هو من يسبب المشاكل في بعض الأوامر، أنا أنصح دائما باتباع المعايير القياسية والابتعاد عن هذه الترقيعات التي تخفي الأوامر، وكما ذكرت في مقالي أولا جرب بالأوامر القياسية، إن لم تنفع يمكنك تحديد ملف آخر CSS باستخدام [الجمل الشرطية] التي وفرتها مايكروسوفت، والميزة هنا ستحافظ على نظافة CSS وتضع نفسك في بر الأمان في المستقبل عند ترقيع المتصفح.
@ FAST
وعليكم السلام ورحمة الله وبركاته، وأنت بالصحة والعافية،
ربما أنصحك بتعلم HTML والفروق بين عناصرها المختلفة، هذه أول خطوة لتعلم CSS بشكل صحيح، ومن ثم تنتقل إلى CSS، ستجد [هنا الكثير من المقالات] التي ستنفعك.
@ هوايتي
وعليكم السلام ورحمة الله وبركاته،
وفيكم بارك.
@ عبدالرحمن العتيبة
body > p
هذا المحدد(selector) ليس بترقيع(hack)! وإنما يقوم بتحديد عنصر واحد فقط وليس مثل body p
وإنما يعني تحديد أول عنصر داخل العنصر الأب (في هذه الحالة أول p داخل body)
وبإمكانك مشاهدة هذا الـselector ضمن البقية على: http://www.w3.org/TR/CSS21/selector.html#pattern-matching
والسـلام
@ المصمم توقيع
نعم بالضبط هذا selector يحدد أي عنصر p داخل body ولكن الترقيعات ليس بالضرورة أن تكون مخالفة للقواعد، وهذا ما كنت أتحدث عنه بالضبط، حيث لو رأيت الرابط للمدونة التابعة لمايكروسوفت سترى أن موقع slashdot كان يستهدف متصفح IE6 بعكس هذه القاعدة، أي يتم استهداف باقي المتصفحات القياسية عدا IE6، ولكن لأن الصفحة تتبع قواعد HTML 4.01 فليس هناك قاعدة أساسية عن إبقاء أو حذف whitespaces بالنسبة لعناصر DOM لذلك ترى متصفحات IE تحذف whitespace وFirefox يبقيها.
المشكلة تكمن في تطبيق هذه القاعدة body > p للمتصفحات كلها عدا IE6، لذلك لما ظهر IE7 وبسبب تطبيق قواعد whitespace حصلت المشكلة لدى slashdot.
المغزى أخي الكريم أن في النهاية ليس بالضرورة أن تخالف قواعد CSS لتستهدف المتصفحات ولكن أن تبتعد عن الاستهداف هذا قدر الإمكان وتستبدلها في حالة متصفح انترنت اكسبلورر بما يناسبه من الجمل الشرطية.
@ عبدالرحمن العتيبة
نعم، معك حق، يبدو أن كلانا أساء التعبير!
فمما كتبته -أنت- يتبين أن استخدام هذه الـselectors شئ خاطئ بينما هو غير خاطئ أبداً. ومن كلامي يبدو أنني لم أوضح بأن الـselector > و * أيضاً آمنين في الإستخدام الطبيعي للتنسيق، ولكن لا ينصح باستخدامهما لاستهداف متصفح ما -وهو ماكنت تقصده-، وإنما يجب استخدام أسلوب آخر مثل الجمل الشرطية لـIE وJS للبقية.
باختصار الـSelectors لا غبار عليها، ولكن طريقة الاستخدام قد لا تكون صحيحة.
شكراً على المناقشة اللطيفة
والسـلام
درس عن جد جميل أخوي … شكرا لك …
شكرا لك
درس جميل جدا ماشاء الله
استفدت من بعض الامور التي سوف تسهل التصميم في المستقبل
شكرا لك مرة اخرى :)
شكرا لك اخي بالفعل مقال مفيد
السلام عليكم …
انا عامل موقع على استضافة مجانية .. المهم انى عامل اختصار للموقع على موقع دوت تك dot.tk و الموقع دا بيعمل iframe للصفحة الرئيسية اللى انا موجهه ليه ..
المهم .. ان الـ iframe دا عامل سكلوبارز و مبوظ شكل الموقع شوية …
و انا اعرف المشكلة بس معرفش الحل …
ممكن تفيدونى و دا ايميلى 5aled@in.com شكرا ليك جدا
اسف . نسيت أقول ان الموقع شغال تمام بشكله الاساسى على كل المتصفحات مع عدا الانترنت اكسبلورير 5 , 6 , 7 فتحت الموقع على كله و برده …. نفس المشكلة ..
السلام عليكم
اخي الكريم بالنسبة للنقطة الأولى
هل يعني ان اضفت الكود سوف يظهر التصميم واحد في كل المتصفحات
وكيف يتم ادراجه ؟ اعتقد ان هناك فرق بالاكواد الثلاثة
فعلاً نصائح قيمة..
تسلم الايادي