CSS attributes that are not common but very practical

Time:2021-5-1

1、-webkit-line-clamp

You can limit the contents of a block container to a specified number of rows. After exceeding the number of rows, the “…” is displayed on the last row

This is a normal display

CSS attributes that are not common but very practical

display: -webkit-box; /* Value must be - WebKit box or - WebKit inline box*/
-webkit-box-orient: vertical; /* Value must be vertical*/
-webkit-line-clamp: 2; /* The value is a number, indicating how many lines are displayed*/
overflow: hidden;

This is the display with line clamp added

CSS attributes that are not common but very practical

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

2、all

Reset all properties except Unicode bidi and direction to their initial values or inherited values.

all: unset; /*initial | inherit | unset*/

Initial changes the value of all attributes of the element to the initial value.

Inherit changes the value of the element to the value inherited from the parent element

Unset if the value of the attribute of the element is inheritable, reset to the inherited value of the parent element, otherwise change to the initial value.

3、box-decoration-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break

4、caret-color

It is used to define the color of caret. Here, the caret is the flickering vertical bar in the editable area of a web page to indicate where the user’s input will be inserted.

caret-color: red;

CSS attributes that are not common but very practical

5、clip-path / shape-outside

The clip path property uses clipping to create the displayable area of an element. The part inside the area is displayed, and the part outside the area is hidden. A similar clipping is SVG’s clippath.

Clip path values have the following graphics

Inset (xxx): cut to rectangle

Circle (XX): cut to prototype

Ellipse (xxx): crop to ellipse

Polygon (XX): crop to polygon

None: no clipping

Preparation before example

<div
  style="width: 500px; height: 500px;text-align: left;background-color:gray;color:white"
>
  <img
    class="clip-mode"
    style="float: left; margin:20px"
   
    width="150"
  />
  We had agreed, my companion and I, that I should call for him at his house,
  after dinner, not later than eleven o’clock. This athletic young Frenchman
  belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
  as a pastime. After having exhausted all the sensations that are to be found
  in ordinary sports, even those of “automobiling” at a breakneck speed, the
  members of the “Aéro Club” now seek in the air, where they indulge in all
  kinds of daring feats, the nerve-racking excitement that they have ceased to
  find on earth.
</div>

No cutting

clip-path: none;

CSS attributes that are not common but very practical

Round cut

clip-path: circle(40%);  // The radius is 40%, and the center is the center by default

CSS attributes that are not common but very practical

Ellipse clipping

clip-path: ellipse(130px 140px at 10% 20%);

CSS attributes that are not common but very practical

Polygon clipping

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

CSS attributes that are not common but very practical

We can see how the above figure is cut. The invisible box on the outside is always rectangular, that is to say, the text is always surrounded by a rectangular style.

So is there a way to make the text stick tightly around the cut figure?
Yes, use the shape outside property

Shape outside defines a shape that can be non rectangular, around which adjacent inline content should be wrapped. By default, inline content surrounds its rectangular margin;

Default rectangle wrap

clip-path: none;
shape-outside: none

CSS attributes that are not common but very practical

Circle around

clip-path: circle(40%);
shape-outside: circle(40%);

Ellipse around

clip-path: ellipse(130px 140px at 10% 20%);
shape-outside: ellipse(130px 140px at 20% 20%);

CSS attributes that are not common but very practical

Variable surround

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

CSS attributes that are not common but very practical

Of course, you don’t have to use circle wrapping in circle clipping. You can use polygon wrapping in circle clipping and diamond wrapping in polygon clipping. In a word, it doesn’t matter between the two. They don’t match each other. It’s up to you to define it

6、object-fit / object-position

The object fit property specifies how the content of the replaceable element should fit into the box determined by its height and width.

Object position property to specify the alignment of the content object of the replaced element within the element box.

Note: the replaceable elements are iframe, video, embed, IMG, and some are also replaceable elements in the case of features, such as option, audio, canvas, and object

Preparation before example

<div style="width: 300px; height: 300px; background-color:gray;">
    <img class="clip-mode" style="height: 100%; width: 100%;">
</div>

The image must be set to 100% width and height, that is, it cannot exceed the parent container before object fit can be set, otherwise it is meaningless.

Fill inThe image will be pulled to 100% of the parent container in width and height to fit the parent container

