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

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

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

قبلا مجادلات زیادی در این مورد با خیلی از دوستان صورت گرفته بود، اگر چه به یک جواب درست و حسابی در مورد این مشکل نرسیدم (بعدها فهمیدم که خیلی از کسایی که باهاشون بحث کردم فرق هشدار و خطا رو نمی فهمیدن) ولی چند روز قبل Roger عزیز در این پست وبلاگش موضوع رو خیلی جمع و جور توضیح داده. حال و حوصله این که فارسیش را بنویسم ندارم، خودتان زحمتش را بکشید.

کم کم دارم به این نتیجه می رسم که جای یک فرام تخصصی CSS بین مان خالیست. خیلی ها کله هایشان پر است و رو نمی کنند. بعضی ها اصالتا خسیس اند حتی در این مورد، بعضی ها هم فرصت و مکانش را ندارند. بعضی ها هم پولکی هستند اگر حرف $ به میان بیاید با کله می آیند. بنظرم ایجاد یک فرام، علاوه بر ایجاد حس رقابت میان اعضای فعال، مشکل دوستان رده دوم را کمی حل می کند. اشتراک اطلاعات حداقل مزیتش این است که از قافله عقب نمی افتی. اگر کسی از دوستان ایده ای دارد مطرح کند.

گاهی اوقات به نکات و شگردهای جالبی در مورد کار با عناصر CSS برمی خورم. چه از طریق وب چه تجربه شخصی، مطالعه کتاب و گاهی وقت ها هم با وارسی فایل های سی اس اس حرفه ای ها، در الگو هایی که برای آموزش ارائه می دن. از اونجایی که این نکات منظم و مرتب نیست و هر نکته ای رو یه جا فهمیدم و بکار بردم، انتظار اینکه بیام سلسله وار و منظم لیستشون کنم یه خورده بی انصافیه (البته اگر وقتم مهلت می داد حتما همچین کاری می کردم) تصمیم گرفتم پست هایی رو تحت نام شگردهای CSS شروع کنم تا به هر تکنیکی رسیدم فوری پست کنم تا نه من یه وقتی یادم بره و نه خدای نکرده شما بی نصیب بمونید. البته این نکته هم قابل ذکره که شاید اینا از دید شما که استادید یه تکنینک محسوب نشه و بیشتر حالت امپریکال داشته باشه، چرا که مو به مو همه چیز شرح داده شده تا مبتدی هم درک کنه. خلاصه به بزرگی خودتون ببخشید. خوب بریم سراغ تکنیک این پست:

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید: ادامه مطلب …

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

البته برای من و شما که شاید فایل CSS مان 100 خط کد هم نداشته باشد این روش کمی خنده دار به نظر می رسد اما سایتی را تصور کنید که ده ها فایل CSS دارد، قطعا این روش در کاهش اتلاف وقت توسعه دهنده، موثر خواهد بود.

برای حل مشکلاتی که در فوق ذکر شد، از چند خط کد پی اچ پی برای فشرده سازی اتوماتیک CSS استفاده می کنیم. این متد کار را به این نحو برایمان انجام می دهد: 1) به طور معمول مرورگر کاربر، فایل CSS را درخواست می کند 2) سرور با قدرت PHP کدهای CSS را فشرده می کند 3) در نهایت کمپرس شده CSS، به مرورگر ارسال می شود. همه عملیات بدون اینکه کاربر متوجه شود اتفاق می افتد. بهتر از همه اینکه کدهای CSS شما دست نخورده باقی می ماند و شما به سهولت می توانید آن ها را آپدیت کنید. ادامه مطلب …