7 things you didn't know you could do with css

Believe it or not, CSS and JavaScript are starting to overlap, just as CSS is adding more features. When I wrote "5 Ways CSS and JavaScript Influence Each Other You May Not Know", people were surprised at how overlapping JavaScript and CSS are. 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 in front of developers, [email protected] A simple example of how it works:

/* 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 been expired , we look forward to using it soon!

　CSS Filters

　Write a service that changes the tint of an image and 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.

/* 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 said filter is not used when saving or exporting the image, but it is very useful when you need to beautify the photo or process the poster.

　Pointer Events and Bricking Clicks

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

/* 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 example above , 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!

/* 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 Internet, 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:

/* 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 Names

There are many CSS best practice documents, and they all start with how to name CSS styles. You will never see documentation that says to name your styles using unicode symbols:

.

ಠ_ಠ {
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 triangle is a technical job, and the same is true for CSS circle. By abusing CSS border-radius, you can create perfect circles!

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.