object-fit: fill;

CSS attributes that are not common but very practical

ContainThe image will not deform, the image will be scaled according to its own scale, the whole image will be put into the parent container, and the shorter edge will be automatically filled with blank.

object-fit: contain;

CSS attributes that are not common but very practical

CoverThe image will not deform, and the image will be scaled according to its own scale. The whole image will be put into the parent container. According to the shortest edge of the image, the parent container will be included as the benchmark. Longer edges overflow

object-fit: cover;

noneIt has nothing to do with the width and height of the parent container. Display the original aspect ratio of the image, and place it in the “center” position of the parent container based on the “center” of the image.

object-fit: none;

CSS attributes that are not common but very practical

scale-downThe size of the content is the same as one of none or contain, depending on who gets the smaller size of the object between them.

object-fit: scale-down;

If the image is larger than the parent container, the effect of contain is used. If the image is smaller than the parent container, the effect of none is used.

In the object fit demonstration above, we found that the alignment of replaceable elements is automatic.

For example, object fit: fill; Align the upper left corner of the container with the upper left corner of the parent container.

object-fit: none; Align the center of the parent container with the center of the parent container, and so on.

But do we want to change the alignment manually??

have access toobject-positionAttribute, which specifies the position of the content of the replaceable element in its content box.

object-position: 10px 10px; PX can be set. The first value represents the distance to the left of the parent container, and the second value represents the distance to the top of the parent container. Only one value represents the distance to the left of the parent container. You can also set the% value, but it will only work if there is a blank on one side. If there is no blank and the parent element is just full, it will not work. Setting PX doesn’t have such a problem. Anything will work later.

object-position: right top; Keywords can be set. The first value keyword can be set (left | center | right), and the second keyword can be set (top | center | bottom). At this time, it does not indicate the distance from the left or top, but the position of the parent element.

object-fit: fill;
object-position: 50px 50px;   // 10px from the left, 10% from the top

Comparison before and after adding object position:
CSS attributes that are not common but very practical

object-fit: contain;
object-position: right top;  // Stop at the top right

Comparison before and after adding object position:
CSS attributes that are not common but very practical

7、font-stretch

Defining a normal or deformed font appearance for a font only means that when there are multiple fonts to choose from, the most suitable size will be selected for the font.

Normal default font

Semi condensed, condensed, extra condensed, ultra condensed are smaller than the default font

Semi expanded, expanded, extra expanded, ultra expanded are larger than the default font

CSS attributes that are not common but very practical

8、font-variant-caps

You can control the use of special characters in capital letters.

  • Normal turns off the use of all special character variants.
  • Small caps allows the use of small capital letters (OpenType feature: small CP). A small capital letter is a letter in upper case but of the same size as the corresponding lowercase letter.
  • All small caps converts all uppercase and lowercase letters to small uppercase letters( OpenType feature: c2sc, SMPP).
  • Petite caps allows the use of extra small capital letters (OpenType feature: pcap).
  • All Petite caps converts all uppercase and lowercase letters to small uppercase letters( OpenType feature: c2pc, pcap).
  • Unicase allows the conversion of uppercase letters to a mixture of small uppercase letters and ordinary lowercase letters (OpenType feature: UNIC).
  • Titling caps allows initial capitalization (OpenType attribute: titl). Uppercase variant characters are usually designed to be used with lowercase letters. In the title sequence, if you use capital letters, it may bring too strong visual effect. Capital letters are used to deal with this situation.

CSS attributes that are not common but very practical

9、font-variant-east-asian

Control the use of substitution symbols for East Asian characters (such as Japanese and Chinese, Korean, etc.).

There are several values
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width
CSS attributes that are not common but very practical

10、max-content / min-content / fill-available / fit-content

These values can be used in the width, height, min width, min height, max width and Max height attributes.

Display must be inline block or block, otherwise the above value will not work.

fill-available

Elements fill the available space. The reference datum is the width and height of the parent element.

Div like child element can support the width of parent element, and fill available can support not only the width but also the height.

Code before the example

<div style="width: 300px; height: 100px; background-color:gray;">
  <span style="display:inline-block;background-color: burlywood;"
    >This is the content of the child element < / span
  >
</div>

Different performance of setting fill available on span
CSS attributes that are not common but very practical

