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

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

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

الكود التالي يساعدك في تصوّر هيكلة الصفحة، حيث أنه يقوم بوضع إطارات حول كل عضو في صفحتك 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 }

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

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

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

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

حجم الخط باستخدام واحدة 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

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

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