Experiment notes on new CSS features.

aspect-ratio

Aspect-ratio Sets the aspect ratio of a block-level element.

grammar

aspect-ratio: auto | <ratio>;
Copy the code

Example:

<style>
  .e-0 {
    width: 100px;
    aspect-ratio: 1/1;
  }
</style>

<div class="e-0">Test</div>
Copy the code

When only width or height is set, unset dimensions are scaled.

usage

The contents are high above the container

When the content height pushes the container height, the proportion is not maintained.

Example:

<style>
  .e-1 {
    width: 100px;
    aspect-ratio: 1/1;
  }
</style>

<div class="e-1">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
Copy the code

If you want to maintain the ratio, you can set min-height: 0.

Example:

<style>
  .e-2 {
    width: 100px;
    aspect-ratio: 1/1;
    min-height: 0;
  }
</style>

<div class="e-2">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
Copy the code

Maximum width and maximum height

When content is small, aspect-ratio driven size changes cannot exceed max-width or max-height.

Example:

<style>
  .e-3 {
    width: 100px;
    aspect-ratio: 1/1;
    max-height: 50;
  }
</style>

<div class="e-3">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
Copy the code

If the content is large, the ratio is not maintained.

Example:

<style>
  .e-4 {
    width: 100px;
    aspect-ratio: 1/1;
    max-height: 50;
  }
</style>

<div class="e-4">Test Test Test Test</div>
Copy the code

reference

• MDN

backdrop-filter

The Context-backdrop filter allows you to apply a filter to the underlying elements that are covered by elements.

grammar

backdrop-filter: none | (<svg-filter-url> | <filter-function>)+;
Copy the code

The value of the filter attribute used is the same as that of filter.

usage

Frosted glass

One common use is the ground-glass effect.

Example:

<style>
  .front {
    background-color: hsla(0.100%.100%.0.5);
    backdrop-filter: blur(4px);
  }
</style>

<div class="behind">
  <div class="front"></div>
</div>
Copy the code

Note that in order for the lower pixel to appear, the opacity of the upper element, such as the transparent background, needs to be set to less than 1. However, you cannot use opacity because it affects the Backdrop filter itself (creating a new stack context).

box-decoration-break

Box-ornament-break sets the effect of the break on the line feed.

grammar

box-decoration-break: slice | clone;
Copy the code

Value:

• Slice: Default value. Truncation.
• Clone: replication effect.

The properties it affects are:

• margin
• padding
• border
• border-image
• background
• box-shadow
• clip-path

usage

Duplicate frame

The borders of in-line elements are truncated at the end of the line, and box-ornament-break allows each line to be rendered independently of the border.

