آموزشهایCSS-جادوی طراحی وب!

sky boy · 2012 , December 29

تنظیم موقعیت و حذف فاصله بلاک های div

CSS کاربردی

اگر یک طراح وب تقریبا حرفه ای یا لااقل علاقمند به طراحی قالب شخصی برای وبلاگ یا سایت خود باشید،
حتما با کدهای css آشنا هستید و بارها از آن در شکل دهی فرم و ظاهر صفحات استفاده کرده اید؛
اگرچه نمای کلی کار با css چندان پیچیده نیست ولی جزئیات و ریزه کاری ها همیشه باعث می شوند که نکاتی هرچند ساده، به نظر مبهم و حل نشده باقی بمانند،
به همین خاطر در این مطلب یکی از شایع ترین این موارد را با هم مرور خواهیم کرد و آن تنظیم فاصله بلاک ها و لایه های div از حاشیه صفحه
و همچنین قرار دادن آن در وسط (center) به کمک css است.
خاصیت هایی که برای وسط (center) قرار دادن، ایجاد یا حذف فاصله (حاشیه) به آنها نیاز داریم margin و padding هستند.

حذف حاشیه بلاک با استفاده از css

برای حذف حاشیه بین بلاک div و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>حذف حاشیه با استفاده از css</title>
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
.block{
    width:auto;
    height:200px;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=CC3]#CC3[/URL]
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
 با استفاده از ویژگی های margin و padding و مقادیر صفر برای تگ body، فاصله حاشیه های صفحه، تنظیم می شود.
</body>
</html>

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

sky boy · 2012 , December 29

نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css

تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است،
اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد،
در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> تنظیم یک بلاک در وسط صفحه با css</title>
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
.block{
    width:300px;
    height:200px;
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=CC3]#CC3[/URL]
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
 برای تنظیم یک بلاک در وسط صفحه از margin-left و margin-right با مقادیر auto برای آن بلاک استفاده می کنیم.
</body>
</html>

توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.

sky boy · 2012 , December 29

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است،
به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند
تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود،
اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود،
لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند،
در این مطلب قصد دارم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش بدم.
عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است،
البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3:

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

HTML:

<style type="text/css">
img {
    opacity:0.4;
    filter:alpha(opacity=40);
}
</style>

sky boy · 2012 , December 29

ایجاد بلاک و تصور شفاف، سازگار با تمام مرورگرها:

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

HTML:

.transparent {
    width: 100%; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

توضیح:
- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).
- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.
- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.
- opacity نیز خاصیتی استاندارد در css3 است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.
- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.

sky boy · 2012 , December 29

حذف اسکرول افقی (horizontal scroll) با css

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

چرا اسکرول افقی در صفحه یا بلاک div ایجاد می شود؟

علت عمده این مشکل به تعریف نادرست یا ناهماهنگ عرض اِلمان های صفحه یا بلاک div مربوط می شود،
مثلا اگر بلاکی با پهنای 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهید (به صورت تودرتو (nested) یا آشیانه ای)،
مسلما در حالت عادی با مشکل اسکرول افقی و نواری آبی رنگ در زیر آن مواجه خواهید شد،
یا اگر در اسکلت بندی قالب سایت یا وبلاگ خود، عرض زیادی برای چارچوب کار در نظر بگیرید که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد،
مرورگر به صورت خودکار اسکرول افقی را نشان خواهد داد.

چرا باید اسکرول افقی را حذف کنیم؟

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

sky boy · 2012 , December 29

راه حل از بین بردن اسکرول افقی با css

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد،
می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد،
به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

HTML:

<style type="text/css">
.class{
 overflow:hidden; /*overflow:auto; overflow:scroll; overflow:visible;*/
}
</style>

اما این ویژگی بیشتر در اسکرول عمودی کاربرد دارد و برای اسکرول افقی باید آن را به صورت زیر تغییر داد.

HTML:

<style type="text/css">
.class{
 overflow-x: hidden; /*حذف اسکرول افقی*/
 overflow-y: auto; /*اسکرول عمودی*/
}
</style>

