Cross Browser CSS style Tips – User friendly Tech help
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.
n
n
How to make CSS work across different browsers?
n
1.CSS reset:-
nWeb 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.
n
Example1 CSS reset
nExample2 CSS reset
n
n2.Validate HTML and CSS, it will help in rectifying minor errors.
nTools that can be used:-Firfox addon, HTML validator, CSS validator, CSS lint
n
3.Use Vendor Prefixes, to support the browser specific CSS.
nFor example:-
nAs of now CSS grid is not supported in all the browsers, so we can add:-
n-webkit-display: grid;
n
nVarious Prefix :-1. Safari and Chrome (-webkit-)2. Firefox (-moz-)3. Opera (-o-)
n
4. Internet Explorer (-ms-)
n
4.Use tools to test web-application across different browsers, example tools like saucelabs, browsershots
n
5.Font size measurement, px – em – rem – percentage
n
Generally 1em = 12pt = 16px = 100%.
n
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.
n
As we need our application responsive and font to be readable on different screen resolution we need to be particular about using font-size.
