6 CSS properties that no one has talked about
For decades, CSS and HTML have been the cornerstones of the Internet.
Although HTML can be responsible for creating the website structure and arranging graphics and text, it can do nothing in designing a website.
Since 1994, designing a website has been the sole purpose of CSS. It is a language that describes the appearance of a website.
Over the years, CSS has continuously introduced more new properties, such as Flexbox (flex box) or Grid (grid).
Despite the popularity and complexity of creating web applications, most developers still have many CSS properties and techniques that they don't understand.
Here are 6 CSS properties you may never have heard of:
1. all
Have you ever used a CSS framework? If so, I'm sure you want to override the style definitions of certain elements according to your preferences several times.
The most common method is to use the !important property in CSS to emphasize the current property and ignore all other settings and rules.
.header {
color: blue !important;
font-size: 14px !important;
}
However, writing the same keywords repeatedly can make the CSS file look confusing.
A simpler way to override the style definition is to use the all attribute.
There are 3 available attribute values for all-initial, inherit and unset.
.header {
all: initial;
color: blue;
font-size: 14px;
}
all: initial will set all the attributes of the element to the fallback value or initial value.
Starting from Chrome version 37 and Firefox version 27, they both support this attribute. Edge browser also supports this attribute, but IE does not support it.
2. writing-mode
On the right side of the picture above (near the scroll bar), we can see the text arranged vertically on the side, and this happens to be a clever way to display additional information.
The writing-mode attribute allows us to achieve this effect.
The attribute supports the following values:
-
sideways-rl: Text and other content are arranged vertically from top to bottom, and placed horizontally to the right.
-
sideways-lr: Like sideways-rl, text and other content are arranged vertically from top to bottom, but slanted 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, these rows will be placed to the left of the previous row.
-
vertical-lr: Unlike vertical-rl
, the text is arranged horizontally from left to right, and if there are two or more lines, these lines will be placed on the right side of the previous line.
The horizontal-tb attribute realizes the effect of arranging text by default.
3. background-clip
This is an interesting property that allows us to set custom graphics for the background of the element.
Our custom graphics can extend to the border of the element, the padding box or the content box.
The following is a short implementation of this property:
HTML：
<p class="border-box">背景延伸到边框。</p>
<p class="padding-box">背景延伸到边框的内部边缘。</p>
<p class="content-box">背景仅延伸到内容盒的边缘。</p>
<p class="text">背景被裁剪为前景文本。</p>
CSS：
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em 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);
}
Effect:
We can also use a custom picture as the background of the text:
it is worth noting that we need to use the -webkit-background-clip property on Chrome and make sure that the text color is set to transparent.
4. user-select
If we have some text on our website that we don't want users to copy, we can use this attribute.
The user-select attribute specifies whether the text of the element can be selected.
This has no effect on 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;
}
This attribute 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+ */
}
You can find the complete instructions here .
5. white-space
This attribute is very useful when using text-overflow, because it allows us to control the text flow of the element.
It accepts nowrap, pre, pre-wrap, pre-line and normal as attribute values.
nowrap prevents the text from wrapping around the width and height of the element and makes it overflow.
The pre value forces the browser to render line breaks and spaces that are removed by default in the code. The pre-wrap value has the same effect as the pre value, but it will not let the text overflow the element.
The pre-line attribute will wrap at the corresponding place in the code, but will not display extra spaces.
The difference can be clearly seen through 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>
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;
}
effect:
6. border-image
This attribute is very suitable for designing our website, we can use this attribute to create a beautiful border around the element-border-image allows you to set a custom image as a border.
The following image shows the application of this attribute: The
HTML and CSS code is as follows:
<body>
<h1>This is a title</h1>
</body>
h1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
Effect:
This attribute can be used to create exquisite cards or emphasize part of the text.
Reprinted from: https://juejin.cn/post/6937995501719519240