این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.

sky boy · 2012 , December 29

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی

در برخی از نسخه های مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند،
هرچند بیشتر کاربران از ورژن های به روزتر استفاده می کنند،
اما جهت اطلاعات بیشتر، برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم.

HTML:

<style type="text/css">
.class{
 overflow: -moz-scrollbars-vertical;
 overflow-x: hidden;
 overflow-y: scroll;
}
</style>

حذف اسکرول بار برای textarea

در فرم های html برای عنصر textarea نیز روشی که در بالا توضیح دادیم کاربرد دارد، اما با خاصیت های html نیز می توان اسکرول افقی textarea را در فرمها از بین برد،
برای این منظور از wrap و مقدار virtual استفاده کنید.

HTML:

<textarea wrap="virtual" cols="20" rows="10"></textarea>

sky boy · 2012 , December 29

تنظیمات css مخصوص اینترنت اکسپلورر

شاید به عنوان یک کاربر در دنیای وب، هر روز به سایت ها و وبلاگ های مختلفی سر بزنیم و بیش از هر چیز، رسیدن به محتوای مورد نظر برایمان مهم باشد،
فارغ از اینکه ظاهر یک سایت چگونه است و چه معایب و محاسنی دارد، مطلبمان را می خوانیم و در آخر هم آن صفحه را ترک می کنیم،
در حالی که برای مدیران حرفه ای وبسایت ها و وبلاگ ها، اینکه همه کاربرانشان بتوانند از محتوای آنها به یک شکل استفاده کنند،
اهمیت زیادی دارد، جالب است اگر بدانید که مرورگرهای وب اگرچه از قوانین مشترکی پیروی می کنند،
اما هر کدام در نحوه تفسیر این قوانین ساز خودشان را می نوازند، البته هرچه که پیش تر می رویم، سازگاری مرورگرها و یکسان سازی آنها نیز بیشتر می شود،
اما دردسر همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر (Internet Explorer) در این بین سرآمد مرورگرهای غیر استاندارد است،
به همین دلیل شرکت مایکروسافت (خالق و مالک این مرورگر) که گویا از شاهکار خود اطلاع داشته،
برای تنظیم استایل css مخصوص مرورگر خود (در نسخه های مختلف)، قابلیتهایی تحت عنوان پیام های شرطی یا (Conditional Comments) و هک هایی ویژه پیشنهاد داده است
که بد نیست نگاهی به آنها بیندازیم.

چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را انجام دهیم؟

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

sky boy · 2012 , December 29

برای تنظیم یک ویژگی css خاص اکسپلورر، چه روش هایی وجود دارد؟

معمول ترین و متداول ترین روش استفاده از پیام های شرطی یا (Conditional Comments) است (که در ادامه به طور مفصل خواهم گفت)،
شیوه های دیگری تحت عنوان هک (با هک سایت فرق دارد!) یا CSS Hacks نیز وجود دارند که در واقع
به معنی استفاده از علائم مخصوص در تعریف کدهای css و قابل پردازش توسط ورژن های خاصی از مرورگر اینترنت اکسپلورر است.

نحوه تنظیم استایل css مخصوص مرورگر اینترنت اکسپلورر

برای تنظیم استایل مخصوص مرورگر اینترنت اکسپلورر، ابتدا باید سایت، وبلاگ یا قالب طراحی شده را با برنامه هایی نظیر IETester که در آدرس www.my-debugbar.com وجود دارد،
بررسی کنید، اگر موردی به نظرتان دچار ایراد است، سعی کنید کلاس یا آی دی css مربوط به آن را پیدا کنید
و پس از اعمال تغییرات (قبل از اعمال تغییرات از استایل فعلی پشتیبان بگیرید) نتیجه را دوباره امتحان کنید، تا جایی که مشکل حل شود،
حال تکه کد اختصاصی که مربوط به هر ورژن از اکسپلورر می شود (و با آن کد، مشکل در آن ورژن مخصوص حل می شود) را
درون یک فایل دیگر کپی کنید (تنها کافی است کلاس یا آی دی مورد نظر را به همراه قسمتی که خاص مرورگر اکسپلور است، کپی نمائید)
تا آن را با دستورات زیر در صفحه به طور جداگانه ایمپورت کنیم.

