ManzDev

La etiqueta <dialog> - HTML en español En HTML5 es posible crear ventanas de diálogo personalizadas y modales sin necesidad de librerías externas. Te explico como.

Tienes más información sobre todo esto, en los siguientes posts:

La etiqueta dialog:
lenguajehtml.com/html/interac...

Invocadores HTML:
lenguajehtml.com/html/interac...

<button commandfor="modal" command="show-modal"> Mostrar ventana </button> <dialog id="modal" open closedby="any"> <h1>Título de la ventana</h1> <p>Esto es un ejemplo de mensaje de diálogo.</p> <form method="dialog"> <button>Aceptar</button> </form> </dialog> dialog::backdrop { background: linear-gradient(#000d, #000a); backdrop-filter: blur(2px); }

🧡 ¿Sabías que puedes crear ventanas de diálogo sólo con HTML? (Sin Javascript, ni librerías) 🧡

✅ Con <dialog> creamos ventana
✅ Con open la tenemos abierta o cerrada
✅ Con closedby cerramos con ESC o pulsando fuera
✅ Con command abrimos modales sin JS
✅ Con method=dialog cerramos ventana sin JS

👇

Formatos multimedia - HTML en español ¿Qué formatos de imagen, video o audio debo utilizar en una web? Te lo explico en este artículo.

Por aquí te hablo más largo y tendido de formatos multimedia (¡audio y video incluido!):
lenguajehtml.com/html/multime...

Tabla de características de formatos de imágenes 1ª generación: - JPG (Compresión con pérdidas) - PNG (Compresión sin pérdidas, transparencia y animaciones) - GIF (Compresión con pérdidas, soporte limitado de transparencias y animaciones) 2ª generación - WEBP (Compresión con y sin pérdidas, transparencias, animaciones) 3ª generación - AVIF (Compresión con y sin pérdidas, transparencias, animaciones) - JPEG XL (Compresión con y sin pérdidas, transparencias, animaciones) - SVG (compresión sin pérdidas -es texto-, transparencia, animaciones via CSS y escalado vectorial)

✅ ¿Qué formato de imagen debería usar?

✨ GIF: Antiguo, evitar
✨ JPG/PNG: Antiguos, pero seguros
✨ WebP: Reemplazo actual de JPG/PNG
✨ AVIF/JXL: Modernos, nueva generación
✨ SVG: Ideal para imágenes escalables

👇

Tipos de módulos ESM - Javascript en español En Javascript no sólo podemos importar archivos Javascript sino que también podemos hacer importaciones de archivos JSON, CSS y quizás próximamente HTML. Te explico como funciona.

Si quieres saber más sobre esto, te aconsejo echar un vistazo a este post:
lenguajejs.com/javascript/m...

La evolución de los WebComponents (2025) - A partir de un string de HTML se puede crear un fragmento del DOM. - A partir de un string con estilos CSS, se puede crear un objeto construible de CSS. - La nueva sintaxis with de import permite cargar módulos en otros formatos. El JSON ya está parseado en data. - De la misma forma, podremos hacerlo con archivos CSS en objetos nativos. Una "especie de DOM" de CSS. - El de HTML aún no está disponible. - Creamos un Shadow DOM HTML encapsulado. CSS "scopeado". - Aplicamos el CSS al DOM encapsulado. Se aplica sólo a ese HTML. - Añadimos el HTML ese componente. Es la alternativa moderna a innerHTML En el futuro, setHTML() sanitizará. - Todo esto es nativo del browser. Sin automatizadores (webpack, vite...). Sin librerías. Sin frameworks.

🚀 La evolución de los Webcomponents (2025)

✅ Puedes crear un fragmento del DOM de un string
✅ Puedes crear un CSS construible desde un string
✅ El `import ... with` importa módulos JSON/CSS
✅ HTML encapsulado: CSS sólo se aplica a ese HTML.
✅ Componente `<user-card>` nativo. Potente y flexible.

👇

Animaciones - CSS en español Las animaciones son importantes en una página, ya que permiten suavizar cambios que podrían producirse de forma muy brusca, proporcionando una mejor experiencia de usuario.

¡Recuerda que tengo un curso gratuito de animaciones!
lenguajecss.com/animaciones/

Puedes empezar por investigar los tipos de animaciones que se pueden hacer con CSS/JS:
lenguajecss.com/animaciones/...

Propiedades CSS de animaciones: - animation - animation-composition - animation-delay - animation-direction - animation-duration - animation-fill-mode - animation-iteration-count - animation-name - animation-play-state - animation-range - animation-range-end - animation-range-start - animation-timeline - animation-timing-function

📘 Todas las propiedades de animaciones de CSS y su soporte actual en navegadores

✅ Propiedades básicas de control de animación
✅ Control de ritmo de animación
✅ Composición de animaciones 🆕
✅ Creación de timelines (scroll o vistas)🆕

¿Las conocías todas? 👇

La regla @property - CSS en español La regla @property de CSS forma parte de una serie de apis llamadas CSS Houdini y sirve para establecer un tipo de dato a una variable CSS. Te lo explico.

Por aquí tienes más información sobre esto:

👇 La regla @property
lenguajecss.com/css/variable...

👇 Tipos de datos en CSS:
lenguajecss.com/css/logica-c...

💜 Tipando variables CSS con @property 💜

✅ ¡Sí, CSS tiene variables!
✅ ¡Sí, CSS tiene tipos de datos!
✅ Usamos @property para tipar la variable `--x`
✅ El navegador sabe que es `--x` y puede animarla

👇

Tabla periódica de HTML - HTML en español Navega a través de todas las etiquetas HTML, organizadas por temática y pulsando para más información.

Por aquí tienes el enlace a la tabla interactiva:
lenguajehtml.com/html/introdu...

🧪 ¿Conoces todas las etiquetas HTML que existen?

¡Seguro que te faltan algunas!

✅ Tabla periódica de los elementos de HTML5
✅ Dividido por grupos o categorías
✅ Incluye novedades como `<search>` o `<hgroup>`
✅ Al pulsar en uno, te explica en español sus detalles

👇

Por aquí tienes más información 👇
lenguajehtml.com/html/#intera...

1) Modos de carga: - Tradicional - Diferido (defer) - Asíncrono (async) 2) Módulos ESM - Con type="module" - Puedes usar imports - Importar elementos de Javascript - Importar objetos de ficheros JSON (import attributes) - Importar estilos de ficheros CSS (import attributes) 3) Import Maps - Crear un índice de nombres que referencian a una URL - Luego, usar esos nombres en los import (como en NPM, pero sin NPM) 4) Data Blocks - Bloques de datos personalizados para manipular 5) Versión sin Javascript - Provee una versión alternativa para usuarios sin Javascript o con Javascript desactivado

