CSS and its Limitations

If you are using “unadulterated” CSS, you will notice the following disadvantages:

Inconsistency of browser support

Differences in browsers such as lack of browser support or browser bugs result can cause differences in certain CSS features. For instance, older versions of Microsoft IE implements a lot of CSS 2.0 features in an incompatible way. It misinterprets a number of chief properties like width or height. A lot of other CSS “hacks” should be applied to attain steady layouts with the commonly and more popularly used browsers.


Failure to ascend of selectors

There is actually no way of selecting an ancestor or parent of CSS that can suit certain criteria. Some more sophisticated selector scheme would allow more advanced stylesheets. But primarily, CSS Working Group selectors are rejected due to browser performance and other incremental issues.

Single block declaration can’t openly inherit from another

Styles are usually inherited by the browser from the containment hierarchy DOM factors, more specifically on the rule selectors. Only specific users of the blocks can refer to it by adding class names to those attributed to a DOM element.

Limitations on Vertical Controls

Compared to horizontal features, vertical placements are more difficult to control. They are more convoluted and could be impossible. Easier tasks like getting footer placed not higher than a viewport bottom may require complicated style rules, they may be simple however, and they are unsupported widely.

Lack of expressions

CSS also has no capacity to specify values property like simple expressions. This could be useful in different cases – calculating column sizes depending on the constraints of the sum of all the columns.

It has no orthogonality

Various properties usually end up responsible for the same job. Some properties are also not defined in a bendable way to avoid creation of new property. This is actually due to CSS specification and internal table features that don’t have margins.

Collapse of Margins
This is may be well documented and functional, however, it could also be complicated and are usually unexpected by creators, and there is really no safe way to avoid it.

Limited containment of Floats

For float containment, CSS really don’t have openly offered property to force it. Several properties has this function as side-effects, however, there is actually none that are completely suitable in all circumstances. Floats usually differ according to browser sizes and resolutions, while positions can’t.

Lack of multiple background capacity per element

More advanced graphical designs usually needs several background images per element, and CSS can only support one. So creators sometime opt between redundant document element wrappers or just drop visual effects.

Limited Element Shape Controls

The only available shape of CSS is rectangular. Creators may require non-semantic mark ups for rounded corners and other shapes.

Lack of Variables

The lack of variables in CSS makes it necessary to change everything when one plans to modify a fundamental constant like color schemes or different heights or width. Major disadvantage of this is the need of CSS caching, except that it can be quite useful in several situations.

Limited Column assertion

Although it is doable with current CSS, multiple columned layouts can be quite complex to apply. This is usually done with floating elements that are often depicted differently with different browsers, computer screen and set screen ratios with standard monitors.