Fall in love with the simple CSS details, although insignificant, can improve efficiency

The future of CSS is so exciting: on the one hand, it’s a whole new way of page layout; on the other hand, it’s cool filters, colors and other visual effects. These CSSs are sought after by developers and are introduced everywhere in magazines and blog articles.
If these features are the gorgeous side of CSS, let's take a look at its plain side: very inconspicuous things, such as selectors, units, and functions (methods). I often say these are fiddly things, but what I mean is that they do a beautiful job, and that's what I want to share.
Well, let’s look at the humble CSS details that work best — details that are far less eye-catching than those fancy CSS effects. Some of them have been around for a while but deserve to be better known, while others are new to the scene. Although inconspicuous, they can improve our work efficiency - in a humble manner.

Relative Units Smart, forward-thinking developers are already using relative units — like em or percentages — so they understand the problem of using a calculator as an aid to calculating sizes because of element inheritance. For example, it is common practice to set a global size for the font on a page, and then use relative units to define other elements on the page. The CSS would probably look like this:

Copy code

The code is as follows:

html { font-size: 10px; } p { font-size: 1.4em; }

This works fine until a child element needs to have a different font size, for example, in a tag like this:
The cat sat on the mat.
If you want to set the font size of a span to 1.2em, what do you need to do? Take out your calculator and calculate 1.2 divided by 1.4. Here is the result:

Copy code

The code is as follows:

p span { font-size: 0.85714em; }

This problem is not limited to EM. If you use percentages to create a responsive, fluid layout website, percentages are relative to the container. So, if you want to define an element to be 40% of its container, its height is 75% and its width needs to be set to 53.33333%.
Obviously, this is inconvenient.

Root-related length units To fix issues with font size definition, it is now possible to use the unit rem (root em). rem is also a relative unit, but it corresponds to a fixed basic value, which is the font size of the document's root element (in an HTML file, that is, the html element). Assuming that, like in the previous example, the font size of the root element is set to 10px, the CSS would be written like this:

Copy code

The code is as follows:

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

Both CSS rules are relative to the font size of the root element, which makes the code more elegant and simple, especially when setting simple values such as 10px or 12px. This is very similar to using px values, except that rem is scalable.
Among the features introduced in this article, the rem feature is relatively compatible and can be supported by advanced browsers, including IE9, except Opera Mobile.

Window-related length units Think rem units are cool, it would be even cooler if there was another set of units that could solve the percentage problem. It is similar to rem, but it is not relative to the root element of the document, but relative to the size of the device window itself.
These two units are vh and vw, which are the height and width relative to the window size. Each unit is preceded by a number to represent the percentage.

Copy code

The code is as follows:

div { height: 50vh; }

In the above example, the height is set to half the window height. 1vh is equivalent to a percentage of the window height, so 50vh is 50% of the window height.
If the window size changes, this value will change as well. The benefit of this relative percentage is that you don't need to worry about the parent container. No matter what its parent container is, the 10vw element will always be 10% of the window size.
Accordingly, there is the vmin unit, which is equivalent to the minimum value of vh or vw, and it was recently announced that a vmax unit will be added to the specification document (although it is not yet available at the time of this post).
Currently, IE9+, Chrome, and Safari 6 support this feature.

Expression values If you're working on a responsive, fluid layout, you'll often run into the problem of mixed units - using percentages to set the grid, but fixed pixel widths to set the margins. like:

Copy code

The code is as follows:

div { margin: 0 20px; width: 33%;}

If the layout only uses padding and border, you can use box-sizing to solve it, but you can't do anything about margin. A better and more flexible approach is to use the calc() function and set up mathematical equations between different units, like this:

Copy code

The code is as follows:

div { margin: 0 20px; width: calc(33% - 40px);}

It can be used not only to calculate width, but also length - if necessary, you can add calc() inside calc().
This feature is supported by IE9+ and Firefox. Firefox needs to add the -moz- prefix (it may not need to be prefixed in version 16 or 17). Chrome and Safari also support it, but they need to add the -webkit- prefix. However, mobile Webkit is not yet supported.

Loading partial fonts from a font library Superior performance is always important, especially with the wide variety of mobile devices on the market - resulting in differences and uncertainties in connection speeds. One way to speed up page loading is to reduce the number of external files. A new attribute unicode-range of @font-face is created for this purpose.
This attribute is unicode-range, which represents the parameter range of the encoded font. When loading external files, only the fonts that are used will be loaded, not the entire font library. The following code demonstrates how to load only three fonts from the foo.ttf font library:

Copy code

The code is as follows:

@font-face {font-family: foo;src: url('foo.ttf');unicode-range: U+31-33;}

This is especially useful for pages that use font icons. I've tested it and found that using unicode-range reduces the time it takes to load font files by an average of 0.85 seconds, which is not a small amount. Of course, you might not think so.
This property currently works in IE9+ and Webkit browsers (such as Chrome and Safari).

