This is the 10th day of my participation in the genwen Challenge

preface

After writing CSS for a while, you should be familiar with the common properties, such as the basic display, position, padding, margin, border, background, etc. You don’t need to look up anything when writing CSS. If it’s nice, I can write it.

These properties are common because they can be used in many places, while some CSS properties can only be used in certain places, or only appear in certain situations. I tend to forget these infrequent attributes, but sometimes they are really important.

The color of the input frame with “|”

Outline is a relatively rare attribute compared to border, but special mention should be made of the application to input. In the browser’s default behavior, a circle of blue appears around the edge when you move the focus to the input:

The blue one isoutline, can be accessed through Chrome devtoolValidation:

So if you don’t want itoutlineOr if you want to change the color, you can just change this property.

That keeps flashing in the input box | called caret, if want to change the color can be modified through the caret – color attributes change:

The blue box when clicked

When you click on something on your phone, you’ll see a blue box or something like that. The property is called -webkit-tap-highlight-color.

Smooth scrolling

There are many websites that have a feature, the most common is the blog site, may appear on the right side of the title of each paragraph of the article, after clicking down to quickly locate that paragraph.

If there is no setting, click down to jump to the location of the paragraph. But there’s something called smooth scroll, which adds some cutscenes to let the user know that it’s scrolling over there.

A long time ago you might have needed JS to do this, but now you can use CSS scroll behavior: smooth; The following example is taken from MDN:

Scroll position for loading new content

Many sites have a feature that automatically loads more as you scroll to the bottom. As you load more, you expect the user to stay in the same place and not automatically scroll down as they load more.

But sometimes the browser default doesn’t work as well as expected, and it’s possible that as you load more elements, the screen doesn’t stay where you want it to be.

This behavior can be adjusted using the overflow-anchor CSS property.

Slide one element at a time

Sometimes we need an effect that allows the user to slide directly to the next element with a single swipe, rather than sliding anywhere. This can be done with scroll-snap properties like this:

300ms click delay on the phone

As many of you probably know, a click event on a mobile phone takes about 300 milliseconds, meaning it takes 300 milliseconds for the click event to happen after you click on it. The reason for this delay is that you can double click to zoom in on the phone, so on the first click, the browser doesn’t know if you clicked twice or just once, so it has to wait a while.

This delay seems to have been removed earlier, but if it still exists, you can fix it with the touch-Action: Manipulation CSS property, which can be set to disable gestures.

Refer to MDN for more details.

font-smooth

I’m in the default CSS of the Create React App (github.com/facebook/cr…) Those who see this property:

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

These attributes are also found on many web sites, where fonts are rendered; antialiased, for example, is the well-known anti-aliasing term. You can decide how to render the font.

conclusion

This article has briefly recorded some useful CSS properties that I find difficult to remember. Because they are not used very often, it is easy to forget the name of the property when you do use it. It is difficult to find the name of the property if you type the keyword incorrectly in a search.

If you know of CSS properties like this, please share them.