sky boy · 2012 , December 29

دستورات یا پیام های شرطی در مرورگر اینترنت اکسپلورر

دستورات شرطی در اکسپلورر با علائم خاصی تعریف می شوند:

HTML:

<!--[if IE]>
آدرس فایل استایل مخصوص مرورگر اینترنت اکسپلورر
<![endif]-->

توضیح:
- حالت معمول ایجاد یک پیام در صفحات html استفاده از <-- !--> است، همانطور که می بینید این شرط ها نیز مبتنی بر همین قاعده هستند.
- این دستور به مرورگر اکسپلورر می گوید که باید از مقادیر موجود در آن استفاده کند (در واقع مقادیر موجود در این شرط، تنها برای اینترنت اکسپلورر قابل استفاده است و سایر مرورگرها با آن مثل یک پیام معمولی برخورد می کنند)، جالب است که بدانید درون این شرط می توان هر عبارت یا کدی قرار داد و فقط محدود به ایمپورت استایل css نیست،
مثلا می توان به کاربر پیام داد که مرورگر او قدیمی است و باید از مرورگر دیگری استفاده کند و...
- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض (که مخصوص تمام مرورگرها است) ترجیحا در قسمت هِدر و بین تگ های head قرار گیرند.

تنظیمات مخصوص ورژن های مختلف و معنی آنها

در زیر لیستی تقریبا کامل از تنظیمات استایل css مخصوص ورژن های مختلف مرورگر اینترنت اکسپلورر به همراه معنی عبارات آن آمده است.
ایمپورت استایل مخصوص اینترنت اکسپلورر (تمام ورژن ها)

HTML:

<!--[if IE]>
<link href="style/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.

sky boy · 2012 , December 29

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 6

HTML:

<!--[if IE 6]>
<link href="style/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 7

HTML:

<!--[if IE 7]>
<link href="style/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 8

HTML:

<!--[if IE 8]>
<link href="style/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 9

HTML:

<!--[if IE 9]>
<link href="style/ie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

sky boy · 2012 , December 29

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 6

HTML:

<!--[if gt IE 6]>
<link href="style/gtie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 7

HTML:

<!--[if gt IE 7]>
<link href="style/gtie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 8

HTML:

<!--[if gt IE 8]>
<link href="style/gtie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح:
- عبارت gt به معنی greater than یا بزرگتر از، است.

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 7

HTML:

<!--[if lt IE 7]>
<link href="style/ltie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 8

HTML:

<!--[if lt IE 8]>
<link href="style/ltie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 9

HTML:

<!--[if lt IE 9]>
<link href="style/ltie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح: عبارت lt به معنی less than یا کوچکتر از، است.

sky boy · 2012 , December 29

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 6 و خود آن

HTML:

<!--[if gte IE 6]>
<link href="style/gteie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 7 و خود آن

HTML:

<!--[if gte IE 7]>
<link href="style/gteie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 8 و خود آن

HTML:

<!--[if gte IE 8]>
<link href="style/gteie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح:
- عبارت gte به معنی greater than equal یا بزرگتر مساوی، است.

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 7 و خود آن

HTML:

<!--[if lte IE 7]>
<link href="style/lteie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 8 و خود آن

HTML:

<!--[if lte IE 8]>
<link href="style/lteie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 9 و خود آن

HTML:

<!--[if lte IE 9]>
<link href="style/lteie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح:
- عبارت lte به معنی less than equal یا کوچکتر مساوی، است.

sky boy · 2012 , December 29

ایمپورت استایل در حالتی که مرورگر اینترنت اکسپلورر نباشد

HTML:

<!--[if !IE]>
<link href="style/notie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

هک های مخصوص اینترنت اکسپلورر

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

