Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Заоблени ъгли в Internet Explorer 6-8 4

Сподели урока

Сигурно вече ти е известно, че CSS3 свойството border-radius, не се поддържа от Internet Explorer 6, 7 и 8. От една страна това е напълно разбираемо, имайки предвид “годините” на тези браузъри (IE 8 е на почти 4 години!). От друга страна пък, това е крачка назад за нас – уеб разработчиците. Всичко това означава, че трябва да отделим допълнително време и усилия за качествена поддръжка на тези “остарели” вече браузъри.

В този урок ще ти покажа как най-бързо и лесно можеш да добавиш заоблени ъгли в Internet Explorer версии 6, 7 и 8.

Структура на урока

Колко хора използват IE 6, 7 и 8?

Преди да предприемем каквито и да било действия, може би е добре да се запитаме “Колко хора използват IE < 9?”. Според мен въпроса е логичен. За да ти отговоря, ще използвам последната статистика на StatCounter за ноември 2012.

Глабално

  • Internet Explorer 8 – 12%
  • Internet Explorer 7 – 0,87%
  • Internet Explorer 6 – 0,41%

За България

  • Internet Explorer 8 – 9,57%
  • Internet Explorer 7 – 0,81%
  • Internet Explorer 6 – 0,33%

Заслужава ли си отделеното време и усилия за поддръжка на тези браузъри?

Разгледай отново статистиката по-горе. Какво означават за теб всички тези числа?

Може би нищо. Те са просто статистика и това съвсем не означава, че посетителите на твоя сайт ще бъдат разпределени по подобен начин.

Все пак, нека разгледаме 2 възможни варианта:

  1. Анализиране на статистиката на StatCount за България
  2. Анализиране на статистиката на твоя сайт

Анализиране на статистиката на StatCount за България

Обърни внимание на числата по-горе.

Ясно се вижда, че сумарно, браузърите IE 6 + 7 се използват от около 1,2% от населението в България. Това означава, че на всеки 1000 човека, 12 ще влязат в сайта ти използвайки IE 6 + 7. Не знам за теб, но аз лично смятам, че на такава малка цифра въобще не трябва да се обръща внимание.

Ако прекратиш поддръжката на IE 6 + 7 още сега, това означава че 12 човека няма да видят заоблените ъгли в сайта ти. Запомни, останалите 988 човека ще влязат през други браузъри. Може би е по-добра идея да обърнеш повече внимание на тях.

Internet Explorer 8 от друга страна се използва все още от 9,57% от населението. Това означава, че близо 96 човека на 1000 ще влязат в сайта ти през IE 8. Това вече е нещо друго. Тук процента е наистина голям и няма как с лека ръка да пренебрегнеш толкова много хора. В такъв случай, според мен, поддръжката на IE 8 си заслужава и може да се отплати.

Но ако помислиш отново, може би е по-добра идея, ако покажеш приятелско съобщение на всички IE 8 посетители и любезно ги подканиш да обновят браузъра си (или да го заменят с друг). Това може би ще ти даде по-добри резултати отколкото няколко часа прекарани в търсене на решение на нещо, което се използва от малък брой хора.

Анализиране на статистиката на твоя сайт

Един проблем, който виждам с числата по-горе е, че те са твърде общи. Това, което наистина има значение в уеб пространството е индивидуалната статистика. Ето защо е от изключителна важност да я следиш периодично.

Инструменти като Google Webmasters Tools и Google Analytics могат да ти помогнат страшно много в събирането и обработката на статистиката на твоя сайт. Чрез тях ще можеш да видиш неща като брой уникални посещения, брой посетени страници, географско разпределение на посетителите и много други. Освен всичко това, разполагаш и с точна информация на използваните браузъри.

Разгледай подробно статистиката на сайта си. От нея ще придобиеш най-добра представа за това кои браузъри използват посетителите на твоя сайт. Това ще ти помогне да си отговориш на въпроса “Заслужава ли си поддръжката на IE < 9?”.

Представи си следното. Сайта ти се посещава месечно от 1000 човека и само 50 от тях използват IE < 9. Е, в такъв случай спокойно можеш да пренасочиш усилията си някъде другаде. Все пак, след няколко месеца тези 50 посетителя ще намалеят до 30, а след още половин година въобще няма да ги има.

Ако обаче 15-20% от посетителите ти все още използват IE < 9, тогава може би си заслужава да им отделиш време и внимание.

Какво трябва да направиш обаче, ако сайта ти е все още нов и нямаш актуална статистика?

Може би в такъв случай е добре да вземеш предвид проучването на StatCount. По-добро от това би било, ако имаш възможност да проведеш кратко проучване с цел да откриеш какви браузъри използва целевата група на твоя сайт. Разпитай хората, към които е насочен. В повечето случаи, резултатите от това проучване ще ти дадът основа, върху която да базираш решенията си.

