موفقیت CSS

آیا چیدمان ظاهری انعطاف پذیـــــر CSS كــه روی هر پلت فرمی كار كند, خیالی واهـــــی برای طراحان وب سایت هاست در این مقاله به معرفی ابزار و قوانین مرتبط با این برنامه می پردازیم

آیا چیدمان ظاهری انعطاف‌پذیـــــر CSS كــه روی هر پلت‌فرمی كار كند، خیالی واهـــــی برای طراحان وب سایت‌هاست؟ در این مقاله به معرفی ابزار و قوانین مرتبط با این برنامه می‌پردازیم. بگذاریـــــد مقاله را با طرح این جمله ساده آغاز كنیم كه اگر هنوز چیدمان صفحات وب شما مبتنی بر جداول است، بهتر است آن را كنار گذاشته و به سراغ شیوه نامه‌ آبشاری )Cascading Style Sheet( بروید. اكنون CSS به جایگاه مطلوبی دست یافته است.

انگیزه اصلی استفاده از CSS، توصیه كنسرسیوم وب جهانی C(۳)W است. C۳W وظیفـــــه نظارت بر استانداردهای وب را برعهده دارد. در آخرین نسخه ( XHTMLزبان مبتنی بر XML كه جایگزین HTML شـــــده است)، تعداد گزینه‌هـــــای فـــــرمت‌بندی تـــــوكار بسیار اندك است; در عوض كلیه چیدمان، فرمت‌بندی و تنظیمات متن با CSS صـــــورت می‌گیـــــرد. استفـــــاده از CSS برای چیدمان صفحات همان چیزی است كه C۳Wخواستار آن است.

نسخه‌های كامل‌تر HTML و XHTML انتخاب‌های كمتری را در اختیار شما می‌گذارنـــــد. در نسخـــــه ۱.۰XHTML كه پرمصرف‌تریـــــن نسخه این زبان علامت‌گذاری است، تمام فرمت‌بندی‌ها و بسیاری از توابع صفحه‌آرایی نادیده گرفته شده است. بدین معنی كه پشتیبانی از آنها مربوط بـــــه زمان‌ حال است و هیچ تعهـــــدی مبنـــــی بـــــر پشتیبان در آینده بـــــه چشم نمی‌خـــــورد. هم اكنون از ۱.۱XHTML دیگـــــر استفاده نمی‌شود كـــــه C۳Wهم نسبت به آن هشدار داده بود. اگر هم تگ قالب‌بندی مشاهده شود، تعداد آنها اندك است، تگ فونت نیز هماننـــد ویژگی‌های اندازه و رنگ از بین رفته است. خوشبختانه، سبك‌های CSS قادر به انجام تمـــــام قالب‌بندی‌هایی كه توسط HTML صورت می‌گرفت، هستند.

● قوانین CSS

هر چند قوانین CSS را می‌توان بــــه صورت شیوه نامه‌های داخلی یا شیوه‌نامه‌های تعبیه شده، مستقیما داخل صفحات وب قرار داد اما بیشترین نتیجه زمانی عاید می‌شود كه شیوه‌نامه‌های خارجی را ایجاد كنید. فرضا، صفحه شما به جز محتوا و علامت‌گذاری نباید چیز دیگری داشته باشد و شیوه‌نامه‌های خارجی هم فقط بایـــــد حـــــاوی فرمت‌گـــــذاری و صفحه‌آرایـــــی باشنـــــد. در حقیقت جداسازی محتوا از طرح، هدف نهایی C۳W است.

فایل‌های شیوه نامه خارجــــی مزایـــــای زیادی دارند. كار با اجزای CSS بسیــــــار راحت‌تر از روش‌های صفحه‌آرایــــــــی قدیمی است. جـــــــداول به هیچ وجـــــه برای چیدمان محتوا مناسب نبودند. تمام روش‌هایی كــــــــه تاكنون به وجود آمده‌اند، دست و پــــای طراحان وب‌سایت‌ها را بستـــــه است. امـــــا CSS از همان ابتدا برای ایجاد صفحه‌آرایی ساخته شده بود.

برای ایجاد تغییرات در یك سایت تــــــوسط روش‌های قدیمی‌تر و حتی شیوه‌های توكار موجود، باید هر صفحه را به تنهایی ویرایش كنید. اگر از شیوه‌نامه‌های خارجی برای كنترل چیدمان سایت خود استفاده كنید، برای اعمال تغییرات در تمام صفحات اعم از تغییر رنگ سایت یا شیوه متن، كافیست تنها یك فایل را ویرایش كنید.

همان ویژگی‌هایی كه باعث می‌شود چیدمان یك سایت را توسط یك فایل كنترل كنید، شیوه‌نامه‌های خارجی را نیز قابل استفاده مجدد می‌كنند. اگر در یك سایت چیدمان خوبی انجام داده‌اید، می‌توانید آن را برای دیگر سایت‌ها نیز انجام دهید. برای جلوگیری از وجود شباهت، می‌توانید با تغییر رنگ و فونت ظاهر سایت را تا حد زیادی تغییر دهید. مهم‌تر از آن، صفحات می‌توانند به گونه‌ای ایجاد شوند كه از شیوه نامه‌های خارجـــــی مختلفی نیز استفاده كننـــــد. همچنیـــــن می‌توانید برای مرورگرهایی كـــــه از شیوه‌های چندگانه‌ای پشتیبانی می‌كنند شیوه‌نامه‌های متعددی ایجاد كنید.

● سنجش سبك‌ها

كلمه وب همواره یادآور كاستی‌ها ومعایبی است از جمله، كمبود ابزار طراحی اختصاصی CSS جهت ساخت شیوه و صفحه‌آرایی CSS ثابت در DreamWeaver و ابزار نوشتاری وب كه پشتیبانی خوبـــــی بـــــه عمل می‌آید. اما برای ایجاد یك چیدمان انعطاف‌پذیر در محیط بصـــــری پشتیبانـــــی كمـــــی وجـــــود دارد. در حقیقت، در ۸ DreamWeaver، برخی چیدمان‌ها در پنجـــــره یك سند از حالت اولیـــــه خـــــود خارج می‌شوند; حتی اگـــــر كاركرد آنها در مرورگرهای استاندارد به شكل مطلوب باشد.

مشكل زمانی بیشتر می‌شود كه نحوه رفتار مرورگرهای مختلف وب با CSS را ارزیابی كنید. در مورد پشتیبانی كامل از استانداردهای فعلی CSS، هنوز برخی اختلال‌هایـــــی وجـــــود دارد كه سازندگان مرورگرها با مشخص كـــــردن این امر كه كدام پخش كدام پروتكل را نادیده گرفته‌اند، كارهـــــا را آسان نمی‌كننـــــد. امـــــا طبق روال Internet Explorer، مـــــرورگر حاكم بر بازار مشكل سازترین گزینه است.

در حال حاضر از سوی C۳W در رابطه با CSS سه توصیه وجود دارد: پشتیبانی ۳ CSS هنوز تا حدی ناهمگون است كه اغلب آن را غیرقابل استفاده كرده است. هـــر چند Mozilla و Firefox در این زمینــــه هم پیش‌قــــدم هستنــــد. همچون ۶ Internet Explorer، برنامــــه ۲ CSS با در نظر گرفتن برخی استثنائــــات عملی شده است. از سوی دیگر Firefox و Mozilla در پشتیبانی از ۲CSS با برخی مشكلات روبه‌رو هستند اما از ۱CSS به خوبی پشتیبانی می‌كنند. هم اكنون به هنگام تعریف شیوه‌‌ها استفاده از قـــــواعـــــد ۲CSS مناسب است. برای دریافت فهرست كامل عناصـر مناسب استفاده بـــــه Schools CSS Reference۳W واقـــــع در آدرس schools.com/css/css_Reference.asp۳www.wمراجعه كنید.

در اكثـــــر موارد استفاده از CSS دلیلی بـــــر امنیت بیشتـــــر نسبت به قالب‌بندی بـــــا HTML منسوخ شده نیست. كنسرسیـــــوم وب جهانــــــی برخــــــی تــــــوابع قالب‌بندی در آخــــــرین نسخه‌های زبان علامت‌گذاری را ناچیـــــز و بی‌ارزش تلقـــــی كرده است. یكــــی از بارزتریـــــن خـــــواص برای اخـــــذ جواز تراز كردن است كـــــه برای مستقرسازی متن و سایر عناصر مرتبط با یكدیگر استفاده شده است. یكی از كاربردهای مشهور این خاصیت ایجاد Text Wrap پیرامون تصاویر است. در تگ تصویر، كه بدین شكل است:

۱۰۰align="left"/> ۲۰۰width=

اما نسخه استاندارد CSS آن به شرح زیر خواهد بود:

۱۰۰style="float:left;"/> ۲۰۰width=

توجه كنید كه خاصیت شیـــــوه در آخر دومین كد نمونه، جایگزین خاصیت تراز كردن شده ا‌ست. این یك شیوه Inline است. گر چه آمیختن شیوه‌های Inline با شیوه نامه خارجی برای قالب‌بنـــــدی چندان جالب نبوده، اما غیرمجاز هم نیست.

قرار دادن، محتوای صفحه در مركز راهی ساده برای حفظ كنترل ابعاد صفحه به هنگام رندر كردن روی پلت‌فرم‌های مختلف است. در جدیدترین نسخه‌های HTML، نسبت به استفاده از عنــــــوان مركزی تذكر داده‌اند. هدف خلاصـــــه كـــــردن تمام محتـــــوا در یك بخش است. در ایــــن صورت باید كد خود را مستقیما در DreamWeaver ویرایش كنید.

ابتدا تعریف سبك زیر را به سند CSS خارجی خود اضافه كنید.

auto; ۰ :div#container { position: relative; margin

%; }۸۰ :width

سپس تمام محتوای كد بین تگ‌های Body را با اعلان زیر در صفحه وب خود خلاصه كنید:

<\div>محتویات صفحه اكنون بدون در نظر گرفتن درجه وضوح مانیتور كاربران، محتویات باید به زیبایی در مركز صفحه وب قرار گیرند. این كد در Firefox و ۶Internet Explorer به خوبی كار می‌‌كند اما در ۵IE و ۵.۵ این امر صـــــدق نمی‌كند. اگر این امر برای شما مسئله‌ساز است، مثلا ترافیك ســـــایت شما نشان می‌دهد كه بازدیدكنندگان زیادی دارید كه از ۵.۵IE استفاده می‌كنند، می‌توانید صفحه را از طریق تراز كردن متن در كد CSS به شرح ذیل در وسط صفحه قرار دهید:

:body{text-align:center;}div#container{position

% text-align:left;}۸۰:auto; width ۰:relative; margin

۵.۵ IE و یا ۶ IE كادرهـای CSS را به شیوه‌های متفاوتی نسبت به سایر مرورگرها ارائه می‌كند زمانی كه اطلاعاتی را به CSS یا سایر بلوك عناصر اضافه می‌كنید )Padding(، ۵ IE آن را داخل كادر قرار می‌دهــــــد و بـــــه عنوان مثال اگر بخشی دارید كه عرض آن ۲۰۰ پیكسل با Padding ۱۰ پیكسل است، پس سایـــــز كلی آن بلــــــوك باید ۲۲۰ پیكسل باشد. اما ۵ IE آن را با ۲۰۰ پیكسل ارائه می‌دهد و موجب فشرده شدن محتویات درون آن می‌شود.

● انعطاف‌پذیری به جای ایستایی

بـــــرای اكثـــــر طراحـــــان استاندارد وب، ایجـــــاد و ساخت صفحه‌آرایـــــی CSS خارجی بـــــا انعطاف‌پذیـــــری به جای ایستایــی و پایـــــداری بسیـــــار اهمیت دارد. صفحه‌آرایی با سبك‌هـــــای Inline راحت‌تـــــر است امـا مزایای جداسازی چیدمان از محتوا بیشتـــــر است. حتـــــی اگر آن چیدمان‌ها بتواننــــــد در هر محیطـــــی كه قـــرار می‌گیرند، توسعه یابند نتیجه آن چشمگیرتر است.

دلایل مهمـــــــی برای این امر وجود دارد: قابلیت تغییر اندازه به منظور سازگاری با هر مرورگری به معنای كاربرد بهتر آن در چندین پلت‌فرم از كامپیوترهای دسك‌تاپ گرفته تا كامپیوترهای كیفی است. البته این انعطاف‌پذیری چندان هم آسان نیست. زیرا به منظور حصول اطمینان از صحت قرار گرفتـــــن صفحه‌هـــــا در اندازه‌های مختلف، باید برخی آزمایش‌های جانبی را انجام دهید. برخی طراحان ترجیح می‌دهند برای چیدمان انعطاف‌پذیر از CSS استفاده كنند. این امر مستلزم برخـــــوردار بـــــودن از عرض ثابت برای محتوایی است كه با استفاده از كدی كه قبلا به آن اشاره كردیم در مركز قرار گرفته‌اند. ارتفاع نیز با در نظر گرفتن میـــــزان محتـــــوای صفحه محاسبه می‌شود. هر راهی را كه برگزینیـــــد، مقصد باید یكـــــی بـــــاشد. اكنون ضرورت جداسازی محتوا از فرم آشكار شده است كه با CSS این امر به بهترین وجه انجام خواهد شد.

مترجم: مهناز مختاری