CSS hack compatible browser Experience Sharing

Source: Internet
Author: User
Document directory
  • Development Platform Selection
  • Hack Sequence
  • Hack Method

(From: http://www.neoease.com/css-browser-hack)

 

Due to the rise of Firefox and the separation of Internet Explorer,CSS hackI got the attention of the Website Creator again.Compatible with browsersIt is a pity that some of my friends have failed to stick to it because of their troubles.

At present, eight browsers have been installed on my machine. It is thrilling to hear that IE8 is coming soon. this is not the case. Another standard will be compatible later. Thanks to Microsoft for increasing my workload. I have been playing WordPress for more than a year and have made many theme points. I have also summarized some of my experiences. Before the devil's afterlife, I would like to make it easy to use later, at the same time, I hope it will be helpful for beginners.

 

Development Platform Selection

Fortunately, firefox2 was very popular when I came into contact with the Web Front-end. All my work was carried out on Firefox and compatible with other browsers. it is certainly easier to do this than to make other browsers compatible with IE, because IE still has good support for old standards, but some of the unique features of IE are not supported by others. so I recommendUse Firefox with firebug extension as a platform.

Hack Sequence

If Firefox is used as a platform, as long as the code is well written, there will not be a lot of hack, and there will be almost no problems in browsers other than IE, so you can temporarily ignore it, in the following order:
Firefox> IE6> IE7> others

Hack Method

There are two methods: Processing in different files and processing in the same file. In fact, the functions are the same, but the starting points are different.

1. Processing in the same file.
For example, the control id = "bgcolor" must be blue in IE6, green in IE7, and red in Firefox.

# Bgcolor {Background: red! Important;/* Other Firefox browsers */Background: Blue;/* IE6 */} * + html # bgcolor {Background: Green! Important;/* IE7 */}

IE6 does not recognize it! Important, do not recognize * + html. Therefore, IE6 can only be blue.
IE7 recognition! Important, also recognizes * + HTML, priority: (* + HTML +! Important)>! Important> + html. IE7 can be red, blue, and green, but Green has the highest priority.
Firefox and other browsers recognize it! Important .! Important is preferred. Firefox can be red or blue, but red is preferred.

The above priority symbols are all allowed by the css3 standard, and other browsers also have other hack methods, but so far I have not encountered Firefox normal, and other browsers other than IE are abnormal, so there is no sharing. as long as the code is standardized, we believe this situation should be rare (except JavaScript ).

2. process different files.
Why can the same file be processed and written in multiple files for different browsers? This is to fool W3C verification tool. In fact, only two files are required. One is for all browsers and the other is for IE only. write All W3C-compliant code to one file, and some code (such as cursor: hand;) that is required by IE and cannot be verified by W3C is put into another file, use the following method to import data.

<! -- Place the styles of all browsers --> <LINK rel = "stylesheet" href = "style.css" type = "text/CSS"/> <! -- Only place what is required by IE, but not through W3C code --> <! -- [If IE]> <LINK rel = "stylesheet" href = "style_ie.css" type = "text/CSS"/> <! [Endif] -->

There are many CSS hack methods in the browser, such as @ import introduction,> filter, and so on, but the above is all I have used.

The front-end compatibility of web pages should not be limited to support previous browsers (Forward compatibility), but also browser services (backward compatibility ). because browsers develop rapidly, and frequent Internet users update software, backward compatibility is even more important than previous compatibility. how can we achieve backward compatibility?As long as your website meets the standards, it will never be out of date (except for the IE series ).Therefore, my aim is to achieve the standard as much as possible, and to use a simple solution as much as possible.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.