Geek Answers Handbook

CSS specification cancellation

Can you, and if so, how do you cancel the css spec? Suppose you wanted

textarea { width: 500px; }

and then a specific text area with 70 columns is required:

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

Ideally, I would write a css rule

 textarea.email { width: revert_to_default_unspecified_value; }

(but obviously this value does not exist.)

How do you do this? I am interested in both this particular case and how to override parent css specifications in children. This must have been talked about a lot, but it's hard for Google.

+4
source share
4 answers

The default value you are looking for is:

Initial: auto

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

Note that setting auto will return to default only for some CSS properties. Others have different starting 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 properties, such as color , cannot be restored to default because they do not have a known default value.

Initial: depends on user agent

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

About canceling inherited CSS in child elements.

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 font size level2 inherited from level1 , but if we add the initial value medium , we reset its text size level0 . The only inconvenience is that we cannot ignore only one level of inheritance, therefore, if we added level3 , we would still reset to level0 , not level1 .

+6
source 
 textarea.email { width: auto; }
+6
source

I would suggest that since if you do not specify a css width rule at all for this text field, its default value will be width: auto . Thus, I would try to set it back to the default in a specific case, where the HTML attributes should be taken as normal:

 textarea.email { width: auto }
+1
source

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

Consider an 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 the font size and color as its parent.

If we change our last style to:

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

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

Now, the best time is to indicate that these properties are a little more complicated than they look, for example unset sometimes acts as initial and sometimes acts as inherit .

Links to documents:

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

0
source

More articles:


All Articles