Share some amazing examples of what CSS can do_Experience exchange-CSS Tutorial-php.cn

Share some amazing examples of what CSS can do_Experience exchange

WBOY

Release： 2016-05-16 12:03:35

Original

1503 people have browsed it

When I wrote the article "5 ways to interact with JavaScript and CSS that you may not know", what did people think about JavaScript and CSS? Overlapping surprised. Today, I’m going to highlight 7 things you can do with CSS—without JavaScript or images.

CSS@supports

Every good front-end developer needs to conduct feature testing when using features that may not be available in some browsers. Feature testing has always been done in JavaScript, and many people use Modernizr, an excellent utility made of many well-tested cases, to do feature testing. A new API: @supports, anyway, has appeared for developers, which allows you to do feature testing with CSS. Here are some simple examples of how @supports work:

Copy code The code is 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;
}
}

This new @supports feature also has a corresponding JavaScript version, but it has expired. We look forward to using it soon!

CSS filter

Write a service that changes the color tone of images, and then you can sell it to Facebook for billions of dollars. Sure, that's a no-brainer, but writing image filters is not a science. A small program I wrote in my first week at Mozilla (won an award, eh, I'm just saying it) used some JS-based math to create image filters using canvas, but now we can create images using CSS Filtered.

Copy code 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 just changes the original appearance of the image. The filter is not used when saving or exporting the image, but it is very useful when you need to beautify a photo or process a poster.

　Pointer Events and Bricking Clicks

The CSS Pointer Events property provides a way to effectively disable an element. Because of this, clicking a link will not trigger a click event via JavaScript:

Copy code 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 above example, the click event will not fire due to the CSS pointer-events value. I've found this to be a huge benefit, you don't need to check className or attributes everywhere to make sure some element is disabled.
　
　Collapse and expand menu

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 the folding and expanding menu effect. Many people don’t know that it can be achieved using only CSS!

Copy code The code is as follows:

/* slider in 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;
}

A clever use of Max-height can allow elements to collapse and expand according to the desired effect.

　CSS Counter

The term “counter” often makes us giggle at what it means on the web, but CSS counters are another thing that makes us giggle even more. CSS counters allow developers to increment a counter on a specified element using :before and :after:

Copy code 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 CSS counters used in slideshow effects and lists like form content.

　Unicode CSS style name

There are many CSS best practices documents, and they all start with how to name CSS styles. You will never see a document that says to use unicode symbols to name your styles:

Copy code The code is as follows:

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

.❤ {
background: lightgreen;
border: 1px solid green;
}

Please do not use these symbols. Unless you can!

　CSS Circle

The CSS triangle is a technical job, and the same is true for the CSS circle. By abusing CSS border-radius, you can create perfect circles!

Copy code 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 gradients to your circles, and you can even use CSS animations to make your circles move! CSS is about to have more unified APIs for these shapes, but for now you can create circles this way.

There you have it, 7 things you can do with CSS that will surprise you, some of which are very useful, and some of which you don’t need at work. Please tell me if I'm missing some great CSS methods at work that you regularly use.