💛 Cosas que no sabías de la etiqueta `<script>`

1️⃣ ¿Cómo cargas Javascript? (normal, defer y async)
2️⃣ Módulos ESM (carga Javascript, JSON o CSS)
3️⃣ Import Maps (Alias de nombres para importar)
4️⃣ Data Blocks (Datos sin formato personalizados)
5️⃣ NoJS (Alternativa para usuarios con JS desactivado)

👇Más

CSS Nesting nativo - CSS en español El anidamiento CSS o CSS Nesting de forma nativa está comenzando a llegar a los navegadores. Descubre como funciona.

Por aquí tienes más información sobre el CSS nesting nativo, ejemplos y casos específicos explicados:
lenguajecss.com/css/calidad-...

✅ Puedes anidar reglas @media o @container.
✅ Puedes usar & al final (usar el padre como hijo).
❌ No hace falta que uses nesting siempre.

👇 Más

/* CSS tradicional (sin nesting) */ .container { background: indigo } .container .item { background: darkred } /* CSS con nesting */ .container { background: indigo; .item { background: darkred; } } /* Equivale a .container:hover { ... } */ .container { background: indigo; &:hover { background: deeppink } } /* @media nesting (afecta sólo al container) */ .container { background: indigo; @media (width <= 800px) { background: blue } } /* Equivale a .item .container { ... } (Sobre el padre) */ .container { background: indigo; .item & { background: green } }

💜 4 cosas que NO sabías sobre Nesting CSS

✅ Es la capacidad de anidar más CSS dentro de CSS.
❌ Ya no hace falta Sass/PostCSS.
✅ Hay dos sintaxis: 1) Usando & 2) Sin & (relaxed).
✅ Usa & cuando quieras añadir al contenedor.

👇 Más

La etiqueta HTML <img> - HTML en español ¿Cómo colocar imágenes en una página HTML? ¿Qué formatos de imagen debo utilizar?

Por aquí tienes más información sobre la etiqueta `<img>`, bien explicado y con ejemplos:
lenguajehtml.com/html/multime...

6️⃣ Lazy load para mejorar rendimiento
7️⃣ Fetchpriority para modificar prioridad de descarga
8️⃣ Decoding para no centrarte en imágenes "lejanas"
9️⃣ Usa srcset/sizes si necesitas adaptar imágenes

⬇ Sigue

<!-- ❌ El atributo alt es obligatorio --> <img src="imagen.jpg" /> <!-- ❌ La etiqueta <img> no requiere slash ( / ) --> <img src="imagen.jpg" alt="Un gatito"> <!-- ❌ No confundir atributo title con alt --> <img src="imagen.jpg" alt="Un gatito" title="Pasar el ratón por encima"> <!-- ✅ Para SEO, evita nombres genéricos --> <img src="gato.jpg" alt="Un gatito"> <!-- ✅ Usa mejor formatos como AVIF o WebP --> <img src="gato.avif" alt="Un gatito"> <!-- ✅ Con "lazy" pospones la carga de la imagen. Mejora rendimiento. --> <img src="gato.avif" alt="Un gatito" loading="lazy"> <!-- ✅ Prioridad de descarga alta, útil para mejorar carga selectiva. --> <img src="gato.avif" alt="Un gatito" fetchpriority="high"> <!-- ✅ El proceso de decodificación puede tardar. En imágenes grandes al final de la página indicamos que no le de prioridad y se centre en otras. --> <img src="gato.avif" alt="Un gatito" decoding="async"> <!-- ✅ Algo similar a CSS Media queries en HTML. -->

🧡 Cosas que no sabías de la etiqueta HTML `<img>`

1️⃣ El `alt` es obligatorio
2️⃣ No hace falta `/` de autocierre
3️⃣ No confundir `alt` con `title`
4️⃣ Mejora SEO evitando nombres genéricos
5️⃣ AVIF o WebP los mejores formatos de imagen

⬇ Sigue

Perspectivas CSS - CSS en español Mediante las opciones de perspectiva es posible establecer un punto de fuga en nuestros elementos 3D de CSS

Por aquí te explico como funciona paso a paso:
lenguajecss.com/css/transfor...

💜 La propiedad `perspective` en CSS

Consigue ilusión 3D muy vistosa con CSS añadiendo perspectiva (distancia observada, punto de fuga)

✨ Contenedor: borde gris, elemento: rojo interior
✨ La perspectiva se añade en el padre
✨ La variable `--perspective` tiene valor con `px`

Filtros CSS - CSS en español Con CSS podemos aplicar filtros simples en elementos HTML, imágenes o videos para cambiar el aspecto como lo hacemos con filtros de Photoshop: sepia, blanco y negro, contraste, brillo...

Más información sobre los filtros en CSS:
lenguajecss.com/css/efectos/...

Dos imágenes del pato anti-tailwind, donde la primera, la caja de texto aplica un `filter: blur(2px)`, desenfocándolo todo. En el segundo, con `backdrop-filter: blur(2px)`, se desenfoca sólo la parte visible detrás del elemento (sin afectar al texto interior en primer plano).

Diferencia entre `filter` y `backdrop-filter` en CSS:

Observa el `<div>` que indica «El pato anti-tailwind»:

✨ Con `filter` aplicas a un elemento del DOM e hijos
✨ Con `backdrop-filter` sólo a la parte visible detrás

Ejemplo aplicando `blur(2px)`:

¿Contenedores de docker te refieres? (No entendía nada)

La función image-set() - CSS en español En algunas situaciones, es posible que necesitemos establecer imágenes alternativas en CSS: si no carga una imagen, que cargue otra diferente.

⬇ Más información y ejemplos sobre la nueva función image-set() de CSS:
lenguajecss.com/css/imagenes...

.container { background-image: image-set( url("/assets/manzdev.avif") type("image/avif"), url("/assets/manzdev.webp") type("image/webp"), url("/assets/manzdev.jpg") type("image/jpeg") ); }

💜 La nueva función `image-set()` de CSS

Define un conjunto de imágenes para usar de fallback: Si no se carga la primera, lo intentará con la segunda, y así.

Puedes elegir dependiendo de:
✅ Formato: AVIF > WebP > JPEG
✅ Resolución: 1x > 2x (HD)
✅ Ancho de banda (gradientes!)

La función shape() - CSS en español Mediante la función shape() de CSS puedes establecer formas complejas de forma sencilla igual como lo harías en una imagen vectorial SVG. Te explico como funciona.

Por aquí tienes más información de como funciona `shape()` y que comandos tiene:
lenguajecss.com/css/mascaras...

<div class="grass"> <div class="player"> <div class="shirt"></div> <div class="short"></div> </div> </div> <style> .shirt { clip-path: shape( from 0 0, hline to calc(50% - 75px), arc by calc(2 * 75px) 0 of 75px, hline to 100%, vline to 50%, hline to 85%, vline to 100%, hline to 15%, vline to 50%, hline to 0, close ); } </style>

💜¡La nueva función `shape()` de CSS!

Podemos utilizar `shape()` en CSS para hacer trayectos SVG en pocas lineas de código. ¡Muy potente!

✅ Usable con `clip-path` para recortar
✅ Usable con % para hacerlo responsive
✅ Usable con variables CSS
✅ Misma lógica de SVG en atributos path `d`

⬇ Más info

La funcion attr() - CSS en español Aprende a utilizar la función CSS attr() que permite obtener valores de atributos de etiquetas HTML y reutilizarlas en una página.

Por aquí tienes un post donde te lo explico todo detalladamente:
lenguajecss.com/css/logica-c...