Importante n.º 3: menús contextuales emergentes, @scope, nuevas funciones de la plataforma web y más
La comunidad de desarrolladores no perdió el tiempo y comenzó el año 2026 con artículos, demostraciones e ideas realmente excelentes. Firefox 147 y Chrome 144 también están disponibles, y aunque no tienen muchas funciones, estos lanzamientos siguen siendo bastante emocionantes para una época del año típicamente lenta, así que sin más preámbulos, aquí está lo más importante (o debería decir) de las últimas semanas. primero ¿Cuántas semanas en 2026? )……
Chris Coyier (quizás un nombre familiar) nos muestra Cómo crear un menú contextual usando ventanas emergentes y posicionamiento de anclaje En el Front End Masters. persona que llama con interés, <menu>transición discreta, @starting-styley también se menciona la posición de respaldo, así que toma un pico porque esto es una especie de mina de oro.
también, posicionamiento del ancla La línea de base se alcanzó esta semana, por lo que ahora puede usarla en su sitio de producción. ¿Ya tenemos la característica CSS del año?
Determinar el alcance de CSS @scope
Curiosamente, también tuve la oportunidad de escribir algo para Front End Guru y elegí @scope. @scope Ha sido mi característica CSS más esperada durante mucho tiempo, y Firefox la lanzó en su versión final este año (lo que la convierte en una base). mío característica anual, así que estoy emocionado de comenzar 2026 con este pequeño como usar @scope y el alcance general de CSS.
Generar borde degradado desde la fuente de la imagen
En esta demostración, creada por Ana Tudor y publicada en Bluesky, Ana Desenfoca la imagen y enmascarala con bordes.. De hecho, puedes hacer esto en Safari con solo tres líneas de CSS, pero una solución para varios navegadores tampoco es demasiado complicada (la parte clave es backdrop-filter y mask propiedades CSS).
Dada la popularidad actual de los degradados y desenfoques, me atrevo a decir: Vasoque es un efecto muy dulce que probablemente puedas adaptar a otros escenarios.
Borde degradado desplazado de la fuente de img: ¿cómo obtener el resultado de la pantalla a continuación? Transparencia de espacios realista, gradiente de borde obtenido de imágenes. Mi solución en @ codepen.io: Safari solo en 3 declaraciones codepen.io/thebabydino/… Cross-browser codepen.io/thebabydino/… #CSS #filter
—Ana Tudor (@anatudor.bsky.social) 11 de enero de 2026 09:52
Probablemente no necesites etiquetas
HTML, como CSS, es Suao Bien ahora. Dicho esto, aunque tenemos todos estos nuevos elementos HTML que nos permiten crear componentes interactivos sin JavaScript, eso no significa necesariamente que debamos hacerlo. Stephen Magheim dice Los componentes de las pestañas están sobrediseñados la mayor parte del tiempoy explica por qué y qué puedes hacer.
Un punto popular después de ver otro diseño de pestaña extraño: el clásico “componente de pestaña” está sobrediseñado para el 90% de los casos de uso. Probablemente no lo necesites…
– Stephen Magheim (@fractalemind.bsky.social) 3 de enero de 2026 19:57
Utiliza tu sistema operativo como CMS
Hablando de simplicidad, Jim Nielsen me presentó este fantástico concepto de sistema operativo llamado CMS y me explicó Cómo encontró el botón “Editar publicación” en su sitio web para abrir un documento local en su computadora en iA Writerno hay necesidad de CMS en absoluto. Jim lo guiará a través del proceso, pero el elemento clave es solo un pequeño enlace con un esquema de URL personalizado:
<a href="https://css-tricks.com/whats-important-3/ia-writer://open?path=posts:post.md">Edit</a>Me gusta esto porque también escribo en Markdown (también usando iA Writer) y Poder Integraré esto fácilmente en mi compilación Eleventy. Pero me hizo pensar: ¿Tienen otras aplicaciones sus propios esquemas de URL? Resulta que algunos de ellos realmente lo hacen. Aquí hay una lista incompleta (con ejemplos del comando “editar” de cada aplicación):
- obsidiana:
obsidian://open?vault=posts&file=post - Código VS:
vscode://exact/path/to/post.md:9:1(:9:1es el número de fila y el número de columna) - Ulises:
ulysses://x-callback-url/open-item?id=ITEM_ID - palabras sublimes (y Según el acuerdo):
subl://exact/path/to/post.md:9:1 - Teclas de acceso directo de Apple:
shortcuts://run-shortcut?name=Edit&input=/path/to/post.md(Excelente para hacer esto con las siguientes aplicaciones No Con esquema de URL personalizado)
Clics rápidos y nuevas funciones de la plataforma web
Como sabéis (¿ojalá?) publicamos clic rápido Toda la semana. La mejor manera de encontrarlos es en la barra lateral de su página de inicio, donde son enlaces a contenido que puede leer en uno o dos minutos, o simplemente anuncios de servicio público para leer y recordar. De todos modos, esto es lo que quizás te hayas perdido:
¿Estás listo para la primera demostración genial del año? Mini Mario World con controles de teclado. ¡Sí, puedes mover a Mario y puedes saltar! 👀 Demostración: codepen.io/t_afif/full/… vía @codepen.io ✔️ 100% CSS Magic ✔️ HTML mínimo ❌ 0% JavaScript Un experimento solo para Chrome que utiliza CSS moderno.
– CSS por T. Afif (@css-solo.dev) 2 de enero de 2026 13:39
Finalmente, aquí están mis selecciones de los lanzamientos del martes para Firefox y Chrome:
Gracias por escuchar. ¡Nos vemos en dos semanas! O allí o cuadrado (aspect-ratio: 1)!
