كثير من المبرمجين يعانوا من مشاكل كثيرة في الـ CSS , ليش هالشيء يصير؟
في هذا الثريد راح أبسط لكم مفاهيم مهمة جدا تخلي رحلتكم في الـ CSS أسهل وأبسط بكثير !
في هذا الثريد راح أبسط لكم مفاهيم مهمة جدا تخلي رحلتكم في الـ CSS أسهل وأبسط بكثير !
أول مفهوم لازم تستوعبه إن الـ CSS تعتبر responsive by default بدرجة كبيرة .. كيف يعني ؟
يعني لو جربت تكتب موقع بالـ HTML فقط , راح تلاقيه responsive بشكل كبير ( أقول بشكل كبير لأن طبعا فيه breakpoints الوضع فيها حيكون سيء نوعا ما ) عشان نستوعب هالمفهوم أكثر راح أعطيكم مثال...
يعني لو جربت تكتب موقع بالـ HTML فقط , راح تلاقيه responsive بشكل كبير ( أقول بشكل كبير لأن طبعا فيه breakpoints الوضع فيها حيكون سيء نوعا ما ) عشان نستوعب هالمفهوم أكثر راح أعطيكم مثال...
لما يكون عندك div بموقعك .. بشكل تلقائي راح ياخذ 100% من عرض الصفحة ( على افتراض إنه مو داخل container ثانية أو شيء زي كذا ) , ايش معنى انه ماخذ 100% من الصفحة؟ يعني إنه راح يكون responsive حتى لو حجم الـ viewport صار أصغر !
... يتبع
... يتبع
فلما تجي وتعطيه عرض معين من عندك ( مثلا 500px ) انت هنا بنفسك كمبرمج أخذت عامل الـ responsive من الموقع
أو مثلا لما تعطيه عرض معين ( 80% ) بس ماتفكر في حجم المحتوى الي داخله , والي ممكن يسبب overflow بالنهاية
أو مثلا لما تعطيه عرض معين ( 80% ) بس ماتفكر في حجم المحتوى الي داخله , والي ممكن يسبب overflow بالنهاية
ثاني مفهوم ( أو نصيحة بشكل أدق ) هي إنك تتجنب قدر الإمكان إنك تحط height خصوصا على الـ containers , لاحظ إني أقول ( قدر الإمكان ) لأنك ممكن تصادف حالات تحتاج تحط فيها الـ height , لكن أشوفها مو شائعة .. وإذا حصل واحتجت تحط height , حاول تفكر بحل ثاني أول
ليش ؟ خلينا نشوف سوا..
ليش ؟ خلينا نشوف سوا..
الجواب راح ينقسم لـ قسمين , القسم الأول راح يكون شرح بسيط عن ايش الي يحدد الـ height لـ container معينة , والقسم الثاني راح يكون مثال حقيقي
الـ height يتحدد ( على إفتراض إنك ماحطيت قيمة بنفسك ) بالنسبة للمحتوى .. كل ما يكون محتوى الـ div أكبر , الطول راح يكون أكبر .. بس كذا ؟ لا
كل مايصغر حجم الـ viewport ( أتكلم عن العرض تحديدا ) الـ height راح يكبر لأن المحتوى راح يصير بشكل عمودي
كل مايصغر حجم الـ viewport ( أتكلم عن العرض تحديدا ) الـ height راح يكبر لأن المحتوى راح يصير بشكل عمودي
فإنت لما تحط height بنفسك , لازم تشيل هم كل هالمشاكل , وعشان كذا ( أكرر , بشكل عام ) ما أنصح إنك تحط height
خلينا نشوف مثال عشان نقتنع أكثر , لاحظ لما حجم الـ viewport يصغر ( أكرر من ناحية العرض ) راح يصير overflow والنص راح يخرج عن الـ border , وكل هذا لأننا حطينا height
وكل هالمشاكل راح تنحل, لو شلنا الـ height زي ماتشوف , حتى لما الشاشة تصغر كثير ( بشكل أدق, لما عرض الـ viewport يصير اصغر )
ممكن تفكر ( أوه يعني الحل بس إني أحط height أكبر ؟ ) بس صدقني غالبا الموضوع معقد أكثر من كذا ولازم تكون حريص جدا لما تتعامل مع الطول...
النصيحة الثالثة, حط هالأوامر بأي ملف CSS تسويه
السبب: إنت كذا راح تشيل الهوامش والـ paddings الي تضيفها كل المتصفحات بشكل تلقائي , وماراح تضيف إلا الشيء الي تبغاه أنت , بالنسبة لآخر خاصية ففايدتها إن الـ border والـ padding راح يدخلوا من ضمن الطول والعرض لأي عنصر
السبب: إنت كذا راح تشيل الهوامش والـ paddings الي تضيفها كل المتصفحات بشكل تلقائي , وماراح تضيف إلا الشيء الي تبغاه أنت , بالنسبة لآخر خاصية ففايدتها إن الـ border والـ padding راح يدخلوا من ضمن الطول والعرض لأي عنصر
والي هو شيء راح يسهل عليك كثير تحط العناصر وين ماتبغاها بدون ماتفكر كثير بإنك تحسب العرض وبعدين تطرح منه حجم الـ border وغيرها من هالأشياء
النصيحة الرابعة:
تعلم تقنيات الـ CSS الجديدة زي الـ Flexbox والـ Grid
هذي أشياء responsive بشكل تلقائي , وراح تسهل عليك شغلك كثير
تعلم تقنيات الـ CSS الجديدة زي الـ Flexbox والـ Grid
هذي أشياء responsive بشكل تلقائي , وراح تسهل عليك شغلك كثير
النصيحة الخامسة:
تأكد من فهمك للـ Box Model , صعب جدا تكتب كود CSS كويس بدون ماتفهم هذا المودل
هذا شرح ممتاز له
w3schools.com
تأكد من فهمك للـ Box Model , صعب جدا تكتب كود CSS كويس بدون ماتفهم هذا المودل
هذا شرح ممتاز له
w3schools.com
النصيحة السادسة والأخيرة
أقضي وقت طويل على دراسة الـ CSS Units , خصوصا الـ relative units زي الـ % و vh و vw وغيرها .. هذي الوحدات جدا مهمة وأساسية , خصوصا لو تبغى موقعك يكون responsive
أقضي وقت طويل على دراسة الـ CSS Units , خصوصا الـ relative units زي الـ % و vh و vw وغيرها .. هذي الوحدات جدا مهمة وأساسية , خصوصا لو تبغى موقعك يكون responsive
- النهاية -
إذا مهتم ببرمجة الويب تابع حسابي
@Webnprog
لأنك راح تستفيد كثير من الشروح والنصائح اليومية
رتويت عشان يوصل الثريد لأكبر عدد ممكن من الناس❤️
شكرا لكم
إذا مهتم ببرمجة الويب تابع حسابي
@Webnprog
لأنك راح تستفيد كثير من الشروح والنصائح اليومية
رتويت عشان يوصل الثريد لأكبر عدد ممكن من الناس❤️
شكرا لكم
جاري تحميل الاقتراحات...