CODEWITHSUNDEEP
css
Peter
Peter

Reputation: 132227

Undoing CSS specification

Can you, and if so how do you, undo a css specification? Suppose you wanted

textarea { width: 500px; }

and then you want a specific textarea with 70 columns:

<textarea class='email' cols=70></textarea>

Ideally, I would write a css rule

textarea.email { width: revert_to_default_unspecified_value; }

(but obviously that value doesn't exist.)

How do you do this? I'm interested in both this specific case, and also how to undo parent css specifications in children. This must have been talked about plenty, but it's hard to google.

Upvotes: 4

Views: 3936

Answers (4)

Olga
Olga

Reputation: 1690

To reset styles you can now use unset and initial special properties. The support for unset is currently low (56%) -http://caniuse.com/#search=CSS%20unset%20value but support for initial is quite high (80%) - http://caniuse.com/#search=CSS%20initial%20value.

Consider the example:

http://codepen.io/anon/pen/OMROye

<div class="outer">
  Foo
  <div class="middle">
    Bar
    <div class="inner">
      Baz
    </div>
  </div>
</div>

.outer {
  font-size: 50px;
  color: #f3f;
}

.middle {
  font-size: 25px;
  color: #33f;
}

.inner {
  font-size: 15px;
  color: #f33;
}

.inner {
  font-size: unset;
  color: unset;
}

The inner text will have font-size and color like its' parent.

If we change our last style to:

.inner {
  font-size: initial;
  color: initial;
}

The inner text will have standard color and standard font-size.

Now it is the best time to point out that these properties are a little trickier than they look, for example unset sometimes acts like initial and sometimes acts like inherit.

Links to docs:

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

Upvotes: 0

Alin P.
Alin P.

Reputation: 44346

The default value you're looking for is:

Initial: auto

http://www.w3.org/TR/CSS2/visudet.html#the-width-property

Notice that setting auto will revert to default for just some of the CSS properties. Other have different initial values.

The background-color property, for example, has a default value of transparent.

Initial: transparent

http://www.w3.org/TR/CSS2/colors.html#background

Some of the properties, like color, can't be restored to a default because they don't have a known default.

Initial: depends on user agent

http://www.w3.org/TR/CSS2/colors.html#colors

About undoing inherited CSS in children.

Let's take the font-size property, a property that inherits.

level0
<div style="font-size:36px;">
    level1
    <div [style="font-size:medium;"]>
        level2
    </div>
</div>

By default the level2 font size would be inherited from level1, but if we add the initial medium value we reset it to the size of the level0 text. The only inconvenient is that we can't ignore just one level of inheritance, so if we would add a level3, we would still be resetting to level0, and not level1.

Upvotes: 6

Marcus Whybrow
Marcus Whybrow

Reputation: 19998

I would assume that since if you do not specify a css width rule at all for this textarea, its default value would be width: auto. Thus I would try in the specific case setting it back to the default where the HTML attributes should take over as normal:

textarea.email { width: auto }

Upvotes: 1

enobrev
enobrev

Reputation: 22532

textarea.email { width: auto; }

Upvotes: 6

Related Questions