في عمود الأسبوع الماضي، ناقشت شبكة مطوري Yahoo!، مع التركيز على ميزات JavaScript (وأهمها التقويم) المتوفرة في مكتبة واجهة مستخدم Yahoo! أردت قضاء المزيد من الوقت في تغطية منطقة أخرى من مكتبة YUI التي توفر أدوات CSS. تتيح لك هذه الأدوات إمكانية الجمع بسهولة بين التصميم المستند إلى CSS وتطبيقات الويب.
دعم المتصفح
إحدى الميزات الرئيسية لأداة CSS هي أنها مصنفة لتوفير دعم مثالي لمتصفحات الفئة أ. تصنيف دعم المتصفح هو مجرد تصنيف لشركة Yahoo!، ويمكنك رؤية الوصف الكامل على موقعها على الويب، والذي يصف بشكل أساسي كيفية عمل CSS بشكل جيد في المتصفحات الموجودة في السوق اليوم.
في هذا الجدول عبر الإنترنت، يتم تقسيم المتصفحات إلى ثلاثة مستويات لدعم المتصفح (A وC وX). المستوى أ هو أعلى مستوى من الدعم. من خلال الاستفادة من قوة معايير الويب الحديثة، تكتشف مكتبة YUI تجربة من الدرجة الأولى توفر وظائف متقدمة ودقة بصرية. تمنحك فئات الدعم والملفات ذات الصلة فكرة عن مكان دعم CSS، ولكن يجب أن يكون متاحًا في كل متصفح (مع إمكانية التخفيضات).
قابلة لإعادة الاستخدام CSS
تتضمن مكتبة YUI ثلاث مناطق أو ميزات CSS، تغطي التنسيق ومقدمة الخط والتخطيط المستند إلى الشبكة (العمود والصف). تُستخدم هذه المصطلحات على الموقع لوصف هذه العناصر الثلاثة:
شبكات الصفحات: تسمح لك بتضمين شبكة إلى أربعة أعمدة ضمن سعة القالب الذي تستخدمه.
الخطوط: توفر توحيدًا وتحكمًا في الطباعة عبر المتصفحات. بشكل عام، يوفر خطوطًا وارتفاعات خطوط متسقة مع الدعم الكامل لتعديلات المستخدم على الخطوط (داخل المتصفح).
إعادة التعيين: يوفر توحيدًا عبر المستعرضات للتخصيصات الافتراضية لعناصر HTML. كما أنه يزيل التعبيرات الافتراضية الشائعة في المتصفحات، مثل استخدام الخط الغامق للعناصر التي تم التأكيد عليها، للمساعدة في التأكد من أن جميع تعريفات الخطوط مقصودة وأن العناصر تُستخدم دائمًا لمعناها الدلالي وليس التعبير المرئي المعتاد.
بعد التثبيت، يتوفر كل عنصر من عناصر تنزيل مكتبة YUI في الدلائل/الملفات التالية على خادم الويب:
شبكات الصفحة : buildgridsgrids.css
الخطوط: buildfontsfonts.css
إعادة الضبط: إنشاء eset eset.css
يمكنك تثبيت هذه الدلائل الأساسية على خادم الويب الخاص بك أو وضعها داخل موقعك حتى تتمكن من الرجوع إليها حسب الحاجة. إحدى الميزات المهمة لـ CSS (إلى جانب كونها مجانية) هي أنه يتم اختبارها وتصحيح أخطائها بدقة قبل إصدارها. دعونا نلقي نظرة فاحصة على أدوات CSS أثناء العمل.
تخطيط صفحة الشبكة
يعد التخطيط المستند إلى الشبكة هو القوة الدافعة وراء أي تصميم موقع أو تخطيط صفحة تقريبًا. في الماضي، كان يتم ذلك غالبًا من خلال جداول HTML، لكن CSS توفر قوة ومرونة هائلتين لتخطيط الصفحة. توفر Page Grid تعليمات برمجية لإنشاء صفحات تحتوي على أعمدة وصفوف وفقًا لمتطلباتك.
على المستوى الأساسي لشبكة الصفحة، يوفر سبعة قوالب لصفحات الويب، ستة منها تحدد تخطيطات المحتوى/شريط الأدوات الرئيسية التفصيلية؛ ويحدد القالب السابع تخطيطًا بدون أشرطة أدوات، ويشغل المحتوى الرئيسي عرض الصفحة بالكامل. وأسماء هذه القوالب هي كما يلي:
yui-t1: يحتوي على شريط أدوات بعرض 160 بكسل على اليسار ومنطقة رئيسية بعرض 570 بكسل.
yui-t2: يحتوي على شريط أدوات بعرض 180 بكسل على اليسار ومنطقة رئيسية بعرض 550 بكسل.
yui-t3: يحتوي على شريط أدوات بعرض 300 بكسل على اليسار ومنطقة رئيسية بعرض 430 بكسل.
yui-t4: يحتوي على شريط أدوات بعرض 180 بكسل على اليمين ومنطقة رئيسية بعرض 550 بكسل.
yui-t5: يحتوي على شريط أدوات بعرض 240 بكسل على اليمين ومنطقة رئيسية بعرض 490 بكسل.
yui-t6: يحتوي على شريط أدوات بعرض 300 بكسل على اليمين ومنطقة رئيسية بعرض 430 بكسل.
yui-t7: يحتوي على منطقة رئيسية بعرض 750 بكسل ولا توجد بها أشرطة أدوات.
يمكنك دمج هذه القوالب (أو تحريرها، إذا كنت جريئًا بما يكفي) لتناسب أغراضك. تستخدم القائمة أ التخطيط الأول لتخطيط الصفحة (ملاحظة: يتم تثبيت أداة CSS في الدليل الافتراضي لخادم الويب).
القائمة أ
<html><الرأس>
<title>مثال 1 لأدوات Yahoo CSS</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</الرأس>
<الجسم>
<div id="doc" class="yui-t2">
<div id="hd">رأس الصفحة</div>
<div معرف = "bd">
<div معرف = "yui-main">
<div class="yui-b">المنطقة الرئيسية</div>
</div><div class="yui-b">العمود الأيسر</div>
</div>
<div id="ft">تذييل الصفحة</div>
</div></body></html>
بعض الملاحظات على صفحة HTML:
يتم إعطاء التخطيط للصفحة بأكملها - يتم تعيين فئة yui-t2 لعلامة div الرئيسية. وهذا يدل على أن القالب الثاني مستخدم.
يتم تقسيم الصفحة إلى مناطق الرأس والنص والتذييل. يُعطى الرأس المعرف hd، والنص bd، والتذييل هو ft.
يتم تقسيم النص الرئيسي للصفحة إلى المنطقة اليسرى (إذا كان القالب يدعمها) والمنطقة الرئيسية. تم تعيين كلاهما لفئة yui-b، ولكن يتم إلحاق المنطقة الرئيسية بسمة معرف yui-main في علامة div الخاصة بها.