Some CSS properties that are hard to remember but easy to use

Preface

After writing CSS for a while, everyone should be familiar with common attributes, such as the most basic display , position , padding , margin , border , background etc. You don’t need to check anything when writing CSS. You can write it in smoothly.

These properties are common because they are used in many places, and some CSS properties can only be used in certain places, or only appear in certain situations. I often forget these not unusual attributes, but sometimes these attributes are actually very important.

So this article introduces some CSS properties that I think are not easy to memorize but are easy to use, and also take a note for myself by the way.

The outer frame of the input and the color of "|"

Compared to border , outline is a relatively rare attribute, but the application input In the default behavior of the browser, when you move the focus to input , a circle of blue appears on the edge:

The blue one is outline , which can be verified by Chrome devtool:

So if you don't want outline or want to change the color, just modify this attribute.

| that appears in the input box is called caret. If you want to change the color, you can caret-color attribute:

The blue box when clicked

I remember that when I click on something on the phone, a blue frame will appear, but I haven’t tried it out just now. In short, the corresponding attribute is called -webkit-tap-highlight-color . It should be possible to find it with this keyword. Some other articles and examples.

Smooth scrolling

There are many websites that have a function. The most common is the blog website. The title of each paragraph of the article may appear on the right side. After clicking on it, you can quickly locate that paragraph.

If there is no setting, just click to jump directly to the positioned paragraph. But there is something called smooth scroll, which will add some cutscenes to let the user know that it is scrolling there.

A long time ago to realize this function may need to use JS, but now you can use CSS scroll-behavior: smooth; to get it (the following example is taken from MDN ):

Scroll position when loading new content

Many websites have the function of automatically loading more when scrolling to the bottom. When loading more, you will expect the user to stay in the same position instead of automatically turning the scroll bar just because more loads are loaded. Roll down or something.

But sometimes the browser's default processing method is not as expected. It is possible that when you load more elements, the screen does not stay where you imagined it.

At this time, you can use overflow-anchor to adjust this behavior.

Only slide one element at a time

Sometimes we will need an effect like this: the user will slide to the next element with a scroll-snap , instead of sliding to any place. This can be achieved through the attributes of 060c0129beee4f, like this:

300ms click delay on the phone

Many people know this. The click event on the mobile phone will have a performance of about 300ms, which means you will have to wait 300ms after you click to trigger the click event. The reason for this delay is that you can double-click on the phone to zoom in on the screen, so when you click the first time, the browser doesn't know whether you want to click twice or only once, so you need to wait for a while.

This delay seems to have been removed before, but if you find that it still exists, you can use touch-action: manipulation to solve it. This property can be set to disable some gestures.

For more details, please refer to MDN .

font-smooth

I saw this attribute in the css Create React App:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

These two attributes can also be found on many websites. They are related to the rendering of fonts. For example, antialiased is actually the anti-aliasing that everyone has heard of. You can decide what method to use to render the font.

Concluding remarks

This article simply records some CSS properties that I find difficult to remember but easy to use. Because they are not used very frequently, it is easy to forget the property names when they are really used. If the keywords are entered incorrectly when searching It is difficult to find what this property is called.

If you also know such CSS properties, welcome to share.