[FONT=Tahoma, Arial, Helvetica, sans-serif]
[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]امروزه در بحث طراحی[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] قالب سایتها چیزی که بسیار می تواند به ظاهر سایت زیبایی بدهد گرد کردن گوشه dividerها می باشد. برای این کار از یکی از خصوصیاتی که در CSS3 معرفی شده می توان استفاده کرد که border-radius نام دارد. اما مشکل اینجاست که در حال حاضر تمامی مرورگرها به خصوص اینترنت اکسپلورر از قواعد CSS3[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] پشتیبانی نمی کند.[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]قبلا در این [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]این پست[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] به معرفی روشی برای گرد کردن گوشه [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]dividerها پرداخته بودم. در آن روش یک عیب وجود داشت و آن هم این بود که فایل جاوااسکریپتی که به صفحه الحاق می شد حجمی حدود 60 کیلوبایت داشت که می توانست لود کردن صفحه را مقداری طولانی کند. در همان پست روشی دیگری را به طور گذری معرفی کردم. در این پست قصد دارم آن روش را که یکی دیگر از روشهای گرد کردن است و بسیار استفاده از آن راحت تر می باشد را تشریح کنم.[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]PIE مخفف عبارت Progressive Internet Explorer می باشد. درواقع یک سری رفتار متصل شده به اینترنت اکسپلورر است که وقتی به یک عنصر اعمال می شود باعث می شود تا اینترنت اکسپلورر تعدادی از خصوصیات CSS3 را به رسمیت بشناسد و آنها را نمایش دهد. برای مثال فرض کنید که شما می خواهید قواعد زیر را به یک عنصر اعمال کنید:[/FONT]
[FONT=courier new, courier, mono]#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]این نتایج در مرورگرهای مدرن امروزی به خوبی نمایش داده می شود اما در اینترنت اکسپلورر 6، 7 یا 8 نه! برای اینکه این مرورگر نیز بتواند این قواعد را به خوبی نمایش دهند کافیست تا قانون زیر را به گزینشگر بالا اضافه کنیم:[/FONT]
[FONT=courier new, courier, mono]#myElement {
...
behavior: url(PIE.htc);
}[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]البته باید در داخل پرانتز آدرس فایل PIE.htc را که در انتهای پست برای دانلود قرار داده ام وارد کنید.[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]حال فقط کافی است تا مقدار صفت [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]id یک divider که قصد گردن کردن گوشه های آن را دارید را برابر مقدار myElement[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] قرار دهید و نتیجه را مشاهده کنید.[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]البته در این روش نمی توان به صورت جداگانه به هرگوشه یک [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]divider ، مقدارداد. به عبارت دیگر استفاده از قواعد زیر در این روش جواب نمی دهد:[/FONT]
[FONT=courier new, courier, mono]border-top-right-radius[/FONT]
[FONT=courier new, courier, mono]border-top-left-radius[/FONT]
[FONT=courier new, courier, mono]border-bottom-left-radius[/FONT]
[FONT=courier new, courier, mono]border-bottom-right-radius[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]لازم به ذکر است که با این کار تمامی قواعد زیر که جزئی از قواعد [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]CSS3[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] محسوب می شوند در اینترنت اکسپلورر پشتیبانی می شوند:[/FONT]
[FONT=courier new, courier, mono]border-radius[/FONT]
[FONT=courier new, courier, mono]box-shadow[/FONT]
[FONT=courier new, courier, mono]border-image[/FONT]
[FONT=courier new, courier, mono]multiple background images[/FONT]
[FONT=courier new, courier, mono]linear-gradient as background image[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]در آخر هم این نکته را یادآور می شوم که برای دستور [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] behavior: url(PIE.htc);[/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif] آدرسی که وارد می شود حتما باید یک آدرس نسبی باشد. در صورتی که آدرس مطلق باشد این روش جوابگوی نیاز ما نخواهد بود.[/FONT]
[FONT=Tahoma, Arial, Helvetica, sans-serif]برای دانلود فایل [/FONT][FONT=Tahoma, Arial, Helvetica, sans-serif]PIE.htc اینجا را کلیک کنید.
منبع پست
[/FONT]