Sooner or later, all web-developers are faced with a situation where Internet Explorer becomes a problem hampering the development of a project. The site has been validated by standards. Normally displayed in Mozilla, Opera, Safari and other normal browsers. But. Open it in IE. And we see. Like what we customized for pixels, strictly adhering to the standards, spread over the page. Well, even in IE7 you can more or less just fit the layout (of course, depends on the design), but sometimes IE6 hair stands on end. Fortunately, there are ways that allow you to influence the situation. Someone uses hacks, someone - conditional comments. Somewhere it is possible to compromise and simplify the idea of ​​designers, supporting users of non-improvisers.
As a result, you can achieve adequate display of the site in all popular browsers including IE6 and IE7 which, unfortunately, is still the most popular. But what do we get? Typically, this is one or more CSS files for IE. Or a bunch of additional properties // or _. All this makes it difficult to support the site, making changes, adding new elements to the layout. There is always a chance that somewhere you forgot to correct something or did not remove the style that only worked in IE.
Recently found a very interesting solution that eliminates many problems with IE.
Project site . The solution is written in javascript.
The following features are stated on the project website:
')
- supports the following CSS selectors:
- parent> child
- adjacent + sibling
- adjacent ~ sibling
- [attr], [attr = "value"], [attr ~ = "value"] etc
- .multiple.classes (fixes bug)
- : hover,: active,: focus (for all elements)
- : first-child, last-child, only-child, nth-child, nth-last-child
- : checked,: disabled,: enabled
- : empty,: contains (),: not ()
- : before /: after / content:
- : lang ()
- supports imported style sheets
- preserves the cascade of the style sheet
- does not alter the document structure
- does not repeatedly query the DOM tree using JavaScript
- uses pure CSS to enforce style sheet rules
- supports the W3C box model
- supports fixed positioning (flicker free)
- supports overflow: visible
- supports min / max-width / height
- fixes broken (X) HTML elements (abbr, object)
- standardized forms behavior
- supports PNG alpha transparency
- lightweight script (11KB)
- works for Microsoft Internet Explorer 5+ (Windows only)
In my opinion - an excellent list of features.
In order for the skipt to work, you just need to connect it to the page. After loading, he applies unintelligible IE styles to the page elements and performs additional operations to support the standards.
Yes. You have to pay for everything. Naturally, without the support of JavaScript, the solution cannot work, and this does not affect the speed, although it doesn’t matter much. As a rule, IE users are “average users” who do not disable JavaScript, and small slowdowns when loading pages is not their biggest problem.
But we get the opportunity to use a lot of CSS goodies like: first-child, parent> child, [attr = "value"]. About which, earlier, IE made us forget.
Personally, I will use this solution in my projects.
I am very interested to hear the views of users on this decision.