Тези дни реших да седна и да довърша темата на блогът ми. Както Цветан Дичев правилно отбеляза, много по-удобно е с локален сървър, стига да успееш да го настроиш. За кодът използвам Eclipse с JS и PHP plugin-и.
Почти съм довършил страницата. Работя на Firefox. Реших да я отворя на IE и О Боже! Нищо общо. Няма страшно – викам си – не ти е за първи път, ще се оправиш. След 4 часа тестване и хиляди презареждания на двата browser-a (благодаря на Бога за IE tab и Firebug), най-после всичко си дойде на мястото. Накрая реших да си тествам и script.aculo.us анимацийките и разбира се IE се пънеше като магаре със запек. Махнах ги за сега като обмислям да предложа тези благинки (eyecandy) само за посетителите ми, които използват Лисицата.
Какво обаче предизвика бушуващото ми сега възмущение? Ясно е, че IE не поддържат един куп CSS/HTML/JS стандарти и правят каквото си искат. В версия 7 поне се опитаха да оправят някои бъгове като необяснимата липса на поддръжка за png. Ето обаче един бъг, който все още си го пазят – z-index. Както се вижда в блогът ми, отдясно има снимки. Те са отчасти скрити зад панела на блогът. Ако сега четете с Лисицата, когато минете с мишката върху тях, те ще изскочат отпред. Ако обаче сте с IE6/7, ще си останат отзад и само малко ще мръднат. Проблемът е доста дълбок и може да видите опростен пример тук (на английски).
Най-вероятно от M$ са решили да си опростят генератора за страници и така да го ускорят за сметка на един много мощен инструмент. Практически са накарали генератора да сканира за z-index-и само сред елементите на същото ниво като този, който сега се показва. Иначе виждате ли – ние си подобряваме софтуера и сме толкова userfriendly. Това е само един пример от серията тъпотии, които могат да бъдат намерени в IE. Ако се питате, щом той е толкова популярен, защо останалите не се нагаждат към него, то отговора е, че има интернет стандарти, които са приети, добре документирани и трябва да се спазват от всички. IE не само, че не ги спазва, но и не документирано как, така че да могат дизайнерите да се нагодят (ако искат). Затова се стига до ситуации като тази тук:
Това е разделение на времето, прекарано върху един интернет сайт. Зеленото е реално изразходеното време за дизайн, а жълтото – времето прекарано в опити да го подкараш на IE. По-умни хора от мен са го измислили, така че вярвайте. И ако използвайте IE, моля минете на Лисицата за да не ви псуват знайни и незнайни дизайнери.
Хайде да се връщам към тъпата съвместимост. 🙂
Обобщение на предложените инструменти по-долу:
[tags]ie, firefox, z-index, zIndex, bug, бъг, грешка, лисицата, дизайн[/tags]
Сега качих по-голямата част от промените. Ако някой е на IE6 и нещо му изглежда скапано, моля да ми пише, че го нямам на компа.
Земи си фотошопирай малко снимката, че приличаш на масов убиец… 😉
Аз съм я фотошопвал за да излезе такава 😉 Не, всъщност винаги си излизам така. Дебеловрати сме си :).
Юруков, в сафари снимките си стоят твърдо отгоре, а ИЕ6 можеш да свалиш на standalone app ако ти трябва 🙂
Аз те чета _само_ през IE и нямам никакво намерение да си сменям браузъра, само за да ти е по-лесно 🙂
Виж следните хакове за бъга с z-index on a:hover elements. Не съм ИТ профи, но понеже като блогър ми ми се е налагало да се боря с IE, съм успявала винаги чрез търсене в мрежата на хакове за конкретни бъгове и оттам с метода но пробите и грешките съм успявала. Ти, понеже си профи, виж това:
A nasty css hack solution to the IE z-index problem
@Петър – може ли само да пробваш тази страница тук как ти излиза и дали насича. Имам съмнения, че не е точно неподвижният фон проблема, а че всички елементи са ми relative. Всички 🙂
Юруков, сериозно ти говоря:)
* webkit не знае нищо за тоя tilt в js-a (което значи Конкерор, Епифани (с уебкит) и тн.)
* gecko СЕ пъне здраво ако бекграунда ти е неподвижен, вече ти го казах, но ти си се запънал като магаре на мост, че не е от това. Тоест скролира се насечено. Махаме бекграунда (с greasemonkey примерно или направо му казваме да use own colors и хоп-а-ла:) – _може би_ под Уиндоус да е по-различно, няма къде да тествам, но под линукс това е факта. Ако желаеш мога да ти направя и скрийнкаст за да видиш разликата:)
ФФ3 го изтрих преди няколко дни и няма как да преценя там как е:)
Така де, ако ще се пънеш за ИЕ, напъни се още малко и за малцинствата:)
@Shady – Ще го пробвам това. Ще си сложа и Safari да тествам и там.
@Sasho – Ок, никой не те кара. 🙂
@Петър – tilt-a идва от игра с canvas елемента. Доколкото знам се поддържа от всички gecko-та заедно с IE до определена степен. За неподвижният фон най-вероятно си прав. Под windows наистина не насича, но съм го тествал само с FF2 и IE7. Ще го сложа да не е fixed в следващия update. Просто на мен ми харесваше така :(, но в крайна сметка това тук не е за мен.
@Вени Г. – Благодаря за хака. Не мисля обаче, че ще го използвам, а по-скоро ще сменя ефектите. Просто изглежда има твърде много различия между браузърите за да си позволя такива ефекти.
Опс… да прав си
и
работят нормално (последния например има фиксиран бг)
но сече.
Мислех че е това, защото аз като правих една малка страничка имаше този проблем и се орпави като пуснах бекграунда да си се търкаля. Сори за подвеждането, не съм профи в тая област наистина.
Цялата работа е че аз съм си изключил картинките и стайлингите от браузъра и мноо рядко сядам да гледам нещо с дефолтни настройки и това се случи онзи ден когато ти обърнах внимание. Пак се извинявам. И все пак си го има проблема де, само дето не е онова което аз мислех:)
Ти си умен младеж, ще го оправиш:)
Ето и поредната грешка при IE: когато имаме един контейнер с overflow:hidden и вътре в него има елементи с position:relative, тези елементи излизат от границите на контейнера. Ето го тук описано заедно с бърз хак. Започвам да се чудя какво му е чак толкова лошото да се слагат отделни css за различните browser-и.
🙂 няма проблем. Благодаря за помощта. Сега си инсталирах safari, ie5/6, opera и имам browser-a няколко на linux. Имам идея как да направя същите ефекти със само 3-4 елемента, които да имат z-index – ще използвам overflow:hidden за да имитирам скриването на един елементзад друг. Ще има доста размествания в структурата обаче. Сега го пиша. Така поне се решава проблема със safari, за който Shady писа. Ако не насича по linux, ще оставя фона да не се мърда, че много ме кефи така. 🙂
Ето докъде се стига като тръгне човек да тества сайт:
Качих последните промени. Вече се вижда нормално на основните browser-и: FF, IE6/7, Opera и Safari. Единствено при Opera и Safari сянката над снимките не се вижда, а при IE6 малко насича в началото на страницата и кутията с търсенето няма сянка около нея. Последното е защото при IE6 ако се използва filter:progid:DXImageTransform.Microsoft.AlphaImageLoader с relative елементи, които се мърдат наоколо, съдържанието не може да се използва. Поредният бъг може би.