7 cosas que no sabías que podías hacer con CSS -

CSS y JavaScript, lo creas o no, están empezando a superponerse a medida que CSS agrega más funciones. Cuando escribí5 formas en que CSS y JavaScript interactúan que quizás no conozcas, la gente se sorprenderá de cómo CSS y JavaScript se superponen. Hoy destacaré siete tareas que puedes realizar con CSS: ¡no se requiere JavaScript ni imágenes!

CSS @soportes

Todo buen desarrollador front-end prueba las funciones antes de utilizar funciones que un navegador puede no tener. Las pruebas de funciones siempre se han realizado con JavaScript, y mucha gente usa Modernizr, una utilidad impresionante repleta de un montón de rutinas bien probadas, para realizar esas pruebas de funciones. Sin embargo, ha aparecido una nueva API que le permite realizar pruebas de funciones con CSS:@supports. Aquí hay algunos ejemplos de cómo @supportsfunciona:

/* uso básico */@supports(prop:value) {/* más estilos */}/* uso real */@supports (display: flex) {div { display: flex; }}/* probando prefijos también */@supports (display: -webkit-flex) o (display: -moz-flex) o (display: flex) { sección { display: -webkit-flex; mostrar: -moz-flex; pantalla: flexible; flotador: ninguno; }}

Esta nueva @supportscaracterística, que también tiene una contraparte de JavaScript, está muy retrasada y ¡esperamos poder usarla pronto!

Filtros CSS

¡Crea un servicio para modificar los tonos de color de una imagen y podrás venderla a Facebook por mil millones de dólares! Por supuesto, eso es una simplificación excesiva, pero escribir filtros de imágenes no es exactamente una ciencia. Escribí una pequeña aplicación mi primera semana en Mozilla (que ganó un concurso, por cierto… solo digo) que usaba algunas matemáticas basadas en JS para crear filtros de imágenes con lienzo, ¡pero hoy podemos crear filtros de imágenes solo con CSS!

/* filtro simple */.myElement {-webkit-filter: desenfoque(2px);}/* filtro avanzado */.myElement {-webkit-filter: desenfoque(2px) escala de grises (.5) opacidad(0.8) rotación de tono (120 grados);}

Este tipo de filtrado solo enmascara la vista original de una imagen y no guarda ni exporta la imagen con dicho filtro, ¡pero es excelente para galerías de fotos o cualquier otro lugar donde desees agregar brillo a una imagen!

Eventos de puntero y clics de bloqueo

La propiedad CSS pointer-eventsproporciona un método para deshabilitar efectivamente un elemento, hasta el punto de que los clics en un enlace no activan un evento de clic a través de JavaScript:

/* no hacer nada cuando se hace clic o se activa */.disabled { pointer-events: none; }

/* esto _no_ se activará debido a los eventos de puntero: ninguna aplicación */document.getElementById("disabled-element").addEventListener("click", function(e) {alert("Clicked!");});

In the example above, the click event wont even fire due to the CSS pointer-events value. I find this of massive utility as you don’t need to do className or attribute checks everywhere to see if something is disabled.

View Demo

Slide Down Slide Up

CSS affords us the ability to create transitions and animations but oftentimes we need JavaScript libraries to give us a hand in modifying a few things and controlling the animation. One such popular animation is theslide up andslide down effect, which most people don’t know can be accomplished with 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 allows theelement to grow and shrink as needed.

View Demo

CSS Counters

We’ll always have a giggle at whatthe term “counter” means on the internet, butCSS counters are another thing entirely. CSS counters allow developers to increment a counter and display it via :before or :after for a given 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 used in slideshows at conferences and even in lists like a table of contents.

View Demo

Unicode CSS Classes

There are loads ofCSS best practice documents out there, and they’ll all start with how to name your CSS classes. What you’ll never see is one of those documents telling you to useunicode symbolsto name your classes:

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

Please don’t use these. Please. BUT YOU CAN!

View Demo

CSS Circles

CSStriangles are a neat trick but so areCSScircles. By abusing CSS border-radius, you can create flawless 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 circlesandyou can even use CSS animations to spin them around! CSS has a moreuniform API for Shapes coming but you can create circles with this hack now!

View Demo

There you have it: seven things you can do with CSS that you may be surprised at. A few are quite useful, a few are more edge cases. Let me know if I’ve missed an awesome CSS task that you use frequently!