Как я могу разработать макет на основе CSS, который на 100% совместим с браузером?

Question

Мы находимся в процессе создания нескольких макетов для различных внешних и внутренних веб-сайтов.

Один из разработчиков использует не очень лучшую практику переключения своего CSS-файла (один для FF и один для IE) на основе пользовательского агента. :/ Другие придерживаются макетов таблиц, потому что они совместимы с браузером.

Я хотел бы получить небольшое руководство о том, как использовать CSS для разметки и размещения элементов. Это должно быть совместимо с браузером. Макеты сетки или «CSS-фреймворки» не могут быть использованы, поскольку они не являются гибкими для того, что здесь делается.

Например, если нам дают изображения от сторонней дизайнерской фирмы шириной 90 пикселей, мы не собираемся помещать их в ячейку сетки шириной 60 пикселей. И мы не собираемся изменять их размер, чтобы соответствовать. Если фирма разрабатывает главную страницу, было бы глупо щелкать по ссылке и видеть, что все логотипы / графические материалы уменьшаются в размере.

Нужен какой-то ресурс или совет, чтобы указать мне правильное направление.

Редактировать : здесь добавлен поворот. Мы не касаемся HTML, мы используем компонентный дизайн из JSF и Oracle ADF ... Они будут отображать HTML, мы используем CSS для их выравнивания и стилизации.

Edit2 : Мы можем добавить стили и атрибуты в HTML до его рендеринга. Просто помните, что мы не редактируем файл .html, он создается компонентами.

Answer 1

Невозможно создать макет на основе CSS, который на 100% совместим во всех браузерах, поскольку существуют браузеры, которые не проходят тест ACID . Фактически, большинство браузеров не проходят этот тест.

Вы можете только надеяться на что-то, что выглядит хорошо во всех браузерах (или что изящно ухудшается в браузере с ошибками и / или "функциями").

Это сделано специально: CSS никогда не должен был выглядеть одинаково во всех браузерах, это просто способ сказать браузеру, что вы хотите. Разработчики браузеров довольно свободны в том, что им следует делать с вашими пожеланиями.

Answer 2

Единственное, что я могу добавить к ответам @Edeverett и @ Dev.e.loper - это предложение их объединить.

Начните с надежной, корректной, семантической (значащей) (X) HTML-разметки. Сохраняйте это простым с точки зрения разметки. Используйте хорошо известную библиотеку CSS / Framework. Тест, Тест, Тест.

Answer 3

Обычный подход в наши дни - это написать свой CSS так, чтобы он работал для Firefox (и других современных браузеров не IE), а затем добавить специфичные для IE исправления, используя условные комментарии IE .

К сожалению, любой макет страницы, который не так прост, может привести к ошибкам в IE 6 и IE 7, которые могут быть решены только путем предоставления этим браузерам немного другого CSS.

И, в конце концов, вы должны протестировать свой HTML / CSS во всех браузерах, на которые вы ориентируетесь; это действительно не заменит.