Consejo rápido agregue un archivo CSS @supports a sus demostraciones de CodePen

Cuando las demostraciones de CodePen se basan en CSS de vanguardia, es una buena idea advertir a las personas. Proporcionemos una notificación cuando los navegadores no sean compatibles con nuestras demostraciones, utilizando el @apoyo Regla para hacer un útil CodePen reutilizable.

Resultado final

Esto es para lo que estamos trabajando; una notificación reutilizable para resaltar CSS no compatible. Se mantendrá casi por completo en su propio bolígrafo, que podemos agregar a otras demostraciones a través de un CSS externo enlazar:

Descubrirá que lo usamos en Tuts + para tutoriales de CSS como los siguientes: 

• 

  Mejores CSS Drop Caps con "letra inicial"

  Las mayúsculas son una forma de decoración que a veces se usa al principio de un bloque de texto; La letra inicial corre varias líneas de profundidad y sangra el cuerpo ...
• 

  Divirtiéndose con el CSS de mañana: Filtros de fondo

  En este tutorial veremos un juguete CSS emergente con el nombre de "Filtro de fondo".

La regla @supports

CSS @supports Ha existido por algunos años y goza de un soporte de navegador bastante decente. Nos permite realizar consultas de características, aplicar CSS solo si las propiedades especificadas son compatibles con el navegador en ese momento. Esto evita las reglas de estilo a mitad de ejecución e incluso nos permite mostrar una advertencia si nos apetece.

Funciona envolviendo declaraciones de estilo en una condición, como esta:

@supports (display: grid) div / * cuando se admite CSS Grid, haga algo * /

Notificaciones

Vamos a preparar un par de notificaciones rápidas:

Estamos agregando el contenido textual a través de un pseudo elemento Para que podamos controlarlo desde un solo lugar. Estas etiquetas se utilizarán en última instancia en muchas demostraciones, por lo que mantener el contenido separado significa que podemos cambiarlas todas de una vez..

.support-initial-letter :: after content: "✋🏼 Aguanta, vaquero; la letra inicial no es compatible con tu navegador"; 

Siéntete libre de estilizar estos como quieras..

Añadiendo la condición @supports

Nuestras notificaciones son visibles por defecto, pero solo queremos que se muestren cuando sus propiedades respectivas no son soportado. Agreguemos una condición para hacer eso:

@supports (letra inicial: 1) o (-webkit-initial-letter: 1) .support-initial-letter :: after display: none; 

Aquí estamos diciendo “Si se admite la letra inicial o -webkit-initial-letter, no se muestre la notificación de .support-initial-letter”.

Luego repetimos esto para cada una de las notificaciones, dándonos la siguiente pluma terminada:

¿Cuántas notificaciones puedes ver??

Reutilización como un activo CodePen externo

Con nuestro bolígrafo guardado, podemos hacer referencia a él desde otros bolígrafos, lo que nos brinda un activo externo súper útil. Agréguelo a una nueva pluma como un archivo CSS externo:

Esto solo incluirá el CSS, ignorando cualquier HTML o JS que tengamos allí, así que ahora agregue cualquier elemento de notificación que necesite al HTML de su nueva pluma:

Y eso es todo, listo! Cada vez que actualice su pluma @supports, esos cambios se reflejarán en todas las demostraciones en las que lo haya usado..

Conclusión

Notarás una gran cantidad de CodePenners de vanguardia utilizando un @supports notificación en sus bolígrafos; Jen Simmons lo hace, Rachel Andrew lo hace, y nosotros lo hacemos. Poner sus estilos de notificación en un bolígrafo externo es la manera perfecta de administrar las cosas mientras mantiene su marca reluciente y limpia. Actualice los mensajes, agregue nuevas propiedades CSS, aplique la marca de temporada, ¡enloquece! Háganos saber cómo lo usa @supports en los comentarios.

Recursos adicionales

• Detección de características CSS: Modernizr o Consultas de características?
  
• @supports en MDN
• Agregar recursos externos en CodePen