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

Question

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

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

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

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

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

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

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

Answer 1

Единственный реальный способ заставить макеты работать в разных браузерах - это проводить тестирование времени в каждом браузере . Различные версии IE имеют свои особые проблемы, поэтому используйте условные комментарии для предоставления им дополнительных таблиц стилей.

Начните с хорошего семантического корректного HTML и не пытайтесь ничего сложного с макетом, и все будет в порядке.

Если вы не хотите использовать библиотеку / фреймворк CSS, все сводится к опыту и тестированию.

Answer 2

100% веб-сайтов, совместимых с браузерами, вероятно, основаны на опыте в сочетании с методом проб и ошибок - в основном. Это стало легче с запуском IE8, поскольку он (по крайней мере) полностью совместим с CSS2. Вы все еще хотели бы, чтобы IE7 и IE6 работали достаточно хорошо. Тщательное тестирование жизненно важно.

Имейте в виду, что 100% -ная совместимость с браузерами не обязательно означает, что они должны выглядеть одинаково ( Должны ли веб-сайты выглядеть одинаково во всех браузерах? ). Незначительные различия должны быть приняты для сложного макета, и, вероятно, должны быть там в течение некоторого времени.

Вот несколько ссылок, на которые стоит взглянуть:

• Маленькие шкатулки
• Содержит поплавки
• HTMLdog Advanced CSS
• http://layouts.ironmyers.com/

Answer 3

100% совместимость браузера? Похоже, вам нужна какая-то нечестивая магия дьявола и / или много ругательств и плача.

Если вы не хотите использовать какой-либо тип сетки или CSS-фреймворк, вы застрянете на том, что вам просто нужно много проб и ошибок и МНОГО проверять различия между браузерами.

Удачи в ваших начинаниях. Вам это понадобится.

Answer 4

Во-первых, вам нужно выбрать одну методологию и придерживаться ее. То, что один разработчик делает что-то одним способом, а другие делают это диаметрально противоположным образом, требует неприятностей еще до начала.

Во-вторых, вам нужно отбросить идею одинакового опыта в каждом браузере - если это трудно понять, подумайте об этом так: Браузер - это единственный способ для пользователей использовать ваш контент. Планируете ли вы также предлагать идентичный опыт каждому посетителю вашего сайта с помощью мобильного браузера? или текстовый браузер? Или программа для чтения с экрана? А как насчет IE5? А как насчет тысяч и тысяч пользовательских агентов, доступных вашим пользователям?

Это не все плохие новости. Существует множество ресурсов, которые могут помочь в правильной верстке с использованием CSS, и еще больше, которые могут помочь с ошибками, присущими IE. Некоторые из них вы можете найти полезными:

• Позиция это все
• Причудливый режим ППК
• Список отдельно

Answer 5

Что касается макета, вы можете увидеть, может ли этот сайт быть хорошей ссылкой. http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Также есть фреймворки, такие как Blueprint .

У Yahoo также есть css framework , что более сложно.

Answer 6

МОЙ совет - перестать пытаться сделать его совместимым с браузерами на 100%. Потратьте свое время и ресурсы на разработку «больших мальчиков» - IE7 / 8, FF, Safari (Chrome?) И MAYBE Opera, поскольку они, скорее всего, представляют более 98% вашей аудитории. Вы также можете включить туда IE6, но, cmon, уже 2009 год, и у нас две версии браузера. Проектирование для IE6 теперь было похоже на проектирование для IE4, когда вышел IE6. Но это ваш звонок.

По моему опыту, для 1-2% пользователей, использующих нестандартные браузеры, не стоит тратить время (которое я последний раз проверял, равнялось деньгам), чтобы попробовать и угодить всем. Однако, если время и деньги не ограничены, развлекайтесь, потягивая волосы.

О, и пришлите мне часть этих денег, поскольку они неограниченны и все: D

РЕДАКТИРОВАТЬ - начните свою разработку в FireFox и настройте ее. Вроде бы самый "правильный"

Answer 7

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

Answer 8

Я хотел бы предложить, чтобы первым шагом было использование какой-либо формы таблицы стилей сброса (версия Эрика Мейера здесь: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ и версия YUI здесь: http://developer.yahoo.com/yui/reset/) убрать стили браузеров по умолчанию, которые, по-видимому, лежат в основе некоторых несоответствий браузера. Он не полностью выравнивает поле, но сглаживает некоторые неровности для более чистой начальной точки.

Answer 9

Хорошо. Я знаю, что получу миллион болтов за это, но , если вы чувствуете, что ваш CSS становится слишком сложным, если вы видите, что вы используете хак для каждого поддерживаемого вами браузера, если вы не можете больше не бери, просто пользуйся таблицами Гоша Черт!

Если оставить это в стороне, единственный способ убедиться, что ваша разметка / стили работают в каждом браузере (кстати, определить «каждый» - мы говорим о IE6 каждый?), У вас нет пути, но, как люди уже указали Протестируйте его во всех этих браузерах. Я видел, как люди используют некоторые сторонние сайты для этого, например, browsershots.org с ограниченным успехом. Может быть, это поможет вам.

Answer 10

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

Хотя это и редко, есть время и место для столов, и вам просто нужно выбрать, когда это произойдет. Когда время разработки и пользовательский интерфейс приносят разумную жертву ради «лучшей практики, не использующей таблицы», вы не обязательно становитесь победителем.

Каждый макет настолько сильно отличается по своим нюансам, что ошибки (/ различия) браузера невозможно предсказать точно - хотя некоторые встречаются чаще, чем другие.

Я упоминаю о различиях, а также об ошибках, потому что многие браузеры несовместимы друг с другом, что связано с различными и, возможно, одинаково допустимыми интерпретациями стандарта HTML.

Что касается руководства по совместимости браузера, то нет другого решения, кроме test, test, test .

Установите как можно больше браузеров (FF, Chrome, IE, Safari, Flock, Opera и т. Д.). Но сложно одновременно поддерживать разные версии разных браузеров. Здесь пригодятся такие сайты, как browsercam.com (коммерческий) и browsershots.org (бесплатный). Они делают снимки вашего сайта в таком количестве комбинаций браузеров и ОС, о которых вы только могли подумать.

Browsercam.com на самом деле позволяет вам входить в систему на компьютерах и также работать с сайтами, что может быть удобно при отладке интерактивных CSS и JS.

Мой совет будет:

• Прочитайте пару книг по CSS
• Убедитесь, что вы не используете какой-либо браузер (если вы не уверены, проверьте все в Google) - например, любые свойства CSS, начинающиеся с "-moz", относятся к браузерам на основе Mozilla (например, Firefox)
• Тест, тест, тест

Наконец, не забудьте убедиться, что вы понимаете DocTypes и как они влияют на ваш CSS; точно такой же CSS в том же браузере будет отличаться с другим DocType. Он определяет, как браузер обрабатывает ваши (X) HTML и CSS. Так что следите, когда вам интересно, почему «это работало на xyz.com, но не здесь!»