Cross Browser Testing
A software engineer should be able to validate their front end across multiple browsers and devices in order to ensure that their HTML/CSS looks correct in many browsers.
An engineer should use tools like caniuse.com to ensure the CSS properties they want to use will be supported by all their target browsers, before even cutting some CSS.
Often an engineer will be missing some of the browsers they need to test against [Mainly IE] for this they’d install a Virtual Machine (VM). Microsoft make their VMs available on modern.ie.
An easy approach is to use a SaaS tool such a BrowserStack which allows testing on a myriad of real devices and browsers, without requiring physical access to those devices or those browsers installed on your own machine.
While testing their front end an Engineer should use a tool like Pixel Perfect to overlay the expected design, and then adjust their HTML/CSS using the browsers web inspector.
Which browsers to test
Usually, delivery teams will agree with the customer a list of supported browsers an engineer should test on. However, as a rule of thumb they should always test against:
Recommended in delivery, but not required for the core skill
IE11 is recommended as its the last version of IE pre-installed on Windows machines that doesn’t auto update. However, if the user stats point to low usage (less than 2%) then a team could make a case to not support it.
A Caveat, and its controversial.
While we should always strive to realise a Designer’s vision, there will be some elements of the page (mainly typography) that will be harder to replicate in code. There are situations where the cost of implementing perfect typography outweighs the value derived.
When working closely with Designers, it is beneficial to help them understand the technical limitations of HTML & CSS. Often, for aspects of a design where perfect typography matters, a designer should be advised to provide SVG assets instead.
Using the example of Typography an engineer should match the common sense things like line-height, font-size, font-family, there are some things they wont be able to control in a scenario where dynamic text is being used. Kerning is the best example of this. An engineer can broadly apply a letter-spacing to all the letters but doing this on a per letter basis is not scalable when the copy is liable to change.