На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же HTML код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.
Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой HTML". Умение верстать такой код - весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?
Существует несколько причин возникновения различного вида сайта на различных обозревателях.
1. Использование нестандартных возможностей HTML.
Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине - если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.
Всегда проверяйте написанный вами код на соответствия стандарту.
Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.
Hello world |
Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега
В данном случае, ошибка не велика, так как атрибут height у тега
Правильное решение для примера с табличной - это использование стилей. Вот как может выглядеть "правильный" код:
Hello world |
Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.
2. Значения атрибутов по умолчанию.
У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.
Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости "додумывать" значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
background-color: white;
}
Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.
3. "Особенности" некоторых браузеров.
Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.
Поскольку основной виновник проблем несовместимости со стандартом - это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.
Самый распространенный способ - это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.
На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же HTML код выглядит по разному в разных браузерах. Более того, один и тот же код выглядит по разному в разных версиях одного и того же браузера.
Естественно, любой веб мастер должен заботится о том, чтобы сайт выглядел одинаково в наибольшем количестве браузеров. Именно это умение (когда код выглядит одинаково в различных браузерах) и называют "кроссбраузерной версткой HTML". Умение верстать такой код - весьма полезно и ценится потенциальными работодателями. Очень часто такое требование стоит одним из первых в условиях, которым должен удовлетворять потенциальный кандидат на вакансию веб программиста в серьезную компанию.
Почему сайт выглядит по разному в различных браузерах?
Существует несколько причин возникновения различного вида сайта на различных обозревателях.
1. Использование нестандартных возможностей HTML.
Дизайнер может использовать возможности, которые не входят в стандарт HTML. Действительно, браузеры могут поддерживать множество различных атрибутов тегов, которые не описаны в стандарте. Использовать эти возможности не рекомендуется. По одной простой причине - если что-либо не описано в стандарте, какой-либо из браузеров может это не поддерживать. И создатели такого браузера будут совершенно правы. Не нужно использовать нестандартные особенности.
Всегда проверяйте написанный вами код на соответствия стандарту.
Приведу классический пример. Рассмотрим следующий HTML код простейшей таблицы.
Hello world |
Данный код выводит таблицу, состоящую из одной ячейки. Веб дизайнер хочет, чтобы высота первой строки данной таблицы была равна 100 пикселям. Однако, в стандарте HTML у тега
В данном случае, ошибка не велика, так как атрибут height у тега
Правильное решение для примера с табличной - это использование стилей. Вот как может выглядеть "правильный" код:
Hello world |
Данный вариант будет (или, по крайней мере, должен) отображаться одинаково во всех типах браузеров.
2. Значения атрибутов по умолчанию.
У каждого HTML элемента существует множество атрибутов. Это и цвет, и расстояние до соседних элементов, и выравнивание, и многое другое. Когда верстается HTML код, дизайнер обычно задает значения только тех атрибутов, которые для важны для представления элементов на странице. Что же делать браузеру со значениями неуказанных атрибутов? В этом случае браузеры используют значения по умолчанию. И вот тут-то и кроется опасность. Значения по умолчанию у различных браузеров могут различаться. Например, размер шрифта по умолчанию может быть разным. Из-за этого в одних браузерах текст займет больше места, чем в других. Что, в свою очередь, может привести к различиям в отображении страницы.
Как можно решить эту проблему? Во-первых, универсальный совет: проверять отображение сайта в как можно большем количестве браузеров. Во-вторых, можно в css файле задать свои значения по умолчанию для всех элементов, которые используются на странице. Это избавит браузер от необходимости "додумывать" значения свойств HTML элементов. Сделать это можно, например, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
background-color: white;
}
Таким образом, все элементы на странице будут иметь свойства заданные в данном файле. Если необходимо, чтобы у какого-либо элемента свойства отличались от свойств по умолчанию, то их надо переопределить явно.
3. "Особенности" некоторых браузеров.
Однако, даже если веб мастер использует только стандартные возможности HTML, установил свои атрибуты по умолчанию для всех элементов, сайт все равно может выглядеть по разному в различных браузерах. Это происходит от того, что браузеры сами могут не соответствовать стандарту HTML. Браузеры, как и любое программное обеспечение, могут содержать ошибки. Эти ошибки, как правило, быстро исправляются, однако всегда существует вероятность, что у пользователя установлена не самая свежая версия браузера.
Так же возможно, что производители браузеров (особенно этим грешит MicroSoft) считают, что они лучше знают, как надо отображать тот или иной элемент.
Поскольку основной виновник проблем несовместимости со стандартом - это Internet Explorer, то было придумано множество возможных обходных путей, как заставить сайт в IE выглядеть так же, как и в других браузерах.
Самый распространенный способ - это условные комментарии для IE. Майкрософт, как будто зная о проблемах своего браузера, дала разработчикам способ, как выполнить HTML код только на специальной версии IE. Например, следующий код подключит специальный CSS файл для браузера IE версии 7 и выше: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Условные комментарии имеют один единственный недостаток. Страница, включающая в себя такие комментарии, не является валидной HTML страницей. Как видите, Майкрософт и тут нарушает стандарт.
Поговорим о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка. Давайте посмотрим, что все это значит.
Верстка сайтов на HTML/HTML5 и CSS/CSS3
С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал . Я придерживался этого плана и результат получился неплохим.
Недавно я начал разбираться в видах верстки, что значат все эти понятия и понял, что информации уже очень много, но вся она однотипная. А самое главное — уже устаревшая. Обычно говорят о фиксированной, табличной и блочной видах верстки.
Вы могли слышать другие названия и не понимать, что они означают. Вы можете так и не узнать, что такое флексбоксы, а ведь это потрясающая гибкость, которая позволяет сегодня творить чудеса.
В общем, я решил немного заполнить эту пустоту и написать статью, которая будет полезна сегодня всем тем, кто решил разобраться в видах верстки веб страниц.
Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.
Чем ближе к оригиналу будет результат, тем лучше. В идеале страница должна одинаково выглядеть в разных браузерах и хорошо смотреться на мобильных устройствах.
Требования к современной верстке
Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:
- кроссбраузерность
- адаптивность
- минимум кода
- высокая скорость загрузки страниц
- семантичность
- валидность
Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.
Виды верстки сайтов
В этой статье я хочу дать лишь самое общее представление. Возможно, что в скором времени я опишу многие из них более подробно.
- Фиксированная верстка или статическая . Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
- Резиновая верстка . Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
- Табличная верстка или верстка таблицами . В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
- Блочная верстка, верстка блоками или div-верстка
. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков , которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.
- Адаптивная верстка или мобильная верстка . Ее еще иногда называют респонсивная верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
- Гибкая верстка или flex верстка . Вначале применяется известная всем блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом CSS3. Теперь страницы становятся очень гибкими. Этот механизм подробно разбирается на . Рекомендую ознакомиться, за этим настоящее и будущее верстки.
- Семантическая верстка . Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы. Что это за , можете посмотреть в другой моей статье.
- Валидная верстка или по-другому верста без ошибок . Это верстка, выполненная в соответствии со стандартами W3C. Проверить свою HTML-страницу на корректность вы можете с помощью специального валидатора W3C .
- Кроссбраузерная верстка . Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.
Вот такие на сегодняшний день есть виды верстки или свойства HTML верстки. Веб страницы хорошего сайта одновременно удовлетворяют многим критериям, самые важные из которых это кроссбразуерность и адаптивность.
По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.
В ближайшее время я хочу переделать шаблон с учетом гибкой и семантической верстки по всем правилам, и тогда он станет еще лучше.
В этой статье я раскрыл тему лишь очень поверхностно. Сайты без адаптивной верстки уже считаются отстающими и несовременными. Пройдет немного времен,и и сайты, имеющие адаптивную верстку под мобильные устройства легко обгонят своих конкурентов. Если вы начнете изучать эту тему, то сделаете хорошую инвестицию своего времени в успешное будущее.
Для тех, кто планирует хорошо разобраться в современной востребованной верстке и научиться верстать профессионально грамотно, я предлагаю обратить внимание на эти курсы.
Кроссбраузерная верстка - это верстка сайта с его одинаковой видимостью в разных браузерах. Сказать по правде это занятие не легкое, так как каждый браузер имеет свои особенности и недостатки. Поэтому браузер для веб-дизайнера, как «Криптонит» для «Супермена». Жизнь веб-дизайнеров во всем мире, была бы гораздо лучше, если бы браузеры отображали красивые дизайны без багов и подвохов. Но, к сожалению этого никогда не будет. Это наше время, чтобы заново продумать, как мы работаем с браузером. При кроссбраузерной верстке нужно учитывать все особенности каждого из браузеров, так как пользователь заходит с того браузера к которому он привык и мы его не можем заставить перейти на другой софт, и должны подстраиваться под него.
Полиграфия и веб-верстка
Современная веб-верстка сильно отличается и имеет ряд недостатков по сравнению с полиграфическим дизайном, где веками создавалась мировая практика. Хотя печатный рисунок и нельзя позиционировать из-за его фиксированного характера, полиграфия имеет плюсы в других областях, таких как цвет и контрастность из-за качества бумаги или печати.
Браузеры являются наиболее известными разрушителями хороших дизайнов, как в старину старые печатные установки или плохое качество бумаги разрушало печатный дизайн. Но в отличие от мировой полиграфии, веб не может опираться на мировой опыт и проверенные методы для обработки несоответствий. Еще одной уникальной особенностью работы верстальщика является то, что он не может получить результат для контроля качества печати, как при полиграфии. Мы не знаем, какой браузер выберет пользователь, или какой монитор он использует. Поэтому какой бы не была кроссбраузерной верстка, все равно отличия будут на экранах у пользователей. Но наша задача - минимизировать различия в дизайне при выводе его в окно браузера пользователя.
Разные браузеры для разных людей
Браузеры и компании, так же, как и любая другая компания в мире имеет конкуренцию между собой. Но если была бы какая-то организация веб-стандартов, то не было бы смысла в создании разных браузеров и терялась бы конкуренция между ними. Есть только один удивительный браузер, считаю, мы бы назвали его WebKit. Но так как браузеры ведут борьбу за пользователей, то и получаются различия в браузерах в целях привлечения публики.
В мире полиграфии (печати), компании конкурируют друг с другом, добавляя новые возможности и различные профили цвета. Кроме того их инженеры учитывают особенности аудитории пользователей их продукта. Например, принтеры фирмы Canon используются более для коммерческой печати. Принтеры Ricohне имеют таких интенсивных цветовых гам как предыдущие, поэтому их используют для печати внутренней документации в компаниях (отчеты, протоколы, акты …). Думаю, для верстальщиков кроссбраузерного дизайна аналогия понятна. Если вы дизайнер, который делает печать объявлений для крупных коммерческих компаний, вы, скорее всего, выберете принтер с отличным качеством печати и широкой цветовой гаммой, а не деловой или личного класса.
Браузеры аналогичны к принтерам. Некоторые построены для обработки тяжелых конструкций, другие построены более для оказания документов. IE построен более для технической или бизнес аудитории, как Chrome, Firefox, для удовлетворения более творческой аудитории.
Так как веб прогресс следующего десятилетия приведет к еще большим различностям и большему количеству браузеров с их особенностями, нам стоит подумать и поискать путей к созданию более кроссбраузерных дизайнов, чтобы справиться с совместимостью браузеров и нашей верстки.
Давно уже прошли те времена, когда все выглядело одинаковым в браузерах, поэтому приходится искать обходные пути для кроссбраузерности верстки или делать более простой скучный дизайн. Эти новые браузеры заставят нас переосмыслить пути создания кроссбраузерного дизайна.
Качество кроссбраузерной верстки
Качество, это понятие растяжимое. Потому что простые проекты, будет гораздо проще сделать, чем какой-то дизайнерский шедевр. Поэтому при работе с заказчиком нужно учитывать сложность проекта по отношению к его кроссбраузерной верстке. Так как сделать действительно классный, кроссбраузерный, творческий, динамический дизайн практически нереально, поэтому при работе с заказчиком нужно указать на недостатки или точнее на различия вывода некоторых элементов дизайна в разных браузерах. Нужно дать им увидеть качество верстки в основных браузерах (популярных) и второстепенных, затем предоставить возможность выбора. Если вы знаете различия браузеров настолько хорошо, что сможете указать их в проекте при создании макета в Photoshop то это только плюс к вашей работе с клиентом.
С опытом работы, при оценке качества кроссбраузерной верстки, можно создать общий шаблон, или таблицу, которые будут показывать различия некоторых браузеров и использовать это для работы с клиентом.
Несколько советов для кроссбраузерной верстки:
Сделаем выводы:
В будущем нас ждут новые сюрпризы при кроссбраузерной верстке. Подготовимся к ним и будем искать новые альтернативы (обходные пути). Возможно, нам в этом поможет большая скорость интернета, мощные ПК, и новые веб технологии, такие как Flash и другие.
- Знаете ли вы аудиторию? Может быть, ваша аудитория и не требует новых "наворотов" или новых возможностей браузера.
- Поддерживайте ваш бренд с помощью цвета, логотипа и последовательности стилей. Не убивайте бренд новыми дизайнерскими идеями. Бренд - это качество и традиция.
- Убедитесь что браузер не нарушает смысл вашего сайта. Содержание страницы и общее значение сайта должны быть отделены.
- Равно к вышеописанному совету, контент (содержание страницы) должно быть отделено от дизайна и стиля. В смысле, содержание должно быть четко видимым, а не сливаться в общую картинку или какой-то набор блоков и символов.
- Если вы верстаете ваш личный сайт, то проверяйте кроссбраузерность его дизайна в новых версиях браузеров постоянно, чтобы не потерять пользователей.
Многие дизайнеры постоянно ищут кросс-браузерные приёмы, которые помогли бы им решать проблемы совместимости браузеров.
В конце концов, создание сайта — дело простое, но разработка такого, который бы выглядел одинаково во всех браузерах, может стать непростой задачей. Уже много лет проблема совместимости браузеров является одной из самых сложных частей веб разработки.
Наша постоянная задача как веб-дизайнеров и веб-разработчиков — создание для пользователей наилучшего впечатления от использования нашего сайта. Однообразное отображение сайта во всех браузерах способствует этому как нельзя лучше.
Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.
Это только одна из проблем, с которыми мы можем столкнуться при разработке кросс-браузерного веб-сайта. Отрадно, что мы можем перестроить сайт или применить некоторые приёмы, чтобы сделать его совместимым и выглядящим одинаково во всех браузерах.
В этой статье я покажу вам некоторые кросс-браузерные стилевые приёмы и трюки, которые серьёзно упрощают разработку веб-сайтов.
Используйте CSS Reset
Давайте смиримся с тем фактом, что веб-браузеры по умолчанию по-разному стилизуют элементы HTML. Некоторые браузеры имеют различный подход к значениям таких стилей как margin и padding .
Чтобы это исправить, есть хороший приём — добавить код CSS reset в начало вашего файла стилей. Это сбросит стили всех элементов.
Также это приведёт к тому, что вы начнёте стилизацию с нуля, то есть получите полный контроль над элементами, не волнуясь о разной изначальной стилизации элементов, вроде полей, заполнений или выравнивания.
У Эрика Майера есть хороший набор правил CSS , чтобы сделать это. Также вы можете посмотреть на Normalize.css от Николаса Галлахера, современную альтернативу для сброса стилей в HTML5.
После того, как примените эти правила CSS к вашей разметке, вы можете быть уверены, что у вас есть нулевая точка отсчёта для всех браузеров.
Проверяйте ваш код HTML и CSS
Хорошей практикой перед выкладыванием сайта в сеть является проверка HTML и CSS при помощи валидаторов, так как это поможет вам исправить некоторые мелкие ошибки, которые могут принести проблемы в будущем.
Вы можете использовать валидаторы HTML и CSS от W3C. Эти валидаторы одобрены W3C, но, если вы хотите, то можете использовать любые другие, которые вам нравятся.
Условные комментарии IE
Древние версии IE причиняли много головной боли веб-дизайнерам и разработчикам, когда дело доходило до проблем совместимости. Для решения этой проблемы Microsoft разработали условные комментарии для своего браузера, позволяющие привязывать файл стилей, который будет интерпретирован только браузером IE.
Рассмотрим пример.
Следующий код будет работать во всех версиях IE:
<-->
А следующий код предназначен для конкретной версии IE:
<-->
Используйте вендорные префиксы
Стандарты W3C постоянно совершенствуются. Хорошо, если вы знаете о каких-либо недостатках в поддержке определённым браузером некоторого свойства CSS. Такие стилистические приёмы, как скруглённые углы, тени и градиенты, сейчас могут быть реализованы, используя только CSS, без помощи изображений.
Использование вендорных префиксов поможет вам сэкономить уйму времени, не заботясь о том, поддерживает ли браузер ваш код CSS.
Рассмотрим список вендорных префиксов:
- Safari и Chrome (-webkit-)
- Firefox (-moz-)
- Opera (-o-)
- Internet Explorer (-ms-)
В качестве примера давайте используем свойство transition с вендорными префиксами для определённых браузеров:
Webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease;
Очищайте пространство после плавающих элементов
Мы все знаем, как сделать элемент плавающим, влево или вправо, используя свойство float . По умолчанию, если вы используете только один плавающий элемент совместно с не плавающим, первый просто расположится сбоку от последнего при наличии места.
Но проблема тут не в этом. Чаще всего мы располагаем плавающие элементы слева и справа и помещаем их в контейнер.
Посмотрите на рисунки ниже:
Рис. 1. Вот, чего мы хотим добиться.
Рис. 2. Однако вот, что у нас получается.
Эта проблема может быть решена простой очисткой пространства после плавающих элементов с помощью CSS свойства clear со значением both . Это значит, что пространство с обеих сторон будет очищено.
Управление размером шрифта
Хотя не существует каких-либо строгих правил использования определённого измерения для размера шрифта, я бы посоветовал использовать единицы em и проценты, поскольку они основаны на настройке размера шрифта в браузере пользователя.
Большинство людей используют пиксели (px ) или пункты (pt ), которые основаны на разрешении экрана. Они всегда фиксированы.
Всегда тестируйте ваш веб-сайт в нескольких браузерах
Вы можете лениться проводить тестирование вашего веб-сайта в различных браузерах, думая, что он выглядит хорошо во всех современных браузерах. Поверьте мне, я был когда-то таким же, но это ведёт к тому, что у посетителей вашего сайта могут остаться плохие впечатления от его посещения.
Вы можете сэкономить время, используя эмуляторы, вроде spoon plugin , но настоятельно рекомендуется тестировать ваше творение в настоящих браузерах.
Упрощайте код
Упрощение кода делает всю работу простой и быстрой. Что я имею в виду? Одно только использование простых элементов при разработке вашего веб-сайта делает задачу браузера по чтению вашего кода гораздо проще.
Например, вместо использования таблиц и параграфов для создания навигации, вы можете просто использовать для этого ненумерованный список. Для создания отзывчивого веб-сайта элементы div подойдут гораздо лучше, чем таблицы.
Сохраняйте код простым, хорошо структурированным и используйте правильные наименования. Поверьте мне, это сэкономит вам кучу времени и избавит от лишней головной боли, когда у вас возникнут какие-либо проблемы.
Заключение
Существуют и другие приёмы и трюки для поддержания кросс-браузерной совместимости, но эта статья должна снабдить вас базовым фундаментом, на котором будут строиться все ваши дальнейшие знания по этой проблеме.
Хорошей идеей является время от времени перечитывать ваш код и проверять его на совместимость с различными браузерами.
Если вы знаете какие-нибудь другие приёмы, которые мы не осветили здесь, или у вас есть комментарии или предложения, мы будем рады их услышать. Пожалуйста, оставляйте ваши комментарии к этой статье.
Перевод статьи “Simple Yet Important Cross-Browser Styling Tips Everyone Should Know ” был подготовлен дружной командой проекта
На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...На сегодняшний день существует несколько самых популярных браузеров, которые люди используют для своей работы в Интернет. И постоянная головная боль любого веб дизайнера - это то, что один и тот же...
