What are CSS default values for?

Asked

Viewed 140 times

3

Almost every CSS command has its default value, which is already being used by default, even if you don’t use it, for example.

justify-content: flex-start;

If you don’t write anything by default the element will already look like flex-start then after all what are the standards values, if they are already being employed by default?

css

2 answers

4


The standard exists and is available for two main reasons:

  1. If you apply a new style and need to return to the pattern for exceptions to this style, ex:

div {
  display: flex;
  justify-content: center;
}
div.start {
  justify-content: flex-start;
}
<div>
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</div>
<div class="start">
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</div>

  1. The default is the browser, so if you don’t make a setting you have to trust that the browser is applying the defaults correctly. If you want to ensure that your layout is as close as possible on any device / browser, it is interesting to use the "reset.css" technique, where standard settings are applied even if these are already contemplated by the browser.

2

I’ll give you a simple example, every element needs a minimum to even exist, and one of those basic properties is display, all elements have some kind of display, otherwise he would be display:none nor on the screen would be visible to you. How is the house of tags <script> and <head> which by default has the display as none.

inserir a descrição da imagem aqui

Here is a nice list that you can check the default properties of each element: https://www.w3schools.com/cssref/css_default_values.asp

So there are some minimal properties, usually established by user-agent that are intrinsic to the element, so that it will at least render on the screen in the form that the specification and the box-model.

Another clarification is that when you change the display of an element it will assume some minimal features to work. So when you put display:flex in the element it changes scope and becomes a flex-container, then both he and his children take on particular characteristics of flex. The same goes for the display:grid and display:table for example. It is a cascading effect from father to son in this case, but nothing prevents you to manually manipulate these displays inherited descendants (not specified).

A lot of this is done to help the user not have to manually write each of the properties of each of the HTML elements, if it wasn’t that nor would it make sense to have more than one type of element, you would simply have a unique element for everything and would have to hand each of its properties, imagine how much it would delay and make it difficult to write a minimal HTML document, have to put display at hand on each element that is created, having to set everything from scratch. It would not make the slightest sense for a markup language as HTML is proposed

  • In this w3schools link, some values are like internal value. That means what? That is something that depends on the implementation of each browser?

  • @hkotsubo good observed. I noticed that it is only in the colors, I do not know if it is pq that is in charge of the browser, or user settings in OS, as some accessibility configs or something like that. There on the link does not make clear what it is... :/

  • 1

    In addition, I found something similar in W3C and in the WHATWG, but none of them mentions this internal value... Even WHATWG recommends very specific colors: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

  • 1

    @hkotsubo saw that comment there on the tag mark: /* color this is just a suggestion and can be changed based on implementation feedback */ ` apparently some colors are in charge of those who implement them themselves

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.