sky boy · 2012 , December 29

هک با عبارت html+*

در این روش یک آی دی یا کلاس را دو بار به صورت عادی و با html+* ایجاد می کنند، به عنوان مثال کد زیر دو ویژگی متفاوت برای یک آی دی تعریف می کند،
قسمتی که html+* در ابتدای آن قرار دارد، تنها در مرورگر IE 7 پردازش می شود.

HTML:

<style type="text/css">
#my-id{
    border:#333 2px dotted;
}
*+html #my-id{
    border:#333 2px solid;
}
</style>

هک با زیر خط یا underline

روش هک زیر خط یا underline که عنوان صحیح تر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس، ویژگی مورد نظر را با یک زیرخط در ابتدای آن تعریف می کنند.

HTML:

<style type="text/css">
body{
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    _font-size:10px;
    _font-family:Tahoma, Geneva, sans-serif;
}
</style>

sky boy · 2012 , December 29

هک با استفاده از علامت *ستاره

اين روش هک هم براي مرورگر اينترنت اکسپلورر ورژن 7 به پائين به کار مي رود، که در آن براي عناصر خاص اکسپلورر يک ستاره در ابتداي آنها قرار مي دهند.

HTML:

<style type="text/css">
.my-class{
    background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=CCC]#CCC[/URL]
    *background-color:[URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=0CC]#0CC[/URL]
}
</style>

هک با قرار دادن عبارت 9/

اين شيوه هک هم براي مرورگر اينترنت اکسپلورر ورژن 9 يا 8 و پائين تر به کار مي رود، در اين روش براي ويژگي خاص اکسپلورر، عبارت 9/ را به آخر آن اضافه مي کنند.

sky boy · 2012 , December 29

استفاده از فونت فارسی در وب با CSS

یکی از قابلیت های خوب افزوده شده به CSS در نسخه 3، امکان استفاده از فونت هایی است که پیش از این تنها در سیستم عامل کاربران قابل نمایش و استفاده بودند،
چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند،
پشتیبانی می شود و بقیه موارد به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد،
از این رو توسعه دهنده گان CSS، به فکر راه حل این مشکل افتادند تا اینکه در نسخه سه خاصیتی با نام font-face@ معرفی شد،
البته در ادامه خواهیم دید که استفاده از این خاصیت آنچنان هم به سادگی حالت معمول تعریف یک فونت نیست و به اصطلاح ریزه کاری هایی دارد.

مزایا و معایب استفاده از فونت فارسی در وب

قبل از پرداختن به ادامه آموزش، بد نیست به طور مختصر به مزایا و معایب استفاده از فونت فارسی در وب بپردازیم،
همان طور که می دانید فونت های از پیش تعریف شده و استاندارد وب (فونت های امن وب!) برای زبان فارسی محدود به چند نوع (از جمله Tahoma ، Arial و...) است،
از این جهت استفاده از سایر فونت ها به دلیل تنوع، زیبایی و کمک به خواناتر شدن مطالب می تواند مفید باشد،
اما متاسفانه این کار موجب افزایش حجم کلی صفحه نیز خواهد شد، چرا که اکثر فونت ها معمولا حجمی بیش از 30 کیلوبایت دارند و این در مجموع باعث کندتر شدن سرعت بارگذاری صفحات می شود، البته شاید در نگاه اول این اندازه چندان به چشم نیاید،
اما وقتی حجم سایر المان ها، استایل ها و فایل های جاوا اسکریپت احتمالی را به آن اضافه کنیم،
در مجموع قالب سایت یا وبلاگ به اصطلاح سنگینی از لحاظ حجم خواهیم داشت، از طرفی مخصوصا در مورد فونت های فارسی و در برخی مرورگرها،
ظاهرا برای کاراکترهای خاصی، هنوز مشکلاتی وجود دارد، لذا توصیه می شود از این قابلیت بر اساس نیاز و با سنجش سایر شرایط گفته شده استفاده شود.

sky boy · 2012 , December 29

