How many pits are there for shorthand in CSS? no longer dare...

Hello everyone, I'm Zero One . Shorthand (syntactic sugar) may bring us a lot of convenience in coding, but shorthand also brings some problems. Today, let's discuss the "love, hate, hatred" of shorthand in CSS

Why is it called love and hate ? Because shorthand has brought us a lot of convenience, but everything has good and bad, you can't say that shorthand is not bad at all. So let's talk abbreviated "good" and "bad"

background

You must be familiar with this CSS property, set the background color to the element

Is that so?

 .demo {
  background: #333;
}

or so?

 .demo {
  background-color: #333;
}

There should be both. For myself, it seems that which of the two is usually used depends on the mood. If you say that the former is definitely used, because the former is only one word, then the latter is actually not troublesome. Now everyone uses the editor, Enter bgc with the help of the intelligent prompt, and then press Enter to type background: ; , it is not troublesome.

Back to the topic, in fact, I recommend the latter two ways of writing, why? Let's see an example 🌰

 <style>
  .demo {
    background: #333;  /* 给元素设置了背景色#333 */
  }
  
  /* ... 中间隔了很多样式代码 */

  .demo:hover {
    background: url("example.png"); 
  }
</style>

<div class="demo"/>

This scene is very simple: move the mouse over the element to display a photo, and use a solid color to occupy the place before it is loaded.

But what is the actual effect?

For obvious effect, I added borders and text, and adjusted the network speed to slow 3G

It can be seen that the hover of background overwrites the former background , which makes the effect unsatisfactory.

Is it because both the former and the latter are background , so the latter will naturally override the former? Not at all

Even if we use the former background-color: #333; , it will still be overwritten by the latter

Everyone knows background is a syntactic sugar, a shorthand for many attributes👇

What do you do when you use background: url('example.png') in the example?

As shown in the figure above, it sets all values to initial by default, so no matter which value is used before, it will be overwritten, although initial is set the same as not set, Both indicate that the initial value of the attribute of the element is maintained

Will anyone want to say: I have always used it like this, and have not encountered any problems!

I just want to say: maybe luck is better, when the code is more complicated, you may come back to fill this hole

Conclusion : This is the hidden danger caused by a shorthand, and everyone can avoid it.

margin

Another attribute that everyone is familiar with margin , what is the pit here? There is no pit, just want to introduce other usage

The following are shorthand for it:

• margin: 10px 20px 30px 40px
• margin: 10px 20px 30px
• margin: 10px

These abbreviations really save us a lot of code

Let's dive into an example 🌰: Now I want to center my element horizontally, I want to do it with margin

 <style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }

  .child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;  /* 水平居中 */
  }
</style>

<div class="parent">
  <div class="child"/>
</div>

The effect is as you wish:

But when you use margin: auto , have you ever thought about it for a moment, have you set margin-top or margin-bottom ? For example:

 <style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }
  
+ .child {
+   margin-top: 100px;
+ }
  
+ /* ...省略几百行代码 */

  .child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: auto;  /* 水平居中 */
  }
</style>

<div class="parent">
  <div class="child"/>
</div>

What is the expected effect? And what was the effect at this time?

As you can see, the expectation is to be both centered horizontally and from the top 100px , and now margin-top is overwritten

In fact, if you just want to achieve horizontal centering, there is absolutely no need to use margin: auto , because you don't want to modify the spacing between the top and bottom, just because you use this shorthand, you have to do it

Or try another shorthand? Lets you only deal with horizontal spacing

 <style>
  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid black;
  }
  
  .child {
    margin-top: 100px;
  }
  
  /* ...省略几百行代码 */

  .child {
    width: 100px;
    height: 100px;
    background-color: red;
-   margin: auto;  /* 水平居中 */
+   margin-inline: auto;  /* 真正的只是水平居中 */
  }
</style>

<div class="parent">
  <div class="child"/>
</div>

This can also achieve the effect we want without affecting the properties of margin-top and margin-bottom

In the same way, is there a shorthand that can only affect the vertical direction margin ? Of course there is, that is margin-block

Let's see another example together 🌰

 <style>
    .parent {
      position: relative;
      border: 1px solid black;
      width: 300px;
      height: 300px;
    }

    .child {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: red;
    }
