Para usar las variables o propiedades personalizadas de css en sass hay que usar el comodín #{$nombre-variable-sass} para indicar el valor de la custom propertie como podemos ver en el siguiente ejemplo: // Variables SASS $color-bg: #f00; // :root { […]

Si usas el plugin Jetpack en tu WordPress y quieres eliminar del front el archivo jetpack.css que carga por defecto en el <head> de todas tus páginas… necesitas añadir este código php al archivo functions.php de tu tema: add_filter( 'jetpack_implode_frontend_css', […]

Código js para averiguar si tenemos activada la tecla «Bloq Mayus» en nuestro teclado, la cual activa el uso continuo de las letras mayúsculas, y puede que en algunos casos eso no nos interese. Un ejemplo en un input password: […]

Podemos usar la regla @media con pointer: coarse de css para detectar dispositivos con pantallas táctiles como pueden ser tablets o smartphones y en ese caso aplicar los estilos que necesitemos dentro. Un ejemplo: @media (pointer: coarse) { /* tus […]

Ejemplo CSS si quieres usar varias veces la pseudoclase :not() para un único selector que tiene diferentes atributos. input:not([type="radio"]):not([type="checkbox"]){ background: red; } div:not(.inner):not(.wrapper){ background: blue; }

CSS: efecto Marquee

Un ejemplo para conseguir un bonito efecto marquee usando solo CSS. Básicamente lo conseguimos repitiendo un par de veces el texto en el html, y usando una animación infinita CSS con translateX para mover el contenedor horizontalmente de inicio a […]

Ejemplo javascript para calcular el número de veces que pulsamos una determinada tecla de nuestro teclado usando el evento onkeyup y keyCode para obtener la tecla correspondiente. En el siguiente ejemplo vamos a contar el nº total de veces que […]

Si tienes un video html5 con autoplay y no se reproduce automáticamente en dispositivos iOS táctiles (iphone / ipad) comprueba que tenga los siguientes 3 atributos autoplay, muted y playsinline, ejemplo: <video width="320" height="240" autoplay muted playsinline> <source src="tu-video.mp4" type="video/mp4"> […]

Vanilla JS: on load

A continuación un par de formas de comprobar en JavaScript cuando se ha cargado la página completamente. Si quieres saber cuando se carga toda página, incluido su html, imágenes, css, js… puedes usar alguno de estos 2 códigos js: window.addEventListener('load', […]

Para clonar un determinado elemento/s es muy sencillo usando el método cloneNode() de javascript, con el cual puedes clonar solo el elemento padre o tmabien los hijos que tenga este. Clonar solo el elemento «padre» const clonar = document.querySelector('.mi-elemento').cloneNode(); Clonar […]