توسعه سریعتر با ثابت‌های CSS

January 31, 2007 at 12:07 pm

قبلاً به طور غیر مستقیم در مقالات PHP & CSS Hacks و فشرده‌سازی CSS به کمک PHP به طور مختصر از ثابت‌ها یا همان constant ها استفاده کردیم. متاسفانه همانطور که همه می‌دانیم CSS از ثابت‌ها پشتیبانی نمی‌کند. اگر می‌توانستیم در ابتدا مقادیر ثابت را تعریف کنیم و سپس از آن‌ها در بخش‌های مختلف فایل CSS مان استفاده کنیم خیلی عالی می‌شد.

توسعه ‌دهندگان وب برای حل این موضوع عمدتاً به ترکیب یک زبان برنامه نویسی تحت وب مثل PHP با CSS متوسل می‌شوند. (روش اول استفاده از PHP محض و روش دوم ویرایش فایل Htaccess است) هر چند خیلی کم هستند کسانی که این متد رو بکار می‌برند. چند وقت پیش که با Rachel Andrew در این مورد بحث می‌کردم اینطور وانمود می‌کرد که روش‌های مرسوم برای این کار جدای از اینکه مورد انتقاد قرار گرفتن، عمدتاً به علت ناآگاهی طراح، زیاد مورد استقبال قرار نگرفته و انتظار می‌رود در آینده نزدیک تعداد طراحانی که این متدها رو بکار می‌برند بیشتر شود.

اما بنظر خودم ترکیب یک زبان برنامه نویسی تحت وب مثل PHP با CSS برای یک سایت پر ترافیک واقعاً می‌تواند ناکارآمد باشد. موضوع دقیقاً روشن است، کامپایل یک فایل PHP به CSS مقداری از پهنای باند را مصرف خواهد کرد. چرا که یک فایل استاتیک (مثلاً یک فایل نرمال با فرمت CSS) می‌تواند کش شود در حالی یک فایل پویا در هر بار که یک صفحه از سایت را باز کنید باید کامپایل و دوباره روی مرورگر بارگذاری شود. بنابراین قبلاً از اینکه این ترکیب رو بکار برد باید به فکر یک مکانیسم کشینگ عالی بود. از طرف دیگر من هم قبول دارم که CSS باید گزینه‌ای برای ثابت‌ها داشته باشد اما W3C این روش را قبول نمی‌کند، خودتان قضاوت کنید. پس راه حل چیست؟

خیلی از طراحان دیگر استفاده از فهرست رنگ‌ها یا همان Color Glossary را به عنوان جزئی از راه‌حل در مقابل پیشنهاد می‌کنند. اگر چه این روش نمی‌تواند جایگزین مناسبی برای ترکیب یک زبان برنامه نویسی با CSS باشه اما تا حد قابل توجهی در اتلاف زمان طراحی و بخصوصی ویرایش‌های بعدی فایل‌های CSS‌ مان موثر خواهد بود. روش کار به این شکل است که لیستی از رنگ‌هایی را که در فایلمان استفاده کرده‌ایم همراه با توضیحات مربوطه و البته به طور دلخواه (به طوریکه مشخص شود هر رنگ مربوط به چه قسمتی از صفحه است) در داخل کامنت بیاوریم و آن را در بالای فایل قرار دهیم. نمونه زیر را ببینید:

 /*
Dark grey (text): #333333
Dark Blue (headings, links) #000066
Mid Blue (header) #333399
Light blue (top navigation) #CCCCFF
Mid grey: #666666
*/

فرض کنید می‌خواهیم خاکستری کمرنگ یا همان Mid grey را به 999999 تغییر دهیم، یک جستجو و جایگزینی سریع به کمک ادیتورمان می‌تواند تمام مقادیر 666666 را با مقدار 999999 جانشین کند. همانطور که گفتم منصفانه این متد در برابر ترکیب یه زبان برنامه نویسی یک تکنیک ضعیف محسوب می‌شود. چرا که می‌توانستیم مقدار رنگ را در یک متغیر قرار دهیم و هنگام کد نویسی فقط از نام متغیر استفاده کنیم علاوه بر این در هنگام ویرایش مقادیر نیز، نیازی به جستجو نخواهد بود.

