Unpopular and easy-to-use CSS features

1. Multi-column Layout

MDN - CSS Multi-column Layout

Can I Use - CSS3 Multi-column Layout

CSS provides support for multi-column layouts. Support columns disposed layout ( column-count ), the flow rule how the content should be included between the spacing (between columns column-gap ) and the column division lines ( column-rule style) of.

For example, the following waterfall effect can be achieved:

Codepen demo

main styles:

.masonry {
  width: 1440px;
  margin: 20px auto;
  columns: 4;
  column-gap: 30px;

  .item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;

    img {
      width: 100%;
    }
  }
}

2. Writing Modes

MDN - CSS Writing Modes

Can I Use - CSS writing-mode property

Writing Modes defines various international writing modes, such as left-to-right (Latin, Indian), right-to-left (Hebrew, Arabic), bidirectional (mixed left-to-right and right-to-left Language) and vertical (Chinese).

The following is a display of three writing methods:

Codepen demo

key style:

.left-to-right {
  direction: ltr;
}

.right-to-left {
  direction: rtl;
}

.vertical {
  writing-mode: vertical-rl;
}

Or, it can be used to implement a code rain of The Matrix:

Codepen - Matrix code rain

3. aspect-ratio attributes

MDN - aspect-ratio

Can I Use - CSS property: aspect-ratio

aspect-ratio property of CSS is used to set the preferred aspect ratio of the element, which can automatically calculate the width, height and other layout functions, eliminating the need to calculate the width and height at the same time.

For example, a video website can set the video playback window ratio to 16/9:

Codepen demo

key style:

.video-box {
  width: 70vw;
  background-color: #000;
  aspect-ratio: 16/9;
}

4. gap attributes

MDN - gap

Can I Use - gap property for Flexbox

gap property of CSS is used to set the spacing between rows and columns during flex and grid layout. It is the abbreviation row-gap and column-gap

In the past, when using flex layout, margin and padding were often used to control the interval between flex items. gap would be more convenient to use 061ceb9bdcb2dc.

for example:

<div class="flex-box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.flex-box {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  width: 120px;
  height: 60px;
  background-color: c·rimson;
}

Codepen demo

5. CSS Shapes

MDN - CSS Shapes

Can I Use - CSS Shapes Level 1

CSS Shapes are used to describe the geometric shapes of elements. The regular shape of an element is a rectangle. Using CSS Shapes, you can define an element as a circle, ellipse, or polygon.

For the Level 1 specification, CSS Shapes can be applied to floating elements. The specification defines different methods to define shapes on floating elements.

For example, to achieve the effect of the following text surrounding a circular picture:

Codepen demo

key style:

img {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

6. object-fit attributes

MDN - object-fit

Can I Use - CSS3 object-fit/object-position

object-fit attribute is used to set replaced element (for example, <img> or <video> ) adapts to the size of its container.

For example, to adjust the display of a picture in the container:

Codepen demo

7. filter attributes

MDN - filter

Can I Use - CSS Filter Effects

The filter property of CSS applies image effect adjustments (blur, contrast, grayscale, hue, etc.) to elements. filter is usually used to adjust the rendering of images, backgrounds and borders.

For example, on the National Memorial Day every year, many websites will adjust the color to black and white. You can do it with a line of code filter

8. backdrop-filter attributes

Similar to filter , the backdrop-filter attribute applies graphic effects (such as blur or color shift) to the background area of the element. Because it applies to all the content behind the element, you need to set the element or its background to at least partly transparent to see the effect.

MDN - backdrop-filter

Can I Use - CSS Backdrop Filter

For example, you can use it to make a frosted glass effect:

Codepen demo

key code:

<div class="box">
  <p>
    If I know what love is
    <br />it is because of you
  </p>
</div>

.box {
  background: url(../images/roses.jpg) no-repeat;
}

p {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  color: white;
}

9. conic-gradient() function

MDN - conic-gradient()

Can I Use - conic-gradient()

linear-gradient() with the 061ceb9bdcb88a function in CSS. In addition, there are radial-gradient() and conic-gradient() in the gradient family. For more types, please refer to MDN-gradient .

conic-gradient() function creates an image that is composed of gradient colors with colors rotating around the center point (rather than radiating from the center).

For example, a common gradient color dashboard chart can be drawn conic-gradient()

Codepen demo

10. accent-color attributes

MDN - accent-color

Can I Use - CSS property: accent-color

accent-color property of CSS is used to set the accent color of UI controls generated by certain elements. For example, the color checkbox and radio controls generated by the <input>

For example, change the accent color of the following elements:

Codepen demo

key code:

<input type="checkbox" class="checkbox" checked />
<input type="radio" class="radio" checked />
<input type="range" class="range" />
<progress value="70" max="100" class="progress">70%</progress>

.checkbox {
  width: 40px;
  height: 40px;
  accent-color: crimson;
}

.radio {
  width: 40px;
  height: 40px;
  accent-color: dodgerblue;
}

.range {
  width: 200px;
  accent-color: lawngreen;
}

.progress {
  width: 200px;
  accent-color: coral;
}

11. Scroll Snap

MDN - CSS Scroll Snap

Can I Use - CSS Scroll Snap

CSS Scroll Snap introduces the capture of the scroll position, which enforces the position where the scroll port of the scroll container may end after the scroll operation is completed.

For example, I want to make the end of each scroll stop at the beginning of the next element to achieve the effect of scrolling and turning pages:

Codepen demo

key code:

<article class="scroller">
  <section>
    <h2>Page one</h2>
  </section>
  <section>
    <h2>Page two</h2>
  </section>
  <section>
    <h2>Page three</h2>
  </section>
  <section>
    <h2>Page four</h2>
  </section>
</article>

.scroller {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

section {
  scroll-snap-align: start;
}

12. overscroll-behavior attributes

MDN - overscroll-behavior

Can I Use - CSS overscroll-behavior

overscroll-behavior property of CSS is used to define the behavior when the element scrolls to the border of the scrolling area. It is overscroll-behavior-x and overscroll-behavior-y .

The default behavior of the browser is: when the child element scrolls to the boundary, continue to scroll the mouse, it will trigger the scroll of the parent element. This behavior is called scroll chaining . Many times we don't need this behavior. For example, when we scroll the content in a pop-up window, we don't want the following pages to also scroll. This behavior can be modified by setting overscroll-behavior:contain , without the need to monitor the scroll event to prevent bubbling.

example : Codepen demo

Well, there are so many that can be thought of at the moment, I hope it will be helpful for everyone to draw pages more efficiently and elegantly😀!