Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the hidden features in CSS3". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what are the hidden features in CSS3" can help you solve the problem.

CSS3 adds a lot of amazing features to web design, among which you often use popular features such as box-shadow (layer Shadow), border-radius (Border fillet), and transform (deformation). But there are some powerful functions that you may not have access to. They are like buried treasures, quietly waiting for you to discover.

The W3C is constantly working on developing new CSS features for designers, developers, and users. Let's take a look at 10 hidden features in CSS3 that you may not know about:

Most code editors are equipped with Tab size control, and developers can control the width of the Tab key used to specify the indentation of the code. Now, this feature is open to custom code embedded in web pages.

Note that each browser may have a different description of the Tab occupancy width. So, we will see some differences in different browsers. The browsers I know that support this feature include Chrome,Opera,Firefox and Safari.

The feature of text rendering allows browsers to know how to render text in a web page. The performance, readability and accuracy involved in text optimization will determine the quality of the text. Take a look at the kerning adjustment of the two versions of the screenshot below to tell the difference between the "normal" version and the "readability optimized" version.

In addition to the regular normal, bold and italic, other font settings also provide different sensory designs. Helvetica Neue or Myriad Pro fonts are examples. They have "Condensed", "Ultra-condensed", and "Semi-condensed" settings for font scalability, all of which can be achieved through a feature called font-stretch (Font scaling).

We can use font scaling with text features (such as using font styles), to give an example:

The font-stretch (Font scaling) feature is currently available only in Firefox and Internet Explorer 9 (and above).

The text overflow feature specifies how the overflowed or truncated content in the container is rendered. The default treatment is truncation, and the truncated content will be hidden. You can set the ellipsis to represent the truncated text or omit it. As shown in the following figure:

As you might expect, the ellipses in the last three dots represent what is omitted.

Not every language is written from left to right. Some languages are written from top to bottom, such as Japanese, and some languages are written from right to left, such as Arabic and Hebrew.

To adapt to these languages, CSS introduces a new feature called writing mode to help developers change the direction of content. For example, this code snippet keeps the content written in this article in the order from left to right (regardless of language).

Change the order of the text content from top to bottom, which can be achieved by setting it to vertical-l,r:

The pointer-events (pointer event) property allows developers to control the behavior of the mouse pointer under events such as drag, hover, and click. After using the command shown below, clicking on the link with the pointer will have no effect, the link will be completely disabled, and the location of the address specified in the href tag will become a fixture.

Some key issues about pointer events will be addressed in the next version of CSS4.

In image editors such as Photoshop, you can change the direction of the image by rotating or flipping. Now, the image-orientation (picture orientation) function in CSS3 allows you to do the same for images on the web. Here is an example of how to flip a picture horizontally:

You can retain the orientation of the original image by restoring the from-image:

Similar to the text rendering feature, image rendering defines the image quality on a web page, especially the size of the image. This feature is made up of a bunch of values that are set differently by different browsers. For example, crisp-edges, a feature that saves image contrast and prevents blurring of edges, uses webkit-optimize-contrast in Chrome Fast browsers and nearest-neighbor in IE browsers.

This is an experimental technology, and the results of implementation vary slightly with different technologies.

Column properties make it easy for developers to arrange web content into columns. We divide the content into two columns, as shown below:

When browsers support this feature, such as in Chrome and Safari, we will see the following arrangement:

Add some creativity to the CSS feature and you can easily create a website with flexible fluid layouts and attractive content layouts similar to fashion magazines.

Flex's features are designed to build a more seamless responsive grid and simultaneously solve a series of problems caused by the use of floating attributes in mainstream network layouts. In addition, using the flex feature, the network layout will be completely extended to the entire container, which used to be quite cumbersome.

Now, if you want to build a three-column web layout, you can arrange it like this:

Then, use flex to build column properties, like this:

Add the decoration of font and background color, and we will get the following results:

That's all for "what are the hidden features in CSS3?" Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.