BCAF: Финал — CSS тестове

BCAF

След като премина през неколкократно одобрение от българския и английския офис на фондцията, най-накрая дизайнът на сайта е официално приет и завършен.

За да избегна евентуални проблеми с чупенето на колони и размествания под различни браузъри за в бъдеще, реших да тествам с отделни CSS-и на Firefox 1.0 RC1, IE6 и Opera 7.54. Отворете и трите браузъра, за да видите как всеки изкривява CSS-а по свой си начин. За сравнение, това е картинка на оригиналния дизайн.

1. С какво разполагам

Скица, скруктура и стилове.

2. По един CSS за всеки браузър

Firefox — работи с оригиналния CSS. Съвсем коректно отработва всички отстъпи и float-и. Няма нужда от ексцесии като display:table.

IE6 — не зачита отстъпите както трябва и не ги добавя към общия размер. Резултатът е, че изглежда ужасно на не-IE браузър.

Opera — приема отстъпите сходно на IE. Сравнително далече от истината.

3. Изчистване на пречките. Един CSS за всички

Firefox и IE6 — Навсякъде, където има padding и border в комбинация с width или height се заменя с алтернативи, например за ляв отстъп text-indent, а за border позиция на фона. Вертикалния отстъп се маха от обектите със зададена височина и се задава на под-обекта (например, го махам от UL и го добавям на LI).

Firefox, IE6 и Opera — Opera счита, че всеки флоатнат обект, трябва да е 100% широк. Затова правя LI да бъдат display:inline.

4. Позацапвам малко, за да върви и на IE5

За всички браузъри — IE5 не разбира метода за заместване на текст с картинка, когато искам конкретен обект да е rollover. За това, се налага да добавям метод за заместване, който IE5 разбира. От друга страна приема text-indent твърде буквално и го добавя към общата ширина, за което се налага да го замествам с padding-left, но така че другите да не го виждат.

• 
  419
• 
  420