Едно от най-големите дилеми, пред които са изправени уеб програмистите, е несъвместимостта на различни версии на Internet Explorer с настоящите уеб стандарти. Въпреки че Microsoft е обещала CSS3 и дори HTML5 поддръжка за IE9, потребителите на Windows, особено бизнеса, могат да продължат да използват IE8, IE7 или дори страховития IE6 за идните години.

В резултат на това кодирането на сайт с изключителни функции на CSS3 само ще отчужди голяма част от посетителите на уебсайта Ви, а задължението им да изтеглят браузър, съвместим със стандартите, като Mozilla Firefox или Google Chrome, ще се окажат само арогантни.

Възможно решение на проблема е използването на модернизатор, който е скрипт или приложение, което използва различни трикове, за да направи сайта Ви да изглежда така, както трябва във всички браузъри. CSS3 Pie е модеризатор, базиран на javascript, който помага на Internet Explorer да разпознае готините функции на CSS3, като заоблени ъгли, меки сенки за падане и градиентни запълвания. Той е бърз, лесен и работи през повечето време с много малко ощипване.

Инсталиране и настройка

Този кратък урок предполага, че вече имате уебсайт с елементи на CSS3. За да използвате CSS3 Pie, трябва да направите две неща: да качите пакета javascript и да добавите специален код към вашия CSS файл.

1. Изтеглянето от уебсайта css3pie.com включва няколко файла, но ако всичко върви по план, всичко, от което се нуждаете, е PIE.htc, което е компресиран текстов файл. Качете го на място на вашия уеб сървър, където вашият CSS файл може да има достъп до него.

2. Отворете CSS файла в текстовия редактор и намерете елементите, които съдържат CSS3 свойства. В рамките на тези елементи добавете следното правило:

 поведение: URL адрес (PIE.htc); 

Пътят до вашия файл PIE.htc трябва да е точен, така че ако не е в същата директория като вашия CSS файл, променете го съответно.

Последният елемент трябва да изглежда по следния начин:

 # елемент1 {граница: 1px масив # 696; подложка: 60px 0; текст-подравняване: център; ширина: 200px; -webkit-border-радиус: 8px; -moz-border-radius: 8px; радиус на границата: 8px; фон: # EEFF99; поведение: URL адрес (PIE.htc); } 

Ако тя работи правилно, трябва да видите резултатите в IE 6, 7 и 8 веднага след качването на променения CSS файл.

Отстраняване на проблеми

Ако не виждате никакви промени, най-вероятно ще трябва да коригирате пътя към вашия PIE.htc или дори да използвате пълния URL адрес. Просто помнете, че IE ще приема само htc файл от същия домейн като сайта, а "www.site.com" и "site.com" се считат за два различни домейна.

При някои обстоятелства може да се наложи да опитате PIE_uncompressed.htc или дори PIE.php, за да го направите да работи правилно. Консултирайте се с документацията за повече подробности.

Забелязах, че комбинацията от прозрачност и удебелен текст води до някои луди изглеждащи думи в IE8. Може да се наложи да използвате прозрачни фонове на изображения в тези ситуации.

Комбинацията от CSS3 Pie и някои функции на jQuery изглежда създава грешка в IE. Не намерих решение за това, но страницата все още се зарежда и показва правилно въпреки това.

модернизация

С много малко усилия CSS3 Pie може да помогне на вашия уеб сайт да изглежда постоянно привлекателен във всички големи браузъри, без главоболие да се налага да оформя ъглови изображения или да прави фалшиви сенки за падане. Началната страница на сайта включва демонстрация, за да можете да коригирате свойствата на CSS3 и да видите резултатите на живо в Internet Explorer. Най-доброто от всички CSS3 Pie е безплатен и с отворен код и е достъпен за изтегляне безплатно.