{"id":1975,"date":"2016-07-07T15:07:28","date_gmt":"2016-07-07T15:07:28","guid":{"rendered":"http:\/\/cssreset.com\/?p=1975"},"modified":"2016-07-07T15:07:28","modified_gmt":"2016-07-07T15:07:28","slug":"cross-browser-compatibility-css-tips","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/cross-browser-compatibility-css-tips\/","title":{"rendered":"Avoid Cross Browser Compatibility Issues with These Tips"},"content":{"rendered":"<p>In a perfect world, every browser would have the same inherent styling and would render all HTML elements in exactly the same way. Unfortunately, any developer could tell you that this isn&#8217;t the case. There are so many issues with cross-browser compatibility, the most common of which are probably the fact that all browsers have different inherent styling and render different HTML elements differently, and that some browsers don&#8217;t provide support for certain CSS3 properties. Here are some CSS tips to try to make your HTML more consistent across all browsers:<\/p>\n<ul>\n<li>Use CSS <a href=\"https:\/\/cssdeck.com\/blog\/\/what-is-a-css-reset\/\">resets<\/a>. Resets are used to\u00a0<em>reset<\/em> the styling of all HTML elements to a consistent baseline. Adding a reset to your stylesheets will override all or most of a browser&#8217;s default styling (depending on which reset you use) to ensure that all the HTML elements are rendered more consistently across all browsers.<\/li>\n<li>Use vendor prefixes. This one is useful for when certain browsers don&#8217;t natively support some CSS properties. Let&#8217;s use column-count as an example. This CSS property isn&#8217;t supported by Firefox or opera so it has to be used with the appropriate prefixes, like this:<\/li>\n<\/ul>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">div<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">column-count<span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc66cc\">2<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-moz-column-count<span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc66cc\">2<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-o-column-count<span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc66cc\">2<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p style=\"padding-left: 60px;\">Here&#8217;s a complete list of vendor prefixes:<\/p>\n<div id=\"ig-sh-2\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-webkit- <span style=\"color: #808080;font-style: italic\">\/* chrome, android, iOs, and safari *\/<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-moz- <span style=\"color: #808080;font-style: italic\">\/* firefox *\/<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-o- <span style=\"color: #808080;font-style: italic\">\/* opera *\/<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">-ms- <span style=\"color: #808080;font-style: italic\">\/* internet explorer *\/<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p>Do you have any other tips on avoiding cross-browser compatibility issues? Share them in the comments below.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In a perfect world, every browser would have the same inherent styling and would render all HTML elements in exactly the same way. Unfortunately, any developer could tell you that this isn&#8217;t the case. There are so many issues with [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/cross-browser-compatibility-css-tips\/\" title=\"Click to read 'Avoid Cross Browser Compatibility Issues with These Tips'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1975"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1975"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions"}],"predecessor-version":[{"id":1976,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions\/1976"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}