Some CSS3 features

Text multi-column display.

COLUMN-WIDTH:12EM; Set the column width. Changing the viewport width dynamically changes the number of columns. If you want to keep the number of columns fixed, the width is variable. Can be written as Column-count:4;column-gap:2em, and set the gap between the inferior. Column-rule:thin dotted #999; Sets the split line style between columns. In multi-column layouts, the user experience can be affected if each column of text is too long. This is because users need to scroll up and down the page repeatedly, it can be cumbersome.

Word breaker

If you put a very long URL in a small space, the URL will run out of space. Use a CSS3 declaration to fix it. Word-wrap:break-word;

Truncate text

Truncation of text has always been done by the server side. CSS can be implemented by styles: Width:520px;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap;white-space: The nowrap declaration is made to ensure that text that is long is not wrapped in an outer element.

Create a horizontal scrolling panel

Set the parent module overflow-x:auto;white-space:nowrap; set Submodule display:inline-block. Inline-flex or inline-table can.

:: Before and:: After pseudo-elements, if you query the sample code, you will find: the before pseudo-element is used to display the number of items. If you use pseudo-elements, to ensure that:: Before and: After display, they must contain a content value, even if the whitespace is fine. Once displayed, these elements are like the first and last child elements of the corresponding element.

To add some artistic appeal, you can also hide the scroll bar as much as possible. Unfortunately, the corresponding attributes are supported only by individual browsers. So add the prefixes manually (Autoprefixer does not add these properties because they are proprietary). You can also add some touch-style scrolling effects for webkit browsers (iOS devices). Firefox does not support the hidden scroll bar, and Android's low version does not support horizontal scrolling.

Feature Query

CSS Native Branch syntax is a feature query. However, IE11 and IOS8.1 do not support this feature before. attribute queries are similar to media query syntax:

@supports (Flashing-sausages:lincolnshire) {  body{     sausage-sound:sizzing;      }   }

This is written on the premise that the browser supports @supports, but if not supported, neither code will be applied. If you cover a device that is not worth @supports, it is best to write the default declaration first, and then write the @supports statement.

You can also combine conditional,&& symbols into the and keyword. Supported keywords also have or.

Some browsers do not support @supports, you can use a JS tool to solve this problem.

Modernizr

Before @supports is widely supported, you can use the JS tool Modernizr. Currently, it is the most reliable way to implement branching in CSS.

New CSS3 Selector

The Data-* property is a property introduced by HTML5 to hold data. CSS3 last Hi eat a string that contains a property selector to select an element. Assign three cases based on substring matching elements: to .... To begin with, contain .... End.

"To ... Start "selector: img[alt^=" file "]{}

"Include ..." selector to select: img[alt*= "file"]{}

"To .... End "selector: img[alt$=" file "]{}

CSS3 structured pseudo-class

The last one or the first one is to write a class individually. This approach is not easy to add in some management systems. Using CSS3 to provide structured pseudo-classes, you can easily handle similar problems.

CSS2.1 has a selector for matching the first item in the list: Div:first-child{},css3 adds a selector that can select the last item: div:last-child{}.

Use the Nth-child selector to solve more troublesome problems. Or the same as the previous mark, if you want to choose one by one what to do? You can select an odd number: Nav-link:nth-child (odd) {},.nav-link:nth-child (even) {}.

Using nth

The CSS3 provides several nth-based rules: Nth-child (N), Nth-last-child (n), Nth-of-type (n), Nth-last-of-type (n). Pass in an integer. For example, Nth-child (2) will choose the second item. An incoming numeric expression. For example, Nth-last-child (2) will start with the first item and then choose one for each of the three.

: not, another useful pseudo-class selector is "negate": not. This selector is used to select "Not ...".

: Empty, this pseudo-class selector is used to solve an element that "adds only some padding, and the content is dynamically inserted at some point in the future." This element sometimes has content, sometimes not. The problem is that when this element has no content, it has to be inside the margin. "This time we can use pseudo-class: Empty to hide it. Thing:empty{display:none;} There are spaces in the content, and only comments do not count as content.

The pseudo-class is introduced from CSS2, and CSS3 's syntax is revised. CSS3 requirements written in double:.

: The target of the first-line pseudo-element selection differs depending on the size of the viewport, which is critical. P::first-line{color: #ff0cff}; As the viewport size changes, the length of the text that appears pink also changes.

CSS Custom properties and variables

CSS now also has a programmable feature. The first is custom Shu embroidery that. Although it is often called a variable, it is not the only use of a custom property as a variable. There is not much support for browser implementations. Custom attributes can store information that can be used elsewhere in the style sheet, or through JS operations.

: Root {  --mainfont: ' pingfangsc-regular '  }. Title{  font-family:var (--mainfont);  }

Custom attributes start with two dashes followed by the name of the custom property.

Some CSS3 features