نوشته‌هایی با برچسب CSS

Less جاوااسکریپت

دی ۱۳م

توسط فرود در CSS

۴ نظر

ساختار CSS بسیار ساده و واضح طراحی شده. کلا هم تمرکز روی سلکتورها و خصایصه. در حالت عادی، نیاز بیشتری هم نیست. ولی گاهی، برای پروژه‌های بزرگتر، کدهایی هستن که بیش از اندازه تکرار میشن. خصوصا با ظهور CSS3 و خصایصی که هنوز برای هر بروزری یه جور باید نوشته بشن. مثلا برای border-radius معمولا اینطور نوشته میشه 

selector {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

میشه یه کلاس به این داد، و هر المنتی که قراره ۳ پیکسل border-radius داشته باشه اون کلاس رو بهش اضافه کرد. ولی برای ۴ پیکسل، باز باید همه چی از نو نوشته بشه :)
حتی در خیلی از موارد، برای همین ۳ پیکسل هم اکثر افراد، ترجیح میدن که کل بلوک رو تکرار کنن. این یعنی کلی تکرار بی مورد!
ساختار اصلی CSS این امکان رو در اختیار شما نمیذاره. ولی Less میتونه خیلی کمک کنه!
این کتابخونه که برای node.js هم وجود داره، به شما یک زبان ساده تر از CSS و کوتاهتر البته، معرفی میکنه، و بعد، هم میشه در طرف کلاینت، و هم در طرف سرور (البته با node.js) اون رو تبدیل به CSS کرد.
برای استفاده از یه فایل less باید اینطوری عمل بشه، اول فایل less رو به صفحه اضافه کنید بعد خود اسکریپت less رو (حتما بعد از فایل less باید اضافه بشه ) : 

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

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

خوب حالا میرسیم به روش نوشتن less .
دقیقا مثل CSS این less هم از بلاکها تشکیل شده و دو مفهوم متغیر و تابع رو هم معرفی میکنه.

متغیرها
متغیرها با @ معرفی میشن به اینصورت : 

  // LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

تبدیل میشه به : 

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

در Less کامنت تک خطی هم وجود داره، (با دوتا اسلش) که در CSS نهایی دیده نمیشن.
الان، color یه متغیره که در بلاکها ازش استفاده شده، و به راحتی میتونید از این روش استفاده کنید و رنگهای توی طراحی رو به یکباره عوض کنید بدون اینکه نیاز باشه تک تک المانها رو دست بزنید، فقط با تغییر مقدار متغیر.
ادامه مطلب

, , ,

Twitter bootstrap

آذر ۲۹م

توسط فرود در CSS

۱۰ نظر

قبلا درباره فریم وورکهای CSS (به صورت خاص blueprint)نوشتم. اینبار هم میخوام درباره یه فریم وورک CSS بنویسم که یه کم با blueprint متفاوته.

این فریم وورک توسط توییتر ارایه داده شده و گسترش داده میشه. یه تفاوت عمده هم با blueprint داره و اونهم استفاده بسیار زیاد این فریم وورک از CSS 3 و قابلیتهای جدیدشه. علاوه بر اون یه سری پلاگینهای مربوط به jQuery هم ارایه شده که با این فریم وورک کار میکنن و خیلی ساده باعث بهتر شدن استفاده از اون میشن، که البته استفاده از اونها کاملا اختیاریه و بدون اونها هم هیچ مشکلی پیش نمیاد. برای استفاده از این فریم وورک میتونید از اینجا twitter/bootstrap – GitHub بگیریدش،‌یا اینکه با کمک GIT اونو بارگزاری کنید : 

git clone https://github.com/twitter/bootstrap.git

قابلیتهای این فریم وورک خیلی بیشتر از blueprint هستن و امکانات اضافی خیلی زیاد و جالبی دارن که میتونید دموی اون رو اینجا ببینید.
قابلیتهای جالبی، مثل منو، نوار ابزار، هشدارهای متفاوت و جالب، قابلیت layout بندی ساده (بسیار شبیه blueprint اما به صورت کاملتر)‌ استیلهایی برای جداول، فرم و … که باعث میشن این فریم وورک بسیار مفید و کارآمد خواهد بود.
بزرگترین مشکل این فریم وورک برای من، RTL ساپورت نبودنش بود، که دست آخر تصمیم گرفتم خودم انجامش بدم و نتیجش شد این : fzerorubigd/bootstrap – GitHub

