linnou
10-30-2013, بتوقيت غرينيتش 08:47 PM
http://www.dzbatna.com/images/icons/icon20.gif ط£ط³ط§ط³ظٹط§طھ css ط§ظ„طھظ†ط³ظٹظ‚ ط§ظ„ط§ظپطھط±ط§ط¶ظٹ (http://www.dzbatna.com/t1781175/)
السلام عليكم و رحمة الله ..
من الأساسيات الواجب تعلمها أيضاً و كثيراً ما تفيد مصممي المواقع و هي استخدام التنسيق الافتراضي CSS Reset . و معنى استخدام التنسيق الافتراضي هو استرجاع التنسيق الأساسي للمتصفحات في بعض الوسوم المعينة من أجل تفادي حدوث اضطراب في الشكل من متصفح لمتصفح آخر و بالتالي تتجنب ما يقوم به المتصفح بنفسه من تنسيق و تحدد أنت ما يتم تنسيقه و ما يبقى على حاله دون تغيير
تاريخ التنسيق الافتراضي
ظهرت فكرة التنسيق الافتراضي CSS Reset في عام 2004 على يد Andrew Krespanis حيث قد اقترح استخدام علامة * لكي تجمع جميع العناصر في CSS و يتم إعطاءها قيمة موحدة و هي الصفر فتكون على سبيل المثال :
رمز Code:
* { margin: 0; padding: 0; }
و بالتالي يتم إعداد جميع العناصر بحيث تكون المسافات الجانبية و الداخلية لها صفر .
تجنب تنسيق المتصفحات
تعمل أشهر المتصفحات على تكوين طريقة تعالج بها طرق تنسيق الوسوم حسب ما تراه مناسباً . المثال التالي يوضح كيف يقوم كل من Firefox 3 و Internet Explorer 7 بمعالجة وسم <p> بدون أن يتم وضع أي تنسيق لها في CSS و موضوع داخل وسم <div> .
http://www.sali4ever.com/vbstyle/attachment.php?attachmentid=60&stc=1&d=1275302296
في الصورة السابقة يتضح أن متصفح Firefox 3 يقوم بترك مسافة قبل و بعد كل وسم <p> تلقائياً حتى لا تكون الفقرات متلاصقة ببعضها , بينما في متصفح Internet Explorer 7 لا يقوم المتصفح بترك أي مسافات بين الفقرات سواء بالأعلى أو بالأسفل . و بالتالي فسيكون شكل الفقرات مختلف في متصفح ثالث ربما يكون لديه وجهة نظر أخرى في عرض الفقرات . لذلك يتم وضع تنسيق افتراضي لا يظهر الفقرات مثلاً بمظهر مختلف . تخصيص التنسيق الافتراضي
ليس كل ما نريد أن نقوم بتنسيقه يكون داخل عنصر * , ففي الكثير من الأحيان نريد أن نحدد تنسيق معين لعنصر معين و بافتراض أنه نريد أن نضيف تنسيق لعنصر
فيكون الكود code كالتالي :
رمز Code:
* { margin:0; padding:0; } p { margin:5px 7px; }
هناك بعض الأمثلة الجاهزة و التي يمكن استخدمها و منها على سبيل المثال التنسيق الافتراضي من Yahoo User Interface Library (YUI (http://developer.yahoo.com/yui/reset/)) و يعتبر هذا المثال الأشهر في الاستخدام و لكن يمكنك كمصمم تكوين ملف التنسيق الافتراضي حسب رغبتك في ما يتم وضعه ضمن التنسيق الافتراضي و مما يتم تصنيفه في ملف آخر للتنسيق الأساسي للتصميم, مع الأخذ في الاعتبار أنه عند استخدام التنسيق الافتراضي في التصميم فيجب أن تضعه في المقدمة لكي يتمكن المتصفح من العثور عليه بسهولة و استخدامه مباشرة دون انتظار تحميل بقية ملفات التصميم .
و بالطبع يفضل أن يكون ملف التنسيق الافتراضي منفصل عن ملف CSS الخاص بالتصميم فيكون كل منه على حدة حتى لا تختلط العناصر مع بعضها البعض و تقليل الحمل على حجم ملف CSS من أجل تصفح أسرع لصفحات الموقع .
و بالتأكيد العنصر العام (*) كان البداية لعملية التنسيق الافتراضي و لكن ليس من المفضل استخدامه أو الاعتماد عليه بشكل أساسي ففي كثير من الأحيان يحدث تعارض بين العناصر نفسها مما يستوجب تكوين تنسيق مخصص لعناصر معينة بعيداً عن عن العنصر العام .
مجموعة من التنسيقات الافتراضية
(http://perishablepress.com/press/2014/10/23/a-killer-collection-of-global-css-reset-styles/)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم و رحمة الله ..
من الأساسيات الواجب تعلمها أيضاً و كثيراً ما تفيد مصممي المواقع و هي استخدام التنسيق الافتراضي CSS Reset . و معنى استخدام التنسيق الافتراضي هو استرجاع التنسيق الأساسي للمتصفحات في بعض الوسوم المعينة من أجل تفادي حدوث اضطراب في الشكل من متصفح لمتصفح آخر و بالتالي تتجنب ما يقوم به المتصفح بنفسه من تنسيق و تحدد أنت ما يتم تنسيقه و ما يبقى على حاله دون تغيير
تاريخ التنسيق الافتراضي
ظهرت فكرة التنسيق الافتراضي CSS Reset في عام 2004 على يد Andrew Krespanis حيث قد اقترح استخدام علامة * لكي تجمع جميع العناصر في CSS و يتم إعطاءها قيمة موحدة و هي الصفر فتكون على سبيل المثال :
رمز Code:
* { margin: 0; padding: 0; }
و بالتالي يتم إعداد جميع العناصر بحيث تكون المسافات الجانبية و الداخلية لها صفر .
تجنب تنسيق المتصفحات
تعمل أشهر المتصفحات على تكوين طريقة تعالج بها طرق تنسيق الوسوم حسب ما تراه مناسباً . المثال التالي يوضح كيف يقوم كل من Firefox 3 و Internet Explorer 7 بمعالجة وسم <p> بدون أن يتم وضع أي تنسيق لها في CSS و موضوع داخل وسم <div> .
http://www.sali4ever.com/vbstyle/attachment.php?attachmentid=60&stc=1&d=1275302296
في الصورة السابقة يتضح أن متصفح Firefox 3 يقوم بترك مسافة قبل و بعد كل وسم <p> تلقائياً حتى لا تكون الفقرات متلاصقة ببعضها , بينما في متصفح Internet Explorer 7 لا يقوم المتصفح بترك أي مسافات بين الفقرات سواء بالأعلى أو بالأسفل . و بالتالي فسيكون شكل الفقرات مختلف في متصفح ثالث ربما يكون لديه وجهة نظر أخرى في عرض الفقرات . لذلك يتم وضع تنسيق افتراضي لا يظهر الفقرات مثلاً بمظهر مختلف . تخصيص التنسيق الافتراضي
ليس كل ما نريد أن نقوم بتنسيقه يكون داخل عنصر * , ففي الكثير من الأحيان نريد أن نحدد تنسيق معين لعنصر معين و بافتراض أنه نريد أن نضيف تنسيق لعنصر
فيكون الكود code كالتالي :
رمز Code:
* { margin:0; padding:0; } p { margin:5px 7px; }
هناك بعض الأمثلة الجاهزة و التي يمكن استخدمها و منها على سبيل المثال التنسيق الافتراضي من Yahoo User Interface Library (YUI (http://developer.yahoo.com/yui/reset/)) و يعتبر هذا المثال الأشهر في الاستخدام و لكن يمكنك كمصمم تكوين ملف التنسيق الافتراضي حسب رغبتك في ما يتم وضعه ضمن التنسيق الافتراضي و مما يتم تصنيفه في ملف آخر للتنسيق الأساسي للتصميم, مع الأخذ في الاعتبار أنه عند استخدام التنسيق الافتراضي في التصميم فيجب أن تضعه في المقدمة لكي يتمكن المتصفح من العثور عليه بسهولة و استخدامه مباشرة دون انتظار تحميل بقية ملفات التصميم .
و بالطبع يفضل أن يكون ملف التنسيق الافتراضي منفصل عن ملف CSS الخاص بالتصميم فيكون كل منه على حدة حتى لا تختلط العناصر مع بعضها البعض و تقليل الحمل على حجم ملف CSS من أجل تصفح أسرع لصفحات الموقع .
و بالتأكيد العنصر العام (*) كان البداية لعملية التنسيق الافتراضي و لكن ليس من المفضل استخدامه أو الاعتماد عليه بشكل أساسي ففي كثير من الأحيان يحدث تعارض بين العناصر نفسها مما يستوجب تكوين تنسيق مخصص لعناصر معينة بعيداً عن عن العنصر العام .
مجموعة من التنسيقات الافتراضية
(http://perishablepress.com/press/2014/10/23/a-killer-collection-of-global-css-reset-styles/)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
