Browser support for CSS lags behind the development of CSS. Internet Explorer, which has an absolute market share, has only completed full support for CSS 2.1 until its 8th version released not long ago. The latest progress in CSS is The development of the CSS 3 specification is already more than half done. But this does not prevent us from using new technologies in CSS. Although we can't apply them as we like using general techniques in CSS, we can achieve more vivid effects in specific browsers. Using these new technologies in appropriate places will not only allow you to stand at the forefront of CSS technology, but also make your works feel refreshing.
New CSS technology: Don’t expect to be supported by all browsers
Microsoft has announced the support for CSS in various browser versions of Internet Explorer 5.5 to 8.0. In this list, we can see that full support for CSS 2.1 was not completed until Internet Explorer 8.0, and it can only be used in Internet Explorer 7.0. Attribute selectors in CSS 2.1, although this CSS technology is very useful. This means that you have to give up using this technology out of consideration for Internet Explorer 6.x users who still account for more than 40% of the market. For example:
[value] { height:25px}
[href=http://www.dudo.org/] {color:red;}
In line 1, we can set the height of all forms with value attributes to 25px; let links to specific websites be displayed in red text . But doing this in Internet Explorer 6 has no effect at all, because this "new CSS technology" is not supported.
In CSS 3, attribute selectors have more powerful functions. In addition, CSS 3 also adds effects such as rounded corners, text shadows, and three-dimensional borders. It can be said that these new CSS technologies have made the original complex problems in CSS 2 easier. It's very simple. For example, in CSS 3, you only need the following code to achieve a rounded appearance:
<div style="radiu:5px">This is a rounded corner</div>
However, this new technology is not supported even by Internet Explorer 8. It is currently only supported by Firefox, Safari, and Chrome, and this support is not complete. Supported, use -moz-radius in Firefox, and -wekit-radius in Safari and Chrome.
This is a new technology in CSS that can never seem to be fully interpreted by all browsers at the same time.
New CSS technology is not a CSS Hack
What is CSS Hack? CSS Hack is a method that uses certain deficiencies in the use of CSS in the browser to implement different CSS rules. For example, _property can be used to distinguish IE7, 8 and other versions of IE, *property can be used to distinguish IE from non-IE browsers, etc. However, what is pointed out here is that all these CSS Hacks are non-standard CSS specifications, and they cannot pass W3C verification. In other words, they are all incorrect CSS rules. But new CSS technologies are different. They are standard CSS specifications, but they are not supported by some browsers.
In addition, new CSS technologies cannot be solved by hacking. For inconsistencies in the interpretation of the box model in different browsers, we can correct it through CSS Hack. However, the problem of Internet Explorer not supporting rounded rectangles cannot be solved by any CSS Hack technology. The solution is to use additional XHTML or Use background images.
Therefore, the new CSS technology is not a type of CSS Hack, it is an orthodox CSS specification.
Appropriate use of new CSS technologies
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, if an ordinary page could be added with additional ease of use in a browser without affecting its use, wouldn't it be more attractive? And we achieved this effect without adding irregular CSS rules like CSS Hack. Therefore, using CSS technology appropriately at the appropriate time can achieve the icing on the cake effect and make your web page easier to use.