Hace una semana leyendo una web descubro una nueva librería Javascript para incrustar los gráficos de Can I Use en nuestro páginas web. Para aquellos que no conozcan esta web es una página que muestra en tablas el soporte que dan los distintos navegadores a las tecnologías de Frontend tanto en escritorio como en móviles. Luego de leer el artículo se me ocurrió la idea de convertirlo en un plugin para WordPress aunque como es habitual ya existía: Embed Can I Use desarrollado por Geoffrey Crofte.

embed can i use plugin

Instalación y configuración

No tiene gran historia, se instala el plugin como cualquier otro en nuestro WordPress y no tiene ningún pantalla de configuración ya que solo configura un shortcode para nuestros post/páginas.

Instalación de embed can i use plugin

Uso del plugin

Como he comentado en el punto anterior este plugin configura por código un shortcode para que podamos utilizarlo en nuestros posts o páginas. La sintaxis del shortcode es la siguiente:

[ciu_embed feature="<Nombre del atributo>" periods="<-2,-1,current,+1,+2>"]

feature: Aquí debemos especificar el funcionalidad que queremos graficar.
periods: Aquí se debe especificar las versiones de los navegadores que queremos incluir en la tabla. Posibles valores:

  • Versión actual (obligatorio): current
  • Versiones futuras: +3, +2 y +1
  • Versiones anteriores: -3, -2 y -1

¿Cómo puedo saber el nombre de la feature?

Primero debemos buscar la funcionalidad en la página de caniuse.com y veremos que la URL agrega un # con el nombre de la característica. Ese es el valor que debemos agregar en el shortcode.

can i use embed feature
Debemos tomar el valor de la feature de la URL de la web.

Ejemplos:

Si agregamos en nuestro post o página el siguiente shortcode con la funcionalidad flexbox de CSS junto a todos los navegadores:

[ciu_embed feature="flexbox" periods="-3,-2,-1,current,+1,+2,+3"]

obtendremos el siguiente resultado:
[ciu_embed feature=»flexbox» periods=»-3,-2,-1,current,+1,+2,+3″]

Si indicamos el mismo atributo CSS pero sin navegadores:

[ciu_embed feature="flexbox"]

Obtenemos el siguiente resultado:
[ciu_embed feature=»flexbox»]

¿Agrega mucha carga Javascipt a nuestra página?

can i use embed javascript peso

El plugin agrega un solo Javascript (de 759 bytes) que está alojado en un CDN y que solo se carga cuando especificamos un shortcode en nuestros post o páginas, caso contrario no agrega ninguna carga extra a nuestra web.

can i use embed plugin enqueue

Video Resumen