<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="generator" content="Hugo 0.98.0" />
  
    <title>CSSLab</title>
  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Un laboratorio de ideas web" />
<link rel="canonical" href="https://csslab.cl/" />



<link rel="stylesheet" href="https://csslab.cl/assets/style.css">

  <link rel="stylesheet" href="https://csslab.cl/assets/blue.css">




<link rel="apple-touch-icon" href="https://csslab.cl/img/apple-touch-icon-192x192.png">

  <link rel="shortcut icon" href="https://csslab.cl/favicon.ico">


<meta name="twitter:card" content="summary" />

  
    <meta name="twitter:site" content="" />
  
    <meta name="twitter:creator" content="" />


<meta property="og:type" content="website" />
<meta property="og:title" content="CSSLab">
<meta property="og:description" content="Un laboratorio de ideas web" />
<meta property="og:url" content="https://csslab.cl/" />
<meta property="og:site_name" content="CSSLab" />

  <meta property="og:image" content="https://csslab.cl/social.png">





  <link href="/index.xml" rel="alternate" type="application/rss+xml" title="CSSLab" />



  <link href="/index.json" rel="alternate" type="application/json" title="CSSLab" />


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-79823-1', 'auto');
  ga('send', 'pageview');
  </script>

</head>
<body class="blue">


<div class="container headings--one-size">

  <header class="header">
  <div class="header__inner">
    <div class="header__logo">
      <a href="/">
  <div class="logo">
    CSSLab
  </div>
</a>

    </div>
    
    <form id="search-form" class="noscript" method="GET" action="https://duckduckgo.com/" data-language-prefix="">
	<div class="search-bar">
		<input id="search-input" type="search" class="search--display" name="search" tabindex="0" autocomplete="off" value=" site:https://csslab.cl" placeholder="Escribe tu búsqueda...">
		<input id="search-submit" class="icon" type="submit" value="🔎">
	</div>
	<ul id="search-results" class="search--display"></ul>
</form>

<script src="https://csslab.cl/assets/fastsearch.js"></script>

    
    
  </div>
  
</header>


  <div class="content">
    

