در میان عناصر تعریف شده در CSS مجموعه ی انگشت شماری از عناصر قرار داد که به عناصر کاذب یا Pseudo Elements معرف اند ( گاهی اوقات آن ها را کلاس های کاذب هم می نامند) با اینکه کاربرد های متنوع و جالبی دارند اما کمتر کسی را دیده ام که از آن استفاده کند. شاید دلیل آن این باشد که هنوز اینترنت اکسپلورر آن ها را به طور کامل پشتیبانی نمی کند، اما برای کسانی که زیاد به IE علاقه ای ندارند ایده مناسبی است.

معروفترین آن ها دو عنصر before و after است. اما قبل از توضیح این دو لازم است عنصر content را نیز بشناسید. این عنصر در CSS2 تعریف شده و به طور خودکار محتویات را قبل یا بعد از یک انتخابگر CSS پیوست می کند. به عبارت دیگر نوع مولفه را تعیین و متعاقبا چگونگی نمایش آن را بیان می کند و همیشه با before و after بکار می رود.

اما خود before و after برای کنترل مقدار عنصر content به کار می رود. به طوری که after مقدار را بعد از مولفه قرار می دهد و before مقدار را قبل از آن. معروفترین مقادیری که عنصر content می تواند اختیار کند به شرح زیر است:

String : همانطور که از نامش پیداست یک رشته را اختیار می کند که می تواند یک علامت خاص یا یک واژه باشد. نمونه زیر را ببینید، عنصر نامبرده علامت ~ را اختیار کرده است. به طوری که این علامت قبل از مولفه li قرار می گیرد: ادامه مطلب …

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

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

در اولین مبحث به رنگ ها می پردازیم. بهترین روش عمومی برای کاربرد رنگ در CSS استفاده از آن در مبنای شانزده (هگزادسیمال) بین 00 تا FF است، که قبل از آن نیز علامت پوند (#) می آید. هر رنگ 6 رقم طول دارد، دو رقم برای هر بایت.

دو رقم اول برای درجه رنگ قرمز، دو رقم دوم درجه رنگ سبز و و دو رقم آخر شدت رنگ آبی را نشان می دهد. نکته ای که بیشتر افراد نمی دانند این است که هر رنگ مبنای 16 از سه جفت تشکیل شده است، شما می توانید یک رقم از هر جفت رنگ امن را حذف کنید. برای مثال مقدار 336699 با 369 برابر خواهد شد. ادامه مطلب …

در پست قبلی مقدمه ای در مورد 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 این حقیقت است که در زمان تایپ یا حروفچینی قدیمی، اپراتور میله های کوچکی از سرب را بین خطوط قرار می داد تا بتواند بین آن ها فاصله ایجاد کند. منبع: کتاب جناب توماس پاول