یک طراح وب » ترفندهای سی اس اس

روش های خلاصه نویسی در سی اس اس

علیها — Tue, 24 Mar 2009 14:32:30 +0000

گاهی اوقات دستورات سی اس اسی که می نویسیم آنقدر زیاد و حجیم می شود که روی سرعت لود شدن سایت تاثیر منفی می گذارد و نظارت و ویراش کردن آن نیز کمی دشوار می شود.

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

در ادامه ی این پست، فرض ِ من بر این است که شما می دانید سی اس اس دقیقا چیست و کمی آن را بلد هستید :)

برای شروع، یکی از دستورات ساده را انتخاب می کنم:

/*sample 1*/
body {
background: #ccc url(/images/bg.jpg) right fixed no-repeat;
}

این یک نمونه از دستور خلاصه شده است. یعنی ما همه ی مقدارهای لازم را به ترتیب به خاصیت background دادیم. حالا اگر بخواهیم همین دستورها را به صورت معمولی و مفصل بنویسیم، نتیجه می شود 5 خط کد:

/*sample 2*/
body {
background-color: #ccc;
background-image: url(/images/bg.jpg);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}

مورد بعدی کمی مهمتر است. خاصیت های margin و padding را در نظر بگیرید. این دو خاصیت معمولا در لا به لای دستورات، زیاد استفاده می شوند. حالا فرض کنید اگر مقدارهای این دو را به صورت مفصل و کامل بنویسید، چقدر به حجم دستوراتتان اضافه می شود!

/*sample 3*/
#content {
margin: 20px 10px 15px 10px;
padding: 10px 5px 10px 5px;
}

این، شکل خلاصه شده ی این دستورات است. درواقع به ترتیب، چهار جهت ِ top، right، bottom و left را در یک خط، مقدار دادیم. برای اینکه ترتیب جهت ها را درک کنید، به مثال زیر توجه کنید:

/*sample 4*/
margin: top / right / botoom / left;

دو روش دیگر برای خلاصه کردن مقدار های padding و margin وجود دارد که اولی به صورت زیر است:

/*sample 5*/
margin: 20px 10px;

این یعنی دو جهت ِ top و botoom دارای مقدار 20px هستند و دو جهت ِ right و left دارای مقدار 10px. متوجه شدید دیگر؟

آخرین روش خلاصه نویسی برای خاصیت های padding و margin به این شکل می باشد:

/*sample 6*/
margin: 20px;

به این معنی که هر چهار جهت ِ top، right، bottom و left دارای مقدار 20px می باشند.
تمامی موارد گفته شده ی بالا در مورد خاصیت padding نیز صدق می کند.

خب، قضیه ی padding و margin دیگر تمام شد. حالا یک روش نسبتا متفاوت را با هم امتحان می کنیم :)

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

در اینجور مواقع ما می توانیم یک بار همه ی این خاصیت ها را برای این گونه عناصر بنویسیم و از تکرار کردن آن ها بپرهیزیم. چگونه؟

فرض می کنیم که ما دو عنصر داریم که قرار هست خاصیت هایشان یکسان و مشترک باشد. عنصر اول، تگ p و عنصر دوم، تگ h3 است. حالا خیلی زیبا و قشنگ، یک بار خاصیت های موردنظر را می نویسیم برای هردو عنصر. اینگونه:

/*sample 7*/
p, h3 {
background: #ccc;
color: #333;
font: 12px Tahoma;
margin: 10px;
padding: 5px;
}

در اینجا ما با گذاشتن یک (,) بین دو عنصر، این منظور را رساندیم که دستورات نوشته شده هم برای تگ p درنظر گرفته شود، هم برای تگ h3. این را هم بگویم که از این روش می توانید برای بی نهایت عنصر استفاده کنید و محدودیتی از این بابت نیست.

موارد اصلی و مهم همین هایی بود که ذکر کردم و فقط دو مورد جزئی می ماند که برای کامل شدن بحث، به آن ها هم اشاره می کنم.

