دو ویژگی CSS برای زبانهای راست به چپ از جمله فارسی

28 11 2009

اخیرا در ورژن جدید فایرفاکس (3.6) دو مقدار از ویژگی text-align که جزو استاندارد CSS 3 هستند، پشتیبانی شده است. این دو ویژگی از آن جهت می تونه مهم باشه که برای طراحی سایتهایی با پشتیانی هر دو زبانهای راست به چپ و چپ به راست، کار طراح وب رو بسیار آسان می کنه.

این دو مقدار برای ویژگی text-align عبارتند از:

start: تعیین خواهد کرد که متون در سمت آغاز نوشته با توجه به جهت به کار رفته تراز شوند. به عبارت بهتر در صورتی که مقدار direction که به عنصر مورد نظر اعمال می شود برابر با ltr باشه، مقدار start دقیقا همانند left عمل خواهد کرد و متون به سمت چپ تراز خواهند شد. در صورتی هم که مقدار direction برابر با rtl باشد، مقدار start دقیقا همانند right عمل خواهد کرد و متون به سمت راست تراز خواهند شد.

به مثالهای زیر توجه کنید:

<html>
<body style="direction:ltr">
<p style="text-align:start">Left side of page.</p>
</body>
</html>

متن در سمت چپ قرار می گیرد.

<html>
<body style="direction:rtl">
<p style="text-align:start">Right side of page.</p>
</body>
</html>

متن در سمت راست قرار می گیرد.

end: تعیین خواهد کرد که متون در سمت آخر صفحه یا نوشته با توجه به جهت به کار رفته تراز شوند. به عبارت بهتر در صورتی که مقدار direction که به عنصر مورد نظر هاعمال می شود برابر با ltr باش، مقدار end دقیقا همانند right عمل خواهد کرد و متون به سمت راست تراز خواهند شد. برای مقدار rtl نیز عکس این مطلب اعمال خواهد شد.

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

پشتیبانی مرورگرها از start و end

به علت نسبتا جدید بودن این دو مقدار مرورگرهای کمی از آنها پشتبانی می کنند. در این میان فقط سه مرور Firefox, safari و chrome این دو مورد رو پیاده سازی کرده اند.

مرورگرهای safari و chrome به علت داشتن موتور مشترک Webkit از نسخه 525 به بعد آن پستیانی به عمل می آورند. به عبارت بهتر Safari نسخه 3.1 و chrome نسخه 1
مرورگر Firefox مقدار start رو از نسخه 1 و مقدار end رو از نسخه 3.6 به بعد پیاده سازی کرده است.

اطلاعات بیشتر در مورد text-align





چرخش متون و اشیای صفحه با CSS 3

10 08 2009

یکی دیگر از ویژگیهایی که به CSS 3 اضافه شده امکان چرخش دادن به اشیا و متون در جهت دلخواه است.
این چرخش با ویژگی جدیدی با نام transform معرفی شده. هنوز این ویژگی نهایی نشده و ممکنه که در آینده تغییراتی در اون به وجود بیاد و زاویه های دیگری غیر از درجه رو هم پشتیبانی کنه، اما فعلا با این تعریف کنونی مرورگرهای Firefox 3.5 ، Chrome و Safari از اون پشتیبانی می کنند.
این ویژگی قدرت عمل زیادی به طراحان وب خواهد داد و با استفاده ترکیبی ازاین ویژگی می توان انیمیشن های مختلفی برای سایت ایجاد کرد.
دستور این ویژگی به این صورت است:
transform: rotate;
که مقدار rotate یا چرخش به صورت rotate(Xdeg) وارد میشه. مانند این نمونه:
transform: rotate(-90deg);

  • به کار گیری

همانطور که گفتن این ویژگی در Firefox 3.5 ، Chrome و Safari پستیبانی میشه. کاری شبیه این رو می شه با استفاده از فیلترهای مخصوص IE در آن مرورگر انجام داد.

برای استفاده در Firefox طبق معمول باید پسوند -moz رو به ویژگی اضافه کنید، برای مرورگر Chrome و safari نیز -webkit لازم خواهد بود. مانند زیر:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

برای مرورگر IE هم از فیلترها برای شبیه سازی عملکردی مانند این استفاده کنید:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  • نمونه های انجام شده

ساعت با جاوا اسکریپت و این ویژگی

نمایش تاریخ میلای در کنار متون

تاریخ میلادی به سبک دیگر (منبع این پست)

نمایش دهنده گالری عکس با ترکیبی از JQuery و این ویژگی(safari)

  • مطالب مرتبط

ویژگیهای جدید در CSS 3 بخش اول

ویژگیهای جدید در CSS 3 بخش دوم

راهنمای سریع و مرجع کامل Html و CSS

افزونه فایرفاکس: تشخیص تغییرات DOM و CSS در صفحات وب





ویژگیهای جدید در CSS 3 بخش دوم

15 10 2008

این مقاله ادامه مقاله بخش اول هست که به بررسی ویژگی های جدید در CSS 3 می پردازیم.

تعدادی از ویژگی ها با صورت لیست وار

بخش اول

  • Selector ها – انتخاب کننده های عناصر
  • text-shadow – سایه در زیر متن
  • border-image – تصاویر برای حاشیه عناصر
  • border-radius – خمیده کردن حاشیه عناصر
  • box-shadow – سایه در زیر یک کادر
  • text-overflow – از محدوده خارج شدن متن
  • word-wrap – خط شکن در متون طولانی
  • resize – قابلیت تغییر اندازه کادر ها توسط کاربر
  • outline – خطوط پیرامون اشیا

بخش دوم

  • @page – انتخابگرهای صفحه
  • multiple backgrounds – چندین زمینه برای اشیا
  • background-origin و background-clip – تعیین محدوده و موقعیت به صورت پیشرفته برای پس زمینه ها
  • Opacity – تعیین شفافیت یا آلفای یک شیئ
  • رنگهای HSL و HSLA و RGBA
  • Multi-column – چند سطونی کردن متون
  • Web fonts – فونت های سفارشی برای سایت
  • Speech – برای تعیین نحوه خواندن متون توسط نرم افزار

توضیح پیرامون ویژگی های فوق در بخش دوم

انتخابگر @page

ویژگی که در CSS 3 تغییر زیادی کرده انتخابگر page@ هست. این نوع انتخابگر ها با نام media شناخته می شن و با کارکتر @ مشخص میشوند. چون این موارد هنوز تکمیل نشده است و احتمال تغییر در اونها خیلی زیاده در موردشون توضیح نمی دم اما برای اطلاعات بیشتر می تونید به اینجا مراجعه کنید: http://www.w3.org/TR/css3-mediaqueries

انتخابگر مورد نظر من که خیلی جالب هست page@ هست. این انتخابگر یا selector این قدرت رو میده که به صفحه به صورت تکه تکه استیل تعیین کنید. نحوه کار این ویژگی اینطور هست که صفحه را به چندین قسمت تقسیم کرده و امکان تنظیم ویژگی های css رو به آنها میده. در تصویر زیر می بینید که صفحه به چندین قیمت تقسیم شده و سه قسمت از راست پر رنگ نشان داده شده اند:

CSS3 Paged Media Margin Boxes

CSS3 Paged Media Margin Boxes

به این کد توجه کنید

@page {
size: 8.5in 11in;
margin: 10%;

@right-top {
content: «Hamlet»;
}
@right-middle {
content: «Page » counter(page);
}
@right-bottom {
font-size: 14pt;
}
}

در این کد ابتدا صفحه به عنوان یک مدیا در نظر گرفته میشه و سپس طول 8.5 اینچ و ارتفاع 11 اینج و مقدار margin 10 درصد از کل صفحه داده میشه. در انتخابگر بعدی قسمت بالا راست right-top از صفحه انتخاب شده و متن اون Hamlet قرار داده میشه. همونطور که میبینید امکان تعریف تو در توی انتخابگر های مدیا وجود داره. بخش های بعدی هم right-middle برای سمت راست وسط و right-bottom برای راست پایین هستند.

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

top-left-corner, top-left, top-center, top-right, top-right-corner, left-top, left-middle, left-bottom, right-top, right-middle, right-bottom, bottom-left-corner, bottom-left, bottom-center, bottom-right, bottom-right-corner

اطلاعات بیشتر: http://www.w3.org/TR/css3-page

multiple backgrounds

با استفاده از این ویژگی این امکان فراهم می شود که به جای تعیین یک پس زمینه چندین پس زمینه جداگانه تنظیم کنید.

امکان تنظیم چندین پس زمینه برای من یک آرزو بود تا زمانی که این ویژگی رو تو CSS 3 دیدم. تصور اینکه چه قدرتی این ویژگی به شما خواهد دور از انتظار هست. پس برای اینکه گوشه ای از قدرت این ویژگی رو ببینید به تصویر زیر نگاه کنید:

Multiple backgrounds

Multiple backgrounds


در آدرس: http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

البته در حال حاظر فقط مرورگر safari امکان نمایش چندین پس زمینه را دارد.

تو این صفحه فقط به یک تگ div برای تنظیم زمینه پس زمینه داده شده است! در ضمن از هیچ تگ اضافه هم استفاده نشده است.

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

اطلاعات بیشتر: http://www.w3.org/TR/css3-background/#the-background-image

background-origin

