When designing websites, a situation often arises when it is impossible to write a set of CSS properties that will be understood equally well by all major browsers. And if with Firefox browsers, Google Chrome, Opera and Safari, this problem most often does not occur, but in the case of different versions Internet Explorer It is very difficult to achieve cross-browser layout. Therefore, to solve this problem, you need to write part of the css properties specifically for some versions of IE (most often these are IE6 and IE7). There are two ways to do this: the first is to use Internet Explorer conditional comments, the second is to use CSS hacks (for example, *margin-left:10px or _margin-left:10px). Both methods have a number of disadvantages, but, fortunately, there is another solution that I consider the most optimal for creating cross-browser CSS files.
First, in more detail about the disadvantages of the first two methods. In the case of using conditional comments, we load a separate css file with additional styles for different Internet versions Explorer. For example, like this:
The disadvantages of this method are as follows:
- we receive additional http requests to load files with styles for different versions of Internet Explorer, which will negatively affect page loading time;
- styles are broken down into different files, which makes it very difficult to find them while working on website layout (I myself very often worked with such projects where separate css files for ie7 are the norm, and I spent a lot of time understanding where the hell this or that one is loaded from style for IE).
Moreover, I consider the second drawback to be very significant. And in this regard, even using CSS hacks for IE seems to be a better way to achieve cross-browser layout. But CSS hacks also have a drawback - the site on which they are used will not pass validation. If web page validation is not important, then you can use hacks, but there is a more elegant solution than the first two, which does not have the disadvantages described above. With its help, you can write all the styles in one file, which will successfully pass validation. This method is described on Paul Irish's website. Its essence is that with the help of conditional comments we do not load an additional css file, but simply set a special class for the tag, similar to how the Modernizr js library sets classes.
The code for the opening tag would therefore look like this:
By the way, my blog uses exactly this method of cross-browser layout so that in IE6 and IE7 browsers the site pages are displayed the same way as in other browsers.
Good afternoon, allies!
As a layout designer, I have to deal with various CSS3 properties every day, which, whether I like it or not, I have to use so that they are displayed correctly in all modern and non-modern browsers. Of course, I have collected a certain library that I use when creating various projects. I collected my collection from various resources and forums, on the boundless expanses of the Internet, so it is not surprising if someone has already encountered something separately.
Perhaps experienced representatives of our profession will not be interested in this post, but younger and more inexperienced ones may find it useful. From senior comrades, in turn, I would like to receive comments on the shortcomings that may be present here, and important points, which, on the contrary, may be absent here.
For CSS3 to work correctly in all browsers, you have to use some external libraries.
Actually, after all the preparations, you can go directly to the CSS3 properties that we will mock.
Rounded edges or border-radius .border-radius ( border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); )background-clip property: padding-box; eliminates the possibility that the picture in the background will interfere with our rounded areas.
Line behavior: url(PIE.htc); connects our PIE file to support this IE property.
Box shadow or box-shadow .box-shadow( box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url (PIE.htc); )Properties filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); used for IE.Gradient on background or background: linear-gradient() .gradient( background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); ) Double background or background: url(), url(); .multiple-background( background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url( back2.png) 0 0 no-repeat; behavior: url(PIE.htc); )
Modern browsers seem to understand everything, but for IE we again use PIE. Picture instead of stroke or border-image: url(); .border-image( -webkit-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); )
Here the behavior property will not work in IE10. Text shadow or text-shadow This is where the charms of PIE end. To use text shadow in IE, you need to use the aforementioned jQuery.textshadow library.
To use it, you must first specify our shadow in the styles, for regular browsers
.text-shadow( text-shadow: 1px 1px 3px #000; )
And then, using the library, we ask unusual IE browsers to understand us
$(function())( $(".text-shadow").textShadow(); ))
first, without forgetting, connect this library and everything that is necessary for its operation.
Unfortunately, this property will not work in browsers IE7 and earlier. On this moment I have not found a correct solution to this issue, but this does not mean that it does not exist. Putting blocks in a line or display: inline-block A great modern feature that allows you to put blocks in one row without using float properties and so on. To my regret, in practice, I have encountered the fact that many people use it purely. That is so
.inline-block( display: inline-block; )
Code in this version is supported only by the latest modern browsers. For full support, you need to add a few lines to it. Full code is:
.inline-block( min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; )
Here
display: -moz-inline-stack; used to understand old Mozilla's inline-block.
property vertical-align: top; Aligns all blocks vertically to the top. Depending on the task, you can do it at the bottom.
And finally the properties
zoom: 1; *display: inline; _height: 250px;
are used for IE. Note that in this case _height: 250 is used because IE does not know the min-height property. Transparency or opacity .opacity( opacity: 0.5; filter: alpha(opacity=50); )
Please note that in filters used for IE, the transparency value is specified in the range from 0 to 100, and not from 0 to 1 as usual. Animation or transition .transition ( -webkit-transition: all 1s ease; transition: all 1s ease; ) Transform objects or transform .transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); )
The transition and transform properties are not supported in IE browsers lower than version 9, and transition is only supported from version 10. I haven't found a solution for old IE yet either. Background size or background-size .background-size( background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft .AlphaImageLoader(src="back.jpg", sizingMethod="scale"); ) CSS3 selectors We are talking about selectors such as
ul li:fist-child() ul li:last-child() ul li:nth-child(3)() input() a:hover()
And other useful selectors: which were added to CSS3. In order to provide high-quality support for such selectors, we use the aforementioned Selectivizr library. For it to work, we just need to include it before our CSS file.
A complete list of selectors that Selectivizr works with can be found on the official page, in the “How does it work?” section.
Finally, I would like to note that I did not consider all properties for cross-browser compatibility, but only those that are most often used in everyday practice. I hope this post can be at least somewhat useful to you!
Updated border-raduius and opacity properties. Thanks pepelsbey for the strict remark!
Updated most properties as recommended. Thank you very much to user Aingis for your great help!
We have released a new book “Content Marketing in in social networks: How to get into your subscribers’ heads and make them fall in love with your brand.”
Cross-browser compatibility is the ability of a web resource to adapt to several browsers and display correctly in them.
More videos on our channel - learn internet marketing with SEMANTICA
For example, you made a website for your online store. you have developed Beautiful design, which is pleasing to the eye. But users access your site through different browsers. Some people actually use a smartphone. And if you have not checked the cross-browser compatibility of the resource, it may happen that the site will not display well in some browsers.
Elements may move out, pictures may not be displayed, and fonts will become ugly. A person will not use such a service. He will continue searching.
The task of the site developer is to make it so that, regardless of the browser and device, the resource is displayed correctly.
Cross-browser layoutThere is competition between browsers. Previously, everyone tried to add exceptional features and options. This resulted in HTML standards being no longer followed and each browser rendering pages differently.
Netscape Navigator dropped out of the race, giving the monopoly to Internet Explorer. Almost simultaneously, projects began to gain momentum Mozilla Firefox(Gecko), Google Chrome (Blink), Opera (WebKit) and Safari (WebKit), dividing the market among themselves and forcing the community to think about the issue of cross-browser compatibility of their sites.
All Internet users use special programs– browsers. A browser is a program that communicates between the user and the server. The browser sends requests to the server and receives responses from it, and this response is converted into the form that everyone is used to calling an Internet page with all its content, text, images, videos, etc. The finished appearance of the page (content location, dimensions, color, font, etc.) is set using using HTML layout and cascading style sheets (CSS), which were converted from an image drawn by a designer into a form understandable by the browser. This is called layout. In simple words HTML layout is the arrangement of the elements of an Internet page, where they should be located according to the designer who created the layout of the future page.
But every user prefers a browser that is more familiar to them. Nowadays, there are 5 most popular browsers, which are indicated by statistics. These are Chrome, Safari, Opera, FireFox and Internet Explorer (IE). These browsers of one version or another are most often used by Internet users to browse the World Wide Web. Each of these browsers has its own functionality and its own characteristics of displaying Internet pages.
In the wide variety of all browsers and their versions, and their features of displaying Internet pages, the concept of cossbrowser HTML layout appeared. So what is cross-browser compatibility?!
Cross-browser compatibility is the ability of Internet pages to be displayed equally in different versions of browsers, without distortion or “spreading” of page elements, regardless of the characteristics of the browser itself.
The Internet Explorer browsers from Microsoft have the largest number of these features, which is why most HTML coders “don’t like” them and invent them for it different ways leading to the correct display of the page (these methods are called “crutches” by layout designers). Our personal opinion is that it is possible to create an HTML page cross-browser without using these very “crutches” that clog the HTML code of the page.
Conditional comments for Internet Explorer Conditional comments for all versions of IE Conditional comments for IE 7 Conditional comments for IE 6 Conditional comments for IE 5 Conditional comments for IE 5.5 Conditional comments for IE earlier than version 6 Conditional comments for IE earlier than version 7 Conditional comments for IE earlier Versions 8 Conditional comment for IE older than version 9 Conditional comment for IE older than version 6 Conditional comment for IE older than version 7 Conditional comment for IE older than version 8 Basic rules of cross-browser layout:It's no secret that each browser has its own design styles for certain HTML elements code, font size, indentation size, etc. which will lead to the spread of page elements, and it will not be cross-browser.
From this we can conclude that all custom styles different browsers you need to “disable”, or rather reset to the same ones. Some HTML coders do this directly when setting CSS styles to individual elements, we use a different practice. We reset all browser CSS styles at the very beginning of the CSS document. To do this, we use a modified set of CSS styles proposed by meyerweb.com
This code, added to CSS styles, resets all native browser styles to the same one. This will allow you to make the layout HTML pages identical in all browsers, regardless of their own styles.
Validity HTML documentThe second rule of cross-browser HTML layout is compliance with the HTML and XHTML standards approved by the W3C consortium. Each HTML document (namely a document) has its own standard and its own writing features.
We will look at the types of HTML document standards and their differences later, since this topic requires separate consideration and description.
The validity of an HTML document is compliance with the approved standards and norms of the W3C consortium.
According to W3C standards, each HTML tag document must have its own pair. These pairs are called opening and closing tags, but there are exceptions to this rule - these are tags ,
etc., these tags do not have a closing pair.
A non-closed paired tag, each browser can understand in its own way, and will display the content enclosed in these tags in a way that is not intended by the layout designer.
You can check the validity of an HTML document on the W3C consortium website.
Valid code example: Valid code Valid HTML codeThis HTML code complies with XHTML 1.0 Strict standards and is valid
And contains both paired (closing) tags and an unpaired tag
This HTML code does not comply with W3C standards and is not valid
There are many ways to check the cross-browser compatibility of a HTML document being typed, the simplest of which is to install all the popular browsers on your computer. But what about different versions Internet Explorer?! - many will ask.
There is a simple way to collect all versions of IE in one bottle, so to speak. You can download IE Tester, which includes all versions of IE starting with IE 5.5.
You can also use the Browsershots.org service, which allows you to take pictures of your HTML document from more than 40 different browsers.
When CSS is used not only for text design, but also for working with layers in tableless layout, it is necessary to remember that modern browsers do not treat in the same way such important parameters as margin - the external space of an element, padding - the internal margin of an element, as well as position parameters , float - text wrapping and a number of others.
Due to these differences in the interpretation of parameter values, it often happens that sites and web interfaces that look normal in Mozilla browsers Firefox, Opera and Safari suddenly begin to disperse in the Internet Explorer browser.
The basis for these differences in browser interpretation of CSS is the lack of compliance of Internet Explorer browsers prior to version 7 with the CSS standards adopted by the W3C. Therefore, for successful tableless layout for versions earlier than IE 7, you need to use a number of special constructs called CSS hacks. It is also important to note that for other browsers it is sometimes necessary to use a CSS hack.
Let's consider how to write CSS that would only be interpreted by certain types of browsers:
Document table of contents
CSS for IE 5, 5.5, 6, 7 Conditional Comments IE browsers have long supported so-called Conditional Comments, which allow you to make content visible only to IE. Conditional comments are simply specially formed HTML comments that are understood only by certain versions of Internet Explorer for Windows. As an example, you can use conditional comments to fix the PNG transparency bug in IE.To use them you need:
Applying CSS for IE5 If you need to apply a conditional comment only for IE5, then you just need to specify version 5.0 in the IE 5.0 if clause:
Applying CSS for IE5.5 If you need to apply it relative to IE5.5, it will look like this:
Applying CSS for IE6 Same for IE6:
Applying CSS for IE5 and IE5.5 simultaneously or for several versions If you need to fix a bug with the box model in IE5 and IE5.5 using conditional comments, you can use part of the version index or comparison operators.
The first example will connect the style sheet to any version of Internet Explorer whose first digit is 5:
Alternatively, you can specify that stylesheets connect to any browser version less than 6:
Instead of lt (l ess t hen - less) you can also use lte (l ess t hen or e qual to - less or equal), gt (g reater t hen - more), gte (g reater t hen or e qual to - greater than or equal to), the main thing with all this variety of possibilities is to choose the order of specifying conditional comments correctly, so as not to get into a situation where for some browsers groups of conditional comments intersect, giving an unexpected result.
Order of use If you do not want the general style sheets to dominate over the tables that are created specifically for IE, then you need to connect the general style sheets first, and only then the tables for IE. In an example it looks like this:Other benefits of this method By using conditional comments, you also have a way to more reliably determine the browser version. Browsers that pretend to be Internet Explorer but are not will not use style sheets designed for IE. With this method, you can generate accurate statistics regarding which version of IE your visitors are using, without errors caused by programs and browsers impersonating IE. Validity Perhaps one of the nicest parts of this technique is that your style sheets and your carefully formatted (X)HTML documents will remain fully compliant with the specification. Debugging conditional comments There is one caveat worth mentioning.
If you are using several versions of Internet Explorer on the same machine, then all of these versions will pretend to be the newest one. installed versions. This means that if you have IE6 installed, but are viewing the page using IE5, this conditional comment will be executed:
But this conditional comment will not be executed:
For the most accurate tracking of differences in CSS processing by different versions of IE, it works well free program IETester, which supports all versions of IE from 5 to 8. And for quick change For CSS parameters in IE8, by pressing F12, a developer tool is available, reminiscent of FireBug in Mozilla Firefox.
Similar to declaring style sheets, this method can hide HTML code from specific or all versions of IE. For example, the text "HTML code" will be displayed in all browsers except IE6 if you put it in a conditional comment like this:
HTML code
Tag Keep in mind that conditional comments in IE can be used anywhere on a page, not just to declare style sheets for the appropriate browser version. Using conditional comments, you can display something to IE users Additional information, which is not visible to users of other browsers.Similar to conditional comments, IE 5--IE 8 supports the ... tag. This tag allows you to hide information from IE users, thus the code:
Is not Internet browser Explorer
IE users will be shown as: This is Internet Explorer, and users of other browsers will be shown as: This is not Internet Explorer.
The tag is not valid.
CSS hacks IE In order not to clutter the HTML code by declaring several style sheets, or if you need to save a single CSS file, you can write separate styles that will only work in IE. Moreover, there is an option for both IE6 and IE7.For IE all versions. If you prefix a property with two forward slashes (//), it will only be accepted by IE browsers of all versions. Other browsers will ignore this property.
In IE6, it is possible to put a minus sign (-) or an underscore (_) in front of a property without IE7 responding to it. You can also use the following construction:
* html .style (...)
For example:
Style ( background : red; /* for normal browsers */ //background : green; /* for all IE */ -background : blue; /* for IE6 */ ) * html .style ( background : blue; /* other method for IE6 */ )
In this case, the background will be red in Opera and Firefox browsers, green in IE7 and blue in Internet Explorer 6.
The example changes the background color for different browsers. In practice, this method is used to achieve identical display and cross-browser compatibility. Most often you have to resort to it when positioning and set different meanings properties like left, top, padding, margin, width and others related to sizes, percentages and pixels.
For IE7 a CSS hack is used:
*: first-child+html .style ( ...)
*+html .style ( ...)
CSS for Firefox There are also special CSS hacks that allow you to show styles only Firefox browser.html: root .style ( ...) /* this also works for Safari */
Style, x: -moz-any-link (...)
To quickly change CSS parameters in Firefox by pressing F12, the Firebug developer tool is available (requires preliminary installation) - it is the best among its analogues.
CSS for Opera CSS hacks for Opera browser are presented by the following examples:
Loading...