New Pseudo-Classes Units and values are both worth taking advantage of, but I'm more excited about selectors and pseudo-classes. I'm excited about the idea of a well-developed selector pattern, even if only a few browsers support it. To quote Steve Jobs: Make the inside of the fence as beautiful as the outside, even if no one else can see inside—because you know what’s inside.
The first time I used :nth-of-type(), it was like a breakthrough, like I broke free from the shackles of my thinking. Okay, I exaggerated a bit. But some of the new CSS pseudo-classes are worth getting excited about.

The Negation Pseudo-Class You probably don't know the benefits of the :not() pseudo-class until you try it yourself. :not() with parameters is just a normal selector - not a compound selector. A group of elements plus the selector: not() means that the elements that meet this parameter will be excluded. Sounds a bit complicated, right? But it's actually very simple.
Assumption: You want to select the odd-numbered rows of a list of items, except the last row. If it was before, you need to write like this:

Copy code

The code is as follows:

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

Now, by setting :last-child as the parameter of the negated pseudo-class, we can exclude the last element, which saves one line of code, making it more concise and easier to maintain.

Copy code

The code is as follows:

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

The negation pseudo-class may not seem like a big deal, and you can get away with it, but it’s still useful. I have used it in projects based on Webkit, and the advantages are quite obvious. Honestly, it's one of my favorite pseudo-classes.
Yes, I have a favorite pseudo-class.
Of the features mentioned in this article, the negation pseudo-class is the most compatible, supported by IE9+ and higher browsers (without the need for a browser vendor prefix). If you're familiar with jQuery, you're probably used to it — it's been around since version 1.0, along with the similar not() method.

The "applies to" pseudo-class
The :matches() pseudo-class can take a normal selector, a compound selector, a comma-separated list, or any combination of selectors as an argument. marvelous! But what can it do?
The most powerful aspect of the :matches() pseudo-class is that it can be used to aggregate multiple selectors. For example, to select the p elements in several different child containers in the parent container, before this, the code might be written like this:

Copy code

The code is as follows:

.home header p,.home footer p,.home aside p {color: #F00;}

With the :matches() pseudo-class, you can extract the common points and reduce the amount of code. In this example, the common point of the selectors is that they start with home and end with p, so we can use :matches() to group all the elements in between. Are you a little confused? Just look at the code and you will understand:

Copy code

The code is as follows:

.home :matches(header,footer,aside) p { color: #F00; }

This is actually part of CSS4 (CSS Selector Level 4, to be exact), and the specification document also mentions that a similar syntax (comma-separated compound selectors) will be applied to the :not() pseudo-class. Excited!
Currently, :matches() can work in Chrome and Safari browsers, but it must be prefixed with -webkit-. Firefox also supports it, but it must be written in the old way: any() and prefixed with -moz-.

Are you in love with these simple CSS details?
The best thing about the features discussed in this post is that they solve real problems, from trivial and complicated selectors to the new challenges of building responsive websites. In fact, I expect every feature to be used in even the most mundane of projects.
New features like filters may be intuitive and flashy, but I’d rather discover the practical little tricks hidden deep down.
In the process of active exploration, each feature can make your career smoother - thinking about this, it won’t feel cumbersome.

<<: The docker prune command can be used to periodically clean up infrequently used data

>>: JavaScript flow control (loop)

Secondary encapsulation of element el-table table (with table height adaptation)

Fall in love with the simple CSS details, although insignificant, can improve efficiency

Secondary encapsulation of element el-table table (with table height adaptation)

Three ways to implement animation in CSS3

A simple way to achieve scrolling effect with HTML tag marquee (must read)

JavaScript to achieve simple tab bar switching case

How to export CSV file with header in mysql

SASS Style Programming Guide for CSS

Detailed tutorial of using stimulsoft.reports.js with vue-cli

Deleting the database and running away? How to use xtraback to back up the MySQL database

How to reduce the memory and CPU usage of web pages

Common commands for deploying influxdb and mongo using docker

Recommend

vue-cropper plug-in realizes the encapsulation of image capture and upload component

Cross-browser local storage Ⅰ

Solution to BT Baota Panel php7.3 and php7.4 not supporting ZipArchive

Mysql sorting to get ranking example code

Summary of common functions of PostgreSQL regular expressions

The implementation principle of Mysql master-slave synchronization

Interaction in web design: A brief discussion on paging issues

Detailed explanation of the basic use of centos7 firewall in linux

Solution to the problem of Access denied for user'root'@'localhost' (using password: YES) in MySQL 8.0 login under win10

Summary of MySQL's commonly used database and table sharding solutions

favico.ico---Website ico icon setting steps

Summary of two methods to implement vue printing function

What are mysql dirty pages?

How to install mysql8.0.23 under win10 and solve the problem of "the service does not respond to the control function"

Detailed explanation of MySQL/Java server support for emoji and problem solving