Checkout my Getting Started with React video course on Skillshare. It is 100% free.

Using the new two-value syntax of the display property in CSS

Changes are coming to one of the core properties in CSS: the display property. We will be able to define how our elements are behaving when relating to their children and how they relate to their siblings.

The new syntax of the display property will accept two parameters <display-outside> and <display-inside>.

For example, when we are saying display: grid we are basically saying two things:

  • this element is a grid for its children
  • and this element is a block for its siblings

So the full declaration can be display: block grid.

The same with display inline-grid. It is a grid for its children and an inline for its siblings. So with the new syntax, it will become display: inline grid.

In this Web docs Mozilla article we have the following table describing the correspondence between the old and new syntax.

Current value New value
block block flow
flow-root block flow-root
inline inline flow
inline-block inline flow-root
flex block flex
inline-flex inline flex
grid block grid
inline-grid inline grid

As a general rule if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to flow.

So far only Firefox fully implements this new syntax but I am looking forward to more support as I think it provides a clearer description of how an element behaves.

If you want to read more and you can take a look at this great article or Rachel Andrew or the below video:

CSS Logical Properties

Create spacing that works regardless of the direction of your content or the environment of your users.

Say you want to put some space between two inline items: what do you do? Probably something like this:

.my-element {
    margin-left: 1em;
}

This approach is fine and has been for a long time with CSS, but what happens when the content direction changes? That left margin suddenly becomes problematic because it no longer matches and makes the content look awkward.

Western languages read left to right, but other languages such as Arabic, read right to left. Some languages even read top to bottom, like traditional Chinese.

Our CSS should be as flexible as possible, so instead of explicitly setting a left, right, top or bottom value to margins, we should instead be using a logical property.

Here’s that same example from the start, but with a logical property:

.my-element {
    margin-inline-start: 1em;
}

What this now does is instead of saying “add margin to the left”, it says “regardless of direction, put margin on the starting side”. If the language of the document was right to left, like Arabic, that margin would be on the right hand side.

Why is this important?

The web is global and open, so making presumptions about the users of your website is pretty dangerous.

A variety of factors come into play when someone visits your site, such as connection speed, device power and spoken language. They could also be using a translation extension. It’s our job as web developers to make our content as flexible as possible to meet user needs, regardless of what those needs are, using the powerful, flexible tools that are given to us by the web platform.

Logical properties are a perfect example of this and they have a huge browser support, so you should absolutely use them today.

Resources and further learning permalink

This is only a quick intro to logical properties, but luckily, some other fine folks from around the web have written about them in detail:

CSS Logical Properties - CSS-Tricks
CSS Logical Properties and Values - MDN
Understanding Logical Properties And Values
CSS Logical Properties - Adrian Roselli

Building a layout with CSS Grid video series: Part 3 – Setting the rows and columns sizes in a CSS grid

In the third lesson of this example, we will use the grid-template-columns and grid-template-rows to size the elements. Also, we will see the CSS grid auto-placement in action and how we can make a CSS layout to span the full height of the screen.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Building a layout with CSS Grid video series: Part 2 – Defining the named template areas

In the second part of this screencast series, we will see how we can use the grid-template-areas to define the general cell tiles of the layout. Also, by using the grid-area we will place each component in its corresponding grid cell.

Stay tuned as the next week I will publish two new episodes from this series.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Building a layout with CSS Grid video series: Part 1 – Introduction

Hey guys! After all of the recent articles about CSS grid, I am happy to announce that I've started to recoded a new screencast series. It will be a 6 part video course about making a responsive homepage layout with CSS grid and named template areas.

Below is the first part, describing the full example and the starting files. Drop me an email at daniel at js-craft.io with your feedback 🙂 Expect 1-2 videos per week.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

CSS margin collapsing – what it is and why should I care

In CSS margin-collapsing refers to the fact that the margins that are next to each other are colliding… but only vertically.

Yeah, it's one of those brainfuck moments in CSS.

Let's first take two divs that are one next to each other on the horizontal axis. If we have a margin: 25px for both divs, and the width: 100px then, as expected, the required width will be 300px.

However, if we try to do the same with the divs are arranged vertically then the total needed space will be 275px, instead of the expected 300px.

And this is because the vertical margins of the elements are collapsing.

But, what if the margins are of different sizes? What if one div has margin: 25px and the other has a margin: 40px? Well, in this case just the largest of the two margins will be applied (40px in our case).

