امروزه در بحث طراحی قالب سایتها چیزی که بسیار می تواند به ظاهر سایت زیبایی بدهد گرد کردن گوشه dividerها می باشد. برای این کار از یکی از خصوصیاتی که در CSS3 معرفی شده می توان استفاده کرد که border-radius نام دارد. اما مشکل اینجاست که در حال حاضر تمامی مرورگرها به خصوص اینترنت اکسپلورر از قواعد CSS3 پشتیبانی نمی کند.

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

PIE مخفف عبارت Progressive Internet Explorer می باشد. درواقع یک سری رفتار متصل شده به اینترنت اکسپلورر است که وقتی به یک عنصر اعمال می شود باعث می شود تا اینترنت اکسپلورر تعدادی از خصوصیات CSS3 را به رسمیت بشناسد و آنها را نمایش دهد. برای مثال فرض کنید که شما می خواهید قواعد زیر را به یک عنصر اعمال کنید:

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

این نتایج در مرورگرهای مدرن امروزی به خوبی نمایش داده می شود اما در اینترنت اکسپلورر 6، 7 یا 8 نه! برای اینکه این مرورگر نیز بتواند این قواعد را به خوبی نمایش دهند کافیست تا قانون زیر را به گزینشگر بالا اضافه کنیم:

#myElement {
...
behavior: url(PIE.htc);
}

البته باید در داخل پرانتز آدرس فایل PIE.htc را که در انتهای پست برای دانلود قرار داده ام وارد کنید.

حال فقط کافی است تا مقدار صفت id یک divider که قصد گردن کردن گوشه های آن را دارید را برابر مقدار myElement قرار دهید و نتیجه را مشاهده کنید.

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

border-top-right-radius

border-top-left-radius

border-bottom-left-radius

border-bottom-right-radius

البته می توانید به شکل زیر هر چهار گوشه را جدا مقدار دهی کنید:

border-radius:10px 20px 30px 40px

لازم به ذکر است که با این کار تمامی قواعد زیر که جزئی از قواعد CSS3 محسوب می شوند در اینترنت اکسپلورر پشتیبانی می شوند:

border-radius

box-shadow

border-image

multiple background images

linear-gradient as background image

در آخر هم این نکته را یادآور می شوم که برای دستور   behavior: url(PIE.htc); آدرسی که وارد می شود حتما باید یک آدرس نسبی باشد. در صورتی که آدرس مطلق باشد این روش جوابگوی نیاز ما نخواهد بود.

برای دانلود فایل PIE.htc اینجا را کلیک کنید.