كيفية التعامل مع تخطيطات CSS في عام 2017 وما بعده.

سأساعدك على فهم الطريقة التي يجب أن تتبعها في التخطيطات الحديثة في CSS - إنها 2017 وتغييرها كثيرًا بالفعل.

ماذا ستتعلم

  1. كيف تم التعامل مع تخطيطات CSS قبل الآن.
  2. الاختلافات بين الماضي النهج والمعايير الحديثة
  3. كيف يمكنك البدء بالمعايير الجديدة اليوم (Flexbox و Grid)
  4. لماذا يجب أن تهتم بهذه المعايير الحديثة

المقدمة

لا أتذكر بالضبط متى ، لكنني أعتقد أنه في عام 2012 أو 2013 ، تعرفت على تطوير الويب. أقل ما يقال ، حاولت التعلم بمفردي.

مع CSS ، أصبح الكثير من الأشياء منطقيًا ، باستثناء صياغة تخطيطات CSS الذكية. كان هناك الكثير من المتسللين للتخطيط لم أستطع فهمهم.

1. كيف تم التعامل مع تخطيطات CSS قبل الآن

المشكلة:

دعونا نلقي نظرة على مشكلة قياسية جميلة.

كيف يمكنك إنشاء قسمين من الصفحات - شريط جانبي ومنطقة محتوى رئيسية ذات ارتفاعات متساوية بغض النظر عن أحجام محتوياتها؟

انظر مثال على ما نهدف إليه أدناه:

الشريط الجانبي ومناطق المحتوى الرئيسية ذات ارتفاعات متساوية بغض النظر عن أحجام محتوياتها

قبل الآن ، إليك كيفية حل المشكلة.

(ط) إنشاء div مع عنصرين ، على سبيل المثال و <جانب> و <رئيسي>


  <جانبا>
    أبجد هوز دولور الجلوس امات.
  
  
  <الرئيسية>
    أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. الآنية ماسا. نائب الرئيس sociis natoque penatibus et magnis dis montes montes، nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  

من الواضح أن هناك المزيد من النصوص في القسم الرئيسي.

امنح القسم جانباً بعض الألوان حتى يمكن تمييزه.

. بجوار
   اللون: # ff؛
   لون الخلفية: # 8cacea؛
}

(2) اجعل كلا القسمين يظهران جنبًا إلى جنب

لكي يبقى كلا القسمين جنبًا إلى جنب ، يمكنك القيام بذلك:

جانبا {
  العرض: 25 ٪ ؛
}
الأساسية {
  العرض: 75 ٪ ؛
}
جانبا،
الأساسية{
  تعويم: اليسار؛
}

يقوم النمط أعلاه بتقسيم العرض المتاح بنسب معينة ثم يطفو في كلٍّ من مساحات المحتوى الرئيسية والجانبية.

أدناه هي النتيجة:

اثنان المحتوى آريس جنبا إلى جنب

إذا لم تكن على علم باستخدام الطفو ، فهذه تقنية قديمة نسبيًا لنقل العناصر إلى اتجاه محدد ، يسارًا أو يمينًا

ألقِ نظرة على الصورة أعلاه ، لم يتم حل المشكلة بعد. ارتفاع الشريط الجانبي ليس هو نفسه ارتفاع منطقة المحتوى الرئيسية.

دعنا نحل المشكلة في النهاية.

(3) استخدام الاختراق عرض الجدول

لحل مشكلة الارتفاعات المختلفة ، يجب عليك استخدام hack display display - أكره هذا الاختراق حقًا.

إذا لم تكن معتادًا على هذا الاختراق ، فإليك ما يجب القيام به.

(أ) اجعل الحاوية الأصلية (في هذه الحالة ، العنصر الأساسي) جدولًا.

الجسم {
  جدول العرض؛
}

(ب) قم بإزالة العوامات ، وجعل خلايا الطفل عناصر خلايا الجدول

العناصر الفرعية في هذا المثال ، هي مناطق المحتوى الرئيسية والجانبية.

جانبا،
الأساسية{
  عرض: خلية الجدول.
}

بمجرد أن يتم ذلك ، يتم حل المشكلة إلى حد كبير - على الأقل ، هذا ما كانت عليه.

كل من مجالات المحتوى لديها الآن ارتفاعات موحدة

2. الاختلافات بين النهج السابقة والمعايير الحديثة

الآن لديك فكرة عن كيفية حل المشكلة من قبل الآن ، دعونا نلقي نظرة على ما يقدمه Flexbox و Grid إلى الطاولة.

Flexbox و Grid هما الحلان المثاليان لتخطيط CSS - المعايير الحديثة. إذا كان يجب عليك كتابة CSS بمستوى معقول ، فإن الاستثمار في تعليم Flexbox و Grid لا يقدر بثمن.

كيف يمكنك حل نفس المشكلة مع Flexbox؟

يتم تشغيل سياق تنسيق Flexbox من خلال إنشاء حاوية مرنة.

انسَ اللغة ، إنها سهلة للغاية.

العنصر الرئيسي هنا هو عنصر الجسم. ويضم الشريط الجانبي ومنطقة المحتوى الرئيسية. لذلك ، اجعله حاوية مرنة:

