Digging Into The Display Property: The Two Values Of Screen

Digging Into The Screen Property: The 2 Values Of Screen

Rachel Andrew


.container It follows that when you say display: grid, what you are really saying is display: block grid. You're currently asking for a block flat grid . An element which will have the block all features -- it is possible to give it height and width, margin and padding, and it will stretch to match the container. The kids of that container, however, have now been awarded the inner value of grid in order that they become grid items. How those grid things behave is described in the CSS Grid Specification: the display spec provides us a way to tell the browser that this is the design method we would like to use.
While thinking about this issue, you may enjoy this list of errors in the plan of CSS that are less mistakes in most cases as matters that were designed with no crystal ball to see into the future! The truth is we can't break the internet, which is why we have this situation.

However, the heritage keyword means that the following does the same thing:
These are all single values for your display property, defined ahead of the specification has been updated to explain CSS Layout in this manner. Something important about CSS is that the simple fact that we do not go about breaking the net; we can not just change things. We can not suddenly decide that everyone should use this new syntax that is two-value and so every website ever built that utilized the value syntax fixes it and will crack unless a programmer goes back!

The CSS2 Specification comprehensive the following values for your screen property:

  • Inline
  • block
  • inline-block
  • list-item
  • none
  • table
  • inline-table

The behavior of inline and block elements is essential to CSS and also the fact that a document will be readable by default. This design is referred to as"Block and Inline Layout" or"Normal Flow" because this is how elements lay themselves out if we don't do anything else to them.
Within the following article, the first in a short series, I'm likely to take a look at how the values of display are described in the Level 3 specification. This is a change to the way we described display in previous versions of CSS. While it might seem unusual at first for those of us who've already been doing CSS for many decades, I think these changes actually help to explain what is going on when we change the value of display on a component.
The way we get around this is to define short and legacy values for display, which comprises all of these values that are single. This means that a mapping can be defined between single values and new two values. Which gives us the following table of values:

Display: grid;

In addition, we know that a few elements are display: inline. Inline elements are similar to words in a sentence; they don’t break on a line, but rather book a character of white space between them. This will show but it will not push other components away if you include padding and margins.

We then added to these some values for display, to support grid and bend design:

Watch the Pen Block and Inline Layout from Rachel Andrew.
You are probably thinking that is all a bit confusing: why do we have two different key words here, and what exactly happened to the syntax we talked about? This leads neatly to the next thing I want to explain about display, i.e. that CSS has a background we will need to deal with in regard to the screen property.

As however, browsers do not support the two-value syntax for the screen property. The execution bug for Firefox can be found here. Implementation -- when it occurs -- would basically involve aliasing the heritage values. Before you can actually use these versions in your code it's likely to be a while that is fantastic, therefore. But, that really is not the point of the article. Rather, I believe that looking in display's worth in the light of this two-value version helps explain much of what is currently going on.
If you work with this procedure, the fact that components on your webpage will lay themselves out with this readable normal flow design, instead of fighting against it and trying to place everything, CSS is much simpler. You are less likely to fall into issues, as you're working with the file order, which is exactly what a screen reader or a individual tabbing through the record is currently performing.
As you will find (if you read the above-mentioned post about the Block Formatting Context), then there is a newer worth of screen which also explicitly creates a BFC. This is the worth of flow-root. This value makes a BFC on a block, rather than an element.
Display: block grid

A BFC does some useful things concerning design it includes floats. To read about Block Formatting Contexts in more detail see my previous article”Recognizing CSS Layout And The Block Formatting Context.” Therefore saying screen: inline-block gives you an inline box which also builds a BFC.
I believe this method of thinking about display is incredibly helpful; it directly describes what we are doing with different design methods. If you were to define display: inline bend , what could you anticipate? Hopefullya box which behaves together with children who are bending items, as an element.

We're Always Going Back To Regular Flow

Watch on Codepen

Screen: inline-grid;

Also explained were the various table inner properties like table-cell that we are not dealing with in this report.

Single Worth Two-Keyword Values Description
block block flow Block box with normal flow interior
flow-root block flow-root Block box specifying a BFC
directional inline flow Inline box using regular flow inner
inline-block directional flow-root Inline box defining a BFC
list-item block flow list-item Block box with normal flow interior and Extra marker box
flex block flex Block box with interior flex layout
inline-flex inline flex Inline box with interior flex layout
grid block grid Block box with interior grid layout
inline-grid directional grid Inline box with inner grid design
table block table Block box with interior table layout
inline-table inline table Inline box having an inner table design

We can now go back to where this conversation began and look at display: inline-block. Taking a look at the table, it is possible to observe this is defined in the two-value world as display: inline flow-root. It currently matches screen: flow-root that in a two-value universe would be display: block flow-root. Just a little bit of tidying up of these items are described, and clarification.

  • Screen: inline-block gives you a BFC on an inline box.
  • Screen: flow-root gives you a BFC onto a block box.

We can think about a grid container, to explain how this works. From the two-value world, we would create a block flat grid container with:

It ends up that we have. At Grade 3 of the Screen specification, the worth of display is defined as two key words. These keywords specify the outer worth of screen, which is inline or block and so define how the component behaves in the layout alongside other elements. They define how the direct children of that element behave — or the internal worth of the element.
If we wanted an inline grid in the world We’d use:

A bend or grid design starts out with you declaring screen: bend or screen: grid. These design methods are values of the CSS display property. We don’t to talk about this land on its own quite much, rather concentrating on the values of flex or grid, however, there are a number of interesting things to know about screen and the way it’s defined that can make your life a lot easier as you use CSS for design.

See the Pen Block and Inline Layout With Flex Component by Rachel Andrew.

.container {

Legacy Values Of Display

When you specify design on a box in CSS, you're defining what happens to this box concerning how it behaves concerning all the other boxes from the design . You are also defining the way the kids of the box act. You can think like this long before you can explicitly declare the worth just as two separate things, as the heritage keywords map to all those values, and it will help you understand what happens when you alter the value of screen .
Smashing Editorial

It can be helpful to consider what happens if we do not mess up with the value of display at all when considering these inner and display properties. If you write a few HTML and view it will be Inline and Block Layout, or Normal Flow. The elements display as block or inline components.
And if using the values:

There are a couple other things explained by thinking about screen in this way, and I will take a peek at some of these in the remainder of this report.

Inner And Outer Values Of screen

Display: block grid

Watch on Codepen

These are all single values for your display home, defined before the specification has been updated to explain CSS Layout in this way. Something important about CSS is that the fact that we don't go around breaking the web; we can't just change things. We can't suddenly decide that everybody should use this syntax that is brand new and therefore every site ever built which utilized the single worth syntax fixes it and will break unless a programmer goes back!