As a company, Top Draw includes cross-browser support for current versions of major browsers (less one major version-release), as part of the development specifications for our projects. We recently decided to discontinue optimization support of the Opera browser, as they have consistently held less than 3% of the user-market in the last decade, and less than 0.5% of our clients’ users utilize Opera. Development in most modern web browsers is fairly straightforward, as the industry continues to move towards standardized practices, and the various rendering engines adopt more consistent methods. There are still common differences between browsers and rendering engines, such as the manner in which fonts are rendered, default styling of form and list elements, as well as treatment of margins and padding around certain HTML elements.
Long standing as the black sheep of the web industry due to non-compliance of web standards, the Internet Explorer browser has been steadily decreasing in popularity with the user market. Despite this decline, a large number of corporate users are obligated to use Internet Explorer due to licensing and/or corporate policy. It is for these users that a client may require cross-browser compatibility to as far back as Internet Explorer 8. With the support of old Internet Explorer versions comes compatibility concerns and challenges associated with these versions, such as limited HTML element and CSS property support, lack of
While many aspects of modern web development are not supported by legacy browsers, a large portion of the visual appearance may be manipulated to appear a certain way using CSS and conditional classes. Conditional CSS classes allow the developer to keep all document styles (including browser-specific CSS) in the same stylesheet, while avoiding the use of CSS property-prefix hacks and conditional stylesheet linking.[html light=”true” wraplines=”true”] <!–[if lt IE 8]> <html class="lt-ie9 lt-ie8> <![endif]–> <!–[if IE 8> <html class="lt-ie9"> <![endif]–> <!–[if gt IE 8]><!–> <html class=""> <!–<![endif]–> [/html]
The benefit to this method is that the browser does not have to make multiple HTTP requests to obtain files for browser-specific styles, and valid HTML/CSS are rendered. These conditional classes also make it simple to target elements in specific versions of Internet Explorer, so that developers may manipulate them as necessary to achieve the desired visual appearance. You can read more about conditional CSS classes and targeting versions of IE here.
Along with the popularity of mobile devices has come the increased prevalence of mobile optimized and mobile-responsive web development. The most common development method for visual optimization on mobile devices is the use of CSS media queries. Media query support was not added by Internet Explorer until IE9. With such a large portion of the user-market being mobile users, it is proactive to support media queries in older versions of Internet Explorer using a polyfill.Respond.js is one of the most well-maintained polyfills that provides a patch for browsers that don’t support media queries (in particular IE8 and lower). Use of respond.js is simple:
- Write your media queries and CSS for the various resolutions you are optimizing for.
- Include ‘respond.js’ or ‘respond.min.js’ in the head of your document, & enjoy responsive design on your site in older versions of IE!
Background Size (IE8)
Prior to IE9, the CSS property
background-size was not supported.
The CSS above is one of the most straight-forward approaches that attempts to resolve this challenge, though
sizingMethod='scale' would stretch the image to fill the entire area of its containing element.
Another solution is the inclusion of a polyfill method to force the behaviour of the background CSS in Internet Explorer. Background-Size Polyfill requires the upload of ‘backgroundsize.min.htc’, and a change to the .htaccess of the site. After the file inclusion and .htaccess change, the following CSS needs to be included for each element where you are making use of
You can read more about the use and limitations of background-size polyfill here.
Border-Radius, Box-Shadow and Other CSS3 Properties
In the absence of a well-maintained solution to make newer CSS classes compatible with older versions of Internet Explorer, I recommend the following:
-ms-filterproperties and values where appropriate and/or applicable in your CSS.
- Barring other CSS solutions, allow graceful degradation of your CSS.
Have any other dev-tips or tools? Share them in the comments below!Contact Us