در پست قبلی مقدمه ای در مورد CSS Hacks بیان شد، حال در این پست قصد داریم راه حل باکلاس و بسیار جالبی را به کمک php برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن ارائه کنیم. برای آنکه بتوانیم دستورات PHP را در یک فایل css بکار ببریم، نیازمند این هستیم که از طریق شیوه نامه پیوندی (Linked Stylesheet) محتویات فایلی با پسوند php را در برچسب head صفحه، به شکل زیر قرار دهیم:

<link rel="stylesheet" href="styles.php" type="text/css" /> 

اکنون شما باید فایلی با نام styles.php در همان دایرکتوری که فایل صفحه تان قرار دارد ایجاد کنید. در اولین خط این فایل، با استفاده از تابع header نوع محتویات به صورت text/css تعریف می شود. هنگامی که این فایل در صفحه فراخوانی می شود اطلاعاتی از مرورگر کاربر به وسیله پارامترهای از پیش تعریف شده در php دریافت می شود و سپس کد css متناسب با آن مرورگر، ارسال خواهد شد. بدین منظور تابع detect را جهت شناسایی مرورگر، نسخه آن و پلتفرم (نوع سیستم عامل) به شکل زیر تعریف می کنیم: ادامه مطلب …

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

طراحی با CSS نیز از این قاعده مستثنا نیست. برعکس در بیشتر موارد به نظر می رسد مرورگرها بیشتر با طرح بندی برپایه جدول (table based layout) سازگارند. شاید یکی از این دلایل این باشد که هنوز چندین نام بزرگ در طراحی صفحاتشان از طرح بندی بر مبنای جدول بهره می گیرند.

برای حل این مشکلات بسیاری از طراحان CSS از تنظیماتی در کدهایشان بهره می گیرند که CSS Hack نام دارد. در واقع CSS Hack راهی است برای اینکه برخی از مرورگرها را مجبور کنیم تا کدهای css معینی را نادیده بگیرند. ما این کا را با قرار دادن کاراکترهای و نشانه های ویژه ای در فایل CSS تعریف می کنیم. برای مثال، یکی از بدترین حالات در هنگام طراحی با CSS، مدل جعبه ایی (Box model) است. IE5 و IE5.5 ویندوز در CSS1 این مدل را با گذاشتن لبه و لایه گذاری (border and padding) درون عرض مشخص شده بجای بیرون، به غلط تفسیر می کنند.

برای مثال کد زیر را در نظر بگیرید که بر اساس آن در همه مرورگرها برای عنصر header عرضی به پهنای 10em خواهیم داشت بجز IE5 که عرضی به پهنای 5em را بر می گرداند.
( IE5 دو مقدار padding و border را در هنگام برآورد طول در هم می آمیزد) ادامه مطلب …

فاصله گذاری بین خطوط ( Line Spacing ) یا فاصله دو خط کرسی ( Leading ) واژه ای است برای فضای بین خط های متن. هدف از فاصله گذاری خط معمولا ایجاد فاصله بین خطوط نوشتاری است به نحوی که برای خواننده دنبال کردن خطی که در آن قرار دارد آسان تر شود. متن نرمال HTML اغلب در همان حالتی که مرورگر مشخص می کند نمایش داده می شود، که معمولا به فاصله گذاری خط نزدیک است. اگر بخواهیم فاصله خطوط را از هم بیشتر کنیم، باید به صورت دستی برچسب <br/> را در آخر هر خط بیاوریم.

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

CSS برای پشتیبانی و تنظیم فاصله گذاری بین خطوط از صفت line-hight استفاده می کند. مقدار ارتفاع خط می تواند در شکل های مختلف تعیین شود، اما غالبا به نقطه (pt)، پیکسل (px)، یا مقادیر نسبی مانند درصد نوشته می شود. ما می توانیم line-hight را برای کل حجم یک سند یا نواحی انتخاب شده یک متن به کار ببریم.

