CSS can do a few of your amazing examples to share _ experience Exchange

When I wrote the article "5 ways you might not know about JavaScript and CSS interaction," people were amazed at how JavaScript and CSS overlapped. Today, I will focus on the 7 kinds of work you can do with CSS-no need for JavaScript or graphics.

Css@supports

When using features that some browsers may not have, every good front-end developer needs to perform feature testing. Feature testing has always been done by JavaScript, and many people use Modernizr, an excellent utility made up of a number of well tested cases, for feature testing. A new API: @supports, anyway, has appeared in front of developers, it allows you to use CSS to do feature testing. Here are some simple examples of how @supports works:

Copy Code code as follows:

/* Basic Usage * *
@supports (Prop:value) {
* More Styles * *
}

/* Real Usage * *
@supports (Display:flex) {
div {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;
}
}

The new @supports feature, which also has a corresponding JavaScript version, has expired and we look forward to using it early!

CSS Filters

Write a service to change the tone of the picture, and then you can sell it to Facebook for billions of dollars. Of course, that's a very simple thing to do, but it's not a science to write image filters. I went to Mozilla's first week to write a small program (got the prize, well, I'm just saying) using some JS based math with canvas to create image filters, but now we can create image filters with CSS.

Copy Code code 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 just changes the image as it is, saving or exporting the image without using the filter, but it works well when you need to beautify or process the poster.

　　POINTR Events and bricking clicks

The Pointr Events property of CSS provides a way to effectively disable an element, and because of this, clicking a link through JavaScript does not trigger a click event:

Copy Code code as follows:

/* Do no when clicked or activated * *
. Disabled {Pointer-events:none} /* This'll _not_ fire because of the pointer-events:none application * *

document.getElementById ("Disabled-element"). AddEventListener ("click", Function (e) {
Alert ("clicked!");
});

In the above example, the Click event will not be triggered because of the reason for the CSS pointer-events value. I've found that it's a huge effect, you don't have to check classname or attributes everywhere to make sure some elements are disabled.
　　
　　Collapse, expand Menu

CSS allows us to create transition effects and animations, but many times we need JavaScript libraries to help us modify something and control animations. A very popular animation is folded, expand the menu effect, many people do not know only with CSS can be achieved!

Copy Code code as follows:

/* Slider in the open state */
. Slider {
Overflow-y: Hidden;
max-height:500px; /* Approximate max Height * *

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

/* Close it with the "Closed" class * *
. slider.closed {
max-height:0;
}

An ingenious use of max-height allows elements to be folded and unfolded as desired.

　　CSS Counters

The term "counter" on the web often makes us giggle, but the CSS counter is another thing that makes us giggle. CSS counters allow developers to add a counter to the specified element: Before and:

Copy Code code 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 CSS counters that are used on slide effects, and on lists like the contents of a form.

　　Unicode CSS style name

There are many CSS best practice documents, all of which are started by naming CSS styles. You'll never see a document. Name your style in Unicode notation:

Copy Code code as follows:

. ಠ_ಠ{
border:1px solid #f00;
Background:pink;
}

. ❤{
Background:lightgreen;
border:1px solid Green;
}

Please don't use these symbols. Unless you can do it!

　　CSS Circle

CSS triangles are a technical activity, as are CSS circles. By abusing CSS Border-radius, you can create a perfect circle!

Copy Code code 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 animations to get your circle moving! CSS is about to have more unified APIs available to these graphs, but now you can use this method to create a circle.

You see, 7 things you can do with CSS to surprise you, some of which are useful, some can not be used in the work. Please tell me if I have omitted some of the excellent CSS methods that you often use in your work.