Cross Browser CSS style Tips

“Rules for happiness: something to do, someone to love, something to hope for.” ...Immanuel Kant

What is cross browser testing?

Cross browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers. Refer MDN to read cross browser testing.

cross browser testing

How to make CSS work across different browsers?

1.CSS reset:-
Web browser engine adds defaults css to each html element. For example p tag will have differnt padding across various browsers, to avoid this we can use CSS reset.

Example1 CSS reset
Example2 CSS reset

2.Validate HTML and CSS, it will help in rectifying minor errors.
Tools that can be used:-Firfox addon, HTML validator, CSS validator, CSS lint

3.Use Vendor Prefixes, to support the browser specific CSS.
For example:- 
As of now CSS grid is not supported in all the browsers, so we can add:-
-webkit-display: grid;

Various Prefix :-
1. Safari and Chrome (-webkit-)
2. Firefox (-moz-)
3. Opera (-o-)
4. Internet Explorer (-ms-)

4.Use tools to test web-application across different browsers, example tools like saucelabs, browsershots

5.Font size measurement, px - em - rem - percentage
Generally 1em = 12pt = 16px = 100%.
px and pt, will remain static when the base font size is changed (let say body {font-size: 120%}) but em and rem values will change.

As we need our application responsive and font to be readable on different screen resolution we need to be particular about using font-size.


Post a Comment

Feel free to share your thoughts and experiences, to enhance Ppl learning.