دعم المتصفح إحدى الميزات الرئيسية لأداة CSS هي أنها مصنفة لتوفير دعم مثالي لمتصفحات الفئة أ. تصنيف دعم المتصفح هو مجرد تصنيف لشركة Yahoo!، ويمكنك رؤية الوصف الكامل على موقعها على الويب، والذي يصف بشكل أساسي كيفية عمل CSS بشكل جيد في المتصفحات الموجودة في السوق اليوم. في هذا الجدول عبر الإنترنت، يتم تقسيم المتصفحات إلى ثلاثة مستويات لدعم المتصفح (A وC وX). المستوى أ هو أعلى مستوى من الدعم. من خلال الاستفادة من قوة معايير الويب الحديثة، تكتشف مكتبة YUI أن تجربة الفئة A توفر وظائف متقدمة ودقة بصرية. تمنحك فئات الدعم والملفات ذات الصلة فكرة عن مكان دعم CSS، ولكن يجب أن يكون متاحًا في كل متصفح (مع إمكانية التخفيضات). قابلة لإعادة الاستخدام CSS تتضمن مكتبة YUI ثلاث مناطق أو ميزات CSS، تغطي التنسيق ومقدمة الخط والتخطيط المستند إلى الشبكة (العمود والصف). تُستخدم هذه المصطلحات على الموقع الإلكتروني لوصف هذه العناصر الثلاثة: شبكات الصفحات: تسمح لك بتضمين شبكات مكونة من عمود واحد إلى أربعة أعمدة ضمن سعة القالب الذي تستخدمه. شبكات الصفحة: buildgridsgrids.css تخطيط صفحة الشبكة يعد التخطيط المستند إلى الشبكة هو القوة الدافعة وراء أي تصميم موقع أو تخطيط صفحة تقريبًا. في الماضي، كان يتم ذلك غالبًا من خلال جداول HTML، لكن CSS توفر قوة ومرونة هائلتين لتخطيط الصفحة. توفر Page Grid تعليمات برمجية لإنشاء صفحات تحتوي على أعمدة وصفوف وفقًا لمتطلباتك. على المستوى الأساسي لشبكة الصفحة، يوفر سبعة قوالب لصفحات الويب، ستة منها تحدد تخطيطات المحتوى/شريط الأدوات الرئيسية التفصيلية؛ ويحدد القالب السابع تخطيطًا بدون أشرطة أدوات، ويشغل المحتوى الرئيسي عرض الصفحة بالكامل. وأسماء هذه القوالب هي كما يلي: yui-t1: يحتوي على شريط أدوات بعرض 160 بكسل على اليسار ومنطقة رئيسية بعرض 570 بكسل. القائمة أ <html><الرأس> يتم إعطاء التخطيط للصفحة بأكملها - يتم تعيين فئة yui-t2 لعلامة div الرئيسية. وهذا يدل على أن القالب الثاني مستخدم.
الخطوط: توفر توحيدًا وتحكمًا في الطباعة عبر المتصفحات. بشكل عام، يوفر خطوطًا وارتفاعات خطوط متسقة مع الدعم الكامل لتعديلات المستخدم على الخطوط (داخل المتصفح).
إعادة التعيين: يوفر توحيدًا عبر المستعرضات للتخصيصات الافتراضية لعناصر HTML. كما أنه يزيل التعبيرات الافتراضية الشائعة في المتصفحات، مثل استخدام الخط الغامق للعناصر التي تم التأكيد عليها، للمساعدة في التأكد من أن جميع تعريفات الخطوط مقصودة وأن العناصر تُستخدم دائمًا لمعناها الدلالي وليس التعبير المرئي المعتاد.
بعد التثبيت، يتوفر كل عنصر من عناصر تنزيل مكتبة YUI في الدلائل/الملفات التالية على خادم الويب:
الخطوط: buildfontsfonts.css
إعادة الضبط: إنشاء eset eset.css
يمكنك تثبيت هذه الدلائل الأساسية على خادم الويب الخاص بك أو وضعها داخل موقعك حتى تتمكن من الرجوع إليها حسب الحاجة. إحدى الميزات المهمة لـ CSS (إلى جانب كونها مجانية) هي أنه يتم اختبارها وتصحيح أخطائها بدقة قبل إصدارها. دعونا نلقي نظرة فاحصة على أدوات CSS أثناء العمل.
yui-t2: يحتوي على شريط أدوات بعرض 180 بكسل على اليسار ومنطقة رئيسية بعرض 550 بكسل.
yui-t3: يحتوي على شريط أدوات بعرض 300 بكسل على اليسار ومنطقة رئيسية بعرض 430 بكسل.
yui-t4: يحتوي على شريط أدوات بعرض 180 بكسل على اليمين ومنطقة رئيسية بعرض 550 بكسل.
yui-t5: يحتوي على شريط أدوات بعرض 240 بكسل على اليمين ومنطقة رئيسية بعرض 490 بكسل.
yui-t6: يحتوي على شريط أدوات بعرض 300 بكسل على اليمين ومنطقة رئيسية بعرض 430 بكسل.
yui-t7: يحتوي على منطقة رئيسية بعرض 750 بكسل ولا توجد بها أشرطة أدوات.
يمكنك دمج هذه القوالب (أو تعديلها، إذا كنت شجاعًا بما يكفي) لتناسب أغراضك. تستخدم القائمة أ التخطيط الأول لتخطيط الصفحة (ملاحظة: يتم تثبيت أداة CSS في الدليل الافتراضي لخادم الويب).
<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:
يتم تقسيم الصفحة إلى مناطق الرأس والنص والتذييل. يُعطى الرأس المعرف hd، والنص bd، والتذييل هو ft.
يتم تقسيم النص الرئيسي للصفحة إلى المنطقة اليسرى (إذا كان القالب يدعمها) والمنطقة الرئيسية. تم تعيين كلاهما لفئة yui-b، ولكن يتم إلحاق المنطقة الرئيسية بسمة معرف yui-main في علامة div الخاصة بها.