Тук искам да подчертая нещо важно. Аз нямам нищо против това сайта да изглежда еднакво във всички браузъри. Напротив, това трябва да е така, но до колкото това е възможно. Потребителският интерфейс на браузъра, операционната система, както и резолюцията на монитора оказват голямо внимание. Това също трябва да се вземе предвид.

Ето защо, най-общо казано, мнението ми е следното: “Сайта трябва да функцинира 100% еднакво във всички браузъри, но дизайна може да се различава от браузър до браузър. Тази разлика обаче не трябва да бъде драстична, а в някои от малките детайли, които обикновеният посетител може би дори няма и да забележи.

Накрая искам да спомена, че все повече хора всекидневно преминават към по-съвременни браузъри, каквито са например Firefox, Chrome, Opera, Safari и дори Internet Explorer 10. Фокусирай усилията си върху тях. Това ще ти се изплати много по-добре.

И така, ако все пак си решил/-а на всяка цена да поддържаш IE 6, 7 и 8, обърни внимание на следващата точка. В нея ще разбереш как най-бързо да стане това.

Какво е PIE?

Най-общо казано, PIE е специален файл, който дава на Internet Explorer 6-9 способността да “подкара” следните CSS3 свойства:

  • border-radius
  • box-shadow
  • border-image
  • multiply background images
  • linear-gradient

Никак не е зле. Border-radius е също в списъка, което е малка светлина в края на тунела. Само още няколко елементарни стъпки и така желаните заоблени ъгли ще бъдат видими...

Използване на PIE за добавяне на заоблени ъгли в IE 6, 7 и 8

Стъпка 1

Влез в сайта CSS3 PIE и свали последната версия на файла. В момента тя е 1.0.0.

Свали PIE като натиснеш бутона Download

Стъпка 2

Разархивирай архива където пожелаеш, но най-добре е да бъде в папката на сайта, върху който ще работиш. След това премахни всички PIE- файлове освен PIE.htc (виж следващото изображение). В много редки случаи ще се нуждаеш и от тях, така че не ги изтривай напълно.

Файлът PIE.htc ще ти бъде нужен, запази го. Останалите можеш да ги изтриеш.

Стъпка 3

Отвори css файла, с който ще работиш и започни да добавяш заоблени ъгли към желаните елементи. Това естествено ще стане чрез CSS3 свойството border-radius, което подробно разгледахме. Ако мислиш че има нужда, добави поддръжка за по-стари браузъри чрез представките –moz- (за Firefox) и –webkit- (за Chrome и Safari).

Когато приключиш с всичко това, кода ти (може би) ще изглежда така:

height: 80px;
width: 80px;
background: #ff6b2c;
margin-bottom: 30px;

-moz-border-radius: 15px; /* Firefox < 4 */
-webkit-border-radius: 15px; /* Chrome < 4, Safari < 5 */
border-radius: 15px;

Демо

Стъпка 4

Сега идва момента за добавяне на прословутия PIE файл. Това става чрез добавяне на behavior декларация в края на текущия селектор. Ето така:

height: 80px;
width: 80px;
background: #ff6b2c;
margin-bottom: 30px;

-moz-border-radius: 15px; /* Firefox < 4 */
-webkit-border-radius: 15px; /* Chrome < 4, Safari < 5 */
border-radius: 15px;
behavior: url(PIE.htc); /* IE < 9 */

Демо

Не изглежда никак сложно, но е добре да запомниш няколко неща:

  1. Декларацията behavior: url(PIE.htc); задължително трябва да бъде поставена на последно място в настоящия селектор.
  2. Стойността на url() трябва да бъде пътя до файла PIE.htc спрямо html документа, а не спрямо css документа.
  3. За да направиш заоблени ъгли на повече от един елемент, трябва да добавиш PIE към всеки селектор поотделно.

Тъй като в този случай html и PIE.htc са в една и съща папка (виж изображението към Стъпка 2), стойността на url() се състои единствено от името на файла.

Ако PIE.htc е да речем в папка “plugins”, то стойността на url() трябва да бъде “plugins/PIE.htc”.

Надявам се това да е ясно. Пробвай да експериментираш 4-5 мин, за да усвоиш максимално добре начина на работа. Ако все пак имаш проблеми, остави коментара си по долу или се консултирай с документацията в CSS3 PIE.

Заключение

В този урок научи как да добавиш заоблени ъгли в Internet Explorer 6, 7 и 8. Въпреки че в този случай не беше кой знае каква философия, поддръжката на стари браузъри понякога изисква значително повече знание, време и усилия.

