How many examples of CSS can be used to share your experience?

Believe it or not, CSS and JavaScript begin to overlap, just as CSS adds more features. When I wrote the article "five ways to interact between JavaScript and CSS that you may not know", I was surprised how JavaScript and CSS overlap. Today, I will focus on seven types of work you can do with CSS-without JavaScript or images.

CSS @ supports

When using features that may not be available in browsers, each outstanding front-end developer needs to perform feature tests. The feature test has always been done by JavaScript. Many people use Modernizr, an excellent utility consisting of many good test cases, to perform the feature test. A new API: @ supports, which is already in front of developers, allows you to use CSS for feature testing. Here are some simple examples of how @ supports works:

The Code is as follows:

/* Basic usage */
@ Supports (prop: value ){
/* More styles */
}

/* Real usage */
@ Supports (display: flex ){
P {display: flex ;}
}

/* Testing prefixes too */
@ Supports (display:-webkit-flex) or
(Display:-moz-flex) or
(Display: flex ){

Section {
Display:-webkit-flex;
Display:-moz-flex;
Display: flex;
Float: none;
}
}

This new @ supports feature also has a corresponding JavaScript version, but it has expired and we are looking forward to using it early!

CSS Filter

Write a service to change the color of an image, and then you can sell it to Facebook for billions of dollars. Of course, it is very simple, but writing Image filters is not a science. I wrote a small program in the first week of Mozilla (I won the prize, I am just talking about it) and used some JS-based mathematics to Create Image filters using canvas, but now we can use CSS to Create Image filters.

The Code is as follows:

/* Simple filter */
. MyElement {
-Webkit-filter: blur (2px );
}

/* Advanced filter */
. MyElement {
-Webkit-filter: blur (2px) grayscale (. 5) opacity (0.8) hue-rotate (120deg );
}

This type of filter only changes the original image. It is useless to save or export the image, but it is useful when you need to beautify the photo or process the poster.

　　Pointr Events and Bricking Clicks

The Pointr Events attribute of CSS provides a method to effectively disable an element. Because of this, clicking a link through JavaScript does not trigger a click event:

The Code is as follows:

/* Do nothing when clicked or activated */
. Disabled {pointer-events: none;}/* this will _ not _ fire because of the pointer-events: none application */

Document. getElementById ("disabled-element"). addEventListener ("click", function (e ){
Alert ("Clicked! ");
});

In the preceding example, a click event is not triggered due to the CSS pointer-events value. I have discovered its great function. You do not need to check the className or attribute in every place to make sure that some elements have been disabled.
　　
　　Fold and expand menus

CSS allows us to create transition effects and animations, but many times we need JavaScript libraries to help us modify some things and control animations. A very popular animation is to fold and expand the menu effect. Many people do not know how to implement it with only CSS!

The Code is as follows:

/* Slider in open state */
. Slider {
Overflow-y: hidden;
Max-height: 500px;/* approximate max height */

Transition-property: all;
Transition-duration:. 5 s;
Transition-timing-function: cubic-bezr (0, 1, 0.5, 1 );
}

/* Close it with the "closed" class */
. Slider. closed {
Max-height: 0;
}

A clever use of Max-height allows elements to fold and expand as desired.

　　CSS counters

The concept of "counter" on the Internet often makes us giggle, but CSS counters are another thing that makes us giggle. CSS counters allow developers to use before and: after to add a counter:

The Code is as follows:

/* Initialize the counter */
Ol. slides {
Counter-reset: slideNum;
}

/* Increment the counter */
Ol. slides> li {
Counter-increment: slideNum;
}

/* Display the counter value */
Ol. slides li: after {
Content: "[" counter (slideNum) "]";
}

You often see that CSS counters are used on slide effects and lists like form content.

　　Unicode CSS style name

There are many best practices of CSS, which begin with how to name CSS styles. You will never see a document that uses unicode to name your style:

The Code is as follows:

. Rows _ rows {
Border: 1px solid # f00;
Background: pink;
}

.❤{
Background: lightgreen;
Border: 1px solid green;
}

Do not use these symbols. Unless you can!

　　CSS circle

CSS triangles are technically active, and CSS circles are the same. By abusing CSS border-radius, you can create perfect circles!

The Code is as follows:

Circle {
Border-radius: 50%;
Width: 200px;
Height: 200px;
/* Width and height can be anything, as long as they're equal */
}

You can add a gradient to your circle, and you can even use CSS animation to make your circle dynamic! CSS will soon have more unified APIs for these images, but now you can use this method to create circles.

As you can see, you are surprised by seven things you can do with CSS. Some of them are useful and some cannot be used at work. Please tell me if I have missed some excellent CSS methods that you often use at work.