What Does !Default in a CSS Property Value Mean

What does !default in a css property value mean?

Twitter Bootstrap uses LESS as far as I've seen. On the other hand, !default is actually part of Sass, and is used for giving Sass variables ($var) default values, which would make it invalid in your given context, even in Sass.

Besides, I've not been able to find any references to !default in the LESS documentation, and to my knowledge it is exclusive to Sass. Are you sure you found this in Bootstrap's source and not elsewhere? Because I honestly don't remember seeing Sass/SCSS code in Bootstrap's stylesheets.

For what it's worth, the only valid token that starts with ! in CSS is !important, which you may already be aware of.

CSS default value of a property

Yes, display: normal is invalid.

The default value of display may depend on what you mean with "default".

1. Initial value:

   Each property has an initial value, defined in the property’s
   definition table. If the property is not an inherited property,
   and the cascade does not result in a value, then the specified
   value of the property is its initial value.

   The initial value of display is inline.

2. Inherited value, in case the property is inheritable

   Inheritance propagates property values from parent elements to
   their children. The inherited value of a property on an element
   is the computed value of the property on the element’s parent element.

   display in not inheritable, so this is not relevant.

3. User agents style sheets:

   Conforming user agents must apply a default style sheet (or
   behave as if they did). A user agent’s default style sheet should
   present the elements of the document language in ways that satisfy
   general presentation expectations for the document language (e.g., for
   visual browsers, the EM element in HTML is presented using an italic
   font). See e.g. the HTML user agent style sheet.

   In that stylesheet, browsers style some elements with display: block, display: table, etc.

4. User style sheets,

   The user may be able to specify style information for a particular
   document.

5. Author stylesheets

   These are your stylesheets.

The cascade will result in the latest applicable (in fact it's more complicated because there are things like specificity, scoping and !important).

When you want to set some property to a default value, you can use

• initial (introduced in CSS Cascade 3)

  the property’s initial value becomes its specified value.

  Then, display: initial will be equivalent to display: inline.

• inherit (introduced in CSS2)

  the inherited value becomes the property’s specified and
  computed values

  Then, display: inherit will use the value of the parent element (or the initial value for the root element).

• unset (introduced in CSS Cascade 3)

  if it is an inherited property, this is treated as inherit,
  and if it is not, this is treated as initial.

  Since display is not inheritable, display: unset will be equivalent to display: initial, that is, display: inline.

• revert (introduced in CSS Cascade 4)

  When used in an author stylesheet,

  Rolls back the cascade to the user level, so that the specified
  value is calculated as if no author-level rules were specified
  for this property.

  This is probably what you want.

What is use of 'initial' value in CSS?

The initial value (not attribute) denotes the initial value of the property, as defined in CSS specifications: “The ‘initial’ keyword represents the specified value that is designated as the property's initial value.” Thus, its meaning depends on the property, but not on anything else, e.g. not on the browser or on the element that the property is being applied to. So it does not mean browser default.

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. In the example case, the browser default is block, since the element is div.

Thus, the initial value is of limited usefulness. Its main effect seems to be to confuse people, due to misunderstandings. A possible use case is for the color property, since its initial value is browser-dependent (mostly black, as we know, but not necessarily). For it, initial means browser default, since that’s how the property has been defined, A similar use case is for font-family: by declaring font-family: initial, you get browser’s default font (which may depend on browser settings).

The usefulness is further limited by lack of support on IE (even IE 10).

What is the default value of position attribute of a DIV?

position: static;

The default position is static for any html element if not specified explicitly.

Reset CSS display property to default value

A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.

While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)

Overriding CSS properties that don't have default values

If I'm reading your question correctly, do you want to, in one stylesheet, "erase" a declaration that you have in another stylesheet, such that the property will compute to the default value?

There's currently no way to reset it to whatever the value a browser uses as the default for a given element. The closest you can get is with the CSS3 initial keyword, which resets a property to its initial/default value according to the spec rather than according to how a browser defines it:

#element {
  left: initial;
  right: 0;
  top: 0;
}

There's not much browser support for it besides in Safari/Chrome and Firefox (as -moz-initial), so your next best alternative is to look up the initial value and hardcode it. For the left property, it's auto (and I believe it's this value for any element in all browsers anyway), so:

#element {
  left: auto;
  right: 0;
  top: 0;
}

What is the !default keyword in bootstrap and foundation scss frameworks used for?

!default is part of Sass' variables handling. The generated CSS which reaches the browser will never contain "!default".

Quoting the docs:

Variable Defaults: !default

You can assign to variables if they aren’t already assigned by adding
the !default flag to the end of the value. This means that if the
variable has already been assigned to, it won’t be re-assigned, but if
it doesn’t have a value yet, it will be given one.

---

$link-color is merely a variable. In framework context, !default is used to not overwrite customizations made by you or other included modules, while providing a default value for the variable if it hasn't been given a value yet.

What is the difference between initial & default in CSS?

The initial state doesn't necessarily pull from the browser's stylesheet.

If the color property, in this instance, is not defined within the element's spec table or there is no definition for that element then it will have an initial property of nothing or in the case of a color value, rgb(0,0,0) - or black.

Anchor (<a>) tags, do not have a defined initial color property, so it will render as rgb(0,0,0);

Here you can see in the dev inspector in the computed tab:

Here you can see an <a> tag is not defined in the spec table.

https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Here's the browser styles being set on the anchor with no color property being defined, so the browser uses it's stylesheet:

---

Related Topics