Web-side css hack (1), web-side csshack

Web-side css hack (1), web-side csshack

During a small holiday in May October, I felt uncomfortable without typing the keyboard for a few days. I also have time to share my css problems. Css hack

 

A Brief Introduction to css hack:

Definition:

Generally, CSS and bugs are supported by various browsers, which can be divided into capability selection and geek selection (BUG ).

Capability usually refers to the degree of support of the browser for CSS features, while quirks refer to some browser-specific bugs.

Conclusion: The definition here is very clear: the first browser's cssDegree of supportDifferent. Second, differentThe browser carries its own unique attributes.

Reminder:

Try to find common methods to reduce the use of CSS Hack. large-scale use of CSS Hack will bringMaintenance CostAnd changes in the browser version.Hack invalidAnd other issues

Conclusion: It is pointed out that the higher the number of hack writes, the better. Considering the differences between different versions of each browser, the time consumption is not necessarily effective.

Writing Method:

The CSS hack writing sequence is generally defined in front of CSS with a wide range of applicability and strong recognition capabilities. An example will be provided later.

 

 

This article mainly describes how the browserDegree of support

 

 

Three writing methods:

I. Condition Hack (IE)

<! -- [If <keywords>? IE <version >?]> HTML code block <! [Endif] -->

The if condition contains six options: Whether, greater than, greater than or equal to, less than, less than or equal to, or not specified version.

Whether:

Indicates whether to use IE or a certain version of IE. Keyword: NULL

Greater:

Select an IE version later than the specified version. Keyword: gt (greater)

Greater than or equal:

Select an IE version later than or equal to the specified version. Keyword: gte (greater than or equal)

Less:

Select the IE version earlier than the specified version. Keyword: lt (less)

Less than or equal:

Select the IE version earlier than or equal to the specified version. Keywords: lte (less than or equal)

Unspecified version:

Select all IE versions except the specified version. Keyword :!

It is particularly emphasized that ie10.

For example:

<! -- [If IE 8]> // This is the format

// Here is the code area, not only css but also html Tag (HTML code block)

<Style>
Div {position: relative ;}
</Style>

<! [Endif] -->

Ii. Attribute Hack (understand, official note: exercise caution when using it)

　　　　Selector{<Hack>? Property: value

For a simple example, we will not explain it in detail.

　　　　　

If you want to display the same text in IE6, 7, or 8 in different colors, you can write it as follows:

　　.test {　　color: #090\9; /* For IE8+ */*color: #f00;  /* For IE7 and earlier */_color: #ff0;  /* For IE6 and earlier */　　}

3. Select character-level Hack (understand, official note: exercise caution when using it)

This is our common css selector. As long as you pay more attention to the compatibility of some css syntaxes, we do not recommend using hack.

* Html. test {color: #090;}/* For IE6 and earlier */* + html. test {color: # ff0;}/* For IE7 */. test: lang (zh-cen-Hans) {color: # f00;}/* For IE8 + and not IE */. test: nth-child (1) {color: # 0ff;}/* For IE9 + and not IE */


Summary:
Here is a brief description of css hack. Use as few hack as possible for compatible browsers.
Cause:
1. the development project should not only consider the previous version of the browser, but also pay attention to the subsequent development of the browser. The current problem cannot be solved, that is, the problem is completely solved.

On the one hand: in this way, I think that, in the words of a senior, Inhumanity is not human, and the brother (or sister) who later took over is totally mad.

Another point: more considerations are helpful for solving problems in the future and will be of great help to code Fault Tolerance in the future.

2. For browser compatibility, We need to describe the compatible version and the reason. This is what we programmers should consider.
　　　　　　 
As an application oriented to the consumer group of college students, it is completely compatible with requirements such as IE67.