Summary of CSS hack technology usage

What is a CSS Summary of CSS hack technology usage?

In web development, we often encounter inconsistent performance among browsers. Because browsers from different manufacturers or different versions of a certain browser have different support and parsing of CSS. ,lead to Inconsistent page display effects are presented in different browser environments. At this time, in order to obtain a unified page effect, we need to write specific CSS styles for different browsers or different versions. , we call this process of writing corresponding CSS code for different browsers/different versions CSS Summary of CSS hack technology usage!

Let’s talk about the use of CSS Summary of CSS hack technology usage technology:

CSS Summary of CSS hack technology usage technology

1. Detailed explanation of the classification of css Summary of CSS hack technology usage and the three methods of css Summary of CSS hack technology usage

css Summary of CSS hack technology usage classification
has three forms of expression, css attribute prefix method, selector prefix method, and IE conditional comment method.

Attribute prefix method (i.e. class internal Summary of CSS hack technology usage)

Selector prefix method

IE conditional comment method
css Summary of CSS hack technology usage generally has a wide range of applications and is recognized. Strong css definition is at the front.

2. Use CSS Summary of CSS hack technology usage technology to solve browser compatibility issues

CSS Hack has roughly three forms of expression: CSS attribute Hack, CSS selector Hack and IE conditions Note Hack, Hack is mainly targeted at IE browser.

　a. Attribute-level Hack: For example, IE6 can recognize underline "_" and asterisk "*", IE7 can recognize asterisk "*", but not underline "_", and firefox cannot recognize both. Wait

b. Selector-level Hack: For example, IE6 can recognize *html .class{}, IE7 can recognize *+html .class{} or *:first-child+html .class{}. Wait

c. IE conditional comment Hack: For example, for all IE: , for IE6 and below: , this type of Hack is not only effective for CSS, but also for all codes written in the judgment statement. .

3. Introduction to CSS Summary of CSS hack technology usage writing methods in different browsers

The difference between IE6 and FF:
backgroundrange;*blue;
The difference IE6 and IE7:
background:green !important;blue;
The difference between IE7 and FF:
backgroundrange; *background:green;
The difference between FF, IE7, and IE6:
backgroundrange;*background:green !important;*blue;

4. The most comprehensive list of CSS Summary of CSS hack technology usage methods (compatible with multiple browsers)

Under normal circumstances, we try to avoid using CSS Summary of CSS hack technology usages, but in some cases, Summary of CSS hack technology usages are used as a last resort in order to consider the user experience and achieve backward compatibility. For example, because IE8 and below versions do not support CSS3, and our project page uses a lot of new CSS3 properties to render normally under IE9/Firefox/Chrome. In this case, if you do not use css3pie or htc or conditional comments, etc., it may You have to let IE8-'s exclusive Summary of CSS hack technology usage come into play. Although using Summary of CSS hack technology usages is good for the consistency of page performance, excessive abuse will cause confusion in HTML documents and increase the burden of management and maintenance.

5. CSS Summary of CSS hack technology usage

Because different browsers, or even different versions of the same browser, have different understandings of CSS parsing, the generated page effects are inconsistent. Writing CSS code for different browsers is called CSS Summary of CSS hack technology usage.

There are three commonly used CSS Summary of CSS hack technology usages, CSS internal Summary of CSS hack technology usages, selector Summary of CSS hack technology usages, and HTML header references, of which the first is the most commonly used.

6. CSS Hack Collection Summary

Block IE browser (that is, it will not be displayed under IE)
*:lang(zh) select { font:12px !important;} /*Special for FF*/
select:empty {font:12px !important;} /*Visible in safari*/
Select here is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.
only IE7 identification

Related questions and answers

1. css Summary of CSS hack technology usage question

2. A question about IE version HACK

3. Input text text is selected to change the default color. Safari does not support it. Is there any other Summary of CSS hack technology usage solution?

[Related recommendations]

1. PHP Chinese website Free video tutorial: "php.cn Dugu Jiujian (2)-css video tutorial"

The above is the detailed content of Summary of CSS hack technology usage. For more information, please follow other related articles on the PHP Chinese website!