شبكة أوراق الأنماط المتعاقبة CSS
لم تكن مواقع الإنترنت في التسعينات نفسها التي نراها اليوم، فالمواقع كانت عبارة عن صفحات تحتوي نصوص وصور مرتبطة بصفحات أخرى، أما مواقع اليوم اختلفت بشكل كبير فالمواقع اليوم أشبه بصالات عرض للمنتجات والأمر أشبه بمقارنة عربة تنتقل بالدفع مع سيارة تسلا. كلاهما تملكان أربعة إطارات وتسيران على الطريق، لكن الإمكانيات التي تقدمها كل منهما مختلفة كلياً.
فالمواقع لم تعد تقتصر على عرض المحتوى بل أصبحت قابلة للتفاعل والتخصيص وتقديم خدمات أكثر، ولذلك كان على مطوري الويب مواكبة هذه التطورات، ومن أبرز القضايا التي دفعت مجتمع تطوير الويب هو تنسيق المحتوى، فلا يكفي أن يكون لدي محتوى مهم للعملاء بل يجب عرضه بطريقة تليق بهم أيضاً.
كانت البدايات بتقسيم مساحة الصفحة عن طريق الجداول، ثم انتقلت للإطارات، ظهرت بعدئذ خرائط الصور، ثم ظهرت الحاويات <div> التي تقسم الصفحة لأقسام منطقية وحلت بديلاً عن الجداول، إلى أن جاء تخطيط جديد يعتمد على العناصر العائمة Float.
وبعد ظهور أجهزة الجوال الذكية و ظهور الحاجة للمواقع المتجاوبة مع مختلف أجهزة العرض مما أدى لنشوء استعلامات الوسائط Media Queries وبعد ذلك ظهرت تقنية Flexbox التي تتعامل مع العناصر ضمن بعد واحد عمودي أو أفقي، مما مهد لظهور التقنية التي تتعامل مع العناصر ضمن بعدين في وقت واحد وهي تقنية الشبكة Grid التي سنتناولها في هذا الكتاب.
ماهي HTML ؟
يشار بها اختصاراً إلى HyperText Markup Language و تعني لغة ترميز النص الفائق، ولكن ما هو النص الفائق؟ لنتخيل أنك تقرأ كتاب، بالكتاب لن تستطيع الانتقال من الصفحة الأولى إلى الصفحة الثامنة مثلاً حتى تمر بكل الصفحات بينهما، هذا هو النص الخطي، أي أنك تسير في خط واحد وللانتقال من نقطة لنقطة فأنت مقيد بالمرور بجميع النقاط بينهما.
بينما بالنص الفائق تستطيع الانتقال من نقطة إلى نقطة دون المرور بباقي النقاط، كما يحدث في صفحات الويب فأنت تنتقل من نقطة لنقطة مباشرة دون المرور بباقي المكونات.
تقوم HTML بوصف النص الفائق لبرامج التصفح فقد يكون صورة أو جدول أو فقرة أو عنوان وذلك عن طريق الوسوم tags، فكل وسم يصف نوع مختلف، إذا هي لغة أو طريقة لوصف بنية الصفحة لبرامج التصفح لكي تقوم بعرضها بشكل صحيح، وأصبحت HTML اللغة الرئيسية التي يتكون منها أي موقع أو صفحة ويب على شبكة الإنترنت اليوم، بينما يعود تاريخ ظهور هذه اللغة إلى سنة 1991 على يد مؤسس الشبكة العنكبوتية تيم بيرنرز ليس Tim Berners less، أما النسخة التالية HTML v2.0 فيعود تاريخ تأسيسها إلى سنة 1995، وتوالت التحديثات عليها حتى آخر نسخة منها في عام 2016.
ما هي CSS ؟
يشار بها اختصاراً إلى Cascading Style Sheets وتعني أوراق الأنماط المتعاقبة، تحدد لغة HTML هيكل الصفحة وتخبر المتصفح بوظيفة كل عنصر في الصفحة (مثل رابط لصفحة أخرى أو عنوان رئيسي).
في حين تقدم لغة CSS تعليمات للمتصفح حول كيفية عرض هذا العنصر ضمن الصفحة من حيث التصميم والمسافة والموضع، ولو افترضنا أن HTML تقوم على بناء هيكل المنزل فإن CSS تقوم بطلاء المنزل و تصميم الديكور الخاص به، ويتم ذلك عن طريق مجموعة من التعليمات التي تحدد من و ما يجب تنسيقه على عناصر HTML ، كما تحتوي تلك التعليمات على خاصيات مثل الألوان وحجم الخطوط، ونوع الخط، كما تستطيع عزل التنسيق (الألوان - الخطوط - الأزرار...) عن محتوى المستند المكتوب بـ HTML .
يعود تاريخ ظهور لغة CSS لأول مرة إلى سنة 1994 على يد المبرمج هاكون فيوم لاي Hakon Wium Lie، حيث تعاون مع فريق متكامل من المبرمجين للخروج في نهاية المطاف بأوراق نمطية لتصميم صفحات الويب بكل كفاءة، وتم التوصل إلى ضرورة إصدار الوثيقة الأولى W3C CSS سنة 1996، فكان ذلك الإصدار الأول لها وتم إصدار النسخة التالية بناء على اقتراحات بيرت بوس، ازدادت أهمية لغة CSS بالتزامن مع تطوير لغة HTML لتكمل كل منهما الأخرى.
وقد ساهم دمجهما بجعل عرض الصفحات عبر الشبكة العنكبوتية أمرا أكثر وضوحاً وسهولة وأهمية للمستخدمين، وفي كل إصدار من إصدارات هذه اللغة كان فريق العمل القائم على تطويرها حريصاً على معالجة الثغرات التي يعاني منها الإصدار السابق وإضافة المزيد من السمات والخصائص الإضافية للخروج بإصدار جديد، وتشير المعلومات إلى أن هناك إصدارات ما زالت خاضعة للتطوير منذ عام 2014.
تخطيط و شبكة Grid
1 - تخطيط Grid : يقدم نظام بشبكة ثنائية الأبعاد تستعمل لتقسيم صفحة أو عناصر HTML إلى مجموعة من المساحات و تحديد العلاقة من حيث المقاس والموقع والترتيب فيما بينها.
2 - شبكة Grid : ناتجة عن تقاطع صفوف (مسارات أفقية) مع أعمدة (مسارات عمودية) ينتج عنه خلايا وخطوط شبكة و يمكن الفصل بين هذه المسارات بفواصل، تستعمل لوضع عناصر HTML ضمنها.
خصائص شبكة Grid
- مقاسات المسارات يمكن أن تكون ثابتة أو مرنة: يمكن إنشاء شبكة بمسارات ذو مقاسات ثابتة باستعمال px مثلاً ، أيضا يمكن أن تكون مقاسات المسارات مرنة باستعمال النسبة المئوية ٪ أو واحدة fr المصممة للمقاسات المرنة .
- التحكم بموقع العناصر: يمكن ضبط العناصر لأن تكون في موقع محدد على الشبكة اعتمادا على أرقام أو أسماء خطوط الشبكة أو الإشارة للمنطقة من الشبكة التي سيتبع لها العنصر. كما تتضمن شبكة Grid خوارزمية للتحكم بمواقع العناصر التي لم يتم ضبط موقعها على الشبكة بشكل صريح.
- التحكم بتموضع العناصر: تمتلك شبكة Grid خاصيات للتحكم بتموضع العناصر حيث تضبط العلاقة بين حدود العنصر وحدود الموقع أو المنطقة من الشبكة التي ضبط العنصر إليها، مثلا ضبط أحد العناصر ليكون في منتصف الموقع المسند له.
- توليد مسارات إضافية لاحتواء العناصر: في تخطيط Grid يمكن التعريف عن شبكة Grid بشكل صريح وذلك بتعريف المسارات العمودية والأفقية بشكل صريح من حيث العدد والمقاس، ولكن عندما يكون هناك عناصر أكثر مما تستوعبه الشبكة الصريحة أو تم ضبط موقع أحد العناصر أو تمدد لخارج حدود الشبكة الصريحة فتخطيط Grid مرن بما فيه الكفاية لتوليد مسارات جديدة لاحتواء جميع العناصر.
- التحكم بتداخل العناصر: يمكن للعناصر أن تتراكب فوق بعضها البعض إذا صرحنا لأكثر من عنصر بأن يكون لهم الموقع نفسه، يمكن التحكم بهذا التداخل من حيث أولوية الظهور بخاصية z-index.
خطوط الشبكة Grid Lines
هي خطوط مكونة نتيجة لتكوين المسارات، هي خطوط إرشادية تستعمل لتحديد موقع وتموضع العناصر ضمن الشبكة، يتم ترقيم الخطوط آليا كما يمكن تسميتها يدوياً.
ما يجب ملاحظته أنه عند التعريف عن الشبكة نحن نصرح عن المسارات ولا نصرح عن الخطوط، الخطوط تنتج تلقائياً فهي حد البداية وحد النهاية لأي مسار يتم تكوينه. . يتم ترقيم الخطوط آلياً بحسب اتجاه العنصر بحيث يكون كل خط : عمودي بالأعداد الموجبة مع اتجاه العنصر وبالأعداد السالبة عكس اتجاه العنصر، و كل خط أفقي بالأعداد الموجبة بالاتجاه من الأعلى للأسفل و بالأعداد السالبة من الأسفل للأعلى.
إنشاء الشبكة
بعد التصريح عن الشبكة نلاحظ أنه تم إنشاء مسار عمودي واحد وعدة مسارات أفقية على عدد العناصر الأبناء آلياً، هذه الشبكة التي تم إنشاءها آلياً تسمى شبكة ضمنية Implicit Grid وذلك لأننا لم نقم بتعريف المسارات بشكل صريح بعد. نستطيع تعريف وإنشاء المسارات بشكل صريح وذلك بضبط عددها ومقاساتها إلى خاصيات إنشاء المسارات الصريحة، وتسمى الشبكة الناتجة شبكة صريحة Explicit Grid وذلك لأننا حددنا عدد المسارات ومقاساتها، نستطيع أيضاً ضبط الفواصل ما بين المسارات، كما نستطيع تعريف المناطق.
بعد إنشاء الشبكة الصريحة قد تحدث معنا عدة حالات مثل زيادة عدد العناصر عن ما يمكن للشبكة الصريحة أن تستوعبه، ستقوم الشبكة آليا بتوليد مسارات إضافية جديدة لاحتواء العناصر، تسمى هذه المسارات مسارات ضمنية لأننا لم نقم بتعريفها بشكل صريح ضمن الشبكة الصريحة، مقاسات هذه المسارات الضمنية معتمد على محتوى العناصر، كما و يمكن التحكم بمقاسات المسارات الضمنية المولدة واتجاه التوليد.
إذا فشبكة Grid تتكون من شبكة صريحة هي الشبكة التي تم تعريف عدد ومقاسات مساراتها بشكل صريح، وشبكة ضمنية هي الشبكة التي يتم توليد مساراتها آلياً بناءاً على عدة عوامل سنتعرف عليها لاحقاً في هذا الفصل.
إنشاء المسارات الضمنية
نستطيع تعريف وإنشاء المسارات بشكل صريح وذلك بضبط عددها ومقاساتها إلى خاصيات إنشاء المسارات الصريحة، وتسمى الشبكة الناتجة شبكة صريحة Explicit Grid بعد إنشاء الشبكة الصريحة قد تحدث معنا حالات مثل زيادة عدد العناصر عن ما يمكن للشبكة الصريحة أن تستوعبه، ستقوم الشبكة آلياً أيضاً بتوليد مسارات إضافية جديدة ضمنية لاحتواء العناصر، مقاسات هذه المسارات الضمنية معتمد على محتوى العناصر، يمكن التحكم بمقاسات المسارات الضمنية المولدة واتجاه التوليد، وتسمى الشبكة الناتجة الشبكة الضمنية Implicit Grid .
خاصية grid المختصرة
هي التي تضبط جميع الخاصيات التي تحدد خصائص الشبكة الصريحة (أي - grid template-rows و grid-template-columns و grid-template-areas)، وجميع الخاصيات التي تحدد خصائص الشبكة ضمنيا (أي grid-auto-rows و -grid-auto columns و grid-auto-flow)، والخاصيات التي تحدد الفواصل (أي column-gap و row-gap)، وكل ذلك في قاعدة واحدة. يمكن تحديد القيم التي تحدد خصائص الشبكة الصريحة (explicit) أو التي تحددها ضمنيا (implicit) في قاعدة grid ، والخاصيات التي لا تحدد قيمتها ستضبط إلى القيمة الابتدائية (كما هو معتاد في الخاصيات المختصرة).
التحكم بالتموضع
قبل البدء بالتحكم بالتموضع يجب التفريق بين مفهومي التحكم بالموقع والتحكم بالتموضع بحسب الشبكة، فالتحكم بالموقع هو ضبط عنصر الشبكة Grid Item للمكان الذي سيظهر فيه على الشبكة اعتماداً على خطوط الشبكة أو بالإشارة إلى أسماء المناطق، أما التحكم بالتموضع فهو ضبط العلاقة بين حدود العنصر وحدود الموقع الذي أسند إليه، كأن نضبط تموضع العنصر ليكون في منتصف الموقع الذي أسند إليه. ليكن لدينا عنصرين نريد ضبط موقع العنصر الأول اعتماداً على خطوط الشبكة ليكون بين الخطيين العموديين الثاني والثالث وبين الخطين الأفقيين الأول والثالث، ونريد ضبط موقع العنصر الثاني بالإشارة لاسم المنطقة حيث سيأخذ موقع المنطقة المسماة two.
ضبط تموضع العناصر
خاصيات ضبط تموضع العناصر تضبط تموضع العناصر بالنسبة لحدود الموقع من الشبكة الذي أسند إليه كل عنصر و للتحكم بتموضع العناصر هنالك طريقتين، فنستطيع أن نضبط تموضع العناصر بخاصيات التموضع في تعريف الكتلة الحاوية والتموضع سيطبق على جميع العناصر، ونستطيع ضبط موضع كل عنصر بشكل فردي في تعريف كل عنصر على حدة، مع ملاحظة أن ضبط التموضع الفردي سيتجاوز override ضبط التموضع العام، و بشكل عام الخاصية التي في نهايتها self- هي للضبط الفردي.