اولی در رابطه با خلاصه کردن کد رنگ است که از 6 کاراکتر به 3 کاراکتر تبدیل می شود.

/*sample 8*/
background-color: #cccccc;

در این مثال ما یک رنگ خاکستری ِ روشن تولید کردیم. همانطور که می بینید از 6 کاراکتر c استفاده کردم. حالا اگر به جای 6 کاراکتر c فقط از 3 کاراکتر استفاده کنم، باز همان رنگ خاکستری روشن تولید می شود.

/*sample 9*/
background-color: #ccc;

برای مورد آخر هم به خلاصه نویسی خاصیت فونت می پردازم. مثال زیر، خود گویای همه چیز است:

/*sample 10*/
#content {
font: bold 12px Tahoma;
}

ترتیب ِ قراردادن ِ مقدارها را باید رعایت کنید حتما:

/*sample 11*/
#content {
font: font-style and font-weight / font-size / font-family;
}

خب، بحث مان دیگر تمام شد. چیزی که قابل توجه است این است که من برای تمامی خاصیت هایی که می توان آن ها را خلاصه نویسی کرد اینجا مثال نیاورم. مثل خاصیت border که دیگر این ها را می گذارم به عهده ی خودتان. با کمی حوصله به خرج دادن و الگو برداری از همین مثال هایی که زدم، می توانید برای خاصیت های دیگر هم خلاصه نویسی کنید.

اگر سوالی بود، در خدمت هستم :)

12 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

علیها — Wed, 08 Oct 2008 21:09:19 +0000

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

1. فلش
2. جاوا اسکریپت
3. سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

1. فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “123 flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

2. جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

3. سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی 6 به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو:

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:




creating menus with CSS | Demo!

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

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی 6 و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های 6 به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

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

30 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو

علیها — Wed, 17 Sep 2008 21:42:40 +0000

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

همونطور که میدونید مونیتورهای نسل جدید، اکثرا عریض (wide) شده اند و رزولوشن در آنها افزایش یافته. این مورد بسیار مهم و قابل اهمیت است! چرا که اگر شما در مقدار دهی به حاشیه بلوک های اصلی قالب، از واحد مناسبی استفاده نکنید، قطعا دچار مشکل می شوید!
واضح تر میگویم. به عنوان مثال مونیتور شما دارای رزولوشن 1024×768 هست! قالب خود را طراحی میکنید. بعد همین قالب را در رزولوشن 1200×800 نگاه میکنید! بر خلاف انتظارتان محتوای قالب به سمت چپ یا سمت راست صفحه نزدیک شده است! در صورتی که در حالت عادی باید وسط صفحه قرار داشته باشد! اما نگران نباشید! خیلی راحت میشود مشکل را برطرف کرد. درواقع شما واحد مناسبی را برای مقداردهی به حاشیه ها (margin) انتخاب نکرده اید! مثلا از واحد px یا em استفاده کرده اید!
حالا چکار باید بکنیم؟!
باید از واحد درصد – % – استفاده کنید! مثلا بجای اینکه بگویید:

Margin-left: 370px;

بگویید:

Margin-left: 30%;

بیشتر توضیح میدم. واحدهای px یا em، یک مقدار ثابت ایجاد میکنن. یعنی مثلا همیشه حاشیه ی فلان عنصر 300 پیکسل از سمت راستش فاصله داشته باشه! خب، این کار اشتباه نیست، اما مشکل زمانی ایجاد میشه که رزولوشن تغییر بکنه! در این صورت هست که محتوای قالب، دیگه وسط صفحه قرار نمیگیره و مثلا به سمت راست یا چپ نزدیک میشه!
اما وقتی که به صورت درصدی، به حاشیه ی فلان عنصر، مقدار میدید، دیگه این مقدار، ثابت نیست. یعنی با توجه به رزولوشن، مثلا 20 درصد از سمت راست، فاصله ایجاد میشه!
برای درک راحت تر قضیه، تصاویر زیر رو آماده کردم. ببینید:

