7 things you don't know but you can do with CSS

Whether you believe it or not, CSS and JavaScript begin to overlap, just as CSS adds more functionality. When I wrote the article "5 ways that you might not know about CSS and JavaScript interacting with each other", people were amazed at how JavaScript and CSS overlapped. Today, I'll focus on 7 kinds of work that you can do with CSS-no javascript or pictures.

Css@supports

When using features that some browsers might not have, every good front-end developer needs to perform a feature test. Feature testing has always been done by JavaScript, and many people use Modernizr, a great utility made up of many well-tested cases, to do feature testing. A new API: @supports, anyway, has appeared in front of developers, [email protected] A simple example of what work:

/* 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) {    SE ction {      display:-webkit-flex;      Display:-moz-flex;    Display:flex;    Float:none;}    }

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

CSS Filters

Write a service to modify the hue of the picture, and then you can sell it to Facebook for $ billions of. Of course, that's a 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 (won the award, the sum, I just casually say it) used some JS-based math with canvas to create image filters, but now we can use CSS to create image filters.

/* 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 way it looks, and it doesn't use the filter when you save or export the image, but it works well when you need to beautify or manipulate 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:

/* do nothing when clicked or activated */.disabled {pointer-events:none;} /* This would _not_ fire because of the Pointer-events:none application */document.getelementbyid ("Disabled-element"). Add EventListener ("click", Function (e) {alert ("clicked!");});

In the above example, the Click event will not be triggered because of the CSS pointer-events value. I've found a huge role in it, and you don't need to check every classname or property to make sure some elements are disabled.

Collapse, expand Menu

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

/* 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 allows elements to be folded and unfolded as desired effects.

CSS Counters

The meaning of 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 using: Before and: After to the specified element:

/* 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 being 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 start with how to name CSS styles. You're never going to see a document say it. Use Unicode notation to name your style:

.

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

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

CSS Circle

CSS triangles are a technical work, and so are CSS circles. By abusing CSS Border-radius, you can create a perfect circle!

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 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.