</style>

<div class="parent">
  <div class="child"/>
</div>

The effect is as follows:

This is a method of vertical and horizontal centering for non-relative positioning ( remember, the interviewer asks you one more method for vertical and horizontal centering ), I learned from the HTML native <dialog/> tag Yes (introduced in 12 HTML tags that you may not have seen before, but very useful <dialog/> tags)

Why use this example, I just want to extend this knowledge point and share with you the little thing I saw recently tips

We can delete margin: auto and use the above margin-inline: auto and margin-block: auto

结论： margin不如background那么复杂， margin-inline margin-block

inset

The hidden dangers brought by so many abbreviations have been mentioned above, so why not talk about the benefits brought by abbreviations?

Or take an example 🌰

 <style>
  .parent {
    position: relative;
    border: 3px solid blue;
    margin: 200px;
    width: 300px;
    height: 300px;
  }

  .child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
  }
</style>

<div class="parent">
  <div class="child"/>
</div>

This code should be familiar to everyone. We set the .child element to absolute positioning and assigned the following attributes:

• top: 0;
• bottom: 0;
• left: 0;
• right: 0;

Then the element is filled with the parent element, reaching the effect of width: 100% + height: 100% , so why not set the width and height directly 100% ? Just set two properties

❌❌❌ The reason for not doing this is to go back to position itself. When an element leaves the document flow, if top、bottom、left、right is not set, the default position of the element is that it does not leave the document. position when streaming

It may be a little round, just put a picture directly

It can be seen that after the element zero-one leaves the document flow, it still stays in the position it was in the document flow, then if you set the width and height for him at this time 100% What will it be like?

Beautiful, beyond the parent element, although it is very simple to solve this problem, just add a left: 0 but we have a simpler method, that is to use inset this attribute

In fact, inset is the abbreviation of top、right、bottom、left , I don't know why, I have seen many people's codes, but they have never used this attribute, so I will give you an Amway

The syntax is similar to margin , so we use it to simplify the code just now

 <style>
  .parent {
    position: relative;
    border: 3px solid blue;
    margin: 200px;
    width: 300px;
    height: 300px;
  }

  .child {
    position: absolute;
-   top: 0;
-   bottom: 0;
-   left: 0;
-   right: 0;
+   inset: 0;
    background-color: red;
  }
</style>

<div class="parent">
  <div class="child"/>
</div>

Why do I recommend everyone to use inset again? The essence is because here we really need to set four values at the same time, so why not use inset ?

border

😖 Oh my gosh, I can't take it anymore! Why are they all commonly used attributes? Are there so many pits?

In fact border this is okay, it is recommended to use the abbreviation, but there is a special case , I want to share it with you to avoid stepping on the pit

There is such a scene: an element itself has no border. When the mouse moves in, a border appears, and there is a transition animation from the border to the absence; at the same time, when the mouse is removed, the border disappears, and there is also a transition animation.

 <style>
  .demo {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: none;
    box-sizing: border-box;
    transition: border 1s linear;
  }

  .demo:hover {
    border: 4px solid red
  }
</style>

<div class="demo"/>

That's what most people write, right? What is the effect? Too bad it's only half done!

Why does the transition animation of border disappear when the mouse is moved out?

图中可以看到， border: none其实就是把border-style设置成了none ，大家都知道transition border The transition animation of border is actually for border-color and border-width , but if border-style does not exist, how can you see the transition animation?

So if we want to realize the transition animation when the mouse is moved out, we cannot use border: none this abbreviation, what should we do?

I thought of an idea, which may not be the most perfect, but there is no flaw at all. You can learn from it:

border border: 0px solid transparent ，这样既保证了---7eb802c89aa455f5b7248c86f76a1b47 border-style的存在，又能保证边框会4px to 0px , the color also transitions from 有 to 无

The effect is as follows:

Summarize

For the question "how do we use shorthand?" , I think: when you need to set all or most of the properties of the shorthand property at one time, you can use the shorthand ; otherwise, you should not use the shorthand

I am Zero One , sharing technology, not just the front end!

I hope this article is helpful to you, I am writing the article with my heart, I hope you don't be stingy with your likes👍

If you have any questions or suggestions, please leave a message in the comment area, communicate and discuss with each other, and make progress together!