حساب سرانگشتی کلی چاپ این است که اندازه ی فاصله ی خطوط را بین یک سوم تا یک دوم بالای اندازه ی تایپ تنظیم کنند. بنابراین در صورتی که از قلم 12pt استفاده می کنید line-hight را برای 18pt یا مقادیری بیشتر به کار برید. اگر سایز نرمال قلم را نمی دانید آسان تر است که آن ها را برابر 2.5 ex مقدار دهی کنید ( لازم به ذکر است که 1 ex برابر است با ارتفاع x قلم معمولی )، ارتفاع x در بعضی سبک های حروف (Typeface)، مخصوصا قلم های sans-serif مانند Arial یا Helvetica زیاد است لذا نیاز به فاصله گذاری بیشتری برای.

اگر بدانید خواندن متن آنلاین چقدر سخت است ترجیح می دهید از یک line-hight با 2em یا 200% استفاده کنید. اگر در نظر دارید که از خطوط طولانی استفاده کنید باید line-hight را برای بهبود خوانا بودن متن افزایش دهید.

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

در مطالعه کتاب جناب توماس به نکته ی جالبی برخورد کردم ، نویسنده در این باره می گوید: با وجودی که هنوز مطمئن نیستیم مرورگرها در خصوصیات CSS3 آینده چه چیزی را پشتیبانی می کنند ، اما برخی از جنبه های پشتیبانی رنگ برای اشاره به موارد ممکن آینده به طور خلاصه آمده است .

اول اینکه CSS3 امکان هماهنگ شدن با اجزا را به نقاط تیره می دهد. این کار می تواند از طریق هماهنگ کردن خصوصیات یک رنگ اصلاح شده که با rgba نشان داده می شود و آلفا را به عنوان مقدار چهارم اضافه می کند باشد. در ضمن این آلفا می تواند بین 0.0 تا 1.0 تغییر کند .

یک نوع پیشرفت دیگر که درآن معرفی شده است، توانایی مرتب کردن رنگ در قالب HSL است. این رنگ ها به صورت سه تایی مشخص می شوند ( سایه، اشباع، روشنی ). سایه به صورت گوشه ای از چرخه رنگ، جایی که قرمز 0 یا 360، سبز 120، آبی 240 و دیگر رنگ ها بین این ارقام هستند ظاهر می شود. اشباع به صورت درصد بیان می شود. بنابراین 0 درصد اشباع ندارد یا سایه ایی از رنگ خاکستری است، در حالی که 100 کاملا اشباع شده از سایه می باشد. روشنی هم به صورت مقدار درصدی نشان داده می شود، که روشنی 100 درصد به رنگ سفید و روشنی 0 به رنگ سیاه ظاهر می شود .

با وجوی که به نظر می رسد راه دیگری برای تعیین رنگ وجود دارد، اما تعیین رنگ HSL در جهت تنظیم رنگ ها شهودی تر است و به طور کلی خلق تنوعی از رنگ ها با ثابت نگه داشتن سایه و تنظیم کردن درجه اشباع و ته رنگ با این روش آسان تر به نظر می آید. رنگ های HSL، شبیه خصوصیات رنگ RGB، به موجب سیستم CSS3 مقدار آلفا را پشتیبانی می کنند و به وسیله HSLA اندازه گیری می شوند.

در نهایت CSS3 خصوصیاتی شبیه به نمای رنگی معرفی می کند، که خصوصیات نمای رنگی یک ICC ( International Color Consortium ) را جایز می شمرد. توانایی بهبود در نمایش مجدد رنگ در مرورگرها مدت هاست که در شرف وقوع است. چالش واقعی که با رنگ در وب می بینیم این است که با چنین تنوع وسیعی از دیدگاه های در حال وقوع، اگر دقت نکنیم، تفاوت بین اینکه چه رنگ هایی را تعیین می کنیم و چه رنگ هایی واقعا نمایش داده می شوند بسیار بزرگ است .