<div class="posts">
  
  

  
  
  
  
  

  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2026/03/28/de-design-system-a-instruction-system/">De Design System a Instruction System</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        28/03/2026
      </span>
      
      <span class="post-reading-time">:: 3 min. de lectura (560 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/design/">design</a>&nbsp;
      
      <a href="https://csslab.cl/categories/frontend/">frontend</a>&nbsp;
      
      <a href="https://csslab.cl/categories/inteligencia-artificial/">inteligencia artificial</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/skills/">skills</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/design-system/">design system</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2026/03/28/de-design-system-a-instruction-system/">
    <img src="https://csslab.cl/wp-content/uploads/2026/de-design-system-a-instruction-system.jpg"
      class="post-cover"
      alt="De Design System a Instruction System"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      ¿Siguen siendo necesarios los Design Systems en la era de agentes de IA? Durante la última década, los design systems se consolidaron como un pilar fundamental en el desarrollo de productos digitales. Empresas como Google, IBM y Shopify demostraron que la estandarización de componentes, patrones y guías visuales no solo mejoraba la consistencia, sino también la velocidad de desarrollo y la colaboración entre equipos.
Sin embargo, hacia 2025–2026 emerge una nueva pregunta: ¿siguen siendo necesarios los design systems en un contexto donde agentes de IA pueden generar interfaces completas a partir de instrucciones bien definidas?

      
    </div>

    
    <div>
      <a class="read-more button" href="/2026/03/28/de-design-system-a-instruction-system/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2026/02/06/css-view-transition/">CSS View Transitions: guía técnica de @view-transition</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        06/02/2026
      </span>
      
      <span class="post-reading-time">:: 3 min. de lectura (452 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">css</a>&nbsp;
      
      <a href="https://csslab.cl/categories/efectos/">efectos</a>&nbsp;
      
      <a href="https://csslab.cl/categories/transiciones/">transiciones</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/css3/">css3</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/propiedades/">propiedades</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2026/02/06/css-view-transition/">
    <img src="https://csslab.cl/wp-content/uploads/2026/css-view-transition.jpg"
      class="post-cover"
      alt="CSS View Transitions: guía técnica de @view-transition"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      El módulo CSS View Transitions introduce una forma nativa de crear animaciones fluidas entre diferentes vistas de una aplicación web. A diferencia de soluciones basadas en JavaScript o librerías externas, esta especificación permite definir transiciones visuales directamente desde CSS, integrándose con la View Transition API del navegador.
El objetivo principal es mejorar la continuidad visual al cambiar de estado dentro de una página (SPA) o al navegar entre documentos del mismo origen (MPA), manteniendo un rendimiento óptimo y una implementación declarativa.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2026/02/06/css-view-transition/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2025/05/04/meter-progress-html5/">&lt;meter&gt; y &lt;progress&gt; de HTML5</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        04/05/2025
      </span>
      
      <span class="post-reading-time">:: 3 min. de lectura (573 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">css</a>&nbsp;
      
      <a href="https://csslab.cl/categories/dise%C3%B1o/">diseño</a>&nbsp;
      
      <a href="https://csslab.cl/categories/html5/">html5</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/css3/">css3</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/html5/">html5</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/etiquetas/">etiquetas</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2025/05/04/meter-progress-html5/">
    <img src="https://csslab.cl/wp-content/uploads/2025/html5-progress-meter.jpg"
      class="post-cover"
      alt="&amp;lt;meter&amp;gt; y &amp;lt;progress&amp;gt; de HTML5"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      Uso y diferencias de cómo usar meter y progress de HTML5 HTML5 introdujo nuevas etiquetas que permiten construir componentes de interfaz de usuario comunes sin necesidad de JavaScript adicional. Dos de estos elementos son &amp;lt;progress&amp;gt; y &amp;lt;meter&amp;gt;, útiles para mostrar progreso de tareas y mediciones dentro de un rango conocido, respectivamente. Al final del artículo tendrás un ejemplo aplicado.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2025/05/04/meter-progress-html5/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2025/04/27/css-text-wrap/">CSS text-wrap: La nueva forma de controlar saltos de línea</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        27/04/2025
      </span>
      
      <span class="post-reading-time">:: 3 min. de lectura (434 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">css</a>&nbsp;
      
      <a href="https://csslab.cl/categories/dise%C3%B1o/">diseño</a>&nbsp;
      
      <a href="https://csslab.cl/categories/tipograf%C3%ADa/">tipografía</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/css4/">css4</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/propiedades/">propiedades</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/texto/">texto</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2025/04/27/css-text-wrap/">
    <img src="https://csslab.cl/wp-content/uploads/2025/css-text-wrap.jpg"
      class="post-cover"
      alt="CSS text-wrap: La nueva forma de controlar saltos de línea"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      El mundo del diseño web está en constante evolución, y CSS sigue introduciendo propiedades que nos dan mayor control sobre la presentación del texto. Una de las adiciones más interesantes recientemente es la propiedad text-wrap, que permite a los desarrolladores definir con precisión cómo se comportan los saltos de línea en nuestros textos, algo que se necesitaba hace mucho tiempo.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2025/04/27/css-text-wrap/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2025/04/09/propiedad-css-container/">¿Qué es @container en CSS y cómo se usa?</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        09/04/2025
      </span>
      
      <span class="post-reading-time">:: 2 min. de lectura (334 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">css</a>&nbsp;
      
      <a href="https://csslab.cl/categories/dise%C3%B1o/">diseño</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/css3/">css3</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/propiedades/">propiedades</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2025/04/09/propiedad-css-container/">
    <img src="https://csslab.cl/wp-content/uploads/2025/propiedad-css-container.jpg"
      class="post-cover"
      alt="¿Qué es @container en CSS y cómo se usa?"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      En el mundo del diseño web, la adaptabilidad es clave. Ya tenemos @media para adaptar nuestros estilos a distintos tamaños de pantalla, pero ¿qué pasa si queremos que un componente cambie su estilo según el tamaño de su contenedor y no del viewport? Ahí entra en juego una nueva y poderosa herramienta: @container.
En este artículo te explico qué es, cómo se usa y te muestro ejemplos prácticos para que empieces a usarlo hoy mismo.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2025/04/09/propiedad-css-container/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2024/12/19/transparencia-color-variable/">Transparencia a un color declarado como variable en CSS</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        19/12/2024
      </span>
      
      <span class="post-reading-time">:: 2 min. de lectura (251 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">css</a>&nbsp;
      
      <a href="https://csslab.cl/categories/dise%C3%B1o/">diseño</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/css3/">css3</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/propiedades/">propiedades</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2024/12/19/transparencia-color-variable/">
    <img src="https://csslab.cl/wp-content/uploads/2024/transparencia-color-variable.jpg"
      class="post-cover"
      alt="Transparencia a un color declarado como variable en CSS"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      Una tarea común en el diseño es aplicar transparencia a un color, y con técnicas más actuales, colores definidos como variable. Esto puede lograrse con pre-procesadores CSS y nativamente utilizando combinaciones de sintaxis modernas como rgba(), hsla() y otros ya soportados ampliamente. Este artículo explica cómo manejar esta necesidad técnica con ejemplos prácticos.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2024/12/19/transparencia-color-variable/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2022/12/18/vite-vue-antdv-custom/">Vite + Vue + Ant Design System + custom design</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        18/12/2022
      </span>
      
      <span class="post-reading-time">:: 2 min. de lectura (257 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/javascript/">javascript</a>&nbsp;
      
      <a href="https://csslab.cl/categories/dise%C3%B1o/">diseño</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/vue/">vue</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/vite/">vite</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/antdv/">Antdv</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2022/12/18/vite-vue-antdv-custom/">
    <img src="https://csslab.cl/wp-content/uploads/2022/12/antdv.jpg"
      class="post-cover"
      alt="Vite &#43; Vue &#43; Ant Design System &#43; custom design"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      En un Design System que estoy trabajando actualmente, el stack consiste en: Vite, Vue, Ant Design System (Antdv) y otras librerías. Mi intención es customizar Antdv con tal de no crear nuevas clases o sobreescribir estilos sino nativamente crear la identidad gráfica, a través de custom variables de Antdv.
El proceso no fue corto y finalmente encontré la receta, la que muestro en este artículo con tal de ayudar a alguien más.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2022/12/18/vite-vue-antdv-custom/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2021/12/16/pensamientos-del-futuro-proximo/">Pensamientos del futuro próximo</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        17/12/2021
      </span>
      
      <span class="post-reading-time">:: 4 min. de lectura (696 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/misc/">Misc</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/pensamiento/">pensamiento</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2021/12/16/pensamientos-del-futuro-proximo/">
    <img src="https://csslab.cl/wp-content/uploads/2021/12/hero.jpg"
      class="post-cover"
      alt="Pensamientos del futuro próximo"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      Este artículo contiene pensamientos, experiencias personales y mucha observación de comportamiento. Espero sea útil.
Tenía reservada una hora médica y al pagar le pregunto a la asistente: «¿Para reservar un examen radiológico lo puedo hacer aquí mismo?» A lo que me responde: «No señorito, lo hace en el piso 1 o por internet o envía un correo a qwerty@examenes.xyz». Me siento a esperar mi hora y observo un tótem donde con tu identificación obtienes un número para que te atienda un humano, como lo acababa de hacer.
      
    </div>

    
    <div>
      <a class="read-more button" href="/2021/12/16/pensamientos-del-futuro-proximo/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2020/12/19/evento-clear-de-un-input-typesearch/">Evento clear de un input search</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        20/12/2020
      </span>
      
      <span class="post-reading-time">:: 1 min. de lectura (112 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/html/">HTML</a>&nbsp;
      
      <a href="https://csslab.cl/categories/javascript/">javascript</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/html5/">HTML5</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/javascript/">javascript</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2020/12/19/evento-clear-de-un-input-typesearch/">
    <img src="https://csslab.cl/wp-content/uploads/2020/12/search.jpg"
      class="post-cover"
      alt="Evento clear de un input search"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      HTML5 hace años incorporó varios nuevos tipos de input, entre ellos el search. Este nuevo input -aparte de semántico- coloca una ✕ para borrar el valor ingresado en el input y comenzar de nuevo con la búsqueda.

      
    </div>

    
    <div>
      <a class="read-more button" href="/2020/12/19/evento-clear-de-un-input-typesearch/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="post on-list">
    <h1 class="post-title">
      <a href="https://csslab.cl/2020/09/16/detectar-dark-mode-en-browsers/">Detectar dark-mode en browsers</a>
    </h1>
    <div class="post-meta">
      <span class="post-date">
        16/09/2020
      </span>
      
      <span class="post-reading-time">:: 1 min. de lectura (204 palabras)</span>
      
    </div>

    
    <span class="post-tags">
      Categorías:
      
      <a href="https://csslab.cl/categories/css/">CSS</a>&nbsp;
      
      <a href="https://csslab.cl/categories/javascript/">javascript</a>&nbsp;
      
    </span>
    
    
    <span class="post-tags">
      Etiquetas:
      
      #<a href="https://csslab.cl/tags/media/">@media</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/css/">css</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/javascript/">javascript</a>&nbsp;
      
      #<a href="https://csslab.cl/tags/tip/">tip</a>&nbsp;
      
    </span>
    

    
  <a href="https://csslab.cl/2020/09/16/detectar-dark-mode-en-browsers/">
    <img src="https://csslab.cl/wp-content/uploads/2020/09/photo-1572062505547-912c49028cc5.jpeg"
      class="post-cover"
      alt="Detectar dark-mode en browsers"
      title="Cover Image" />
  </a>


    <div class="post-content">
      
      Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo.
Hechos: Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.
      
    </div>

    
    <div>
      <a class="read-more button" href="/2020/09/16/detectar-dark-mode-en-browsers/">Leer más Seguir leyendo →</a>
    </div>
    
  </div>
  
  <div class="pagination">
  <div class="pagination__buttons">
    
    
      <span class="button next">
        <a href="/page/2/">
          <span class="button__text">Artículos anteriores</span>
          <span class="button__icon">→</span>
        </a>
      </span>
    
  </div>
</div>

</div>

  </div>

  
    <footer class="footer">
  <div class="footer__inner">
    
    
      <div class="copyright copyright--user">
        <span>© CSSLab 2005 ~ 2026. Todos los derechos reservados.<br> Escrito y mantenido por Jorge Epuñan desde 🇨🇱.</span>
    
      </div>
  </div>
</footer>


<script src="https://csslab.cl/assets/main.js"></script>
<script src="https://csslab.cl/assets/prism.js"></script>



<script src="//static.codepen.io/assets/embed/ei.js" async></script>


  
</div>

</body>
</html>
