Different ways to fix browser-specific issues.

• We can write browser-specific styles separately in different sheets and load that only when the specific browser is used. This makes use of the server-side rendering technique.
• We can use auto-prefix for automatically adding vendor prefixes in the code.
• We can also use normalize.css or RESET CSS techniques.

There are some ways for AVOIDING browser compatibility issues too. They are as follows:

• Validate HTML and CSS: We know that the code will be read, interpreted and handled differently by different browsers. We need to validate our HTML and CSS files for the missing closing tags, or missing semicolons in the syntaxes because there are chances that the old browsers will throw errors while rendering the code. We can avoid those errors by:
  • Maintaining well-aligned code that helps in easy readability.
  • Inserting comments at necessary places.
  • Make use of validation tools like Jigsaw CSS validator, W3C HTML Validators to identify syntax issues in the code.
• Maintain Cross-Browser Compatibility in the Layouts: Cross-Browser compatibility is a must while developing web applications. We expect our application to be responsive across all devices, browsers and platforms. Some of the effects of layout incompatibilities are unresponsiveness of the layouts in mobile devices, the difference in layout rendering between modern and old browsers, etc. These incompatibilities can be avoided by using:
  • CSS Multi-Column layouts - For maintaining proper layouts w.r.t columns and containers.
  • HTML viewport metatag – For ensuring content is properly spanned across mobile devices.
  • CSS Flexbox and Grids - To layout child elements depending on the content and available space.
  • CSS resets stylesheets - For reducing browser inconsistencies in default line heights, font sizes, margins etc.
• Check JavaScript Library issues: Ensure the libraries are used judiciously and the ones used are supported by the browsers.
• Check DOCTYPE tag keyword: The DOCTYPE keyword is meant for defining rules of what NEEDS to be used in the code. Older browser versions check for DOCTYPE tag at the beginning and if not found, the application rendering won't be proper.
• Test on real devices: Although applications can be tested on virtual environments, it would be more beneficial if the testing is carried out on real devices and platforms. We can use tools like Testsigma for this purpose that enables us to test in real devices parallelly.

CSS plays the most important role in the field of web development. This is because CSS helps in achieving beautiful, responsive or adaptive websites depending on the business requirements. CSS helps in building lighter and flexible layouts that help in loading pages faster and making the content visually appealing. CSS is continuously evolving and is becoming more powerful thereby making it the most sought-after technology by various companies to develop websites. In this article, we have SEEN the most commonly asked interview questions in CSS, more particularly CSS3.

Useful Resources

• CSS Guides
• HTML
• Coding Practice
• JavaScript
• SASS Vs SCSS
• HTML/CSS Books