A brief discussion on the disadvantages of using 'complete' CSS_html/css_WEB-ITnose

1. Inconsistency in browser support

Browser vulnerabilities or lack of supported CSS functions cause different browsers to display different CSS layouts. For example, the old version of Microsoft Internet Explorer 6.0 implemented many of its own CSS2.0 properties and misinterpreted many important properties, such as width, height, and float. Many so-called CSS people must achieve consistent layout in the most popular or commonly used browsers. In different browsers, it is sometimes impossible to achieve pixel-accurate layout.

2. CSS has no parent selector

The CSS selector cannot provide the parent or inheritance of the element to comply with a certain standard. Advanced selectors such as XPath facilitate complex styling. However, browser performance and increased rendering issues related to parent selectors were the main reasons why the CSS working group rejected the proposal.

3. Inheritance cannot be specified explicitly

The inheritance of styles is based on the hierarchy of DOM elements and specific rules in the browser.

4. Limitations of vertical control

The horizontal placement of elements is generally easy to control, but vertical control is non-intuitive, circuitous or even impossible. To put it simply, for example: surround an element vertically, place the footer no higher than the bottom of the visible viewport (the visible range of the window or screen), require complex rather than intuitive style rules, or be simple but Rules that are not widely supported.

5. Lack of display

Current CSS has no way to clearly and simply display attribute values ​​(for example: margin-left: 10% - 3em 4px;). This is useful in many situations, such as size limits for calculated fields within a total field. Regardless, the CSS WG published a draft of CSS limitations, and Internet Explorer 5 and later versions support syntax display with similar functionality.

6. Lack of orthogonality

The same effect can be accomplished with different attributes, which often causes confusion. For example, position, display and float define different configuration methods and cannot be used interchangeably effectively. A display: table-cell element cannot specify float or position: relative, because elements specifying float:left should not be affected by the display effect. Furthermore, the impact of newly created attributes is not taken into account. For example, in a table, you should use border-spacing instead of margin-* to specify table elements. This is because according to CSS guidelines, the elements inside the table have no borders (margin).