CSS hacks for all browsers: from IE to Opera. Generic CSS hacks for browsers Defining an old browser in css
For every good coder, the question of cross-browser compatibility arises at some point in time. What is cross-browser compatibility? It is the property of a site or site design to appear the same across different browsers. The fact is that when creating browsers, developers do not think much about standardization, this generates a different representation of the same site in their products. The creation of a cross-browser layout / site and allows you to overcome this difference.
For this purpose, so-called hacks (cheats) were invented in the CSS language, which allow you to apply a group of properties only for one browser or several, for example, only Opera or only Chrome / Safari.
This article presents possible working options for the latest versions of browsers, all hacks have been checked for the latest version as of 05/10/2015. If this article helped you or you still have questions, ask in the comments and rate it, this may encourage us to expand the number of hacks for different browsers, and also add examples of use for each.
If the hack is written directly in the table, then to use it, you need to copy it into a .CSS file and adapt it to your style, otherwise, in the name of the link, there is a link with a detailed description of how to do the hack.
| Names and hacks themselves | Internet Explorer | Google chrome | Opera | Safari | Mozilla Firefox |
|---|---|---|---|---|---|
| + | - | - | - | - | |
| - | + | - | - | - | |
| - | - | + | - | - | |
|
_ :: - moz-svg-foreign-content,: root .class () |
- | - | - | + | - |
|
html / ** / body .class, x: -moz-any-link, x: default (color: # F00;) |
- | - | - | - | + |
| - | + | + | + | - | |
|
@supports (-webkit-appearance: none) (/ * your styles are here as usual * /) |
- | + | + | - | - |
The simplest and most effective option is to create a separate .css file for all versions of IE, and include it along with the main one, but in a special way.
Conditional comments work only in IE under Windows, for other browsers they are normal comments, so they can be used painlessly. The syntax is as follows (in the .php or .html file, where we connect the stylesheet, add the following lines):
where styles.css is the file that will be responsible for IE-only styles.
The only currently known way to write styles only for Google Chrome using JavaScript. At the same time, you do not need to know JS, it is enough to take an example from here and adapt it to your needs.
The bottom line is that we check which browser the site visitor is using and if it is Google Chrome, then we connect an additional stylesheet for it, in which the necessary properties that may overlap in the main stylesheet are selected! Important.
section, add such lines, inside the tag ):
var isChrome = !! window.chrome && !! window.chrome.webstore; if (isChrome) (var $ = document; var cssId = "myCss"; var head = $ .getElementsByTagName ("head"); var link = $ .createElement ("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text / css"; link.href = "/css/template.css"; // path to the stylesheet only for Chrome link.media = "all"; head.appendChild (link );)
The only currently known way to write Opera-only styles using JavaScript. At the same time, you do not need to know JS, it is enough to take an example from here and adapt it to your needs.
The bottom line is that we check what browser the site visitor is using and if it is Opera, then we connect an additional stylesheet for it, in which the necessary properties that may overlap in the main stylesheet are selected! Important.
The syntax is as follows (in the .php or .html file, where we include the stylesheet, i.e. in
section, add such lines , inside the tag ):var isOpera = !! window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) (var $ = document; var cssId = "myCss"; var head = $ .getElementsByTagName ("head"); var link = $ .createElement ("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text / css"; link.href = "/css/template.css"; // path to the stylesheet only for Opera link.media = "all"; head.appendChild (link );)
The only thing you need to change here is the path to your stylesheet in line 10.
Thank you all for your attention, we are glad for you to try. Again, we are waiting for your comments, suggestions for improvement, etc.
6.5KCross-browser compatibility Is the site's ability to display correctly in different browsers... The resource should work the same in all browser versions.
This is especially important in the era of responsive web design, when the ability of the front-end to adapt to wide range various devices while providing optimal quality viewing.
Previously, a designer created a design layout in Photoshop, which was then transferred to HTML and CSS. Today, technological changes are forcing a rethinking of this concept. We can no longer predict which browser, resolution or device will be used to view the site. Gone are the days when most computers used a fixed resolution of 1024 by 768 pixels and it was possible to design sites with static dimensions.
Modern browsers fully support HTML5 and CSS3. But the same HTML / CSS / JavaScript code is interpreted differently in older browsers, resulting in “ cross-browser incompatibility»Site. This is especially true for old Internet versions Explorer.
In this article we will look at the current statistics on web page views, we will provide a list of tools that help to solve various problems compatibility.
1. Current situation
Global statistics for 2015 show that the top 14 screen resolutions in use range from 1920 x 1080 to 320 x 480 pixels.
Although Windows 7 (31.20%) still holds a large market share, mobile platforms are beginning to replace traditional, stationary ones.
Taking a look at the statistics for 2015 on the browsers used, we can see that the first place belongs to Chrome ( all versions - 44.87%), second place - Firefox ( all versions - 10.37%), third Internet Explorer 11 (6.84%).
Accelerated rates of new Google versions Chrome and Firefox allow you to more efficiently develop projects for these platforms. The picture is a little different for the "bad guy" of Internet Explorer, because you can still find old versions of it on the web. And this leads to problems with the cross-browser compatibility of the site.
Microsoft ended support for IE6 on April 8, 2014. And from 2016, only the most recent version of Internet Explorer will be supported and updated. This effectively means that support for IE7 and IE8 was completely dropped in early 2016, regardless of operating system... IE9 will only be supported in Windows Vista IE10 - Windows Server 2012 only, IE11 - Windows 7 and Windows 8.1:
As a result, it is necessary to stop development for IE6 and, as well as for IE7. To justify this strategy, there are several examples of solutions from well-known companies: Google dropped support for IE8 in November 2012 and IE9 in October 2013.
Github no longer supports IE 7 and 8. In addition, some of Twitter functionality does not work in IE8. Finally, the popular framework will not support IE8. from version 4.
However, usage statistics can vary by region, with 6.11% of users in China still browsing through IE8 in 2015. If you take into account that there were about 724.4 million Internet users in China, you can understand that approximately 44.2 million Chinese continue to use IE8 this year.
Therefore, regional markets, specific customers and industry requirements can vary significantly. This is especially true for corporate and government agencies.
2. Analyze your audience
The basic principle here is this: the higher the required cross-browser compatibility, the more time it will take for development, which leads to an increase in the cost of the project. To make an informed, economically sound decision, you need to ask yourself the following questions:
- What is your target audience?
- What geographic region should you target?
- What browsers and devices are your visitors using?
- Are there technical factors within the company or industry that make you support specific versions of older browsers?
- What are in terms of ecommerce conversion rates and ROI of different user groups by browser version?
By answering these questions using statistics, for example from Google analytics, you can get an objective picture.
3. Problems in outdated browsers and different approaches to development
Responsive web design relies heavily on media queries to modify CSS for different screen resolutions. In addition, modern sites are characterized by the use of HTML5 semantic elements (for example,
This brings us to the following technical challenges when implementing CSS cross-browser:
- CSS3 media queries
- Semantic HTML elements 5 : not supported in IE6, 7 and 8;
- CSS3 selectors: not supported in IE6. Only partially supported in IE7 and 8;
- REM Units: Not supported in IE6, 7, and 8. Only partially supported in IE9 and 10;
- Limit on the number of CSS rules: IE9 and below only support 4095 CSS selectors. Rules after 4095th selector do not apply.
The above mistakes will have the greatest impact on the strategy used when implementing responsive design.
There are two main development strategies: gradual simplification and progressive improvement.
Progressive improvement - based on the principle of starting development with a common denominator, with minimum technical requirements and the level of user experience offered by the site. Visitors visiting the site through latest versions browsers and devices will be served by a progressively extensible version of the site with all the latest features.
On the other hand, users of older browsers and slow internet connections will be offered a graphically truncated but still functional version site.
A similar approach when implementing cross-browser compatibility involves starting development with a simple version, to which more complex elements are then added. Older browsers will be able to render the site with baseline experience of interaction. And the new HTML functions/ CSS / JavaScript will be available in browsers that can actually use them.
In contrast, gradual simplification provides a fully functional level of UX in modern browsers. And then gradually reduces its complexity for older browsers at the expense of graphics, but without touching the functionality. The idea is to start developing with the latest web standards and then try to minimize the problems associated with older browsers.
Which approach you take depends on personal preference and project conditions:
- Progressive enhancement provides more stability as you can gradually add new features for modern browsers. But it requires more careful planning;
- Some developers argue that there is no point in supporting legacy browsers and should be used Newest technologies... Support for modern browsers provides a much better user experience;
- It is believed that progressive improvement is dead, since many JavaScript applications do not work as expected with this approach;
- Web accessibility for public institutions can be defined in the legal requirements of specific territories, and this may require a special approach.
Given the emergence of feature detection tools like Modernizr, I personally tend to use incremental simplification and browser blacklisting when developing compatible sites.
4. Testing, testing, testing ...
In order to detect potential cross-browser JavaScript problems as soon as possible, you need to test your site in different browsers and resolutions during the development process. There are various software emulators that can help us:
- Browserstack is a commercial service that provides access to a test environment in which you can test your project on more than 700 desktop browsers and mobile devices using a virtual machine in the cloud;
- Microsoft Virtual Machines - If you are running Linux, you will not have access to Internet Explorer. The solution might be to download images virtual machines for IE6 in IE11, which can then be used in conjunction with Oracle VM Virtualbox or Vagrant for local testing;
- Different screen resolutions for a specific browser can be quickly tested using the Screenfly online service. Using browser plugins like Window Resizer for Google Chrome, or directly from the Chrome and Firefox developer tools section.
5. Normalize.css and CSS Autoprefixer
I usually start new projects by resetting the CSS using Normalize.css, which provides better cross-browser style for defaults to HTML elements, all the way back to Internet Explorer 8. Normalize.css preserves the desired element styles, normalizes them appearance and fixes a number of bugs and inconsistencies in various browsers.
In addition, many outdated browsers cannot interpret unknown HTML elements and CSS properties... When the browser encounters a piece of HTML or CSS that it does not understand, it ignores it and continues the rendering process. Many applications use vendor prefixes to add new, experimental, or non-standard CSS features before they are implemented in the specification:
// Webkit browsers like Chrome and Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-
The problem is that prefixes are awkward to use and have a lot of bugs associated with them. So I am using the CSS Autoprefixer plugin in conjunction with Grunt.
Normal CSS rules will be processed by the plugin and prefixed based on the database " Can i use". It is recommended to set in the configuration the versions of the browsers that need to be supported, for example:
options: (browsers: ["last 2 versions", "ie> = 8", "Firefox> = 12", "iOS> = 7", "Android> = 4"])
Consider the following CSS class as an example:
Example (background-image: linear-gradient (top left, # 4676dd, # 00345b); display: flex; transition: 1s all;)
With CSS Autoprefixer it is converted to:
Example (background-image: -webkit-linear-gradient (top left, # 4676dd, # 00345b); background-image: -moz-linear-gradient (top left, # 4676dd, # 00345b); background-image: linear- gradient (top left, # 4676dd, # 00345b); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-transition: 1s all; -moz-transition: 1s all; transition: 1s all;)
6. Conditional comments
If you need to create fallback CSS or enable cross-browser JavaScript for early versions Internet Explorer, you can use conditional comments... They are supported in Internet Explorer 5-9, they use the syntax HTML comments combined with boolean values. Depending on the boolean value ( true or false) the code inside comment tags will be displayed or hidden in the respective browser versions:
КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ // if Internet Explorer // if NOT Internet Explorer // if Internet Explorer 7 // if NOT Internet Explorer 7 // if Internet Explorer 9 or BELOW // if Internet Explorer 7 or ABOVE // if Internet Explorer 6 OR 7 // if ABOVE Internet Explorer 6 BUT BELOW 9
The code is automatically hidden in all browsers that do not support conditional comments. A good example of how conditional comments can be effectively used in practice is the HTML5 Boilerplate, which adds specific CSS classes for outdated versions Internet Explorer:
7. Polyfills
Technical inconsistencies in legacy browsers for responsive web design can be corrected with a polyfill. It is a piece of JavaScript code that "fills" a specific functional gap between a legacy browser and a function. There are a number of polyfills that can be used to provide browser support for HTML5 features.
Below are several polyfills designed to address the cross-browser issues of the site mentioned in point 3:
- respond.js - implements CSS3 media queries for Internet Explorer 6 - 8;
- html5shiv allows the use of HTML5 Semantic Elements in Internet Explorer 6 - 8;
- selectivzr - Emulates CSS3 selectors and pseudo-classes in Internet Explorer 6 - 8. Full support requires either Mootools 1.3 or NWMatcher 1.2.3. Partial support is available with jQuery 1.3 / 1.4;
- REM-unit-polyfill - Determines if the browser supports rem units and provides a fallback. Works with IE8 and below.
To use these polyfills, they must be added from the CDN or as a file in the correct format inside the conditional comments in the section
(don't forget to include one of JavaScript libraries required for Selectivizr):
For each project, it is necessary to assess whether these additional scripts are really needed, as they can lead to performance problems. Most polyfills are compact, but each additional script loaded is an additional HTTP request. This can slow down the loading of the page.
8. Defining Features with Modernizr
The Modernizr library, written in JavaScript, will help you check the cross-browser compatibility of a site: whether a particular HTML5 or CSS3 feature is supported in different browsers. If the function is not available, then alternative CSS or JavaScript code may be loaded.
The idea is to directly define functionality browser, rather than trying to install a specific version of it. And based on this, infer its functionality, which is a less efficient and reliable way.
It's worth noting that Modernizr doesn't add the missing features to the browser. Therefore, you will need to provide the code from the fallback CSS or polyfill.
First you need to download a fully functional assembly. Later, when you are ready to develop, you can create custom assembly with the specific features you are testing. All you need to do is add the .no-js class to your site's HTML tag and include the Modernizr script in the head section after any CSS file:
Modernizr Demo
This is a Modernizr exercise.
The .no-js class is used to check if JavaScript is enabled in the user's browser. If enabled, Modernizr will replace .no-js with the .js class. The Modernizr test feature analyzes whether a particular feature is supported in the browser and generates a series of classes that are added to the HTML element. Google Chrome 47.0.2526.111, for example, will return the following object classes.
Modernizr is currently available as a global object that can be called in conjunction with a function name to check if it exists. It returns a boolean ( true or false).
Consider two simple examples CSS and JavaScript.
Example for solving cross-browser CSS issues: checking SVG support and providing PNG as a fallback
Currently, there is a trend towards more and more active use of SVG ( Scalable Vector Graphics), but these graphics are not supported in IE8 and below. If SVG is supported in the browser, Modernizr generates the .svg CSS class. If SVG is not available, the tool adds the .no-svg class to the HTML. With the CSS below, SVG-enabled browsers will use the regular .logo class, while non-SVG-enabled browsers will use the .no-svg rules:
Logo (background-image: url ("logo.svg? 1"); width: 164px; height: 49px;) .no-svg .logo (background-image: url ("/ logo.svg? 1"); width : 164px; height: 49px;)
JavaScript example: defining border-radius and adding appropriate CSS classes
Rounding of border corners is not supported in IE8 and below. We can create different CSS classes that are applied depending on the presence of the border-radius function:
// Class for the browser with the border-radius function .round-borders (border-radius: 5px;) // Class for the browser without the border-radius function .black-borders (border: 3px solid # 000000;)
Now you can use JavaScript to store the target ID as a variable, and then add CSS classes via a condition:
var element = document.getElementById ("TestID"); if (Modernizr.borderradius) (element.className = "round-borders";) else (element.className = "black-borders";)
Conclusion
When it comes to responsive web design in legacy browsers, there is no one-size-fits-all solution. It is important to analyze the audience of the resource in order to get an idea of the real number of browser users. Next, you need to thoroughly test your site to identify potential cross-browser issues.
Sometimes there are times when in different browsers we see a different picture when displaying our site. For example, we are making a menu. In FF, everything is smooth and beautiful; in IE, menu items are shifted a couple of pixels down. Editing styles. In IE it becomes normal, crawls away in all other browsers.
Most often, this can be seen when testing a site in IE. Therefore, it is he who most of all "love" layout designers and web programmers: while viewing your site through this browser, you can observe different variants in different versions. Moreover, now very few people do support for IE below version 7, and the seven are gradually being abandoned due to the decrease in the number of users of this miracle.
Unfortunately, this is observed not only in Internet Explorer, but also in other browsers, and it is not always possible to solve the problem by adjusting the styles.
CSS hacks are the same styles, but they are written in such a way that they can only be perceived by the specific browser for which the hack was intended. For example, if you're having trouble with IE8, you need to use the IE8 CSS hack. In this case, the layout will no longer float and will take on a normal look.
Let's look at hacks for different browsers:
CSS hack for Internet Explorer 8
@media \ 0screen (div (color: # 333;))Instead of div (color: # 333;), you need to insert your own style, which is designed to solve the problem and eliminate the jamb that has arisen.
CSS hack for Internet Explorer 9 and 10
: root div (color: # 333 \ 9;)Generally thought to be a hack for the nine, but it is accepted by the tenth version of IE, so be careful when using it. Check all versions after the hack in order to rule out new problems in the most unexpected places.
CSS hack for Internet Explorer 10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) (div (color: # 333;))Opera CSS hacks
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) (div (color: # 333;)) * | html div (color: # 333;)CSS hacks for Mozilla FireFox
@ -moz-document url-prefix () (div (color: # 333;)) *> div (color: # 333;)Safari CSS hack
html * div (color: # 333;) html: root div (color: # 333;)CSS hack for Google Chrome
body: nth-of-type (1) div (color: # 333;)These are just some of the options available. In the future, the list will be updated and replenished, because browsers are constantly updated and old techniques eventually stop working. You have to invent something new.
In general, I advise you to avoid using CSS hacks if possible. After all, layout problems often arise from inappropriate use of styles, and not because of a "clumsy" browser. Plus, hacks can cause code validation problems. In one of the following articles, I'll show you how you can do without CSS hacks and at the same time make a completely cross-browser site!
As you know, not all browsers perceive files in the same way. css styles... Basically, problems arise with older versions of Melkosoft's creation. Internet Explorer(7th version and below). By the way, if the problem occurs in modern browsers (like Opera, Mozilla Firefox, Chrome), then I highly recommend revise the page layout.
So that's it. There is a problem with browsers. And I know at least three ways to solve this problem.
Method 1. The most correct
Styles for browsers that misunderstand your css are written in separate file... Usually this browser, as I said, is Internet Explorer, and such files are called fix-ie.css
... ... ...
Change Name Topics to the real name of your topic - and when you open Internet Explorer versions 7 and below - this file will be added to the general set of style files, and even cached if caching is enabled.
This line is responsible for the browser version to which the stylesheet will be connected: