Question

I want to know what things can be done “ONLY” with CSS , that are not available using dynamically updated style “attributes” using Javascript. So far I know:

• Media queries
• Pseudo tags

Any more?

Update:

This question was closed but I asked it as I am trying to decide on the technology to use for a project, but one of the options cannot use CSS style sheets, and can only manipulate the style attribute using javascript.

Answer 1

Inline style attributes can only contain property declarations (e.g. width: 10px or color: red). They can’t contain any other CSS constructs: not selectors, at-rules (e.g. @import, @media, @font-face), etc. Just property declarations.

However, they play a big role in the cascade: any styles for an element with that attribute take highest precedence (after considering !important of course).

There’s actually an entire module devoted to style attributes, by the way, but it’s not essential reading for authors.

So, anything that isn’t a CSS declaration, is only possible in a stylesheet, not a style attribute. Not sure if that’s what you’re asking…

Note that media queries and @media rules are not the same thing; media queries can exist in areas outside of stylesheets too, like HTML’s media attribute, where they’re next most commonly found.