+7 (747) 236 7503   mail@creoad.kz
Ежедневно с 12:00 до 22:00

Что такое кроссбраузерная верстка сайта?

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

Основные браузеры
Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации. Для того, чтобы узнать, какие свойства CSS можно использовать уже сегодня, воспользуйтесь сервисом caniuse.

Вендорные префиксы
Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузера Mozilla
  • -ms — префикс для Internet Explorer
  • -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome

Пример с вендорными префиксами:

  • -webkit-transition-duration:0.6s;
  • -moz-transition-duration:0.6s;
  • -o-transition-duration:0.6s;
  • -ms-transition-duration:0.6s;
  • transition-duration:0.6s;

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

Стандартные стили браузера
Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера. Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».

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

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

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

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css и normalize.css распространяются бесплатно.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Наш блог

Ознакомьтесь с нашими новостями!
04Апр

Лучший HTML Редактор 2020 года

Мы все делаем ошибки, и это также относится к написанию кода. Но независимо от того, являетесь вы опытным разработчиком или […]

04Апр

Что такое Joomla?

От автора: приветствую Вас дорогой друг. Системы управления контентом, в данное время, пользуются огромнейшей популярностью среди веб-разработчиков, потому как позволяют […]

03Апр

Что Такое WordPress? Обзор Самой Популярной CMS

Что такое WordPress? На сегодня это самая популярная система управления контентом (Content Management System) в мире. Эта CMS лежит в […]

Напишите нам

Оставьте информацию о себе, мы перезвоним вам чтобы узнать детали

Отправьте нам сообщение

Контактная информация

Мы находимся

010000 г. Нур-Султан

Напишите нам

mail@creoad.kz

Creo logo
Написать в WhatsApp Whatsapp