در تصویر زیر، طراح با استفاده از واحد پیکسل، به بلوک ها فاصله داده. در رزولوشن 1024×768، هیچ مشکلی دیده نمیشه و همه چیز سر جاش هست:

اما همین طرح در رزولوشن 1200×800، به سمت راست نزدیک شده:

طراح به اشتباه خودش پی برد و واحد درصد – % – رو جایگزین واحد پیکسل – px – کرد:

با تغییر رزولوشن، هیچ جابجایی ای در قالب ایجاد نشد و همه چیز همونطور هست که باید باشه:

البته نکته‌ ای که هست، ما برای وسط آوردن طرح کلا از این روش استفاده نمی‌کنیم. این ها فقط مثال بودند برای درک واحد درصد.

ضمنا یک موردی رو هم بگم. استفاده از واحد em برای مقداردهی به حاشیه ها و غیره، اصلا توصیه نمیشه. کاربرد این واحد بیشتر برای تعیین اندازه ی فونت است!

خب، برای این قسمت، تا همینجا کافیه. اگر جالب نبود، بگذارید به حساب بی تجربگی بنده ;)

10 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.

رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » یک

علیها — Sun, 07 Sep 2008 18:06:31 +0000

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

کدام مرورگرها؟!
وجود مرورگرها و وسیله های مختلف، باعث شده که این روزها بیش از پیش نگران این باشیم که قالب طراحی شده مان در این مرورگرها و وسیله ها چطور دیده میشه. بغیر از این، افزایش رزولوشن در مانیتورها ی جدید و واید شدن آنها نیز از جمله مسائلی هست که نمیتوان به سادگی از آن عبور کرد.
در مرحله ی اول، قالب سایت شما باید در مرورگرهایی مثل اینترنت اکسپلورر 6 و 7 (و ترجیحا 8)، فایرفاکس و اُپرا که از مرورگرهای پرمصرف هستند، یک شکل و یکسان نمایش داده شود. پس قالب خود را حتما در این مرورگرها تست کنید.
البته اگر به سیستم های عامل دیگری به جز ویندوز دسترسی دارید (مانند مک و لینوکس) بد نیست که قالب سایت خود را در مرورگرهای سافاری و کنکرر نیز تست نمایید. (لازم به ذکر است که سافاری، بر روی ویندوز هم قابل نصب است!)
البته با وجود ناسازگاری هایی که مرورگرهایی مثل IE (خصوصا نسخه ی 6 آن) دارند کمی یکسان سازی مشکل میشود. اما نگران نباشید، هک ها و ترفندهایی وجود دارند که با استفاده از آن ها میتوان بسیاری از این مشکلات را برطرف نمود! (در این راستا، این مقاله را نیز به شما توصیه میکنم!).

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

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

گام دوم: از کدنویسی کثیف و درهم بپرهیزید!
یادتان باشد که هرگاه به دستوری احتیاج بود، آن را بنویسید، در غیر این صورت لزومی ندارد که از دستورات تکراری و بی مورد استفاده کنید! به مثال زیر توجه کنید:

.content {
Padding: 5px;
Margin: 10px;
Padding-right: 8px;
Font: bold 130% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
Font-size: 18px;
}

میبینید چقدر کثیف و غلط کدنویسی شده؟! متاسفانه این دستورات رو از لا به لای پرونده ی سی اس اس یکی از سایت های معروف فارسی پیدا کردم و قصدم از این کار این بود که خیال نکنید چنین چیزی وجود خارجی نداره و من در آوردی هست!!
شکل صحیح مثال بالا:

.content {
Padding: 5px 8px 5px 5px;
Margin: 10px;
Font: bold 120% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
}

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

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

خب فکر میکنم فعلا همین سه مورد کافی باشه. در قسمت بعد تعدادی از ترفندهای اشاره شده را معرفی و بررسی میکنیم. پس با من باشید!

5 دیدگاه | فرستادن به: del.icio.us

علیها دات آی آر توسط ایرساوب پشتیبانی می شود.