Question 174084 in CSS Question posted in
Some basic documentation can be found here.

Why CSS styles for flex's order: attr(data-order) are marked as invalid?

For the following HTML:

<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

I have this CSS using attr() function:

.parent { display: flex; }
.bdg { order: attr(data-order number, 5000); }

and it is marked by a browser (Chrome):

⚠️ Invalid property value

enter image description here

I’ve also tried doing it both without attr()‘s 3rd default value argument:

.bdg { order: attr(data-order number); }

and without attr()‘s 2nd type and the 3rd default value arguments:

.bdg { order: attr(data-order); }

Running example:

.parent { display: flex; }
.bdg { order: attr(data-order number, 5000); }
<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

Why is that?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out attr() is still experimental and works only with the content propery - see here.

    I ended up using var() instead.

    .parent { display: flex; }
.bdg { order: var(--order); }
    <div class="parent">
  <div class="bdg" style="--order: 4">1</div>
  <div class="bdg" style="--order: 3">2</div>
  <div class="bdg" style="--order: 2">3</div>
  <div class="bdg" style="--order: 1">4</div>
</div>


  2. 0
    1. Other forms from simple attr(data-attribute) has no implementation in any browser
    2. attr only works with :before/:after content rule, as stated in first top-most note
    .parent {
  display: flex;
}

.bdg:before {
  content: attr(data-order);
  display: inline-block;
  background-color: red;
  color: blue;
  padding: 5px;
}
    <div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>
    Login or Signup to reply.
  3. 0

    attrs() default <type-or-unit> is a string so your order property is invalid

    And any other value that the value name is non supported yet (See here)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search