<style>
  .e-0 {
    border: 1px solid lightgray;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>

<div class="container">
  <span class="e-0">Test Test Test Test Test Test Test Test Test </span>
</div>
Copy the code

clip-path

Clip-path is used to create a mask so that only part of the element is visible.

grammar

clip-path: none | <basic-shape> | <svg-clipPath-url>;
Copy the code

Attribute values can be roughly divided into two categories:

• The shape function
• The clipPath element for SVG

usage

The shape function

Shape functions include:

• An inset: margin
• Circle, circle
• The ellipse: ellipse
• Polygon: indicates a polygon
• Path: the path

Each has different parameters. For details, see MDN.

For example, polygon defines a polygon. For example:

<style>
  img {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }

  .back {
    opacity: 0.5;
  }
  .front {
    clip-path: polygon(0 0.100% 50%.0 100%);
  }
</style>

<img class="back" />
<img class="front" />
Copy the code

The clipPath element for SVG

Example:

<style>
  img {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }

  .back {
    opacity: 0.5;
  }
  .front {
    clip-path: url(#svg-clip-path);
  }
</style>

<img class="back" />
<img class="front" />

<svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="svg-clip-path">
      <path d=M 0,0 L 100,50 L 0 100 Z />
    </clipPath>
  </defs>
</svg>
Copy the code

Note that the reference frame for the path is the IMG element to which clip-path is applied. So the attribute of the PATH element here refers to the size of the IMG element, not the viewBox of the SVG element.

conic-gradient

Conic-gradient provides angular gradient for properties such as background.

grammar

conic-gradient( [ from <angle> ]? [ at <position> ]? , <angular-color-stop-list> )
Copy the code

The values are divided into three sections: start Angle (optional, default 0), center position (optional, default 50% 50%), and color breakpoint.

Each color breakpoint has three values: color, start Angle (optional), and stop position (optional).

usage

The color wheel

Continuous color changes can make a color wheel.

Example:

<style>
  .e-0 {
    width: 200px;
    height: 200px;
    background-image: conic-gradient(
      from 0 at 50% 50%.hsl(0.100%.50%),
      hsl(59.100%.50%),
      hsl(119.100%.50%),
      hsl(179.100%.50%),
      hsl(239.100%.50%),
      hsl(299.100%.50%),
      hsl(359.100%.50%));border-radius: 50%;
  }
</style>

<div class="e-0"></div>
Copy the code

Color piece

Mutated colors can be used to make color blocks.

Example:

<style>
  .e-1 {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-image: conic-gradient(
      from 0 at 50% 50%.hsl(0.100%.50%) 0 25%.hsl(59.100%.50%) 25% 50%.hsl(179.100%.50%) 50% 75%.hsl(299.100%.50%) 75% 100%
    );
  }
</style>

<div class="e-1"></div>
Copy the code

mix-blend-mode

Mix-blend mode controls how an element mixes colors with its underlying elements.

grammar

<blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Copy the code

The available values are:

• Normal: normal
• The six is made of multiply
• Screen: the screen
• Superposition of overlay:
• Darken: get dark
• Lighten: brighten
• Color-dodge: color dodge
• Color-burn: Color burn
• Hard – light, light
• Soft, light, light
• Difference: the difference
• Exclusion: eliminate
• Hue: hue
• Saturation: saturation
• Color: color
• Luminosity: brightness

The effect is:

usage

Isolation layer

To exclude a color from the mix, set isolation: ISOLATE.

object-fit

Object-fit controls how the contents of a replaceable element (such as img) are laid out relative to the container, similar to the background-size attribute.

grammar

object-fit: fill | contain | cover | none | scale-down;
Copy the code

The meanings of values are as follows:

• Fill: fill. The default value. The content size is the same as the container size, without maintaining proportions.
• It contains three major sections. Content and container width and height are the same, display the full content, maintain the proportion.
• Cover: Cover. Content fills the container, does not necessarily show the entire content, and maintains proportion.
• None: no. Content for original size, position ratio.
• Scale-down: reduces the value. Contain one of the smaller forms of none and Contain.

usage

size

Example:

<style>
  img {
    width: 300px;
    height: 300px;
    background-color: deepskyblue;
  }
  .fill {
    object-fit: fill;
  }
  .contain {
    object-fit: contain;
  }
  .cover {
    object-fit: cover;
  }
  .none {
    object-fit: none;
  }
  .scale-down {
    object-fit: none;
  }
</style>

<img class="fill" />
<img class="contain" />
<img class="cover" />
<img class="none" />
<img class="scale-down" />
Copy the code

From left to right: fill, contain, cover, none, scale-down

location

Like the background-position attribute, the object-position attribute controls the position of the content in the container.

Grammar:

object-position: [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom |
  <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> |
  <percentage>;
Copy the code

overscroll-behavior

Overscroll-behavior controls the effect when a scroll area continues to scroll beyond its bounds. It can be set to allow ancestor elements to continue scrolling or stop scrolling.

grammar

overscroll-behavior: [ contain | none | auto ]{1.2};
Copy the code

Value:

• Auto: The default value. Scroll to the edge and continue to scroll to the outer scrollable container.
• Contain: The default scroll overflow will only be contained within the current element (such as the “bounce” effect or refresh), and will not scroll through adjacent scroll areas. For example, create a floating layer that scrolls (with an elastic effect), but the elements on the bottom layer do not scroll.
• None: Adjacent scroll areas do not scroll and default scroll overflow is prevented.

scroll-behavior

Scrollbehavior controls the dynamic effects of scrolling triggered by navigation (such as hash) or the CSSOM scrolling API (such as window.scrollto).

grammar

scroll-behavior: auto | smooth;
Copy the code

Value:

• Auto: The default value. Immediately jump
• “Smooth” : smooth scrolling

scroll-snap-type

Properties sroll-snap-type, scroll-snap-align, scroll-padding, and scroll-margin control the adsorption behavior during rolling.

usage

Sroll-snap-type and scroll-padding are used for container elements, while scroll-snap-align and scroll-margin are used for content elements.

sroll-snap-type

Sroll-snap-type Sets the adsorption behavior, that is, the rolling direction in which the adsorption is performed and the adsorption mode.

Grammar:

sroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]? ;Copy the code

Example (Y-axis roll precise adsorption) :

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
Copy the code

ul {
  scroll-snap-type: y mandatory;
}
Copy the code

scroll-snap-align

Scroll-snap-align is used to set the position of content elements relative to container elements during adsorption, that is, how to align content elements. There are three kinds of values:

• Start: Header alignment
• Center: Center alignment
• End: Tail alignment

Example (middle aligned) :

li {
  scroll-snap-align: center;
}
Copy the code

Scroll – padding and scroll – margin

Scroll-padding is set on the container element to indicate the spacing between the container element and the content element during adsorption. Scroll margin is set on the content element, indicating the distance between the content element and the container element during adsorption. Both are compound properties containing top, right, bottom, and left.

shape-outside

Control the wrapped shape of the contents of an element that is outside of the element and can generate irregular shape layouts.

grammar

clip-path: none | margin-box | padding-box | border-box content-box | | <basic-shape> | <image>;
Copy the code

usage

The box model

Different box model parameters set the range of the element shape of the box body, and the general shape is affected by border-RADIUS.

The external shape of an element without shape-outside is rectangle. Example:

<style>
  main {
    width: 400px;
    height: 400px;
  }
  div {
    float: left;
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
    border: 20px solid deepskyblue;
    border-radius: 50%;
    background-color: deepskyblue;
    background-clip: content-box;

    shape-outside: none;
  }
</style>

<main>
  <div></div>
  <span>The story of small yellow flowers Swing from birth floating at the age of childhood Along with the memory has been to present Re So Si Do So La Si Si Si Si Si La La Si La So blowing a prelude Looking at the sky I think of petals try to fall for you skip class that day Spend the day The one classroom How do I see disappeared in the rainy day I really want to rain again Didn't expect to lose courage I had really want to ask again Will you wait or leave and windy day I tried to hold your hand But it happened that the rain is becoming too big to I see you not see how long I will be by your side until the sunny day Maybe I'll be more better Once upon a time there was a person who loved you for a long time, but it happened that the wind gradually blew the distance well far, it was not easy to love one more day, but at the end of the story, you seem to say goodbye</span>
</main>
Copy the code

The blue ring represents border, the blue ring is margin, the white ring is padding, and the blue circle is content.

The effect of adding the box model properties is:

• Margin – the box:

• Border – box:

• Padding – box:

• The content – the box:

The shape function

Use the shape function to define irregular outer shapes.

Example:

shape-outside: polygon(0 0.100% 50%.0 100%);
Copy the code

The opacity

Opacity can also affect external shapes, such as the opacity of an image or the opacity of the background.

Example:

--gradient: linear-gradient(to right bottom, deepskyblue, transparent 50%, transparent 100%);
shape-outside: var(--gradient);
background: var(--gradient);
Copy the code

The shape-image-threshold attribute controls the opacity threshold at the boundary. The default value is 0, that is, the shape boundary is completely transparent.

Example:

shape-image-threshold: 0.5;
Copy the code

Shape margin

Shape-margin controls the distance between the content of external row elements and the shape, similar to margin, but the scope of shape-margin does not exceed the maximum scope of the box model.

text-align-last

Text-align -last controls the alignment of the last line of text.

grammar

text-align-last: auto | start | end | left | right | justify;
Copy the code

usage

Align both ends of a single line

Because setting text-align: justify has no effect on the last line of text, using text-align does not achieve alignment when there is only one line of text.

You can set text-align-last: justify to align the last line of text. Example:

<style>
  .justify {
    text-align: justify;
    text-align-last: justify;
  }
</style>

<div class="justify">The little yellow flower of the story has been floating since the year of birth</div>
Copy the code

directory

• text-align-last