تو این یکی یه فایل bootstrap.rtl.css هم هست که باید بعد از خود bootstrap.css به صفحه اضافه بشه و درنهایت صفحه کاملا راست به چپ میشه. (برای دانلودش از این لینک بگیریدش)

مثال خود این فریم وورک، کامل و جامعه. برای راست به چپ هم همون مثال درست کار میکنه :)، فقط فایل CSS رو بعد از (تاکید میکنم،‌بعد از) فایل اصلی اضافه کنید به صفحه.
در دو مورد صفحه HTML یه کم تغییرات میخواد، و حقیقتا نمیدونم twipsy چرا کار نمیکنه :) ولی فکر کنم این تا الان تنها نسخه راست به چپه :))

, , , ,

‌Blueprint CSS

فروردین ۱۹م

توسط فرود در CSS

۸ نظر

یکی از مهمترین قسمتهای برنامه نویسی وب برای من اینه که صفحاتو درست و بدون مشکل از همون اول به صورت مرتب دربیارم و نه اینکه اول کدنویسی رو انجام بدم و بعد تازه بیام و یه دستی بکشم به خروجی…
منتها اینکار خیلی زمانگیر و گاهی هم اعصاب خورد کن میشه. چپ و راست کردن این div ها، تغییر دادن موقعیتشون، خصوصا اگه در حال طراحی یک سایت چند زبانه باشی که یکیش هم راست به چپه!
اوایل چند باری سعی کردم که با CSS خودم یه قالب کلی درست کنم، که موفق نبودم. یه دفعه که داشتم دنبال YAML: YAML Ain’t Markup Language میگشتم، به خاطر شباهت برخوردم به YAML : Yet Another Multicolumn Layout که تصمیم گرفتم تستش کنم ولی کلا ازش خوشم نیومد. زیادی شلوغش کرده بود و سربار زیادی رو به صفحه تحمیل میکرد.
به خاطر تجربه نسبتا ناخوشایندی که با YAML داشتم، تا یه مدت دنبال قالب کاری برای CSS نبودم، تا اینکه اتفاقی برخوردم به Blueprint: A CSS Framework و کلا نظرم عوض شد.
میتونید نسخه آخرشو از اینجا بگیرید یا اینکه از git استفاده کنید : 

git clone  https://github.com/joshuaclayton/blueprint-css.git

این یک CSS Framework خیلی سادست که در نهایت سادگی قابلیتهای فراوانی رو هم به شما میده. سیستمش هم سادست. با اضافه کردن یک (یا سه فایل در اصل که پایینتر توضیح میدم دربارشون ) میتونید از این فریم وورک استفاده کنید :

    <!-- Framework CSS -->
    <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

فایل اولی screen.css فایل اصلیه. این فایل خودش در حقیقت تشکیل شده از چند قسمت که پایینتر دربارشون صحبت میکنم. فایل دوم، برای چاپ صفحه استفاده میشه و به شما این امکان رو میده که صفحات رو خیلی ساده بفرستید برای چاپ، بدون اینکه نیاز به کار خاصی باشه. اما سومی هم که طبق معمول، مربوط میشه به مشکلات IE خصوصا نسخ قدیمی که واقعا مکافات هستن.
در صورتی که دوست داشته باشید میتونید دو فایل دوم رو کنار بگذارید و چیزی رو هم روی مرورگرهای جدید از دست ندید به غیر از یک صفحه مناسب چاپ :) تصمیم با خودتونه.
فایل اصلی خودش ۴ قسمت بوده که توی پوشه src میتونید ببینیدشون، البته نیازی به بودن پوشه src در کار نهایی نیست، چون فایل screen.css حاوی همه قسمتها به صورت فشرده شده هست.
اولین قسمت فایل reset.css هست که من قبلا دربارش صحبت کردم و خودم هم چند نمونه رو معرفی کردم.
قسمت دوم typography.css هستش که حاوی یه سری کلاسهای مناسب برای فرمت دهی متن هست، کلاسهای برای کوچک یا بزرگ کردن، تغییر رنگ پسزمینه به زرد (highlight ) یا برای مخفی کردن (hide) و یه سری کلاس برای مشخص کردن متن (loud ) یا کم کردن تاثیر (quit).
قسمت سوم، در حقیقت سیستم جدول بندی رو برای صفحه ایجاد میکنه و اسمش هم grid.css هست. این سیستم به شما این امکان رو میده که با گذاشتن یه div با کلاس container (و البته showgrid برای نمایش جدول که در زمان طراحی خیلی کمک میکنه) یه سیستم ۹۵۰ پیکسلی داشته باشید که در وسط صفحه قرار میگیره و میتونه برای قرار دادن المنتها ازش استفاده بشه.
مثلا برای چنین شکلی :

ببینید : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Example</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

</head>
	<div class="container showgrid">
		<div id="head" class="span-24" style="background-color : red;"><h1>This is an example</h1></div>
		<div id="navigation" class="span-4" style="background-color : blue;">
			<ul>
				<li>Navigation menu</li>
				<li>Navigation menu</li>
				<li>Navigation menu</li>
				<li>Navigation menu</li>
				<li>Navigation menu</li>
				<li>Navigation menu</li>
			</ul>
		</div>
		<div id="body" class="span-20 last" style="background-color : yellow;">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</p>
		</div>
		<div id="footer" class="span-24" style="background-color : gray; text-align: center;">
			Copyright &copy; 2011
		</div>
	</div>
<body>

</body>
</html>

قسمتهای style که مربوط به رنگ پسزمینه میشه رو کلا در نظر نگیرید اونها رو فقط گذاشتم که ناحیه ها از هم مجزا بشن. دیگه نیازی به سر و کله زدن با float و این جور چیزها نیست. این فریم ورک با ارایه یه سری کلاس آماده به شما اجازه میده که صفحه بندی مورد نظرتونو انجام بدید.
ادامه مطلب

, ,

تگها در HTML

مهر ۳۰م

توسط فرود در HTML

بدون نظر

بارها شده که سعی کردم توصیه کنم به استاندارد سازی صفحات HTML . مساله اصلی استفاده تگهای درسته. اصولا چرا میگن یه تگ رو بهتره استفاده نکنید، به جاش از یه سری تگ دیگه استفاده کنید.
برگردیم به هدف HTML. اوایل هدف از HTML بیشتر نمایش اطلاعات بود و شکل دهی به اونها. به همین دلیل خیلی از تگها به وجود اومدن که عملا برای شکل دهی استفاده میشدن. مثلا تگهای مثل تگ font یا تگ u (برای زیر خط ) یا تگ b (برای حالت بولد) و الی آخر…
اما بعدها با ظهور CSS هدف HTML یه کم تغییر کرد. دیگه مساله نمایش اطلاعات نبود. بیشتر مساله فراهم سازی بستر مناسب برای ارایه اطلاعات بود. نمایش مناسب اطلاعات کلا رفت توی وظایف CSS.
با یه مثال شاید بهتر بشه توضیح داد. مثلا همین تگ b . این تگ از لحاظ معنا، مفهوم بولد بودنه. مخفف همین کلمه bold هم هست. یعنی شما وقتی میخواید یه متن بولد شه از این تگ استفاده میکنید. ولی چرا ما میخوایم یه متن بولد بشه؟؟
احتمالا منظور ما، متمایز کردن متنه، و این وقتی اتفاق میفته که بخوایم (معمولا) یه قسمت از نوشته رو مهم جلوه بدیم.
خوب مشکلات از همینجا شروع میشه. چه دلیلی داره که همه افراد، متن مهم رو بولد نشون بدن؟ شاید من دوست داشته باشم متن مهم من ایتالیک باشه با رنگ پسزمینه زرد.
نظر هر کس این وسط میتونه متفاوت باشه. خوب CSS به دادمون میرسه. ما میتونم تگ b رو کلا دوباره تعریف کنیم :

b {
font-weight : normal;
font-style : italic;
background-color : yellow;
}

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

