Как я могу разработать основанное на CSS расположение, которое является 100%-м совместимым браузером?
Я не думаю, что «изучение Win32 API» реально для кого-либо. API-интерфейсы (да, их больше одного) огромны, и вам вряд ли когда-нибудь потребуется знать все из них подробно. Я бы порекомендовал почитать некоторые основы (например, создание окон, обмен сообщениями в окнах, оконные процедуры, возможно, некоторые GDI и т. Д.) И использовать MSDN для поиска остальных, когда вам это нужно.
13 ответов
Единственный реальный способ заставить макеты работать в разных браузерах - это потратить время на тестирование в каждом браузере . У различных версий IE есть свои особые проблемы, поэтому используйте условные комментарии для предоставления им дополнительных таблиц стилей.
Начните с хорошего семантического валидного HTML и не пробуйте ничего слишком сложного с компоновкой, и все будет в порядке.
] Если вы не хотите использовать библиотеку / фреймворк CSS, все сводится к опыту и тестированию.
Веб-сайты, на 100% совместимые с браузером, вероятно, основаны на опыте в сочетании с методом проб и ошибок. С запуском IE8 это стало проще, поскольку он (по крайней мере) полностью совместим с CSS2. Тем не менее, вы все равно хотите, чтобы IE7 и IE6 работали достаточно хорошо. Тщательное тестирование жизненно важно.
Помните, что 100% совместимость с браузером не обязательно означает, что они должны выглядеть одинаково ( Должны ли веб-сайты выглядеть одинаково во всех браузерах? ). Небольшие отличия должны быть приемлемы для сложной компоновки, и они, вероятно, должны быть там в течение некоторого времени.
Вот несколько ссылок, на которые, возможно, стоит взглянуть:
100% совместимость с браузером? Похоже, вам нужна какая-то нечестивая дьявольская магия и / или много проклятий и плача.
Если вы не хотите использовать какой-либо тип макета сетки или CSS-фреймворка, вам придется просто делать много проб и ошибок и МНОГО проверять различия между браузерами.
Удачи в ваших начинаниях. Он вам понадобится.
Что касается макета, вы можете увидеть, может ли этот сайт быть хорошей ссылкой. http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
Также существуют такие фреймворки, как Blueprint .
Yahoo также имеет структуру css , которая более сложна.
Во-первых, вам нужно выбрать одну методологию и придерживаться ее. Когда один разработчик делает что-то одним способом, а другие делают это диаметрально противоположным образом, это вызывает проблемы еще до того, как вы начнете.
Во-вторых, вам нужно отбросить идею идентичного опыта в каждом браузере - если это трудно понять, тогда подумайте об этом так: Браузер - это только единственный способ для ваших пользователей потреблять ваш контент. Планируете ли вы также, что каждому человеку, посещающему ваш сайт с помощью мобильного браузера, будет предоставляться одинаковый опыт? или текстовый браузер? Или программа для чтения с экрана? Что насчет IE5? А как насчет тысяч и тысяч пользовательских агентов, доступных вашим пользователям?
Это не все плохие новости. Есть много ресурсов, которые могут помочь с правильной компоновкой с помощью CSS, и многое другое, что может помочь с ошибками, присущими IE. Некоторые из них могут оказаться полезными:
Единственное, что я могу добавить к @Edeverett и @ Dev.e. Ответы loper - это предложение объединить их.
Начните с твердой, действительной, семантической (содержательной) (X) разметки HTML. Сделайте это простым с точки зрения разметки. Используйте хорошо известную библиотеку / фреймворк CSS. Тест, тест, тест.
Невозможно создать макет на основе CSS, который на 100% совместим со всеми браузерами, потому что есть браузеры, которые не проходят тест ACID . Фактически, большинство браузеров не проходят этот тест.
Вы можете только надеяться на то, что будет хорошо выглядеть во всех браузерах (или что изящно ухудшается в браузере с ошибками и / или «функциями»).
дизайн: CSS никогда не предназначался для того, чтобы все выглядело одинаково во всех браузерах, это просто способ сказать браузеру, что вы хотите. Разработчики браузеров довольно свободны в том, что им следует делать с вашими желаниями.
В наши дни распространенным подходом является написание CSS так, чтобы он работал в Firefox (и других современных браузерах, отличных от IE), а затем добавление специфичных для IE исправлений с использованием условных комментариев IE. .
К сожалению, любая нетривиально простая разметка страницы может столкнуться с ошибками в IE 6 и IE 7, которые можно решить, только предоставив этим браузерам немного другой CSS.
И в конце днем вам нужно протестировать свой HTML / CSS во всех браузерах, на которые вы нацеливаетесь; замены этому действительно нет.
Хорошо. Я знаю, что собираюсь получить за это миллион болтовни, но если вы чувствуете, что ваш CSS становится чрезмерно сложным, если вы видите, что вы используете хак для каждого поддерживаемого браузера, если вы не можете не принимайте этого больше, просто используйте чертовы таблицы!
Оставляя это в стороне, единственный способ гарантировать, что ваша разметка / стили работают в каждом браузере (кстати, определите «каждый» - мы говорим об IE6 каждый? ) у вас нет возможности, но, как уже указывалось, протестируйте его во всех этих браузерах. Я видел, как люди использовали для этого некоторые сторонние сайты, например browsershots.org , но с ограниченным успехом. Может быть, это вам поможет.
Я бы предположил, что первым шагом будет использование некоторой формы таблицы стилей сброса (версия Эрика Мейера находится здесь: http://meyerweb.com/eric/Thists/2007/ 05/01 / reset-reloaded / и версия YUI здесь: http://developer.yahoo.com/yui/reset/ ), чтобы убрать стили браузеров по умолчанию, которые кажутся основание для некоторых несоответствий браузера. Он не полностью выравнивает поле, но сглаживает некоторые неровности для более чистой отправной точки.
Браузеры различаются по рендерингу. Неплохо иметь чистые отдельные файлы 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)
- Test, test, test
Наконец, не забудьте убедиться, что вы понимаете DocTypes и то, как они влияют на ваш CSS; точно такой же CSS в том же браузере будет отличаться с другим DocType. Он определяет, как браузер обрабатывает ваш (X) HTML и CSS. Так что будьте осторожны, когда вам интересно, почему «это сработало на xyz.com, но не здесь!»
специфичны для браузеров на основе Mozilla (например, Firefox)Наконец, не забудьте убедиться, что вы понимаете DocTypes и то, как они влияют на ваш CSS; точно такой же CSS в том же браузере будет отличаться с другим DocType. Он определяет, как браузер обрабатывает ваш (X) HTML и CSS. Так что будьте осторожны, когда вам интересно, почему «это сработало на xyz.com, но не здесь!»
специфичны для браузеров на основе Mozilla (например, Firefox)Наконец, не забудьте убедиться, что вы понимаете DocTypes и то, как они влияют на ваш CSS; точно такой же CSS в том же браузере будет отличаться с другим DocType. Он определяет, как браузер обрабатывает ваш (X) HTML и CSS. Так что будьте осторожны, когда вам интересно, почему «это сработало на xyz.com, но не здесь!»
МОЙ совет - прекратить попытки сделать его на 100% кроссбраузерным. Потратьте свое время и ресурсы на проектирование для больших мальчиков - IE7 / 8, FF, Safari, (Chrome?) И МОЖЕТ БЫТЬ Opera, поскольку они, скорее всего, составляют более 98% вашей аудитории. Вы можете включить туда и IE6, но давай, уже 2009 год, а до нас осталось две версии браузера. Проектирование для IE6 сейчас было похоже на проектирование для IE4, когда вышел IE6. Но это ваш выбор.
По моему опыту, для 1-2% пользователей, использующих нестандартные браузеры, не стоит тратить ваше время (которое я проверял в последний раз, равняется деньгам) пытаться угодить всем. Однако, если время и деньги неограниченны, развлекайтесь, выдергивая волосы.
О, и пришлите мне немного этих денег, так как это неограниченно и все: D
РЕДАКТИРОВАТЬ - начните разработку в FireFox и вносите изменения в нее. Вроде самый "правильный"
Мой совет - просто попытайтесь заставить его работать. Когда вы сталкиваетесь с проблемой, некоторое время ищите ответ в Google. Если вы не можете найти его, ТО задайте вопрос на форуме. Я думаю, что именно так большинство людей изучают свое мастерство CSS, поскольку многие ошибки и исправления далеки от очевидности, и вам просто нужно постепенно становиться жертвой, а затем изучать решение всех ошибок браузера CSS, которые существуют.