در نظر داشته باشید که این موضوع Color Glossary تنها به این جهت مطرح شده که رنگ‌ها کاربرد زیادی در المان‌ها دارند و نسبت به سایر خاصیت‌های بکار رفته شده در فایل‌های CSS‌ مان بیشتر ویرایش می‌شوند و این تکنیک منحصراً دسترسی به محتوای فایل و تغییرات آن را (البته برای رنگ‌ها و نه همه خاصیت‌ها) آسان‌تر می‌کند.

+ هر چند جستجوهایم در مورد استفاده از مقادیر ثابت در فایلCSS فراتر از جزییات فوق بود اما تمامی روش‌های بکارگرفته شده به همین‌هایی که گفتم ختم می‌شد. آیا شما روش دیگری یا ایده جدیدی سراغ دارید؟

دسته: سی اس اس, فناوری‌های وب | نویسنده: مرتضی الوانی

  1. 5 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    سعید زبردست

    سلام

    به نظر من استفاده از php محض بهتر از روشیه که گفتی.
    من php محض رو ترجیح می دم چون انعطاف پذیری بیشتری داره.

    موفق باشی

    February 1, 2007 at 12:44 am

  2. 2

    نبی

    سلام ؛
    خوش اومدی ، خوشحالم دوباره مینویسی…

    به نکته خوبی اشاره کردی .
    به نظر من همون استفاده از php بهتره ، یعنی راستش گاهی این w3c هم زیادی سخت گیری میکنه ! بحث کش نشدن رو مطرح کردید ، من فکر میکنم خود مرورگر اینکار رو بخوبی انجام بده و حتی خروجی های php رو به صورت html در کش ذخیره کنه و در صورت نیاز ازشون استفاده کنه ، اگر اینطور نبود همیشه بارگذاری صفحاتی که با php ساخته شدند برای بار اول و دفعات بعد باید یکی می بود ولی میبینید که حتی صفحات php هم بار اول سریعتر از بار دوم لود میشن و این خود دلیل بر کش شدن اونها است.
    البته شاید نظر بالا اشتباه باشه و برداشت من غلط ولی خب اینطور فکر کردم…

    در روش دوم که گفتید رنگها رو به اون صورت طبقه بندی کنید و در مواقع لزوم از replace استفاده کنید روش خوب و معقولانه ای است ولی یه اشکال ریز داره و اون اینکه مثلا اگر در دو المان مختلف مثلا محل x و y هر دو از رنگ 666666 استفاده شده بود و در مثالی هم که زدی مقصود ما جایگزین کردن رنگ 999999 بود اما فقط بجای المان x ، اون وقت عمل replace باعث میشه هر دو المان رنگش تغییر کنه و این دور از هدف و مقصد ماست. یا در حالت دیگه ممکنه رنگ جدیدی که قراره جایگزین بشه از قبل وجود داشته باشه و اونوقت دو المان متفاوت در شرایط جدید رنگ مشترک میگیرند و تفکیک و تشخیص اون دو المان که ربطی به هم نداشتند ولی ناخواسته رنگ یکسان گرفتند مشکله…امیدوارم تونسته باشم منظور رو برسونم .

    با همه این تفاسیر شاید در حال حاظر همون روشی که خود شما هم در این وبلاگ استفاده کردید بهترین راه باشه . یعنی جدا سازی المان هایی که شامل رنگ و عکس زمینه هستند با اونهایی که نیستند . یعنی اینجوری:

    @import “layout.css”;
    @import “summer_1384.css”;

    و تغییر همه رنگها به صورت دستی.

    ببخشید پر حرفی کردم ، کامنت از پست اصلی طولانی تر شد.
    خیلی عجله ای خوندم و عجله ای هم کامنت رو نوشتم شاید غلط غلوط زیاد داشته باشه . ببخشید دیگه …

    مقالت رو به دقت نخوندم بازم میخونم و برمیگردم.

    فعلاً
    چاکریم
    نبی

    February 1, 2007 at 1:00 am

  3. 3

    مرتضی الوانی

    از نظر پرمحتوایتان٬ نبی عزیز سپاسگزارم
    در مورد کش شدن فایل با فرمت php به صورت html کاملا‍ً مورد قبوله. ولی در نظر داشته باشید این فایل php یک فایل پویا هست و در درخواست بعدی امکان تغییر در آن وجود دارد. بنابراین مجدد کامپایل خواهد شد. اگر شما میبینید حتی صفحات php هم بار اول سریعتر از بار دوم لود میشن. اون صفحه php محض نیست. المان‌های ثابت یک صفحه (نظیر تصاویر٬ فایل‌های استاتیک و …) قابل کش شدن هست که در نظر سرعت لود صفحه برای بار دوم افزایش پیدا کرده. در صورتی که اگر شما یه فایل php محض رو در مرورگر اجرا کنید اون به html کش خواهد شد ولی در درخواست‌های بعدی آپدیت می‌شه. من خودم هم قبلاً مثل شما فکر می‌کردم اما با خواندن مکانیسم کشینگ مرورگرها و اطلاعاتی که zend در رابطه با کش php روی مرورگر داده بود نظرم عوض شد. البته این نکته قابل توجهه که می‌شه header یک فایل php رو طوری تعریف کرد که اکسپایر شدنش رو در مرورگر کنترل کنیم.

    در مورد دوم هم ایرادات کاملاً وارده. اما در مورد سوم یعنی همون کاری که من در این وبلاگ کردم٬ جداسازی رنگ‌ها هدف فرعی کار هست و هدف اصلی ایجاد و کنترل ابتدا یک طرح بیس و سپس یه طرح ساب بیس است. به طوری که طرح بیس در بارگذاری مقدم‌تر باشه.

    February 1, 2007 at 3:00 pm

  4. 4

    Alvanweb » توضیح نویسی فایل‌های CSS

    […] حذف توضیحات و بهینه‌سازی استایل‌ها توضیحات به طور قابل ملاحظه‌ای می‌توانند حجم فایل‌های CSS را افزایش دهند. بنابراین ممکن است بخواهید از این توضیحات صرفنظر کنید. خیلی از ویرایشگرهای متن گزینه جستجو و جایگزین کردن را دارند و مشکل حذف توضیحات را تا حدی حل می‌کنند. همچنین بهینه‌سازهای آنلاین CSS نظیر این می‌تواند این کار را انجام دهد. البته این بهینه‌سازها علاوه بر حذف توضیحات، فضاهای خالی بین کدهای CSS را حذف می‌کند و می‌تواند بایت‌های اضافی را کاهش دهد. برخی هم از ترکیب زبان برنامه‌نویسی PHP با CSS استفاده می‌کنند. قبلا در مورد این روش در اینجا و اینجا بحث شده است. جدای از مشکلات بعلت پیچیدگی، این روش زیاد مقبول و مرسوم نیست. […]

    July 14, 2007 at 4:50 pm

  5. 5

    hamed

    سلام دوست عزیز مطلب جالبی بود هرچند زیاد متوجه نشدوم اما فکر میکنم مرتبط با مشکل من بلاشه من میخوام رنگ بگ راند یا بهتر بگم رنگ قسمتی که داخش مطالبم قرار میگیره رو تغییر بدم از css و غیره هم سر درنمیارم یکی دوبار خواستم با جایگزین کردن رنگ داخل قالب با یه رنگ دیگه(#999999 با#00CCFF )این کارو انجام بدم ولی نشد نمیدونم راهی برای این مشکل وجود داره یا نه لطفا منو راهنمایی کنید اگه یه ایمیل کوچولوهم باشه عیبی نداره………….ممنون

    April 25, 2009 at 10:22 am