• 6 CSS Properties Nobody Is Talking About
  • Original author: Anurag Kanoria
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofread by: Zenblo, Chorer

This article has been reprinted and modified with permission from the original author

CSS and HTML have been the cornerstones of the Internet for decades.

While HTML is responsible for creating the structure of a website and arranging the graphics, it can’t do much about designing a website.

Since 1994, designing web sites has been the sole purpose of CSS, a language that describes how web sites look.

Over the years CSS has introduced more and more new properties, such as Flexbox or Grid.

Despite the popularity and complexity of creating Web applications, there are still many CSS properties and tricks that most developers don’t understand.

Here are six CSS properties you’ve probably never heard of:

1. all

Have you ever used a CSS framework? If so, I’m sure there are times when you’ll want to override the style definition of some element to your liking.

The most common method is to use CSS! The important property emphasizes the current property and ignores all other Settings and rules.

.header {
    color: blue ! important;
    font-size: 14px ! important;
}
Copy the code

However, writing the same keywords over and over can make your CSS file look messy.

An easier way to override style definitions is to use the all attribute.

There are three available property values for all — Initial, inherit, and unset.

.header {
    all: initial;
    color: blue;
    font-size: 14px;
}
Copy the code

All: Initial sets all attributes of the element to the rollback or initial value.

Both Chrome version 37 and Firefox version 27 support this property. Edge browsers also support this property, but Internet Explorer does not.

2. writing-mode

I recently wrote an article about magical places to find design ideas, and the sites I listed and many I stumbled upon had text arranged vertically on one side.

On the right side of the image (near the scrollbar), you can see text arranged vertically on the side, which happens to be a clever way to display additional information.

The writing-mode attribute allows us to do this.

This property supports the following values:

  • sideways-rl: Text and other content are arranged vertically from top to bottom and horizontally to the right.
  • sideways-lrAnd:sideways-rlAgain, text and other content are arranged vertically from top to bottom, but tilted to the left.
  • vertical-rl: Text and other content are arranged vertically from top to bottom and horizontally from right to left. If there are two or more rows, the rows will bePlace to the left of the previous line.
  • vertical-lrAnd:vertical-rlInstead, arrange the text horizontally from left to right, and if there are two or more lines, those lines are placed to the right of the previous line.

The horizontal-TB property achieves the effect of arranging text by default.

You can find the implementation and code block here.

3. background-clip

This is an interesting property that allows you to set custom graphics for the background of an element.

Our custom graphics can extend to an element’s border, inner margin box, or content box.

Here’s a short implementation of this property:

HTML:

<p class="border-box">The background extends to the border.</p>
<p class="padding-box">The background extends to the inner edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is cropped to foreground text.</p>
Copy the code

CSS:

p {
    border:.8em darkviolet;
    border-style: dotted double;
    margin: 1em 0;
    padding: 1.4 em;
    background: linear-gradient(60deg, red, yellow, red, yellow, red);
    font: 900 1.2 em sans-serif;
    text-decoration: underline;
}

.border-box {
    background-clip: border-box;
}

.padding-box {
    background-clip: padding-box;
}

.content-box {
    background-clip: content-box;
}

.text {
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0.0.0.2);
}
Copy the code

Effect:

We can also use a custom image as a background for the text:

Note that on Chrome we need to use the -webkit-background-clip property and make sure the text color is set to transparent.

4. user-select

If we have some text on our site that we don’t want users to copy, we can use this property.

The user-select attribute specifies whether the text of the element can be selected.

This has no effect on the content other than the text box.

.row-of-icons {
    -webkit-user-select: none; /* Chrome & Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}
Copy the code

This property can also be used to ensure that the entire element is selected.

.force-select {
    user-select: all;
    -webkit-user-select: all; /* Chrome 49+ */
    -moz-user-select: all; /* Firefox 43+ */

}
Copy the code

You can find the full instructions here.

5. white-space

This property is useful when using text-overflow because it allows us to control the text flow of elements.

It accepts NowRap, pre, pre-wrap, pre-line, and Normal as attribute values.

Nowrap prevents text from wrapping around the width and height of an element and causing it to overflow.

The pre value enforces line breaks and Spaces that are removed by default from browser rendering code. The pre-wrap value has the same effect as the pre value, but it does not allow text to overflow elements.

The pre-line attribute wraps the line at the appropriate place in the code, but no extra Spaces are displayed.

The difference can be clearly seen in the following example:

HTML:

<div>
    <p class='zero'>

        Some text
    </p>

    <p class='first'>

        Some text
    </p>
    <p class='second'>
        Some text
    </p>
    <p class='third'>
        Some text
    </p>
    <p class='fourth'>
        Some text
    </p>
</div>
Copy the code

CSS:

div {
    width: 100px;
}

p {
    background: red;
    font-size: 2rem;
}

.first {
    white-space: nowrap;
}

.second {
    white-space: pre;
}

.third {
    white-space: pre-line;
}

.fourth {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
Copy the code

Effect:

6. border-image

This property is great for designing our website and we can use it to create nice borders around elements — border-image allows you to set custom images as borders.

The following image shows this property in action:

The HTML and CSS code is as follows:


<body>
<h1>This is a title</h1>
</body>
Copy the code
h1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}
Copy the code

Effect:

This property can be used to create beautiful cards or to emphasize portions of text.

Final thoughts

Front-end developers use both CSS and HTML in addition to JavaScript. Knowing more about CSS properties can help you build Web applications faster and better.

Although I’ve shared a few CSS properties that are less talked about, there are many more.

CSS is more than 20 years old, but it still has a lot of quirks.

Knowing these CSS properties makes for an artsy website.

Thanks for reading!

  • This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.