Произойдет так потому что в браузере уже есть свои стили для элементов, которые по умолчанию применяются к открываемым в нем страницам. И дело в том что в разных браузерах эти правила немного отличаются, от браузера к браузеру. Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.

Чтобы убрать эти различия, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный.css файл: reset.css или normalize.css

reset.css — что он делает и как его использовать

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

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

Скачать reset.css

Скачать reset.css можно на сайте cssreset.com

Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:

normalize.css — как он работает и в чем разница

После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.

Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться 😉

Скачать normalize.css

Скачать normalize.css можно с сайта necolas.github.io/normalize.css

Или загрузить с моего блога:

Что лучше reset или normalize?

Однозначного ответа нет.

Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.

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

Каждый инструмент хорош, главное правильно его использовать 😉

При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор css-свойств, который будут одинаково хорошо понимать все основные браузеры. И если с браузерами Firefox, Google Chrome, Opera и Safari такая проблема чаще всего не возникает, то в случае с различными версиями Internet Explorer добиться кроссбраузерной верстки очень сложно. Поэтому для решения этой проблемы нужно написать часть css-свойств специально для некоторых версий IE (чаще всего это IE6 и IE7). Сделать это можно двумя способами: первый — использование условных комментариев Internet Explorer (Conditional comments), второй — применение css-хаков (например, *margin-left:10px или _margin-left:10px). Оба способа имеют ряд недостатков, но, к счастью, есть еще одно решение, которое я считаю самым оптимальным для создания кроссбраузерных css-файлов.

Сначала более подробно о недостатках первых двух способах. В случае с использованием условных комментариев мы подгружаем отдельный css-файл с дополнительными стилями для различных версий Internet Explorer. Например, так:

Недостатки такого способа заключаются в следующем:

• мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;
• стили разбиваются на разные файлы, что очень сильно затрудняет их поиск во время работы над версткой сайта (я сам очень часто работал с такими проектами, где отдельные css-файлы для ie7 являются нормой, и потратил кучу времени на понимание, откуда же, черт возьми, грузится тот или иной стиль для IE).

Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша . Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега , подобно тому, как выставляет классы js-библиотека Modernizr .

Код для открывающего тега , таким образом, будет выглядеть так:

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

Здравствуйте дорогие читатели!

Все мы желаем того, чтобы написанные нами стили корректно отображались в различных браузерах. Но как ни крути, придется дописывать стили, чтобы они работали в других браузерах. Этот процесс называется – приведение верстки сайта к кроссбраузерному виду . Кроссбраузерность — это когда css стили корректно отображаются в различных браузерах, и их различных версиях.

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

1. Ориентируйтесь на самые популярные браузеры. В сети можно найти рейтинги браузеров. Также стоит учитывать регион аудитории сайта. Например, если это сайт для аудитории из Африки, то тут уже преобладает не Chrome, а другой браузер. Также в процессе верстки стоит посматривать, как выглядит сайт в тех браузерах, что занимают 2 и 3 место.

2. Можно поискать самые популярные css стили , которые неправильно выглядят в других браузерах. Найти для них CSS хаки.

3. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей . Хочу выделить 2 самых интересных на мой взгляд.

Инструменты для CSS кроссбраузерности.

• Описано много стилей;
• Есть пример использования с результатом.

• Поначалу сложно ориентироваться на сайте;
• Нельзя генерировать стиль со своими параметрами (дан свой пример использования).

CSS3 Generator

• Удобен и интуитивен в управлении;
• Можно генерировать стили для своих параметров;
• Можно посмотреть результат генерированного стиля.

• Мало стилей

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Кроссбраузерность - способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Например, вы сделали сайт для вашего интернет-магазина. Вы разработали красивый дизайн, который приятен для глаз. Но на ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в некоторых браузерах сайт будет отображаться плохо.

Могут съезжать элементы, могут не отображаться картинки, станут некрасивыми шрифты. Человек не будет пользоваться таким сервисом. Он пойдет искать дальше.

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

Кроссбраузерность верстки

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как Chrome. Есть и менее используемые (Safari, Internet Explorer), но если вы делаете сайт для людей, то должны знать про кроссбраузерность – как сделать ее и что это вообще такое. Давайте посмотрим, как добиться одинакового отображения сайта во всех основных браузерах.

Главная цель кроссбраузерности – не допустить значительных изменений дизайна сайта в разных веб-обозревателях. Если разница есть только в мелочах и на общее восприятие сайта это не влияет, то можно сказать, что с проблемой кроссбраузерности вы справились. Но все-таки, какие реальные советы можно дать по этому поводу?

Как добиться кроссбраузерности

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

Например, IE6 является одним из самых проблемных браузеров в плане поддержки новых тегов html и свойств css. И все же некоторые сегодня до сих пор требуют нормальное отображение сайта в этом браузере. Как по мне, это уже чересчур. Поддержки IE8 достаточно.

Впрочем, это небольшое отступление. Теперь давайте рассмотрим реальные шаги, которые помогут сделать кроссбраузерность сайта.

Используйте по максимуму готовые решения. Если вы хотите реализовать новые свойства и научить старые браузеры их понимать, понадобятся javascript-библиотеки. Без них в данном случае просто никуда. Вы должны установить jQuery.

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

Итак, сначала нужно проследовать на официальный сайт. https://modernizr.com/download. Здесь нужно отметить галочками те технологии, которые вы планируете использовать на своем сайте. Нужно сказать, что список достаточно длинный и без среднего знания современных веб-стандартов и английского языка вы едва ли сможете разобраться. В любом случае, есть и интуитивно понятные свойства. Даже если вы отметите галочками все, то полученный код не будет слишком громоздким.

Рис. 1. Выбор технологий, которые будет проверять библиотека.

Проверка работы библиотеки

После скачивания пользовательской версии библиотеки нужно проверить ее работу. Ее необходимо будет подключить с помощью тега script, указав путь до файла. Если все правильно, то у тега html должно появиться много новых стилевых классов. Эти классы названы по тем технологиям, которые вы отметили галочками.

>p?Соответственно, если в теге html будет указан такой класс, значит, технология в этом браузере работает. Если же что-то не поддерживается, то будет прописан класс “no-название технологии”. Сразу же приведу пример:

К примеру, вам надо проверить свойство box-shadow. Для справки, оно задает тень элементу. Если браузер поддерживает его, то в теге html появится этот стилевой класс. Если веб-обозревателей не распознает свойство, то появится класс “no-boxshadow”.

Рис. 2. В теге html вы увидите множество классов. В этом случае видим, что браузер поддерживает практически все технологии.

Теперь управление кроссбраузерностью полностью в ваших руках. Достаточно классу no-boxshadow задать какие-то альтернативные свойства и во всех браузерах, которые не поддерживают свойство box-shadow, вместо этого будут применены эти правила. Это очень удобно.

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

Multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat, url("изображение2.png"); } .no-multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat lightgray; }

Объяснение примера. Нас интересует технология множественных фонов, которые давно поддерживаются в СSS3. Для этого достаточно перечислять адреса картинок и их параметры через запятую. Естественно, старые браузеры не поддерживают этого, поэтому для них прописываем свои стили, используя класс.no-multiplebgs. Он указывает на то, что стили применяться в том случае, если браузер не поддерживает множественные фоны.

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

Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример.