CSS за IE6 и IE7 със само един допълнителен символ в кода
от elizazhelevaВсички знаем, че IE6 и IE7 са черните овци в света на уеб дизайна. Особено IE6. За да се справят с неадекватното поведение и бъговете на IE6 и IE7, дизайнерите пишат километрични кодове или дори правят отделен stylesheets за IE. Всички хакове и други опити да се избяга от положението костват много време, а времето е пари. Всичко може да е много по-лесно:
Недостатъкът (разбира се, не може всичко да е перфектно) е, че това не е валиден CSS код. Замислете се обаче колко от големите бизнес сайтове са с валиден CSS код? Разбира се, това не означава изобщо да се откажете да пишете валиден код и горещо препоръчвам да го правите винаги, когато е възможно. Според моя опит справянето с IE7 е доста по-лесно от IE6 и никога не ми се е налагало да пиша отделен stylesheet за IE7. За 9 годишния IE6 обаче нещата са различни. Мисля да си сменя тактика и тя да бъде следната: клиенти, които са в крак с технологиите и не държат на поддръжка за IE6 ще бъдат с валиден код. Тези обаче, които твърдо отказват да влязат в този век и продължават да използват IE6 и да държат да го поддръжам, ще получават невалиден CSS код, за да оправя бъговете в IE6. Ако и този вариант не ги устройва, винаги могат да си платят за сайт и половина (тъй като фиксването на бъгове в IE6 понякога отнема почти толкова време, колкото изработката на цял сайт). В края на краищата не може да искаш сайтът ти да е перфектен, валидиран и безгрешен, а в същото време да отказваш да използваш съвременни технологии.
Дали това е прекалено строга мярка и има ли друг начин да отворим очите на потребителите? Според статистика от август 2010 на Net Applications, 16% от хората в интернет използват IE6. До кога ще продължаваме да робуваме на IE6 и отказа на потребителите да използват по-нови браузъри?
Има такива бъгове (и те са най-лошите) в ИЕ6, които стават при комбинация на определени фактори, напр. йерархия от div-ове, и съответно как е настроен елемента position – има ли го, дали е relative или absolute и тн, или пък когато настройваш размери на елементи, или пък бъговете с нестандартното изчисление на box model (ИЕ6 изчислява width, padding, margin различно от другите браузъри) и тн.
Тоест с този трик далеч не можеш да покриеш бъговете на ИЕ6, включително едни от най-неприятните, които ти разбиват целия layout..
Най-доброто решение е просто да оставим ИЕ6 да почива в мир… :))) Време му е.
Прав си за всички бъгове, които си изброил :) Аз успявам така да си оправям css-a за IE6, но е голяма играчка, защото това означава голяма част от дивовете да имат по няколко width-a, точно заради различния алгоритъм за изчисляване на width, когато има margin или padding. Но е още по-голяма играчка да пишеш отделен stylesheet. Последният сайт, който правих и трябваше да поддържам и за IE6 беше с доста сложна структура, но въпреки това (слава богу) успях да фиксна бъговете само с няколко допълнителни реда. А тайната ми е, че избягвам да използвам йерархия на дивове, защото става мазало в IE :) И да, на 1000% си прав, че най-доброто решение е да оставим IE6 да си умре спокойно. Мисля да се пробвам на работа да ги убедя, че НЕ МОЖЕМ повече да поддържаме IE6 и че това не е просто каприз, а двойно повече работа, която би следвало да се заплаща от клиентите.
Този IE направо ми къса нервите! От скоро почнах да се заминавам с уеб дизайн и понеже работя с Flux (macOS), нямаше как в реално време да тествам сайта на IE. Е сайтът е готов и в крайна сметка се оказва, че работи „добре“ във Firefox, Safari, Chrome, Opera, IE8. Но в IE6/7 всичко е един голям хаос. Най-лошото е, че сам се уча и няма кой да помоля за помощ. Всичко чета от интернет, точно като този пост по-горе, който смятам да опитам. Но въпросът е как да разбера къде точно е проблема страницата да не излиза, както трябва? Не знам дали е позволено постването на линкове, ето го сайта: http://www.perseus-books.com
Съвсем случайно попаднах на този блог. Поздравления на авторката. Рядко ми харесват блогове из мрежата.
Здравей. Малко ми е трудно така да помогна, защото трябва да изчета целия код от начало до край, но все пак мога да ти дам няколко съвета, които според мен ще ти решат проблемите. Първо, според мен нямаш нужда от този контейнер #mycontent. Второ, защо bottombar в кода е над topbar? Може и това да обърква браузърите. Аз лично бих използвала следната структура за сайта:
1. Веднага след отваряне на body-то слагам един таг < `center`>< `/center`> (без `-тата), в който пълня цялото съдържание (така си центрирам сайта). Може и с align center на body-to, но това не работи във всички браузъри.
2. Слагам див за логото (без бутоните) с фиксирани width и height и без position.
3. Слагам след него див за бутоните пак с фиксирани width и height и без position и нареждам картинките вътре. Няма нужда всеки бутон да е в отделен див, имайки предвид, че са на картинки. Ако пък всеки бутон ти е отделен див, то тогава използвай position: inline-block.
4. После слагам див за съдържанието на сайта и нарая див за footer-a.
Нещо такова:
Ако имаш още проблеми или въпроси, пиши, ще се радвам да помогна :)
Здравей!
Първо да ти благодаря, че си избрала за илюстрация, част от графиката на сайта ми RIPIE6. :)
И второ да дам съвет.
Когато използваш хаковете „*“ и „_“, кода работи за IE-тата, но не се валидира. А и не е добра идея, при огромни проекти, където е почти сигурно че ще има огромно количество от различни стилове за IE. В такива случай не е желателно да се използват тези хакове, защото усложняваш и уголемяваш CSS файла си и затормозяваш останалите браузъри, за да може да угодиш на IE. Мислиш ли, че го заслужава? ;)
Съществуват далеч по-културни методи за задаване на различни стилове според даден браузър. Конкретно за IE-тата, можеш да си правиш отделни CSS файлове и да detect-ваш версията по начин, който не проваля валидацията на сайта. Ето така:
За повече инфо около различни проблеми с IE6 можеш да погледнеш тук: http://martinmetodiev.com/my-web/ie6_fixes/
…
Друг, страхотен начин за задаване на стилове за различни браузъри е с помощта на скрипта CSS Browser Selector.
С него можеш да задаваш стилове за всички видове браузъри и всичките им версии поотделно, както и за мобилни устройства, плюс detect-ване и на операционната система.
За скрипта можеш да прочетеш повече тук:
http://martinmetodiev.com/my-web/css_browser_selector/
…
Дано съм бил полезен. :)
Успех,
Марто
Здравей, Марто! Не знаех, че е твоя графиката (пръсната е навсякъде из нета и дори не помня от кой сайт съм я взела), но поздравления – супер е :) Иначе си прав за другите неща, аз съм написала, че това не е валиден код и вече според желанието и възможностите на клиентите, които искат поддръжка за ИЕ6 ще преценяваме как точно да процедираме. В повечето случаи и аз детектвам версията на браузъра и според нея се отваря съответния CSS. Иначе и тези хакове съм използвала, но на доста малки сайтове, така че всичко е било ОК. Но пак наблягам на това, че зависи от клиента. Моето лично мнение е изобщо да се спре поддръжката на ИЕ6, а за клиенти, които държат все пак да я правим, просто да им искаме допълнителна такса за това и ако този вариант ги устройва, разбира се, че ще бъде с валиден код. Просто зависи от клиента, защото предполагам и ти си се сблъсквал с точно този тип клиенти, които за доста скромна сума искат страшно много неща и имат безброй много претенции извън договора, за които не искат да плащат. Да не говорим колко пъти се е случвало след като сайтът вече е готов, изпрограмиран и публикуван онлайн, клиентът изведнъж да се сети, че иска поддръжка и на ИЕ6 и я иска безплатно, разбира се… Така че вариантите са много, и всичко е въпрос на договаряне. Моята работа е да обясня на клиентите как точно седят нещата, да им посоча плюсовете и минусите и съответната тарифа и от там нататък те да си решават.
Това което казваш за клиентите е абсолютно така. Всеки от бранша го знае и го споделя.
Относно поддръжката на IE6, подкрепям и аз тази идея. От година насам вече не поддържам IE6 в сайта си (препращам ги към http://www.ripie6.com), отделно, че и в служебен план вече изолираме Шестицата.
До една степен това ускорява процеса, освобождава време за развиване и откриване на новости. От друга страна отслабваш в дебъгването, било то и стар браузър. Така, че за всяко нещо се изисква периодичен тренинг. По последни данни 11.1% от българите използват IE6. Не е малко… докато не падне под 3%… няма мърдане. В световен мащаб е друго… :)
Отдавна се занимавам с разработка на web и не съм фен на каквито и да било „хакове“. Личните ми наблюдения са, че проблемите под IE6 се фиксват относително лесно с максимум няколко допълнителни/модифиирани реда в отделен .css документ, без да са необходими посочените хакове. Последното се прави паралелно с писането на читав и валиден css за останалите браузъри, вкл. IE7. С опита всеки front-end специалист се научава да предвижда и избягва появата на бъгове под стари версии на IE, което в никой случай не е свързано със значителен разход на време (на мен само веднъж един peek-a-boo ми е отнемал повече ресурс за фиксване).
Не се обиждай, но отношението ти към клиентите е много незряло и погрешно. Отдено и начинът, по който си избрала да ориентираш качеството на крайния си продукт, не е правилно. Сайтът се прави не за клиента, възлагащ поръчката, а за потребителите (таргет), които ще го ползват. Има случаи, в които остарял браузър се ползва по обективни причини. Орязвайки сайта под IE6 ти не „наказваш“ клиента за лошата му платежна култура, а отблъскваш крайния потребител, не го превъзпитаваш или му „отваряш очите“ за прогресивното при браузърите (отделно, че е малко арогантно последното) или казано с думи прости – такъв сайт sucks и като визия, и като UX. Ако професионално се занимаваш с web като част от някаква компания е недопустимо подобно селективно вариране в качеството, каквито и доводи да изтъкнеш.
Горното не е заяждане, а излагане на принципна позиция от колега. Няма как IE6 да се пренебрегне, само защото създава проблеми, докато все още непренебрежим дял от потребителите го използват.
Здравей, радвам се да чуя мнение и от „другата страна“. Съгласна съм, че в повечето случаи, за да накараш сайт под IE6 да работи е достатъчно просто да напишеш нов css файл, който да е специално за IE6. За съжаление много пъти ми се е случвало да правя поддръжка на сайт, който не съм правила аз и който не работи в IE6 и за да го накарам да проработи трябва не само да напиша отделен css файл, а и да сменя изцяло структурата на дивовете, което, вярвай ми, отнема много повече време, от колкото да започнеш сайт от самото начало. За да подкова още повече тезата си, ти препоръчвам да видиш някоя табличка (в нета е пълно с такива), които отразяват реалното действие на браузърите, или по-точно кои браузъри какво от CSS-a могат да изпълнят, кое изпълняват бъгаво и кое изобщо не го изпълняват. IE6 е много, много назад. А самият факт, че дори Microsoft са се отказали от него за мен говори много. Пробвай да отвориш youtube през ИЕ6 и ще видиш любезно подканване да влезеш в този век, а именно „Браузърът ви не се поддържа повече. Моля, надстройте до модерен браузър.“ :) Дори google като отвориш през IE6 излизат някакви прозорци с грешки. А честно казано изобщо не мисля, че google или youtube oтблъскват по някакъв начин клиентите си.
Колкото до „платежната култура на клиентите“, колкото и да е жалко, за да получиш нещо трябва да си заплатиш. Това е реалното положение, не само в България, а навсякъде. Няма как да стане клиентът да иска да даде 200лв и аз, мислейки не за него, а за крайните потребители, да му направя сайт с флаш хедър, онлайн магазин, продуктов каталог и SEO.
Катя (sky_mender),
с цялото ми уважение, да работиш в уеб бранша, означава не само да правиш онлайн „брошури“, а да си в крак с развитието на технологията. Уеб пространството се развива изключително бързо, скоро HTML5 и CSS3 ще станат официалните езици на интернет. IE6 е вече на почти 10 години… този браузър само като види „transparent“ и забива, да не говорим за всики нововъведение, които Mozilla, Safari и Chrome, вече поддържат, като CSS селектори, content атрибути и т.н. IE6 все още е реалност, само защото има разработчици, които си губят времето и потенциала да го поддържат. Аз лично не виждам нито една обективна причина, която да пречи на потребителите да си инсталират браузър от този век.
Ако така или иначе ще се занимаваме да правим сайтове, които работят на IE6, защо въобще да се мъчим с нововъведение?
Този IE направо ми къса нервите! От скоро почнах да се заминавам с уеб дизайн и понеже работя с Flux (macOS), нямаше как в реално време да тествам сайта на IE. Е сайтът е готов и в крайна сметка се оказва, че работи „добре“ във Firefox, Safari, Chrome, Opera, IE8. Но в IE6/7 всичко е един голям хаос. Най-лошото е, че сам се уча и няма кой да помоля за помощ. Всичко чета от интернет, точно като този пост по-горе, който смятам да опитам. Но въпросът е как да разбера къде точно е проблема страницата да не излиза, както трябва? Не знам дали е позволено постването на линкове, ето го сайта: http://www.perseus-books.com Съвсем случайно попаднах на този блог. Поздравления на авторката. Рядко ми харесват блогове из мрежата.