This article is currently in the process of being translated into Russian (~29% done).


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

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

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

Historically, the problem with rendering differences across browsers have been a larger problem than it currently is. Especially Microsoft has had problems following the specification with their Internet Explorer, with version 6 being the worst example of this - competing browsers were following the specification way better, but because of market shares, developers had to implement several nasty workarounds to fully support IE6 and its many quirks. Fortunately for developers all over the world, Microsoft has done a lot to remedy these problems in later versions of Internet Explorer.

However, you will still run into differences in rendering, especially when you test across different browsers on different devices and operating systems. Your webpage might not look entirely the same in Internet Explorer as it does in Chrome, and there might even be differences when looking at it in Chrome on a PC with Linux, OSX or Linux. For that reason, always test your webpage in as many browsers as possible and make sure that your CSS validates (more on that later).


CSS is interpreted by the client (usually a webbrowser) on each request, and since different browsers uses different parsing engines, things might not look entirely the same across different devices, platforms and browser versions. Make sure that you test all of your pages in as many browsers as possible and to help reduce the amount of problems you should make sure that your CSS code can pass the checks of the W3 validator.

In this tutorial we will only be discussing properties and techniques which can currently be used in the most recent versions of the most popular browsers: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox and Apple Safari. However, the fact that these properties and techniques are understood by the browsers still doesn't mean that they are interpreted AND used in the exact same way, so always remember the golden rule of CSS: Test your work as much as possible!

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!