Cross-browser layout


    What is cross-browser layout? What browsers are there and do I need a pixel perfect?

    If you assemble an armful of modern browsers, you can decompose it in different ways: by device, by platform, by type of work, and even by the color of the icons. The most useful thing for the developer is to be able to put them in 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 , there are few independent engines, 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 complicated 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 Blink engine 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 - this Blink is similar to WebKit. What is it like? In 2013, Blink forked from WebKit . In fact, copied. Google packed up and told Apple, WebKit’s main developer, that she didn’t like her working methods and now everything would be different. What to do, open source. And indeed, it became different: WebKit and Blink have a common foundation (prefixes webkit, for example), but the possibilities are already quite different. The new WebKit now runs mobile and desktop browsers Safari, on the old - built-in browser on Android up to KitKat.


    The Gecko engine runs the Firefox browser, once very popular, but 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 features of WebKit. Full Firefox on Gecko runs on desktop platforms and on Android. In parallel with Gecko, Mozilla is developing an experimental Servo engine and changing parts of Gecko right on the go. For example, in the next 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 has just been released recently. EdgeHTML also forked from the Trident or MSHTML engine, which was running Internet Explorer. It is surprisingly similar to the history of Blink and WebKit: both engines retain common prefixes ( msand again a bit webkitfor compatibility), but they differ greatly in capabilities. EdgeHTML has thrown away all junk and is boldly developing: a couple of major releases a year and even a voting system for features . Trident and IE closed in 2015.


    In addition to the engines, it is also useful to know the 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 over the built-in WebKit engine. 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, everything seems? But no! There is still 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 that requests an address and receives from the server a set of screenshots and links stuck in the site. These are proxy browsers and they madly compress traffic, but lose along the way: corporate fonts, background images, gradients, rounded corners, shadows and something like that. Opera Mini is one of the most popular proxy browsers. On the server, the outdated Presto engine is spinning on it, and they put it most often on simple phones. But there are others, Tim Kadelek will tell you more .


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


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


    I think you already understand what I'm getting at. Crossbrowsing is such a rainbow unicorn that everyone is chasing, but no one can catch. The goal of the chase, of course, is noble: to make sites look and work equally well on all browsers and all platforms. And if we can more or less guarantee the size of indentation, font, line height, color, then text smoothing, blurring shadows, rendering graphics and the appearance of system controls are better not even trying to lead to a general view.


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


    And more about testing. No matter how well Chrome DevTools emulates devices and browsers , this 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 of new things about how they will use your interfaces. This is more important than how similar they are to the layout.


    Sign up for browser news on Twitter, install Chrome Canary, Firefox Nightly, Safari Technology Preview. Turn on the flags, try it, be in the know and most importantly - stop chasing pixels, get good interfaces. Sites should not look the same in all browsers .


    Video version



    Questions can be asked here .


    Also popular now: