`,g.querySelector(`.title`).textContent=a,g.querySelector(`.subtitle`).textContent=c??r,f.insertAdjacentElement(`beforeend`,g),g.animate(b,75)},d=a=>a.toLowerCase().normalize(`NFD`).replace(/[\u0300-\u036f]/g,r),e=async(a,b=r,c=s)=>{const e=await fetch(`${b}/api/contents.json`).then(a=>a.json());return new t((f,g)=>{const h=e.filter(b=>{const c=b.type===`category`,e=d(b.title).includes(a)||d(b?.subtitle||r)?.includes(a)||d(b?.tags||r)?.includes(a);return !c&&e}).slice(n,c).map(a=>({title:a.title,subtitle:a?.subtitle||r,icon:`/assets/icons/logos.svg#${a.topic.replace(`javascript`,`js`)}`,url:b+ a.url}));return f(h)})},f=async(a,b=s)=>{const c=await fetch(`/api/youtube.json`).then(a=>a.json());return new t((e,f)=>{const g=c.filter(b=>d(b.title).includes(a)).slice(n,b).map(a=>({title:a.title,subtitle:q,icon:`https://img.youtube.com/vi/${a.id}/default.jpg`,url:`https://youtu.be/${a.id}`}));return e(g)})},g=15,h=new URL(location.href).origin,i=[`https://lenguajehtml.com`,`https://lenguajecss.com`,`https://lenguajejs.com`,`https://terminaldelinux.com`].filter(a=>a!==h);i.length<4&&i.unshift(r);const j=async()=>{const a=document.querySelector(u),b=document.querySelector(p),h=d(a.value),j=h.length>3;if(b.innerHTML=r,!j)return;const k=document.querySelector(`dialog.search .loading`);k.classList.add(`loading`,v);const l=structuredClone(i).map(a=>e(h,a));l.push(f(h));const m=(await t.all(l)).flat(o/n).slice(n,g);k.classList.remove(v),k.classList.add(w),setTimeout(()=>k.classList.remove(w),x),m.forEach(a=>c(a))},k=document.querySelector(y),l=()=>{if(document.querySelectorAll(`dialog.search`).length>n)return;const b=document.createElement(`dialog`);b.innerHTML=`
`,b.addEventListener(z,()=>{document.body.classList.remove(A),b.close(),b.remove(),k.blur()});const c=a=>{const d=b.getBoundingClientRect();(a.clientXd.right||a.clientYd.bottom)&&(document.body.removeEventListener(B,c),b.dispatchEvent(new Event(z)))};setTimeout(()=>document.body.addEventListener(B,c),x),b.classList.add(`search`),b.querySelector(`input.query`).focus(),document.body.append(b),b.showModal(),document.body.classList.add(A),document.querySelector(u).addEventListener(`input`,a(j,400))};addEventListener(`keydown`,a=>{const {key:b,ctrlKey:c}=a;b.toLowerCase()===`k`&&c&&(a.preventDefault(),l(),document.querySelector(u).focus())});const m=document.querySelector(y);m.addEventListener(`focus`,l)

Lenguaje CSS

CSS es un lenguaje de estilos para dotar de apariencia y aspecto visual a una página o sitio web (entre otras cosas). También es conocido como el mayor enemigo de los programadores backend. En esta página te ayudo a aprender a dominarlo.

Soporte baseline de CSS

¿Quieres comprobar si una característica concreta está disponible en los navegadores?

Comienza a aprender

¿...o prefieres un roadmap?

Comienza a practicar

¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!

cascada css

Conflictos CSS

En este artículos aprenderemos como se ordenan los estilos según su procedencia y que son los conflictos o colisiones de nombre CSS.
cascada css

La palabra clave !important

Descubre cómo usar la palabra clave !important en CSS para sobrescribir estilos. Aprende su función, ejemplos prácticos y cuándo utilizarla correctamente.
herramientas css

¿Qué es Sass?

Sass es un preprocesador CSS, es decir, un lenguaje que añade características a CSS, ampliándolo con bucles, funciones y otras funcionalidades.
herramientas css

¿Qué es Browserslist?

Browserslist permite automatizar el grado de compatibilidad de algunas herramientas Javascript/CSS respecto a navegadores antiguos.
herramientas css

¿Qué son las clases de utilidad?

Aprovecha las clases de utilidad para definir mejor tu CSS y escribir código mucho más mantenible y reutilizable
cascada css

Capas de cascada: regla @layer

La regla @layer se puede utilizar para crear capas con código CSS de forma independiente. Posteriormente se pueden funcionar, siguiendo un orden específico.
cascada css

Shadow DOM declarativo

Con Shadow DOM declarativo se pueden crear zonas de HTML que estén aisladas del resto del documento y por lo tanto no afecte el CSS externo.
animaciones

Scroll-driven animations

Aprende a crear efectos de animaciones dirigidas por scroll (Scroll Driven Animations) utilizando CSS, sin necesidad de utilizar Javascript.
css

La propiedad display multi-keyword

Mediante la propiedad display moderna de CSS podemos utilizar dos valores para indicar como debe renderizarse un elemento y sus elementos hijos.

cascada css

Estilos con baja especificidad

Podemos utilizar el selector combinador :where() de CSS para crear selectores con baja especificidad que nos permitan definir estilos base sobreescribibles.
herramientas css

Autoprefixer: Prefijos CSS

Plugin de PostCSS que sirve para analizar el código CSS y añadir los vendor prefixes de CSS necesarios para compatibilidad con navegadores antiguos.
cascada css

Herencia en CSS

En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
herramientas css

PostCSS desde terminal

PostCSS realmente es una herramienta de línea de comandos, por lo que si te interesa puedes usarla para hacer tus propios scripts
css

Cursor del ratón

Es posible modificar ciertos detalles del ratón del usuario y su interacción con una página web mediante CSS.
animaciones

La regla @starting-style

Mediante la regla @starting-style puedes crear transiciones iniciales que se aplican antes de que cargue los estilos de la página o al insertar un elemento en la página.
css

CSS Moderno: antes vs ahora

Una lista de tareas o patrones frecuentes, que tienen una alternativa moderna de escribirse en CSS actual, hoy en día.
cascada css

¿Qué es el alcance en CSS?

Una característica deseable es poder limitar el alcance de la aplicación de ciertos estilos CSS. En este artículo te explico la problemática y porque es interesante aplicar esta técnica.
cascada css

Importaciones: regla @import

La regla CSS @import permite incluir el código CSS de otro fichero externo, realizando una petición para descargarlo desde el cliente.
animaciones

View Transition personalizada

Descubre cómo personalizar tus View Transitions con Javascript y CSS para mejorar la experiencia del usuario.

Videos

¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev