The browser's support for CSS lags behind the development of CSS. For Internet Explorer, which has an absolute market share, it has just completed the full support for CSS 2.1 until its release not long ago, and the latest developments in CSS are The formulation of CSS 3 specifications has been done more than half. But this does not prevent us from using new technologies in CSS. While we can't apply them as freely as we use common technologies in CSS, we can achieve more vivid results in a specific browser. Using these new technologies in the right places will not only allow you to stand at the forefront of CSS technology, but also make your works feel refreshed. New CSS technology: Don't expect to get support from all browsers In line 1, we can set the height of all forms with value attributes to 25px; let the links to a specific website be displayed in red text. But doing this in Internet Explorer 6 is completely ineffective because this "new CSS technology" is not supported. However, this new technology is not supported even in Internet Explorer 8. Currently, it is only supported in Firefox, Safari, and Chrome, and this support is not fully supported. In Firefox, -moz-radius, Safari and Chrome use -wekit- radius.
Microsoft has announced the support level of CSS for each version of browser in Internet Explorer 5.5 to 8.0. In this list, we can see that the complete support for CSS 2.1 was not completed until Internet Explorer 8.0 and can not be used in Internet Explorer 7.0. The attribute selector in CSS 2.1, although this CSS technique is very useful. This means that you have to give up using this technology for Internet Explorer 6.x users, which currently still account for more than 40% of the market. For example:
[value] { height:25px}
[href=http://www.dudo.org/] {color:red;}
In CSS 3, attribute selectors have more powerful functions. In addition, CSS 3 also adds rounded corner technology, text shadows, three-dimensional borders and other effects. It can be said that these new CSS technologies have made the original complex problems in CSS 2 become It's very simple, for example, in CSS 3, you only need the following code to achieve the rounded corner appearance:
<div style="radiu:5px">This is a rounded corner</div>
This is the new technology in CSS, which can never be fully explained by all browsers at the same time.
New CSS technology is not CSS Hack
What is CSS Hack? CSS Hack is a method that uses some shortcomings in the browser's application of CSS to implement the application of CSS rules separately. For example, use _property to distinguish between IE7, 8 and other versions of IE, and *property can be used to distinguish between IE and non-IE browsers, etc. However, it is pointed out here that all these CSS Hacks are not standard CSS specifications, and none of them pass W3C verification. In other words, they are all incorrect CSS rules. But the new CSS technologies are different. They are standard CSS specifications, but they cannot be supported by some browsers.
In addition, new CSS technology cannot be solved by Hack. For cases where the box model explanations of different browsers are inconsistent, we can correct it through CSS Hack, but the problem that Internet Explorer does not support rounded rectangles cannot be solved by any CSS Hack technology. The solution is to use additional XHTML or Use background image.
Therefore, the new CSS technology is not a type of CSS Hack, it is an orthodox CSS specification.
Appropriate use of new CSS technology
Although we mentioned earlier that the new CSS technology cannot be supported by all browsers, nor can it achieve the same effect in different browsers like using CSS Hack technology. However, this does not prevent us from using them. Just imagine, wouldn’t it be more attractive to add additional ease of use to a browser without affecting its use? And we achieved this effect without adding irregular CSS rules like CSS Hack. Therefore, the appropriate use of CSS technology at the right time can achieve the icing on the cake, making your web page easier to use.