What if there is an element in it, IMG? It is also an inline block, which should also satisfy the situation.
CSS attributes that are not common but very practical
We can see that the difference between img and span is that when width or height is set, the whole image will be scaled according to its own scale.

max-content

Its width or height will be automatically adjusted to just accommodate the element with the longest length (calculated according to the text when it does not wrap).
The reference datum is the width and height of the child element.

<div class="parent">
  <div class="current" style="width: 200px; height: 300px; background-color:gray;">
    <p>This is a normal line of P elements with text content</p>
    <img/>
  </div>
</div>

When setting Max content to current div, it has different performance.
CSS attributes that are not common but very practical

min-content

Its width or height will be automatically adjusted to just fit the element with the largest “minimum width value” in the child elements. The remaining super long elements will either wrap or overflow
The reference datum is the width and height of the “minimum width value” of the child element.

What is the minimum width value?
For example, the minimum width of an image is the original width and height of the image; If it is a string of Chinese characters, the minimum width is the width and height of a single Chinese character; If it is a string of English words, the minimum width value is the one with the longest word in it.

CSS attributes that are not common but very practical

fit-content

It means that the element automatically expands and shrinks to the width of the content. The difference between Max content and Max content is that it is just ready to accommodate the longest element in the child elements.

The difference is that Max content is calculated according to the text when it does not wrap. If it exceeds the parent element, it does not wrap and directly generates a scroll bar; When fit content exceeds the parent element, it will wrap and no scroll bar will be generated.

CSS attributes that are not common but very practical

11、fit-content()

This is different from the above Fit content value. It is a function used in grid layout.

(omitted)

See grid layout for details.

12、resize

It’s relatively simple. You can view it

Official documents

13、scroll-behavior

When the user triggers the scrolling operation through the API, the CSS property scroll behavior specifies the scrolling behavior for a scrolling box to arrive smoothly or immediately

Can view
Official documents

14、max() / min()

Max is the largest of the two; The Min function takes the minimum between the two.

Max, min can be used in any place where < length >, < frequency >, < angle >, < time >, < percentage >, < number >, or < integer > can be set

width: max(50vw, 300px);
width: min(50vw, 300px);

15、clamp()

The clamp function takes the middle value between the three defined values, which is the size in the middle, not the position in the middle,

clamp(MIN, VAL, MAX)

Like Max and min functions, it can be used in any place where the equivalence of < length >, < frequency >, < angle >, < time >, < percentage >, < number >, or < integer > can be set

font-size: clamp(1px, 3px, 2px);    // The median value is 2px
font-size: clamp(1px, 3px, 5px);    // The median value is 3px
font-size: clamp(4px, 3px, 5px);    // The median value is 4PX
width: clamp(200rem, 25vw, 150px);  // Take the middle of the three

16、conic-gradient()

In gradients, we know that there are:

  • Linear gradient: the color changes linearly from one direction to another.

CSS attributes that are not common but very practical

  • Radial gradient, radiating from a certain point along the ring.

CSS attributes that are not common but very practical

In addition, there is a kind of gradient called “taper gradient”. It’s a gradient that rotates in the fan direction around the center point (not radiates from the center point)

This is the difference between taper and radial gradients
CSS attributes that are not common but very practical

background: conic-gradient(red, orange, black, green, blue);

By default, the clock rotates clockwise from 12 o’clock

CSS attributes that are not common but very practical

18、:out-of-range / :in-range

Relatively simple, you can view the official documents

:out-of-range

:in-range

19、writing-mode

It defines the horizontal or vertical arrangement of text and the writing direction of text in block level elements

Horizontal TB means horizontal writing, from top to bottom

Vertical RL stands for vertical writing, from right to left (that’s how ancient Chinese calligraphy used to write)

Vertical LR stands for vertical writing, from left to right

Note that there is no horizontal BT, don’t make it up

CSS attributes that are not common but very practical

20、inline-size

Like the width and height effects of the elements, the size of the box will be changed. But it will override the width and height values.

The difference is that width is the absolute horizontal direction and height is the absolute vertical direction;

In line size is a relative horizontal direction, which can be changed by writing mode

CSS attributes that are not common but very practical

21、block-size

Similar to inline size, but just opposite to inline size, block size sets the value of height by default.

CSS attributes that are not common but very practical