این ویژگی موقعیت اعمال ویژگی موقعیت یا background-position را تحت تاثیر قرار میده و موقعیت کلی را تغییر می دهد.

این ویژگی سه مقدار می گیرد که border، padding و content هستند. در صورت انتخاب padding موقعیت یا position با توجه گوشه بالایی سمت چپ ویژگی padding شیئ در نظر گرفته خواهد شد. در صورت انتخاب border موقعیت با توجه به گوشه بالایی سمت چپ ویژگی border شیئ در نظر گرفته خواهد شد و در صورت انتخاب content موقعیت با توجه به گوشه بالایی سمت چپ محتویات یا متن داخل شئ در نظر گرفته خواهد شد.

برای دیدن نمونه به تصویر بعدی نگاه کنید.

background-clip

این ویزگی تعیین می کند اعمال ویژگیهای پس زمینه در قسمت حاشیه به چه صورت باشد. این ویژگی دو مقدار می گیرد که اولی border هست و تایین می کند اعمال پس زمینه فقط تا border ادامه داشته باشد. مقدار دوم padding هست که مشخص می کند که اعمال پس زمینه تا ناحیه Padding باشد.

ویژگی های background-clip و background-origin در تصویر زیر مشخص شده اند.

در تصویر زیر در سطر اول برای background-clip مقدار border و در سطر دوم مقدار padding انتخاب شده است.
همچنین برای ویژگی background-clip ردیف اول اعمال مقدار border ردیف دوم padding و ردیف سوم content را نشان می دهد.

background origin and clip

background origin and clip

اطلاعات بیشتر: http://www.w3.org/TR/2005/WD-css3-background-20050216

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

رنگهای HSL و HSLA و RGBA
امکان انتخاب رنگ ها را طیف رنگهای مختلف میدهد. در گذشته باید زنگها حتما در استاندارد RGB رنگ انتخاب میشد.

برای مطالعه پیرامون Opacity و رنگها به این مقاله مراجعه کنید: A brief introduction to Opacity and RGBA

Multi-column
ویژگی جالب دیگری که اضافه شده امکان ستون بندی متون است. این ستون یندی به دو صورت قابل تعریف است؛ اولی با تعیین عرض برای هر ستون و دومی با تعریف تعداد ستون ها.
در حال حاضر این ویژگی به طور غیر رسمی توسط مرورگرها FireFox و Safari پشتیبانی می شود.

FireFox
-moz-column-width: 13em;
-moz-column-gap: 1em;
Safari
-webkit-column-width: 13em;
-webkit-column-gap: 1em;

توضیحات کامل: http://www.w3.org/TR/css3-multicol

Web fonts

امکان تغییر فونت های سایت به فونت هایی سفارشی را می دهد.

تغییر دادن فونت های سایت به فوت سفارشی ویژگی کاملا جدیدی نیست و توسط IE 5 پشتیبانی شده بود. ولی به این علت که نوع فونتی که مورد استفاده قرار می گرفت (Embedded Open Type .eot) مورد استقبال سایر مرورگر ها قرار نگرفت؛ تا الان که به صورت استاندارد درآمده است.
در حال حاظر امکان استفاده از فونت های TrueType .ttf و OpenType .otf باید توسط مرورگر ها فراهم شود. نکته ای که در اینجا مهم است لایسنس داشتن فونت ها است.
اعمال فونت های سفارشی توسط ویژگی @font-face فراهم شده است.

@font-face {
font-family: Delicious;
src: url(‹Delicious-Roman.otf›);
}

جالب است بدانید که یکی از دلایل عقب افتادن عرضه FireFox 3.1 پیاده سازی این ویژگی است.

نمونه اعمال شده: http://www.css3.info/preview/web-fonts-with-font-face
توضیحات کامل: http://www.w3.org/TR/css3-webfonts/#font-descriptions

Speech
Speech یا خواندن متون توسط نرم افزار ویزگی جدیدی در Css 3 نیست ولی دچار تغییرات زیادی شده است. این دسته از ویژگی ها امکان تعیین سرعت، کلفتی صدا، جنسیت خواننده و .. را می دهد.
این ویزگی ها این امکان را به شما می دهد که در زمانی که خسته هستید به چشمان خود استراحت دهید تا نرم افزار برای شما متون را بخواند.
در میان مرورگر ها، مرورگر Opera از چندین نسخه قیلی این ویژگی را دارا می باشد که متون را بخواند، ولی در حالت عادی این امکان در ان غیر فعال است و برای فعال کردن آن باید بسته مربوطه را دریافت و نصب نمایید.

توضیحات کامل: http://www.w3.org/TR/css3-speech





ویژگیهای جدید در CSS 3 بخش اول

5 10 2008

در این مقاله کوتاه می خوام که شما رو با تعدادی از ویژگی های استاندارد CSS 3 آشنا کنم.