الجسم {
  عرض: المرن.
}

وتحصل على هذا:

Flexbox في العمل

بما في ذلك العرض: يبدأ Flex Flex في تشغيل نموذج Flexbox ، ويبدأ سياق تنسيق flexbox.

لا تنسى النسب:

جانبا {
  العرض: 25 ٪ ؛
}
الأساسية {
  العرض: 75 ٪ ؛
}

فويلا! تم حل المشكلة إلى حد كبير الآن.

تم حل المشكلة.

هل رأيت كم كان ذلك سهلاً؟ رمز بسيط وقابل للقراءة ، بالإضافة إلى لا الخارقة مجنون.

هناك الكثير الذي يمكنك القيام به مع Flexbox ، مثل:

(أ) توسيط الشريط الجانبي ومنطقة المحتوى الرئيسية على طول المحور العمودي

أتش تي أم أل ، الجسم {
  الارتفاع: 100 ٪ ؛
}
الجسم {
  محاذاة البنود: مركز.
}
SIdebar ومنطقة المحتوى الرئيسية تتمركز عبر المحور العمودي

(ب) إعادة وضع واحد فقط من العناصر الأطفال

جانبا {
  محاذاة الذات: مركز.
}
انتقل الشريط الجانبي إلى وسط المحور العمودي

(ج) قم بتغيير ترتيب المصدر لعنصر فرعي دون التأثير على مستند html

جانبا {
  الترتيب: 2
}
يظهر الشريط الجانبي الآن كما لو كان قد تم وضعه بعد منطقة المحتوى الرئيسية في مستند html

لقد خدشت سطح ما هو ممكن فقط مع طراز Flexbox.

تحدث عن المرونة والمرونة ، فإن طراز Flexbox يوفر لك ذلك!

كيف يمكنك حل نفس المشكلة مع الشبكة؟

تخطيط CSS Grid هو الحل النهائي للتخطيط. مع أنه يأتي الكثير من القوة أيضا.

دعونا نلقي نظرة سريعة على كيفية حل نفس المشكلة باستخدام تخطيط الشبكة.

تمامًا مثل Flexbox ، تبدأ العملية بنفس الطريقة.

اجعل عنصر الحاوية حاوية شبكة.

الجسم {
  عرض: الشبكة.
}

إذا كنت فضوليًا ، فإليك جميع CSS في هذه المرحلة:

الجسم {
  عرض: الشبكة.
  لون الخلفية: #eeeeee؛
}
جانبا {
   اللون: # ff؛
   لون الخلفية: # 8cacea؛
}

وهذا ما لديك:

العرض الأولي

ملحوظة

لاستخدام تخطيط الشبكة ، يجب أن يكون لديك متصفح متوافق مثل Firefox 52 أو Chrome 57 الجديد.

الصورة أعلاه لا تبدو مثل أي شيء سحري قد حدث. حسنا، ليس بعد.

ماذا لو قمت بتقسيم نسب العرض كما فعلنا في الحالات المذكورة أعلاه:

جانبا {
  العرض: 25 ٪ ؛
}
الأساسية {
  العرض: 75٪
}

هل هذا يحدث فرقا؟

تقسيم نسب العرض على عناصر الشبكة الفرعية

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

هذا يقودني إلى شرح جزء مهم من استخدام تخطيط الشبكة.

بعد إعداد حاوية شبكة مع العرض: الشبكة ، يجب عليك تحديد كيفية تخطيط الصفوف والأعمدة داخل حاوية الشبكة.

كيف تفعل ذلك؟

الجسم {
  شبكة أعمدة القوالب: 30٪ 70٪ ؛
}

بطانة واحدة تنقذ اليوم. لا حاجة لتحديد عروض الشريط الجانبي وأقسام المحتوى الرئيسي مرة أخرى.

تحدد أعمدة شبكة القوالب النسب التي توضع فيها الأعمدة داخل الشبكة

تم حل المشكلة.

إذا سألتني ، فهذا مثير للإعجاب. لا الخارقة الفوضى.

هناك الكثير مما يمكنك القيام به باستخدام تصميم الشبكة - أكثر من ذلك بكثير.

أولاً ، أعط القسم الرئيسي قليلًا من الألوان ، لذا فإن الأمثلة التي تأتي بعد ذلك أصبحت أكثر وضوحًا.

الأساسية {
  لون الخلفية: rgba (39174 ، 96 ، 1) ؛
  اللون: # ff؛
}

إليك ما يجب أن يكون لديك:

الآن ، دعونا نرى بعض الأشياء الجيدة التي يوفرها لك تخطيط الشبكة.

(أ) يمكنك تحديد الفجوات بين الأعمدة

الجسم {
  شبكة عمود الفجوة: 15 بكسل ؛
}

إليكم نتيجة ذلك:

الآن لديك فجوة بين الأعمدة - أكثر إتقانًا!

لا حاجة لإضافة هوامش جانبا أو الرئيسي

شبكة الفجوة العمود يعرف التباعد (أو الفجوة) بين الأعمدة داخل الشبكة.

