Crossbrowser layout

What is cross-browser layout? What are the browsers and do you need pixel-perfekt?

If you put together an armful of modern browsers, you can decompose it in different ways: by device, by platform, by type of work, or even by the color of icons. The most useful thing for a developer is to be able to put them on engines. It is the engine, that is, the very core of the browser, that determines how it works with your layout.

With all the variety of browsers , independent engines are quite small, and new ones appear very rarely. So instead of dozens of browsers you need to support no more than five independent engines. And it also happens that browsers with the same name use different engines on different platforms! In general, everything is very difficult and interesting.

The most popular browser engine in the world is Blink. It is used by Chrome and browsers based on it: Opera, Samsung Internet, Yandex Browser and others. To work with JavaScript, these browsers use the V8 engine - the same as in Node.js. One of the main developers of the open engine Blink is Google, but at least a dozen companies are actively involved in the development.

WebKit, another popular engine, is very similar to Blink. In general, on the contrary, Blink is similar to WebKit. What is it like? In 2013, Blink was forked from WebKit . In fact, copied. Google packed up and told Apple, the main WebKit developer, that she didn’t like her methods of work and now everything will be different. What to do, open source. And indeed, it became different: the basis of WebKit and Blink is common ( webkit prefixes, for example), but the possibilities are already quite different. Mobile and desktop browsers Safari are now working on the new WebKit, while on the old, the built-in browser on Android is up to version KitKat.

On the Gecko engine, the Firefox browser, once very popular, is still running, and today it retains a small share and an important role in the development of the web and technologies. Gecko has its own prefixes: moz - Mozilla, but for better compatibility Firefox specifically supports some of the WebKit features. Full-featured Firefox on Gecko runs on desktop platforms and on Android. In parallel with Gecko, Mozilla is developing an experimental Servo engine and changing some parts of Gecko on the go. For example, in the following Firefox 57, the CSS engine will be replaced with a new one.

Edge Browser works on all modern Microsoft platforms, including mobile and Xbox. It is based on the EdgeHTML engine - its 16th version just recently released. EdgeHTML was also forked from the Trident or MSHTML engine on which Internet Explorer worked. Surprisingly similar to the history of Blink and WebKit: both engines retain common prefixes ( ms and again a bit of webkit for compatibility), but differ greatly in their capabilities. EdgeHTML has rejected any old stuff and is boldly developing: a couple of major releases per year, and even a voting system for features . Trident and IE closed in 2015.

In addition to engines, it is useful to know more features of the platforms. For example, on the iOS mobile platform, a bunch of browsers, in addition to the built-in Safari: Chrome, Firefox, Opera, Yandex, UC, and even Edge have recently been released. But all these browsers are just shells above the WebKit engine built into the system. The rules of this platform prohibit the use of other browser engines. But on Android, most browsers come with their own engines: Firefox, Opera, Samsung, but some use the built-in Chromium.

Well, like everything? But no! There is also a separate group of unusual browsers: they do not live on user devices, but deep on servers. On devices there is only a light shell, which requests the address and receives from the server a set of screenshots and links cobbled into the site. These are proxy browsers and they squeeze traffic madly, but lose their way along: branded fonts, background pictures, gradients, rounded corners, shadows and the like. Opera Mini is one of the most popular proxy browsers. On the server, it has an obsolete Presto engine running, and most often it is installed on simple phones. But there are others, Tim Kadlek will tell you in more detail .

Some browsers work only on one platform: Edge and IE exist only on Windows, Safari only on macOS and iOS. There were once attempts at intervention, but nothing came of it. This of course makes testing difficult. Fortunately, there are services like BrowserStack that give you access to all existing browsers, and Microsoft puts out compact Windows images for Edge and IE testing in virtual machines.

Okay! We now know about browsers. And what if the same browser, the same engine - and the result is different on different platforms? And nothing can be done! In fact, browsers can vary greatly depending on the platform or device. The biggest difference between desktop and mobile browsers is that there are a lot of optimizations and magic in the latter. But you can catch and different behavior on desktop Windows and macOS.

I think you already understand what I am getting at. Cross-browser is such a rainbow-colored unicorn that everyone is chasing, but no one can catch. The goal of the chase is certainly noble: to make websites look and work equally well on all browsers and all platforms. And if we still can more or less guarantee the size of indents, font, line height, color, text smoothing, blurring of shadows, graphics rendering and the appearance of system controls are better not to even try to bring them to a general view.

So if for you pixel-perfekt is to get into the grid and into horizontal block sizes, then you still have chances. But if you twist text smoothing, the number of lines in a paragraph, or the vertical size of blocks with content, strictly according to the layout, you are wasting time. Ideally, the cross-browser site will look equally alien on all platforms - after all, each has its own features familiar to users.

And more about testing. No matter how well imitated devices and browsers, the Chrome DevTools emulator is just a hint of how they will look in reality. It is important to check the result on real platforms and devices, at least: on Windows, Android, macOS and iOS. Real fingers on a real device, real browsers in their natural habitat will tell you a lot about how they will use your interfaces. This is much more important than how similar they are to the layout.

Sign up for browser news on Twitter, set yourself Chrome Canary, Firefox Nightly, Safari Technology Preview. Turn on the flags, try, be aware, and most importantly - stop chasing the pixels, get good interfaces. Sites do not have to look the same in all browsers .

Video version

Questions can be asked here .