آشنایی با خاصیت font-face@ در css3

همان طور که گفتیم، خاصیت font-face@ برای پایان دادن به محدودیت استفاده از فونت های خاص در وب تعریف شده است،
اما متاسفانه این خاصیت به طور کامل تنها در برخی مرورگر ها و در نسخه های به روزتر آنها پشتیبانی می شود
(البته با روشی که در ادامه خواهیم دید، می توان با ترفندهایی در سایر مرورگرها نیز از آن استفاده کرد)،
مرورگرهای فایرفاکس، اپرا، گوگل کروم و سافاری از این خاصیت به صورت پیش فرض پشتیبانی می کنند (از دو نوع فرمت ttf. یا TrueType و otf. یا OpenType)،
مرورگر اینترنت اکسپلورر از نسخه 9 به بعد خاصیت font-face@ را پشتیبانی می کند (البته تنها از فونت های با فرمت eot. یا Embedded OpenType)
و در نسخه های قدیمی تر باید متوصل به هک های css شویم، ضمن اینکه مرورگرهای جدید از فرمت دیگری با نام woff. یا (Web Open Font Format) نیز استفاده می کنند،
لذا در مجموع برای اینکه فونت های فارسی در تمام مرورگرها به یک شکل دیده شوند، باید سه نوع فرمت متفاوت در دسترس مرورگر باشد (شامل فرمت ttf. یا otf.، فرمت eot. و فرمت woff.)؛
البته هر مرورگر تنها از یکی از این فونت ها استفاده و به اصطلاح آن را بارگذاری می کند،
ذکر این نکته نیز ضروری است که پیش تر مرورگرهای سیستم عامل iOS که مربوط به شرکت Apple و به طور خاص iPhone است،
تنها از فرمتی به نام svg. یا Scalable Vector Graphics استفاده می کردند (از فرمت svg. هم در کارهای گرافیکی و هم ایجاد فونت استفاده می شود)
که در نسخه های جدید، این استاندارد شامل فرمت ttf. هم شده است؛
جدول زیر لیست مرورگرها و فونت های پشتیبانی شده توسط آنها را نشان می دهد.

sky boy · 2012 , December 29

نحوه تبدیل فونت های فارسی برای استفاده در وب

همان طور که در بالا ملاحظه کردید، برای نمایش صحیح فونت فارسی در تمام مرورگرها، ناچارایم از چهار فرمت متفاوت استفاده کنیم؛
از آنجایی که در حالت معمول فونت های با پسوند ttf. در دسترس هستند، سایر فرمت ها را باید با تبدیل این فایل بدست آوریم،
برای تبدیل، چندین سرویس آنلاین در وب وجود دارد که البته متاسفانه در مورد فونت های فارسی، تنها برخی آن هم از فرمت های خاصی به درستی پشتیبانی می کنند،
از جمله موارد زیر که فایل های فونت را به فرمت های متفاوت تبدیل می کنند.
سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (به جزء فرمت eot.):

HTML:

www.onlinefontconverter.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های فارسی (تنها فرمت eot.):

HTML:

www.font2web.com

سرویس آنلاین برای تبدیل فرمت، سازگار با فونت های انگلیسی :

HTML:

www.fontsquirrel.com/fontface/generator

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

sky boy · 2012 , December 29

نحوه استفاده از font-face@ برای نمایش فونت فارسی

اکنون که با جزئیات کار با خاصیت font-face@ در css3 آشنا شدیم،
نوبت به مرحله کدنویسی و تعریف این خاصیت در استایل css است،
بدین منظور کافی است در ابتدای فایل css خود (یا درون تگ style در حالت استایل css بدون فایل خارجی)
فونت خود را به مرورگر معرفی کنیم:

HTML:

