النتائج 1 إلى 14 من 14

الموضوع: 10 نصائح لصفحات أنماط انسيابية (CSS) أفضل

  1. #1
    عبدالعزيز الزرعوني
    تاريخ التسجيل
    Feb 2004
    المشاركات
    3,128

    10 نصائح لصفحات أنماط انسيابية (CSS) أفضل



    تصميم صفحات الويب أصبح في الوقت الحالي ليس مجرد كتابة شيفرات برمجية، بل تعدى هذا المعنى بكثير وأصبح فن بحد ذاته، من اختيار العناصر المناسبة التي لها مدلوليتها في المكان المناسب، كاستخدام <p> للفقرات، <h1> للعناوين المهمة، إلى اختيار الهيكلة المناسبة لمحركات البحث، وضع المحتوى مثلا في المقدمة قبل قائمة التصفح.
    كتابة CSS قد يكون كابوساً لمن ﻻ يعرف الأساسيات من ناحية تموضع العناصر، الفرق بين عناصر HTML المختلفة. في هذا المقال سأحاول تلخيص 10 نصائح لكتابة CSS بشكل أحسن وأرتب.


    1- تأكد من أن جميع المتصفحات تتكلم بلغة واحدة
    هناك عدة حيل وتقنيات لجعل المتصفحات تعيد خصائصها الافتراضية إلى ما تريد أنت لصفحتك، وحفظها في ملف reset.css، والميزة لإعادة هذه الخصائص هي عرض صفحتك بالشكل الذي تريده في جميع المتصفحات، ومن هذه التقنيات هي:
    Reset Reloaded
    Starting with CSS: revisited
    Christian Montoya’s initial CSS file


    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 "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 لديك عن طريق بعض التقنيات الخاصة والتخلص من المساحات الفاضية وبالتالي تسريع عملية تنزيل هذه الملفات، ولكن هناك مساوئ ومنها أنك ستفقد التنسيق الذي يستطيع الانسان قرائته، أي بمعنى آخر احتفظ بنسخة لك للتعديل عليها ونسخة مضغوطة للموقع.

    -----------------
    الكاتب: عبدالرحمن العتيبة
    المصدر: المشروع - مجتمع مطوري المواقع





    __________________
    مدونة المبدع العربي


  2. #2
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    142


    رائع جداً





    __________________
    مجتمع لينوكس العربي
    الموقع العربي الأول لنظام جنو/لينوكس

  3. #3
    عضو سوبر نشيط
    تاريخ التسجيل
    Mar 2000
    المشاركات
    762


    معلومات قيمة لي عودة خلال هالأسبوع إن شاء الله وتستاهل حفظ في الارشيف





    __________________
    Eng.Fedail
    Computer and Electronics Engineer

  4. #4
    عضو جديد
    تاريخ التسجيل
    Feb 2008
    المشاركات
    4


    بارك الله فيك اخي الكريم

    وهذه اول مرة ارى مثل ذلك لانه يمكنه ترتيب ملف ال css
    بدل ان يكتب هكذا

    احسنت في التوضيح اخي الخبيب

    <div class="header-page"><strong>عنوان 1</strong></div>






  5. #5
    عضو سوبر نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    شرح مميز باركـ اللهـ فيكـ





    __________________
    Professional Java?Script Programmer and Web Developer

  6. #6
    عضو جديد
    تاريخ التسجيل
    Feb 2009
    المشاركات
    10


    مشكووووور يالغالي ماتقصر






  7. #7
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    553


    بورك فيك عزيزي





    __________________
    اللهم اغفر لي الذنوب التي تهتك العصم
    اللهم اغفر لي الذنوب التي تنزل النقم
    اللهم اغفر لي الذنوب التي تغير النعم
    اللهم اغفر لي الذنوب التي تحبس الدعاء
    اللهم اغفر لي الذنوب التي تنزل البلاء .

  8. #8
    عضو نشيط
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210



  9. يعطيك العافية .

    يثبت لمدة اسبوع لتعم الفائدة





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL

  10. #10
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    108


    شكرا جزيلا , بارك الله فيك .






  11. #11


    الله يعطيك العافيه





    __________________
    اشهد ان لا اله الا الله واشهد ان محمد رسول الله

  12. #12
    عضو سوبر نشيط
    تاريخ التسجيل
    Mar 2002
    المشاركات
    650


    شكراً جزيلاً لك


    ألف ألف ألف شكر بانتظار المزيد من المعلومات القيمة التي تقدمها لتطوير لغة CSS في مجتمع مطوري الويب العربي بخطوات جداً جميلة ومختصرة وعني شخصياً أنتظر المزيد .. المزيد .. المزيد

    أكرر شكري لك

    >>>>






  13. #13


    المبدع العربي

    رائع جداً ما سردت لكن اسمح لي بالاستفسار استاذي بخصوص import

    هل يوفر ذلك الوقت فقط ؟ ام يقلل من طلب المتصفح ، الموقع ، الخادم لملف master.css - مثلاً كما اسميته - ؟!

    تناقشت مع احد الزملاء سابقاً حول استخدام هذه الطريقة و التي نراها في phpBB3 وكأن رأيه ان هذه الطريقة تسبب تشوه منظر الشكل العام عند عدم طلب احد الملفات بسبب سوء التصفح او الخادم او غيرها على عكس الملف التقليدي للـ css ..


    تقبل محبتي





    __________________
    منتدى مجاني و برامج مجانية • بوابة مركزي • تابعني عّ تويتر

  14. #14
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    947


    معلومات قيمة ..
    الموضوع من عام 2007





    __________________
    قل اللهم مالك المُلك تؤتي الملك من تشاء وتنزع الملك ممن تشاء وتعز من تشاء وتذل من تشاء بيدك الخير انك على كل شىء قدير





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
موقع مكملات غذائية | نظارات طبية | أضف موقعك هنا