Как работает CSS

CSS-код интерпретируется браузером (компьютерная программа для просмотра веб-страниц, например Internet Explorer или Google Chrome) и определяет, как должна выглядеть веб-страница. Это также означает, что существует подробная спецификация языка CSS, множество браузеров для всех возможных устройств (компьютеры, планшеты, мобильные телефоны и т. д.) интерпретируют ваш CSS-код по-своему, но при этом, код, что вы написали, будет работать так, как вы это задумали, возможно с небольшими отличиями в зависимости от браузера, в котором вы его выполняете.

Так как CSS всего лишь спецификация, компании-разработчики браузеров могут свободно добавлять свои CSS свойства чтобы выполнять более продвинутые штуки, но только для их конкретного браузера. Это часто используется многими компаниями для того, чтобы убедить W3 (организацию, ответственную за множество спецификаций, связанных с интернетом, включая HTML и CSS) в необходимости добавления этого функционала в следующую версию спецификации CSS.

Исторически сложилось так, что проблема с различиями в рендеринге в разных браузерах была более серьезной, чем сейчас. Особенно у Microsoft были проблемы следуя спецификации со своим Internet Explorer, при этом худшим примером этого является версия 6 - конкурирующие браузеры следовали за спецификации намного лучше, но из-за доли рынка разработчикам пришлось реализовать несколько неприятных обходных путей для полной поддержки IE6 и его многочисленных причуд. К счастью для разработчиков во всем мире, Microsoft многое сделала для решения этих проблем в более поздних версиях Internet Explorer.

Однако, различия в рендеринге будут встречаться, особенно, когда вы будете использовать разные браузеры на разных устройствах. Ваш сайт может не выглядеть одинаково в Internet Explorer и Chrome, так же различия будут между разными ОС, будь то Linux, OSX или Windows. Так что, всегда тестируйте ваш сайт на разных браузерах и устройствах (больше об этом позже).

Выводы

Клиент (обычно веб-браузер) интерпретирует CSS каждый раз по новому запросу. Из-за того, что разные браузеры используют разные механизмы синтаксического анализа на различных устройствах, платформах, версиях браузеров, оформление может выглядеть иначе. Убедитесь и протестируйте все ваши страницы во всевозможных браузерах. Дабы сократить количество проблем необходимо удостовериться, что CSS код прошел проверку W3-валидатора.

В этом руководстве мы описываем свойства и методы, которые используются в самых обновленных версиях популярных браузеров: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox и Apple Safari. Тем не менее, не факт, что все свойства и методы будут прочитаны и интерпретированы браузерами именно тем путём, на который вы рассчитывали. Помните золотое правило CSS: Всегда проверяйте свою работу всеми возможными способами!