خوب، اگه بیشتر دقت کنید تمام تگهایی که حذف شدن و توصیه میشه ازشون استفاده نکنید تگهایی از این دست هستن. مثلا تگ center دیگه مفهومی نداره، چون اصولا وسط بودن یه متن مفهومی نداره!(متن رو معمولا برای قشنگتر شدن وسط قرار میدن و منظور خاصی برای تمایز متن ندارن.) تگ u حذف شده، چون زیر خط داشتن متن به خودی خود بی اهمیته. (یعنی چی؟ مثلا میخواید متن مهم رو زیر خط دار کنید؟ خوب اگه مهمه از strong یا em استفاده کنید و با CSS نه تنها زیر خط دار اصلا هر بلایی که دوست دارید سرشون بیارید. یا اینکه میخواید اسامی خاص رو مشخص کنید؟ cite هست و …) و از طرفی زیر خط به راحتی توی CSS قابل ایجاده.
به جای استفاده از تگ i استفاده از تگهای em (یعنی یه متن مهم با درجه اهمیت کمتر از strong ) یا cite (یه اسم خاص) توصیه میشه. برای حذف یا افزودن متن از del و ins استفاده کنید و …
اینطوری صفحه شما به یه بانک اطلاعاتی تبدیل میشه که اصلا اطلاعاتی برای طرز نمایش رو به استفاده کننده تحمیل نمیکنه و این هدف نهاییه. حالا استفاده کننده میتونه اگه دلش خواست با کمک CSS صفحه رو به اون صورتی دربیاره که شما میخواید(یا شاید خود اون شخص میخواد ) . و اگر هم یه رباته، به راحتی صفحه شما رو بررسی کنه و بتونه منظور شما رو از اطلاعات ارایه شده، بفهمه و در اختیار کاربران خودش بگذاره….
– خیلی بیشتر از اینها میشه در این باره بحث کرد، من فقط شروعش میکنم. باقیش با دیگران :) خصوصا که شدیدا خوابم میاد!

, , ,

ادغام تصاویر در CSS

اردیبهشت ۸م

توسط فرود در CSS

بدون نظر

لینک صفحه مثال برای این نوشته : http://cyberrabbits.net/non/css/sprite1/
یکی از راههای بهینه سازی یک صفحه وب، کم کردن تعداد درخواستهای مربوط به صفحه است. یعنی تعداد فایل های جانبی کم باشد و برای نمایش صفحه،‌بروزر نیاز به دانلود فایلهای کمتری داشته باشد.
بعد از یک بررسی ساده به کمک فایرباگ میتونید ببینید که تقریبا بیشتر از ۷۰ درصد درخواستهای سایتها مربوط به عناصری غیر از صفحه اصلی است. خوب این یه کم در مورد CSS مشکل سازه. یعنی معمولا ما تعداد زیادی از عناصر رو داریم که از تصویر پسزمینه استفاده میکنن. حالا چطور میتونیم این مشکل رو مرتفع کنیم؟ یعنی هم عناصرمون تصویر پسزمینه داشته باشن و هم اینکه تعداد فایلهای درخواستی کم بشه؟
جوب توی روشهای قدیمی برنامه نویسی دو بعدی پیدا میشه. چیزی که الان هم توی برنامه نویسی موبایل کاربرد داره و اونهم ادغام تصاویر در یک تصویر و استفاده از اون تصویر تکی.

قبل از ادامه بگم،‌این روش برای عناصری جواب گو مبتونه باشه که اندازه مشخص دارن و تصویر پسزمینه به صورت no-repeat هست. (مثلا دکمه ها،‌منو ها و…)‌در مورد تصاویری که قراره repeat-x یا y یا اصولا repeat بشن کار خاصی نمیشه انجام داد (با یه حقه میشه repeat-x و y رو هم تو این روش جا داد ولی repeat راهی نداره)
برای نمونه این تصویر رو ببینید :

تصویر مورد استفاده در جستجوی گوگل

تصویر مورد استفاده در جستجوی گوگل


این تصویریه که گوگل توی صفحه جستجوش ازش استفاده کرده. میبینید که همه آیتمهای توی صفحه جستجو یکجا تو این تصویر هست.
اول از یه مثال ساده شروع میکنم. میخوام یه لینک رو تبدیل کنم به یه دکمه و برای سه حالتش (hover – active و حالت عادی)‌سه تصویر مختلف بذارم ولی از یه فایل استفاده کنم. قبل از اینکه شروع کنم این صفحه رو ببینید، سمت چپیه حالت عادیه و سمت راستیه حالتی که همه تصاویر با هم هستن. نشانگر ماوس رو روی هر کدوم ببرید، سمت چپیه در هر حالت بازم شروع میکنه به گرفتن تصویر جدید ولی راستیه درست کار میکنه.
تصویر مورد استفاده رو ببینید :
تصویر مورد استفاده در این مثال

تصویر مورد استفاده در این مثال

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

, ,
12»