Author: Ahmad Shaded by SitePoint

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

There are a lot of CSS properties that some people don’t know about, or they know about them but forget to use them when they need to. In fact, sometimes we use JavaScript to implement certain interactions, CSS can be done with a property, which can save us a lot of coding time.

As front-end developers, we see this all the time. So I asked myself, why not write an article listing all those lesser-used but useful and interesting CSS properties?

In this article, I’ll introduce a few different CSS properties that I hope will keep you fresh. Without further ado, let’s get started.

Use in a CSS gridPlace-Items

We can center elements horizontally and vertically with just two lines of CSS code.

HTML

<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>
Copy the code

CSS

.hero {
    display: grid;
    place-items: center;
}
Copy the code

Place-items is a shorthand property that combines justify-items with align-items. The above code is equivalent to the following code:

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}
Copy the code

You might be wondering, what’s going on here? Let’s explain. When place-items is used, it applies to every cell in the grid, meaning that the contents of the cell are centered. It will be clear if we add a few more cells:

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}
Copy the code

Flexbox with Margin

Used in conjunction with Flexbox, Margin: Auto makes it very easy to center Flex projects horizontally and vertically.

html

<div class="parent">
    <div class="child"></div>
</div>
Copy the code

css

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}

.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}
Copy the code

Looks kind of cool 😎

A list ofmarkerattribute

Before that, I didn’t know that the default little circle next to each li term was called a marker. Before I knew the ::marker pseudo-element, if I wanted to reset the small circle list style, we generally used pseudo-elements ::before or ::after: pseudo-elements:

ul { list-style: none; padding: 0; } li { color: #222; } li::before {content: "•"; color: #ccc; Margin - right: 0.5 em. }Copy the code

As shown above, the

  • color is #222, while the pseudo-element ::before is # CCC. If
  • and ::before have the same color, then the small circles default to the color of Li, so no pseudo-elements are needed at all.

    • Let’s look at a better way:

    li {
    color: #222;
}

li::marker {
    color: #ccc;
}
Copy the code

    Compared to the above pseudo-class way, this is not too cool!

    The text – the align attribute

    With the increasing popularity of CSS Flexbox and Grid, beginners are also more likely to use them to center text rather than the text-align attribute, but the old method still works.

    Using text-align:center can also solve problems quickly, consider the following example.

    If only the content needs to be centered, you don’t have to use Flexbox or Grid; text-align is easier.

    display: inline-Flexattribute

    Inline-flex comes in when we need to display a list of badges inline, and each badge should be a Flexbox element.

    HTML

    <span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
Copy the code
    .badge {
    display: inline-flex; /* where the magic happens */
    justify-content: center;
    align-items: center;
}
Copy the code

    The column – rule properties

    The columns property of CSS is a layout method that divides elements into columns. A common use case is to split paragraph text content into two lines. Most rarely, however, we can add borders between columns. I learned this technique from an article by Manuel Matuzovic. 😍

    p {
    columns: 3;
    column-rule: solid 2px #222;
}
Copy the code

    The column-rule attribute name may not reflect its purpose, but you can think of it as being similar to border-right.

    background-repeat: round

    I learned about this value recently in a tweet from Addy Osmani. Background-repeat has a value to prevent background clipping.

    .element {
	background-size: contain;
	background-repeat: round;
}
Copy the code

    It’s amazing, isn’t it 😲

    Object – fit attributes

    The object-fit attribute is quite magical and useful. When I first learned about it, it changed things and made my life as a front-end developer much easier. Recently, I was working on the section that displays the logo grid. This is sometimes difficult to do because the logo sizes are inconsistent. Some of them have a horizontal shape, some have a vertical shape. 😒 😵

    By using object-fit: Contain, I can control the width and height of the logo and force the image to be included within the defined width and height. 😱 😱

    HTML

    <ul class="brands"> <li class="brands__item"> <a href="#"> <img src="img/logo.png" alt=""> </a> </li> <li> <! -- other logos --> </li> </ul>Copy the code

    css

    img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}
Copy the code

    Defining width and height forces the image to be sized, which is a huge benefit. Better yet, we can wrap the above in @supports to avoid stretching the logo image in browsers that don’t support object adaptation.

    @supports (object-fit: contain) { img { object-fit: contain; height: 75px; }}Copy the code

    The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

    Original text: ishadeed.com/article/com…

    This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.