الأربعاء، 28 نوفمبر 2012

بعض حيل واسرار ونصائح Css

بعض حيل واسرار ونصائح Css

بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design
السلام عليكم ورحمة الله تعالى وبركاته وبعد
اليوم أردت أن أبتعد قليلا عن دروس الجافاسكربت، وعن الدروس الثقيله بشكل عام وقررت أن أطرح درسا خفيفا عبارة عن بعض الحيل والأفكار والنصائح التي من الممكن أن تفيد مطور صفحات الويب والتي تعتمد على الCSS،
في هذه السلسة من الأفكار والحيل للCSS سنتعلم بإذن الله الكثير من الخفايا والأسرار التي من الممكن أن تقلص من الجهد لإيجاد حلول لبعض مشاكل التصميم، و بسم الله نبدأ:
بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

طريقة مفيدة لإكتشاف الأخطاء:

الكود التالي يساعدك في تصوّر هيكلة الصفحة، حيث أنه يقوم بوضع إطارات حول كل عضو في صفحتك XHTML أو HTML، لانه في بعض الأحيان تكون بعض الأعضاء متداخله في بعضها وقد يضيع المصمم في تحديد إلى أي عائلة ينتمي هذا العضو في ملف الHTML، ويتغير لون الإطار بمدى تعمّق العضو، أي أن العضو الأكبر - أي الذي ينتمي مباشرة إلى الصفحة أو الdocument - سيكون إطاره أحمر، بينما العضو أو الأعضاء التي تنتمي إليه تكون بلون أخضر، وهكذا...

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

لا تصبح مجنون div

الكثير من مصممي صفحات الويب في الوقت الحالي أكثروا من استخدام وسم الdiv، حتى تكاد صفحاتهم تخلو من باقي الأوسمه ويبذلوا الكثير من الجهد والتعب في تصميم الستايل الخاص بها في حين أنه كان بإمكانهم توفير جهدهم باستخدامهم الأوسمة الأخرى، هناك الكثير من الأوسمة التي تعمل كعمل الdiv وربما في بعض الأحيان يكون استخدامها أحسن من وسم الdiv، وسبب تنبيهي لهذه النقطه أنه وجدت بعض المصممين من كثر ما استخدمو وسم الdiv حتى صاروا ينسون أوسمة مهمة كالh1 أو h2 أو span، وصاروا يضعون عناوين الصفحات باستخدام وسم div.
بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

تدوير الزوايا بدون استخدام صور أو جافاسكربت، فقط باستخدام الCSS

من خلال تصفحي لبعض الحيل، وجدت هذا الموقع، حيث أنه يقوم بعمل مستطيل div مدوّر الزوايا، ونذكر في الأيام السابقه كنّا نستخدم الصور أو حتى إذا لم تكن صورا فإنه يكون جافاسكربت مع الCSS للقيام بهذا العمل، ومن عيوب دمج الجافاسكربت مع الCSS أنه لن يعمل عند بعض المستخدمين الذين يقومون بإطفاء الجافاسكربت في متصفحاتهم، ومع أن هذا الرقم قليل جدا بالمقارنة مع المتصفحات الجديدة ومستوى الأمان فيها ولكن أردت أن أذكرها للأشخاص الذين يريدون القابلية الكاملة لمواقعهم.
بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

حجم الخط باستخدام واحدة em عوضا عن px

تكاد تكون هذه الحيلة من أحوج الحيل لمصممي الويب، وقد يتسائل البعض: لماذا أغير وحدة الخط لدي من px إلى em؟ الجواب هو أن ليس كل مستخدمي الويب يمكنهم قراءة الصفحة بحجم الخط المعروض، لذا فعندما يريدون تكبير الخط قليلا لا يستطيعون ذلك لانك قد فرضت عليهم حجم خط معين باستخدامك وحدة الpx، ووحدة em تتيح تكبير/تصغير الخط بدون التأثير على الخط نفسه وعلى التصميم وخصوصا متصفح الانترنت اكسبلورر على الويندوز، ببساطه قم بإضافة الكود التالي
body { font-size: 62.5% }
والسبب في هذا الرقم بالتحديد أنه في أغلب متصفحات الويب الحاليه، عندما يقوم الزائر بزيارة صفحتك، يكون حجم الخط الافتراضي هو "متوسط" والمتوسط في هذه المتصفحات هو 16px، ولكننا عندما قمنا بإضافة هذا الكود سيقوم المتصفح بتصغير الحجم الافتراضي إلى مايعادل ال10px وسيكون هذا الحجم هو القاعدة لانه مربوط بوسم الbody لكل العناصر في الصفحة، أي أنك الآن تستطيع تحديد حجم الخط الافتراضي للفقرات أو العناوين باستخدمك وحدة em كاستخدامك وحدة px مقسومة على 10، لان وحدة em لوحدها تكون صعبة قياسها بما يعادلها من px، خلاصة الكلام أنك الآن عندما تحدد حجم الخط لفقرة
فرضا ب12px تستطيع تعويضه ب1.2em

p { font-size: 0.9em } //حجم الخط يعادل 9px
span {font-size: 1.2em} //حجم الخط يعادل 12px

بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

مشاكل المتصفحات X Browser Compatibility

في آخر حيلة أو نصيحة من هذا الدرس أردت أن أذكر المصممين بأن يتحققوا من تصميم صفحاتهم على أكبر قدر مستطاع من المتصفحات، وأنصح بتجريب تصميم الصفحة وأنت تصمم، أي أنك لا تصمم كل شيء مرة واحدة ومن ثم تذهب للتحقق من قابلية المتصفحات لتصميمك، لانه حينئذ سيكون من الصعب عليك إيجاد المشكلة ومن ثم حلها، ويكون التجريب كالآتي، عندما تنتهي من تصمبم الهيدر للصفحة تتحقق من القابلية وتصلح مشاكلها، ومن ثم تقوم بتصميم القوائم وتتحق من قابليتهم وتصلح مشاكلهم، وهكذا حتى لا تتراكم عليك المشاكل وتتعقد عليك امور تصليح المشاكل.
بعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

المراجع

هذا وصلى الله على محمد وعلى آله وصحبه وسلم، وانتظروني في مواضيع القادمة من الحيل والأفكار الجديدة للCSS
مع تحياتي
M.Elgemezy


ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلبعض حيل واسرار ونصائح Css | ابداع ديزاين abda3 design

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل





ضع تعليقك

0 التعليقات:

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

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