And what about negative margins? The rule will be applied when both margins are negative (vertically), but not when one margin is negative and the other is positive.

If you want to learn more take you can a look at:

The CSS grid minmax() function explained

What if we have a scenario where we need a layout made of 3 columns with the following behavior:

  • the first column can go anywhere from 100px to a maximum of 300px, depending on the screen of size of the screen
  • the second and third columns will take 50% each of the remaining space.

So, for example, if we have a screen of 700px with then the first column will take 300px, while the next two columns will have 200px each.

The tricky part is defining the size of the first column. Well, this is what the minmax() function is made for. You give it a max and min value and that column / row will not exceed or go below those sizes.

For our case we will have the folwing:

.container {
    display: grid;
    grid-template-columns: minmax(100px, 300px) 1fr 1fr;
}

Of course, the first value can not be smaller than the second one.

We can apply it also to the rows. So if we want to set a minimum height for the rows we can say:

.container {
    grid-auto-rows: minmax(50px, auto);
}

Take a look at this codepen for the full example:

See the Pen
minmax
by JS Craft (@js-craft)
on CodePen.

Making a full example with CSS grid – the calculator pad

I had a bit too much time at my disposal this weekend and played with an example on codepen. I've ended up with this CSS grid layout, something like a calculator pad:

If you scroll at the end of this article you can see the full code of the example. A few notes about the CSS code:

1. everything is done with the CSS grid and the grid template areas

2. in the grid template areas if we want to skip one element we can use the .. For example, with this line:

 grid-template-areas: 
   /* ... */
    ".   zero .   enter";

we will generate this row:

3 one fantastic thing about the CSS grid is that you can fully control the position of an element in the design independent of its position in the HTML. For example, even if in the HTML we have:

<div class="one">1</div>
/*....*/
<div class="tens">9</div>

in the design, we can put the digit 9 before the digit 1 by just adjusting the template areas.

4. to define the number and size of the rows and columns I've used the grid repeat function.

5. the button pressed effect was made from a combination of the :active, :hover and the scale transform.

.grid-container>*:hover {
  background: #003554;
}

.grid-container>*:active {
  transform: scale(.95);
}

So, here is the full example. Enjoy, and if you have questions email me at daniel [at] js-craft.io.

See the Pen
digidpad
by JS Craft (@js-craft)
on CodePen.

A few considerations about the CSS min-width, width, and max-width properties

In theory, things should be pretty staring forward with the min-width, width, and max-width properties:

  • min-width will tell that an element it cannot be narrower than a specific value
  • width will tell that the element will always have a fixed width
  • max-width will tell that the element will not be wider than a specific value.

However, what happens if we have some conflicting values like:

.my-element {
    min-width: 300px;
    width: 500px;
    max-width: 100px;
}

Well, the general rule is that the min-width property overrides both the width and max-width properties and prevents the value of the width from becoming smaller than a specified value.

Alongside max-width and min-width we also have max-height and min-height so all that it is said about the width properties is also available for the height props.

Using percentages for min-width and max-width

One tricky (and useful) use case is when we use percentages to express the values for the max and min-width.

Having the width:100% means that we use the parent's width to calculate the current width value whereas max-width:100% uses the original width to calculate the maximum size.

So, let's say we have a jpg image file with a real width of 100px that it is placed in a div with a width of 200px. If we will have img { width:100%; } then this means that that the jpg image will be stretched to 200px.

While having img { max-width:100%; } means that the img will to its natural maximum of 100px. Check out the below codepen:

See the Pen
min-max-taz
by JS Craft (@js-craft)
on CodePen.

Passing a CSS variable value from the HTML into the CSS

One nice trick I've discovered recently is that you can "pass" the value from the inline HTML to the CSS by having something like this:

<div style="--main-color: red;">RED</div>
div { background-color: var(--main-color); }

I've used quotes when saying to pass because we are not actually passing that variable. We are just defining an inline style for that element and we will let the cascading of the CSS do the rest.

In some scenarios, this is cool because we can define properties for some HTML elements as we would have done with something like React properties.

Of course, we can also add in the :root element a default value for the CSS var.

Below you have the full working codepen.

See the Pen
CSS Var pass value
by JS Craft (@js-craft)
on CodePen.

Speaking about the CSS variables I've written some time ago a more in-depth article about them that you can read here.