(ب) يمكنك الحصول على أكبر عدد تريده من الأعمدة (أو الصفوف)

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


  <جانبا>
    أبجد هوز دولور الجلوس امات.
  
  
  <الرئيسية>
    أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. الآنية ماسا. نائب الرئيس sociis natoque penatibus et magnis dis montes montes، nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  
  
    <جانبا>
    أبجد هوز دولور الجلوس امات.
  
  
  <الرئيسية>
    أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. الآنية ماسا. نائب الرئيس sociis natoque penatibus et magnis dis montes montes، nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  
  
    <جانبا>
    أبجد هوز دولور الجلوس امات.
  
  
  <الرئيسية>
    أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  أبجد هوز دولور الاعتصام ، consectetuer adipiscing النخبة. Aenean commodo ligula eget dolor. الآنية ماسا. نائب الرئيس sociis natoque penatibus et magnis dis montes montes، nascetur ridiculus mus. Donec quam felis، ultricies nec، pellentesque eu، pretium quis، sem. Nulla نتيجة ماسا quis enim.
  
  

دون إجراء أي تغييرات على CSS ، فإن تخطيط الشبكة يفهم فقط ما يجب القيام به.

لا تزال الأعمدة تحتفظ بتخطيط 30٪ - 70٪

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

(ب) يمكنك تحديد فجوات الصف

تمامًا مثل فجوات الأعمدة التي شوهدت سابقًا ، يمكنك أيضًا تحديد فجوات الصفوف.

الجسم {
  شبكة صف الفجوة: 15 بكسل ؛
}
تعيين الفجوات الصف.

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

(ج) يمكنك تحديد أحجام الصفوف

كما حددت الأحجام النسبية لعمود الشبكة ، يمكنك أن تفعل الشيء نفسه بالنسبة للصفوف.

الجسم {
  صفوف شبكة القوالب: 200 بكسل × 300 بكسل × 400 بكسل ؛
}
أحجام صف مختلفة

الآن تأخذ الأعمدة الأولى والثانية والثالثة الارتفاع ، 200 بكسل ، 300 بكسل و 400 بكسل على التوالي.

لا أعتزم إظهار كل ما هو ممكن مع تصميم الشبكة هنا ، ولكن هذه مقدمة جيدة إلى حد ما.

كما ترون ، هناك الكثير من القوى العظمى للتخطيط هنا - كل ذلك تحت تصرفك.

3. كيف يمكنك البدء بالمعايير الجديدة اليوم (Flexbox و Grid)

لقد شاهدت لمحة عن كيفية توفير نموذج CSS Flexbox و Grid لحلول تخطيط أفضل وأكثر موثوقية. لذا ، كيف تبدأ مع هؤلاء؟

لمقدمة لطيفة ، أنصحك بممارسة الأمثلة في هذه المقالة جيدًا. بعد ذلك ، يمكنك الانتقال إلى دراسة المفاهيم الأعمق.

لا يحتوي تخطيط الشبكة حاليًا على دعم كبير للمتصفح ، ولكن يمكنك التجربة الآن واستخدامه في المتصفحات المدعومة عبر استعلامات الميزات.

في القسم النهائي من هذه المقالة ، أدرج في روابط لكيفية قد أكون قادراً على مساعدتك في تحقيق فهم أعمق لتخطيطات CSS الحديثة - Flexbox و Grid.

4. لماذا يجب أن تهتم بهذه المعايير الحديثة؟

إذا لم تكن قد اكتشفت سبب اهتمامك بـ Flexbox و Grid بعد ، فإليك بعض المشاكل التي قد تواجهها مع حلول التخطيط السابقة.

(i.) إذا كنت تستخدم حاليًا عمليات التطفل و الإختراقات clearfix ، فأنت تعلم أن هذا يمكن أن يحدث فوضى

(ii.) أنت تخاطر بتداخل العناصر إذا قمت بتحديد موضع مطلق - حيث أن طريقة تحديد الموقع هذه تأخذ العناصر من تدفق المستند.

(iii.) لديك الكثير من العلامات الزائدة إذا كنت تستخدم عرض: جدول للتخطيطات.

(iv.) ستواجه مشكلات متعلقة بالمساحة البيضاء ، إذا كنت تستخدم نظام inline-block لحلول التخطيط.

أن نكون صادقين ، إذا كنت بدأت للتو في تطوير الويب ولم تكن ترى أن لغة html و css جيدة جدًا ، فقد لا تهتم بشبكة Flexbox و Grid. قد يكون حل الانتقال إلى Bootstrap أو بعض الأطر الشائعة الأخرى.

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

أعلم أنك أحببت هذا المقال ، لذا أوصي به وساعد شخصًا آخر على تعلم شيء جديد

تريد أن تصبح برو؟

قم بتنزيل ورقة الغش المجانية لشبكة CSS ، واحصل أيضًا على دورتي Flexbox تفاعليتين عالي الجودة مجانًا!

احصل على ورقة CSS المجانية لشبكة الغش + دورتان فليكس بوكس ​​عالي الجودة مجانًا!

أحصل عليها الآن