ملاحظه : حاولت بكل جهدي الاشتراك بسوالف نت ولا قدرت , فسمح لي الاخ "مهتم" المشاركه باسمه مؤقتا الى ما يفتح التسجيل..
ما راح ادخل في تعاريف و كيفية عمل الـCSS و راح افترض انك تعرفها مسبقا. كتبت هذا الموضوع اساسا للناس اللي يعرفون كيف يستعلمون الـCSS لكن ما عرفوا او ما استوعبوا فوائدها للآن.
الفائدة الاولى : فصل البيانات عن التصميم
من اهم فوائد الـCSS انك تفصل البيانات عن التصميم , بحيث تحتوي الـxHTML على البيانات و شرح بسيط لها (باستخدام الـtags مثل <p> و <div> و <ul> ...الخ) و يحتوي ملف الـCSS على طريقة عرض البيانات. بهذه الطريقه تكون صفحتك مرنه بحيث تستطيع انك تعدل في التصميم بالتعديل على ملف الـCSS فقط دون المساس بكود الـxHTML.
الفائدة الثانيه : سهولة و سرعة تغيير و تعديل المحتويات و التصميم
تقدر تغير شكل الموقع كاملا عن طريق ملف الـCSS الخاص بالموقع (او الصفحه) فقط بدون ادنى تغيير في كود الـxHTML. و ممكن تشوف هذي الفائده امامك في موقع :
www.csszengarden.com
لاحظ ان جميع التصاميم المشاركه تستخدم نفس كود الـxHTML !!! الشيء الوحيد المختلف في كل تصميم هو ملف الـCSS المرتبط فيه. بامكانك تخلي جميع صفحاتك ترتبط بملف CSS واحد , و هالشي يخليك تغير في كل الموقع عن طريق تعديل ملف واحد فقط.
الفائدة الثالثه : اختصار كود الـxHTML
كثير من المواقع الان تستخدم الجداول (tables) للتصميم. هذي الطريقه جدا قديمه و تسبب "زحمه" في كود الـHTML من كثرة استعمال الـ<td> و <tr> و الخصائص الثانيه التابعه للجداول. في التصاميم المعقده قد يكون من الصعب جدا الوصول لمعلومه معينه بالكود لتعديلها.
لكن مع CSS الكود بيكون شكله "نظيف" و مرتب و من السهل قرائته. سبق لي تحويل موقع من طريقة الجداول الى CSS ووجدت الكود صار بداال ماهو حوالي 300 سطر وصل الى 127 سطر تقريبا.
الفائدة الرابعة : تقليل الاستهلاك من الـBandwidth
بما ان الـCSS تختصر لك كود الـxHTML , فهي اكيد راح تقلل حجم ملف الـHTML , و بالتالي يقل استهلاك موقعك للـbandwidth (حجم التراسل) المخصص لموقعك.
طبعا المواقع الصغيره ما راح تحس بفرق كبير , لكن المواقع اللي عليها ظغط ممكن تشوف النتيجه واضحه.
الفائدة الخامسة : سهولة التحكم بمظهر موقعك
مجرد ما تتعود على طريقة الـCSS , راح تلقى نفسك تتحكم بمظهر موقعك من الألف الى الياء بسهوله تامه بدون الحاجه لتضييع الوقت بتعديل جدول موقعك. تقدر تغير خلفية او لون او مكان اي عنصر بالصفحه بسهوله و بسرعه.
مع كل الفوائد هذي ... لكن فيه مشكله وحيهد بالـCSS ممكن تسبب لك الجنون , و هي ان برنامج Internet Explorer غبي بشكل كبير بحيث يفسر كود الـCSS على كيفه مرات. و المشكله انه في احيان ثانيه تكتب الكود غلط و يطلعه لك على انه صح. لكن مشاكل اكسبلورر ممكن تعديها عن طريق استعمال هاكات بسيطه او طرق معينه (بعد ما تفهم مشاكله).
لا تتصور ان الهاكات (hacks) شي معقد , هي مجرد كود خاطيء يفهمه متصفح ولا يفهمه متصفح اخر. يعني تضيف رمز مثلا قبل خاصيه معينه و راح يقراها Exploerer اما المتصفحات الثانيه فراح تعتبرها خاصيه خطأ و تتجاهلها. مثل هاك universal selector hack و يستعمل بالطريقه التاليه :
لاحظ وجود نجمه قبل body و هذا خطأ , لكن اكسبلورر بيقراه باي حال و المتصفحات الثانيه بتتجاهلها , هالشي يؤدي الى ان اكسبلورر يظهر الصفحه بخلفيه حمرا و المتصفحات الباقيه لا. عموما هذا مو موضوعنا بس حبيت اعطيكم فكره عنه.كود:* body { background-color : red }
هذا اللي عندي بهالموضوع و الله اعلم...و سامحوني على التنسيق التعبان لان نموذج اضافة الرد الظاهر ما يحب متصفح FireFox.. و يا سوالف سوفت يرحم امكم افتحوا التسجيل او دبروا لنا دعوه !!!! :anger2:
و بالتوفيق
رد مع اقتباس
