إن إنشاء رمز أنظف يعني تجاوز إطار العمل والتفكير فيما يمثله حقًا.

توفر أطر CSS حل سير العمل ، أي النشر السريع لتخطيطات الويب القائمة على الشبكة. واحدة من الأطر الأكثر شعبية اليوم هي نظام الشبكة 960 ( 960.gs ) ، سميت بعد عرضه الافتراضي. مع الممارسة ، يمكن أن يكون 960.gs أداة رائعة لأي مصمم ويب. لكنه أيضا يعيد النظر في بعض المشاكل القديمة.

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

عندما تعلم المصممون استخدام CSS ، استبدلت عناصر div الطاولات. لكن يمكن أن تكون divs - وغالباً ما تكون متداخلة - تماماً مثل الجداول.

انتشار Class-itis و Div-itis

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

بخلاف الدلالات ، ميزة كبيرة في استخدام

هل تعمل إطارات CSS - مثل 960.gs - على إعادة إنشاء المشكلة الأساسية مع الجداول؟ إذا كان هدفهم هو HTML فعال ، فهل يمكن للمصممين والمطورين استخدام 960.gs دون نشر "class-itis" (أي الاستخدام المفرط للفئات) و "div-itis" (أي عدد كبير جدًا من الجداول التي تبدأ الجداول في الظهور بشكل جيد مرة أخرى)؟ نعم يستطيعون.

لفهم الكيفية ، نحن بحاجة إلى النظر إلى الإطار نفسه.

متهدمة من 960.gs

يوفر موقع 960.gs مجموعة من الأعمدة ، مكتوبة في CSS ، تسهل وضع صفحات الويب. قم بتنزيل الملفات وإضافتها إلى موقع الويب الخاص بك وهو جاهز للاستخدام. لا يلزم وجود مكونات إضافية خاصة أو تقنية جديدة ، ويمكنك استخدامها جنبًا إلى جنب مع ملفات CSS الأخرى.

يتم احتواء الأعمدة داخل كتل تسمى ("حاويات") container_12 و container_16 ، والتي تنقسم إلى 12 و 16 عمودًا ، على التوالي. أحجام مخصصة متوفرة.

يعرض الرسم البياني أعلاه الحاويتين الافتراضيتين مع 12 و 16 عمودًا. الرمادي لن يكون مرئيًا على موقعك النهائي ، بالطبع. تظهر الأعمدة فقط حيث يمكن ترتيب الكتل ، المسماة "الشبكات".

الشبكة عبارة عن كتلة من المحتوى يمكنها عبور أكثر من عمود في حاوية. الشبكات تطفو إلى اليسار بحكم احتجازها .container_x ، مما يجعلها مثالية لتخطيطات وحدات. يتم تحديد عرض كل كتلة حسب الشبكة التي تنطبق عليها: grid_1 هو عمود واحد واسع ، grid_5 هو خمسة أعمدة واسعة ، إلخ.

في الاعلى، .container_12 يحمل ثلاثة شبكات. كل شبكة ، بدورها ، ستحتوي على عناصر مختلفة لمحتوى الصفحة.

في الاعلى، .container_16 يحمل كتلتين من 12 و 4 أعمدة ، على التوالي. مثل .container_12 ، يقيس هذا التخطيط المؤلف من 16 عمودًا 960 بكسل - ولكن أعمدةه أضيق.

تغيير حجم الشبكات التي تناسب عناصر المحتوى بسيط: تغيير grid_x في كل div.

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

على الرغم من هذه الفوائد ، التضمين

محاليل

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

فقط استخدام الفئات التي تحتاجها في الواقع

إن أبسط حل لرمز CSS الزائد هو قطع ما هو غير ضروري. تم تصميم 960.gs كإطار عمل سلكي ، يُقصد استبداله عندما يتم نشر موقع الويب. يتضمن أكثر من 180 تعريفات فئة.

إذا تم تصميم التصميم الخاص بك ، على سبيل المثال ، .container_12 ولا تستخدم أكثر من .grid_5 و .grid_7 ، ثم قم بإزالة الآخرين من CSS.

تطبيق class = ”grid_x“ على العناصر المناسبة: العناوين ، الصور ، الروابط ، الفقرات

ال .container_x و .grid_x لا تقتصر الفصول على عناصر div. ال سمة الطبقة يمكن تطبيقها على أي عنصر ما عدا html ، head ، meta ، param ، script ، title و style أي شيء عمليا في body . إذا كان زوج من علامات div يحتوي على عنصر واحد فقط ، فقد تكون غير ضرورية.

تطبيق رمز الشبكة لغير Divs

باستخدام divs	باستخدام الكود الدلالي
…	…
… … … …	… … … …
#"> ... ... ...	#" class=grid_3> … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … …

خصائص شبكة المنحة لعناصر معينة

كونها بسيطة CSS ، .grid_x لديه خصائص تعمل مع أي اسم فئة آخر - أو أي عنصر. عن طريق نسخ الخصائص إلى عناصر معينة ، تصبح الطبقات الإضافية غير ضرورية.

.examples li { (properties of .grid_4) }

…
…
…

في الأسفل ، يؤدي تطبيق الشبكة لعناصر القائمة إلى إنشاء أعمدة ، مع الحد الأدنى من التغييرات على HTML.

يقوم CSS بتحويل القائمة أعلاه إلى مجموعة متعددة الأعمدة. إذا كنت بحاجة إلى قائمة عادية تحتوي على نقاط ، فاختر فقط class="examples" صفة، عزا. هل هذه الدلالة؟ بالتأكيد - طالما أن المحتوى يستحق قائمة. CSS فقط يغير كيف يتم تقديم كل نقطة نقطي.

مثال آخر:

.photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }

First caption
Another caption

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

عندما تكون الجداول غير مناسبة ، يكون من السهل إنشاء التأثير الجدولي باستخدام HTML غير مجد.

.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }

subhead
…
3 p.m.Jan 1, 2010
subhead
…
3 p.m.Jan 1, 2010

المثال أعلاه هو جدول زمني للأحداث التي تحتوي فيها كل "خلية" في الجدول على علامة مختلفة لتعكس محتواها الفريد ، بدلاً من امتلاك العلامة. (مثالي؟ ربما لا. لا يفرق HTML بين مجموعات المحتوى.)

تطبيق .grid_x تتطلب الخصائص للعناصر الأخرى بعض التخطيط ، ولكنها تؤدي إلى HTML أقل تشوشًا ولا تتداخل مع 960.gs نفسها.

استخدم فئات في العناصر الأصل ، وليس عناصر تابعة

لا يقتصر Div-itis و class-itis على إطارات CSS.

تشترك جميع الأمثلة في القسم الأخير في سمة مثيرة للاهتمام: إعلان فئة واحد فقط في كل منها. أينما يتم استخدام السمة class نفسه عدة مرات متتالية في HTML ، قم بتغيير الوالدين بدلاً من الأطفال.

غير ضروري:

.item { (various properties) }

…
…
…
…
…
…

أعلاه ، جميع العناصر الستة لديها فئة. انهم زائدة عن الحاجة لأن الطبقات متطابقة. إليك طريقة أفضل:

.group-of-items li { (various properties) }

…
…
…
…
…
…

يتمثل الحل هنا في class-itis في تعيين فئة واحدة للعنصر الرئيسي. تعمل أدوات اختيار CSS على تنفيذ المهمة ، مع تطبيق التصميم على كل شخص

…
…
…
…
…
…
…
…

.title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) }