В тези случаи нещата няма да бъдат толкова лесни като добавяне на CSS3 PIE, затова те съветвам да следиш подробно статистиката на сайта си. От нея ще разбереш най-добре кои браузъри си заслужава да поддържаш.

Също така имай предвид, че ежедневно много хора преминават към по-съвременни браузъри, което до голяма степен ще намали нуждата от поддръжка на старите. Подканвай посетителите ти със “стари” браузъри да ги обновят. Това ще ти спести доста нерви.

Накрая искам да те окуража да фокусираш погледа си в бъдещето. Не е нужно да се ограничаваш и да игнорираш новите технологии, само защото 10 човека няма да успеят да ги “видят”. Колкото по-рано започнеш да ги използваш, толкова по-бързо ще навлязат в ежедневието на всички, а това ще те улесни в създаването на полезни и качествени уеб сайтове.

Ти какво мислиш за стартите браузъри? Поддържаш ли ги и защо? Използваш ли новите CSS3 свойства, които имаш на разположение? Сподели коментара си след урока.

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

4 страхотни коментара

  1. 1

    Маруш Денчев
    16 декември 2012 12:42

    Много често решението дали да се поддържат старите браузъри не зависи от разработчиците, а от клиента. Той иска неговия клиент да получава единен изглед и преживяване без значение от браузъра. Затова, когато се изпадне в такава ситуация, трябва да се подходи по-бизнес ориентирано и да се обясни на клиента какво печели и какво губи, ако реши да не поддържа заоблени ъгли на IE-тата.

  2. 2

    Джават Ушев (автор)
    18 декември 2012 15:54

    Да, това е напълно вярно. В повечето случаи обаче, клиента не разбира от уеб разработване. И това е нещо нормално. Ние сме тези, които трябва да разбират. Точно затова са ни потърсили, защото можем да им предложим решение, което те не могат да постигнат сами.

    Нашата роля като професионалисти е не просто да създадем уеб сайт, а да им дадем най-добрия съвет и им предложим най-доброто решение за техния бизнес.

    Понякога ние сами си усложняваме нещата като им пратим добре изглеждащ дизайн под формата на jpg с думите “Така ще изглежда сайта Ви.”. Проблема е, че това създава грешни очаквания, защото клиента наистина вярва, че сайта му ще изглежда така. Но той не знае за различията между браузърите, операционните системи, резолюциите и т.н. По-късно, когато сме почти готов и клиента установи, че в IE 7 сайта не изглежда така както в Firefox 17, той започва да задава въпроси от сорта на “Защо сайта ми е различен в X браузър? Вие казахте, че ще изглежда така (посочвайки jpg файла изпратен по-рано).”. Наистина неприятно.

    Когато става въпрос за уеб, няма как 2 браузъра с 10 години разлика между тях да предложат 100% един и същ изглед и преживяване. Това е същото като да сравняваме една чисто нова кола с друга 5 или 10 годишна. Функцията и на двете е една и съща - да ни предвижат от точка А до точка Б, но екстрите, които предлагат, са различни.

    Това което имам в предвид е, че не трябва да се оправдаваме със стари браузъри, а да изясним ситуацията още от самото начало. Дизайна може и да се различава с някой друг заоблен ъгъл, но фунциите трябва да бъдат достъпни навсякъде, защото посетителя най-вече го интересува как да реши проблемите си, а не защо във footer-а ъглите не са заоблени.

    Решението според мен е да започнем да създаваме дизайна директно в браузъра и да показваме на клиента прототип, който постепенно да достига до крайния продукт. Една чудесна стития по темата е: Design in the browser.

    Друг начин е още в началото на проекта да обсъдим какви браузъри ще бъдат поддържани. Например: “Съветвам Ви да фокусираме вниманието си върху браузъри, които се използват от повече от 2% от посетителите. Така ще предложим най-добро преживяване на болшинството от тях.”. Обхващането на всички браузъри стана твърде рисково и общо понятие. Винаги ще се намерят 5 човека, които ще влязат през IE 6. Това не означава, че трябва да отделим няколко часа работа за тях.

    Ако ние сами не вдигнем стандартите и не започнем да предлагаме най-доброто, клиента едва ли ще го направи за нас. Крайно решение би било да вземаме допълнителна такса за поддръжка на тези остарели и забравени браузъри.

  3. 3

    Георги
    13 януари 2013 13:57

    Само една вметка, така показания CSS няма да се валидира, така че ако ти се налага да го валидираш, изнеси behavior-а в отделен CSS файл, който да се зарежда в Conditional Comment - http://www.quirksmode.org/css/condcom.html

  4. 4

    Джават Ушев (автор)
    14 януари 2013 11:08

    Напълно си прав. Благодаря за предложението. Ще имам едно наум в следващите уроци :)

Твоят коментар

* - задължителни полета