یک وبلاگ دیگر از یک برنامه نویس دیگر
CSS
هر چیزی که به نظرم برسه، درباره CSS البته…
Less جاوااسکریپت
دی ۱۳م
ساختار 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 (به صورت خاص 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
فروردین ۱۹م
یکی از مهمترین قسمتهای برنامه نویسی وب برای من اینه که صفحاتو درست و بدون مشکل از همون اول به صورت مرتب دربیارم و نه اینکه اول کدنویسی رو انجام بدم و بعد تازه بیام و یه دستی بکشم به خروجی…
منتها اینکار خیلی زمانگیر و گاهی هم اعصاب خورد کن میشه. چپ و راست کردن این 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 © 2011
</div>
</div>
<body>
</body>
</html>
قسمتهای style که مربوط به رنگ پسزمینه میشه رو کلا در نظر نگیرید اونها رو فقط گذاشتم که ناحیه ها از هم مجزا بشن. دیگه نیازی به سر و کله زدن با float و این جور چیزها نیست. این فریم ورک با ارایه یه سری کلاس آماده به شما اجازه میده که صفحه بندی مورد نظرتونو انجام بدید.
ادامه مطلب
ادغام تصاویر در CSS
اردیبهشت ۸م
لینک صفحه مثال برای این نوشته : http://cyberrabbits.net/non/css/sprite1/
یکی از راههای بهینه سازی یک صفحه وب، کم کردن تعداد درخواستهای مربوط به صفحه است. یعنی تعداد فایل های جانبی کم باشد و برای نمایش صفحه،بروزر نیاز به دانلود فایلهای کمتری داشته باشد.
بعد از یک بررسی ساده به کمک فایرباگ میتونید ببینید که تقریبا بیشتر از ۷۰ درصد درخواستهای سایتها مربوط به عناصری غیر از صفحه اصلی است. خوب این یه کم در مورد CSS مشکل سازه. یعنی معمولا ما تعداد زیادی از عناصر رو داریم که از تصویر پسزمینه استفاده میکنن. حالا چطور میتونیم این مشکل رو مرتفع کنیم؟ یعنی هم عناصرمون تصویر پسزمینه داشته باشن و هم اینکه تعداد فایلهای درخواستی کم بشه؟
جوب توی روشهای قدیمی برنامه نویسی دو بعدی پیدا میشه. چیزی که الان هم توی برنامه نویسی موبایل کاربرد داره و اونهم ادغام تصاویر در یک تصویر و استفاده از اون تصویر تکی.
قبل از ادامه بگم،این روش برای عناصری جواب گو مبتونه باشه که اندازه مشخص دارن و تصویر پسزمینه به صورت no-repeat هست. (مثلا دکمه ها،منو ها و…)در مورد تصاویری که قراره repeat-x یا y یا اصولا repeat بشن کار خاصی نمیشه انجام داد (با یه حقه میشه repeat-x و y رو هم تو این روش جا داد ولی repeat راهی نداره)
برای نمونه این تصویر رو ببینید :
تصویر مورد استفاده در جستجوی گوگل
این تصویریه که گوگل توی صفحه جستجوش ازش استفاده کرده. میبینید که همه آیتمهای توی صفحه جستجو یکجا تو این تصویر هست.
اول از یه مثال ساده شروع میکنم. میخوام یه لینک رو تبدیل کنم به یه دکمه و برای سه حالتش (hover – active و حالت عادی)سه تصویر مختلف بذارم ولی از یه فایل استفاده کنم. قبل از اینکه شروع کنم این صفحه رو ببینید، سمت چپیه حالت عادیه و سمت راستیه حالتی که همه تصاویر با هم هستن. نشانگر ماوس رو روی هر کدوم ببرید، سمت چپیه در هر حالت بازم شروع میکنه به گرفتن تصویر جدید ولی راستیه درست کار میکنه.
تصویر مورد استفاده رو ببینید :
تصویر مورد استفاده در این مثال
یادداشت : این تصویر رو همینجوری توی آرشیوم پیدا کردم نمیدونم از کجا اومده ولی کار من نیست.
ادامه مطلب
متفرقه-۲
اردیبهشت ۵م
اول اینکه بیتا چند روزی هست که مریضه و اصلا حس نوشتن ندارم. این بود که یه کم فاصله افتاد بین این نوشته و نوشته قبلی
دوم اینکه،منتظرم تا چند روز دیگه Ubuntu رو بگیرم، نسخه ۱۰.۰۴ که پنجشنبه میاد (۹ اردیبهشت)
سوم اینکه همین جوری رفتم برای گرفتن رفرنس CSS3 و دیدم که CSS2 هم بعد از ۱۰ سال یه اصلاحیه خورده (سپتامبر ۲۰۰۹ )اونم گرفتم، و بعد یه تبدیلش کردم به یه نسخه قابل استفاده در DevHelp (با ایجاد کردن یه فایل ایندکس و کلی دردسر، البته اگه RegEx در دسترس نبود :) ) این فایل رو که یه کم هم دستکاری شده همین جا میذارم تا کسانی که میخوان دانلود کنن، فقط یادتون باشه یه فایل CSS بود که از سایت W3C بارگزاری میشد که من اونو هم تو این اضافه کردم و فایلها رو دستکاری کردم که اون فایل CSS رو از لوکال باز کنن، که شاید بعضی ها دوست نداشته باشن. اگه مشکلی با این مساله داشتید خود فایل اصلی رو از W3C بگیرید و فقط یه فایل css21.devhelp تو این هست اونو توی فولدرش کپی کنید بعد کل فولدر رو توی
~/.local/share/devhelp/books
کپی کنید یا اینکه فولدر رو اونجا لینک کنید. فقط یادتون باشه اسم فولدر css21 باشه یا اینکه اسم فایل css21.devhelp رو عوض کنید با اسم پوشه ای که میسازید. همین و تمام.
طبیعیه که DevHelp باید نصب باشه.
همین :) فقط اینو نوشتم که یادم نره وبلاگ هم هست و گرنه مطلب اصلیمو چند وقته دارم آماده میکنم ولی هنوز تموم نشده با این مریضی بیتا :((
