Как избежать боли совместимости CSS с несколькими браузерами?

Question

Мне нужно сделать макет CSS. Мне нужно знать лучшие практики, чтобы избежать боли совместимости с несколькими браузерами CSS.

Что я должен использовать, чтобы избежать проблем в этом отношении? Должен ли я использовать CSS Framework? Если да, то какой?

С наилучшими пожеланиями,

Answer 1

1. Я использую HTML5 Boilerplate в качестве отправной точки для CSS и HTML.
2. Для сайта на основе сетки, я мог бы также использовать Fluid 960 GS
3. Я пишу свой код, чтобы он сначала соответствовал стандартам, а второй - для браузеров.Не убивайте себя за плохие браузеры.
4. Вы можете использовать что-то вроде Modernizr , чтобы показать прогрессивное улучшение. Вот несколько веских причин сделать это
5. Для плохих браузеров, давайте просто назовем его IE, где что-то ломается, просто дайте ему больше места и убедитесь, что все читабельно.Если вы сделаете это, все должно выглядеть хорошо, но не убивайте себя, пытаясь сделать его идеально подходящим для дизайна.Вы можете использовать эту ссылку в пункте 4, чтобы объяснить своему клиенту / боссу, почему это не то же самое в каждом браузере, и почему это хорошо, а не плохо.
6. Если вы можете сделать все это, вашкод будет более приятным для написания, более быстрым для выполнения и намного более близким к тому, чтобы быть ориентированным на будущее.

Если все остальное терпит неудачу, используйте отступы вместо полей, когда это возможно, и все будет более согласованным при просмотрев IE.И если вы поддерживаете IE6, попробуйте и не используйте слишком много прозрачных изображений PNG.

Answer 2

Во-первых, знайте свою аудиторию;это позволяет вам узнать, какие браузеры будет поддерживать ваш сайт.Во-вторых, убедитесь, что вы хорошо разбираетесь в CSS .В-третьих, ознакомьтесь с концепцией «прогрессивного улучшения». Наконец, обратитесь к этому сайту: Должны ли сайты выглядеть одинаково в каждом браузере?

Answer 3

Для начала, хороший понятный код, стилизованный один раз, и только один раз помогает LOADS.Когда я говорю это, я имею в виду, что все ваши CSS-файлы находятся во внешнем файле, а вызовы CSS не выполняются ни на странице, ни в строке.

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

Наконец, держите ваш CSS организованным, комментируйте, размещайте их в категориях.

Большинство кросс-браузерных проблем не работаетс одной стороны, ошибка пользователя.Сделайте это правильно, сделайте это один раз, и вы и ваши пользователи будете счастливы!

Answer 4

QuirksMode.org - отличный ресурс для информации о совместимости браузера.

Answer 5

Здесь есть и другие хорошие предложения, но я добавлю одно: YUI reset CSS stylesheet Он избавляет от некоторых наиболее очевидных проблем несовместимости, не прибавляя большого веса страницы.