1

Maybe I am missing out on something, but I found that I cannot set certain attributes of html tags from css code.

Some example:

div { draggable: true; }
img { target: "_blank"; }

I can still:

[draggable=true] { bla: bla; }

So it was not just forgotten.

Maybe it works on some browsers, I don't know about that, but I did not find anything about it in the docs, so I would assume - should it work - that it is not safe to do.

I don't understand, why?

You can set the background, whatever, why are some of the attributes not settable from css? Are they some special class of attributes, or someone just deemed them unworthy of cssyffication?

Is there some rule that governs it, or that is so, deal with it, or somehow I missed the trivial answer on the google-run?

Zoltan K.
  • 1,036
  • 9
  • 19
  • "draggable" is not a CSS property. It is an HTML attribute for elements, but it is not a CSS property. See: https://stackoverflow.com/questions/13526712/make-div-draggable-using-css#16579393 – Matt Runion Sep 05 '18 at 01:03
  • Yes, I know that, I have even found this very answer. I was looking for some deeper explanation beyond "this is apple, that is pear, they are different". – Zoltan K. Sep 05 '18 at 09:49
  • Regarding 'target="_blank"': you can use `` to make all links open in a new tab. – Geremia Jan 22 '23 at 23:52

3 Answers3

3

To help determine if you're writing valid CSS rules with concern for attributes, you can find a list of HTML attributes here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Technically, you never set any HTML attribute with CSS. HTML attributes are used to configure aspects of an element's functionality, not style (though there is some stylistic crossover discussed later). Attributes are set inline or through JavaScript and can be used as selectors in CSS to style elements, but their values are never changed or affected by CSS.

The difference is that, in CSS, you are declaring the value of style properties as opposed to element functionality. In fact, style is a global attribute of HTML elements that accepts a value of inline CSS rules and functions by applying those styles. Even with pseudo-classes like input:checked { color: red; }, the CSS does not cause the input element to be checked. Rather, it adds a red value of the color property to any input element that is checked (for instance, explicitly with an attribute on the html: <input checked />.

Likewise, in your example [draggable=true]{ property: value; } you are not changing the functionality of any element to be draggable. Instead, you are selecting any element that has a defined draggable attribute and adding style properties to it via the CSS declaration.

Whereas in your example div { draggable: true; } you are attempting to set divs to have a true style of draggable which doesn't work because draggable is not a style property.

There are some legacy attributes whose functionality affects style and appear to be the same as CSS properties (i.e. width, height, color). These are the ones that likely cause the confusion between style properties and element attributes as they do blur the line.

justinseibert
  • 166
  • 2
  • 5
0

CSS stands for cascading style sheets and is used for styling the html elements. HTML elements can have a number of different attributes, such as, "id", "class", "name", "target", "src", and "style", just to name a few. Style is an attribute of an html element and some attributes, like "target" serve a different purpose. You don't set them with css because they are not styles or don't have style properties. You can set other attributes with javascript.

Brian Hart
  • 74
  • 7
-3

HTML stands for hypertext markup language. HTML is use to build a structure or website like a building structure. Then CSS (Cascading Style Sheet) is used to design and "paint" the website.

HTML is a tag based language that has tags like h1 to h6, p, form, a, pre, img, ul, hr, br. These tags have attributes: form has input, a has href, img has src etc. CSS uses the HTML elements to style the website.

ascripter
  • 5,665
  • 12
  • 45
  • 68
Ajmal Hassan
  • 10
  • 4