کار بر روی استاندارد CSS 3 از سال 2002 شروع شد، یعنی نزدیک به یک سال از زمانی که پرونده CSS 2.1 بسته شد. کار بر روی این استاندارد هنوز به پایان نردسیده و شاید تا یک یا دو سال آینده هم به طول بکشه ولی با این حال بسیاری از موارد این استاندارد تکمیل شده است.
نکته ای که در این وسط خیلی مهمه پشتیبانی مرورگر ها از این استاندارده. متاسفانه چون خیلی از موارد به موقع آماده نشده اند پشتیبانی کاملی توسط مرورگر های قدیمی از آنها نمی شود، پس برای آزمایش و مشاهد مواردی که در ادامه مطرح خواهد شد باید آخرین نسخه و یا حتی نسخه آزمایشی را دریافت کنید.

در حال حاظر مرورگر FireFox 3.1 نسخه آزمایشی و Opera 9.5 و Safari نسخه آزمایشی بسیاری از موارد زیر را پشتیبانی می کنند. متاسفانه IE در زمینه خیلی ضعیف عمل کرده و آخرین نسخه آن یعنی IE 8 beta 2 پشتیبانی کاملی از موارد زیر ندارد.

تعدادی از ویژگی ها با صورت لیست وار

بخش اول

  • Selector ها – انتخاب کننده های عناصر
  • text-shadow – سایه در زیر متن
  • border-image – تصاویر برای حاشیه عناصر
  • border-radius – خمیده کردن حاشیه عناصر
  • box-shadow – سایه در زیر یک کادر
  • text-overflow – از محدوده خارج شدن متن
  • word-wrap – خط شکن در متون طولانی
  • resize – قابلیت تغییر اندازه کادر ها توسط کاربر
  • outline – خطوط پیرامون اشیا

بخش دوم

  • @page – انتخابگرهای صفحه
  • multiple backgrounds – چندین زمینه برای اشیا
  • background-origin و background-clip – تعیین محدوده و موقعیت به صورت پیشرفته برای پس زمینه ها
  • Opacity – تعیین شفافیت یا آلفای یک شیئ
  • رنگهای HSL و HSLA و RGBA
  • Multi-column – چند سطونی کردن متون
  • Web fonts – فونت های سفارشی برای سایت
  • Speech – برای تعیین نحوه خواندن متون توسط نرم افزار

توضیح پیرامون ویژگی های فوق

Selector ها
یکی از مهمترین بخش های CSS انتخابگر ها هستند که برای انتخاب عناصر در صفحه مورد استفاده قرار می گیرند. برای گسترش توانایی ها، چند ویژگی جدید در نسخه 3 به CSS اضافه شده که به صورت خلاصه توضیح میدم.
انتخاب کننده [att^=val]
در این حالت عناصری انتخاب خواهد شد که مقدار ویژگی att آن با val شروع شده باشد. برای مثال

a[title^=»ho»] {background: green;}

که مشخص می کند لینک هایی که مقادیر title انها با حرف ho شروع شده باشد رنگ سبز رو به عنوان پس زمینه بدهد.

انتخاب کننده [att$=val]
در این حالت عناصری انتخاب خواهد شد که مقدار ویژگی att آن با val پیان پذیرفته باشد. برای مثال

a[title$=»t»] {background: green;}

که مشخص می کند لینک هایی که مقادیر title انها با حرف t پاینان پذیرفته باشد، رنگ سبز رو به عنوان پس زمینه آنها قرار گیرد.

انتخاب کننده [att*=val]
در این حالت عناصری انتخاب خواهد شد که در ویژگی att آن مقدار val یافت شود. برای مثال

a[title*=»ont»] {background: green;}

که مشخص می کند لینک هایی که در مقدار title انها عبارت ont یافت شود، رنگ سبز رو به عنوان پس زمینه آنها قرار گیرد. در این حالت لینکی که در ویژگی title خود عبارت contact قرار داشته باشد در شرط مذبور صدق کرده و زمینه آن سبز خواهد شد.

تست این موارد بر روی FireFox 3.1 و Opera 9.5 به خوبی کار کردند ولی IE 8 بدترین نمره را کسب کرد. برای تست این که مرورگر شما کدامیک از انتخاب گر ها را پشتیبانی می کنه از لینک زیر استفاده کنید: http://www.css3.info/selectors-test

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

text-shadow
برای ایجاد سایه در زیر متون مورد استفاده است. یکی دیگر از ویژگیهای جالب که با ترکیب آنها می توان سایت های جذاب را خلق کرد.

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

multiple-shadows

نتیجه اعمال چندین سایه با استفاده از text-shadow

text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;

توضیحات کامل: http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

ادامهٔ مطلب »