@font-face {
    font-family:'BYekan';/*تعریف یک نام برای فونت*/
    src:url('BYekan.eot');/*اکسپلورر 9 به بعد*/
    src:local('bYekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('b Yekan'),/*برای برخی از مرورگرها مانند سافاری*/
        url('BYekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('BYekan.woff') format('woff'),/*مرورگر های جدید*/
        url('BYekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('BYekan.svg#BYekan') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}

همچنین می توانید در هر جای استایل، این کار را انجام دهید،
اما در نظر داشته باشید که فونت شما ابتدا باید برای مرورگر تعریف شود، سپس در ادامه استایل، قابل استفاده است،
برای استفاده از فونت، کافی است نام آن را در قسمت font-family اضافه کنید:

HTML:

<style type="text/css">
@font-face {
    font-family:'BYekan';/*تعریف یک نام برای فونت*/
    src:url('BYekan.eot');/*اکسپلورر 9 به بعد*/
    src:local('bYekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('b Yekan'),/*برای برخی از مرورگرها مانند سافاری*/
        url('BYekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('BYekan.woff') format('woff'),/*مرورگر های جدید*/
        url('BYekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('BYekan.svg#BYekan') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}
.post-titr{
    font-family:BYekan, Tahoma, Geneva, sans-serif;
}
</style>

توضیح:
- ابتدا برای فونت خود یک نام تعیین می کنیم (به صورت دلخواه) تا در استایل css خود از آن استفاده کنیم.
- سپس آدرس url فایل فونت خود را با فرمت eot. برای مرورگر اینترنت اکسپلورر 9 و مابعد مشخص می کنیم.
- در قسمت بعد، برای رفع مشکلات مرورگر اینترنت اکسپلورر 8 و ماقبل در این خصوص، از شیوه هک (با افزودن علامت های #?) استفاده می کنیم.
- عبارت مربوط به local برای این است که اگر فونت مورد نظر در سیستم کاربر نصب بود، از همان فایل استفاده شود و محتوای اضافه از سرور دریافت نشود، دقت کنید که در این قسمت باید مشخصه شناسایی فونت درج شود که در بیشتر مرورگرها همان نام فایل است ولی در مرورگر سافاری، عنوان فونت باید درج شود (در بیشتر موارد نام فایل و عنوان فونت اندکی با هم تفاوت دارند).
- همان طور که در جدول بالا ملاحظه کردید، فایل ttf. در اکثر مرورگرها پشتیبانی می شود، لذا آن را نیز به استایل خود ضمیمه می کنیم (هر مرورگر بسته به سازگاری، به ترتیب، تنها از یکی از آدرس های src استفاده می کند).
- در قسمت آخر نیز، فایل svg را برای سازگاری با نسخه های قدیمی سیستم عامل iSO ضمیمه می کنیم (این کار با توجه به حل مشکل پشتیبانی از فرمت ttf. در نسخه های جدید، ضروری نیست).

مثال

در کد زیر، جهت نمونه، از فونت فارسی BYekan که در حال حاضر بیشترین کاربرد را در وب دارد استفاده کردم.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>استفاده از فونت فارسی در وب</title>

<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
@font-face {
    font-family:'BYekan';/*تعریف یک نام برای فونت*/
    src:url('font/BYekan.eot');/*اکسپلورر 9 به بعد*/
    src:local('bYekan'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('b Yekan'),/*برای برخی از مرورگرها مانند سافاری*/
        url('font/BYekan.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('font/BYekan.woff') format('woff'),/*مرورگر های جدید*/
        url('font/BYekan.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('font/BYekan.svg#BYekan') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}
.post-titr p{
    font-family:BYekan, Tahoma, Geneva, sans-serif;
    display:block;
    font-size:16px;    
}
</style>
</head>
<body>
<div class="post-titr">
<p>
این یک متن فارسی با استفاده از خاصیت font-face در css3 است!
</p>
</div>
<hr />
با افزودن src و local این امکان وجود دارد که ابتدا فونت مورد نظر در سیستم کاربر جستجو گردد و در صورت عدم نصب، فونت از سرور بارگذاری شود.
</body>
</html>

آموزشهایCSS-جادوی طراحی وب!

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

پیوست ها

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی

پیوست ها

متخصص بخش برنامه نویسی

متخصص بخش برنامه نویسی