🔥 CONCEPTOS PRINCIPALES, ATTRIBUTE SELECTORS (SELECTORES DE ATRIBUTOS)

¿Qué son los selectores de atributos (attribute selectos)?

Los selectores de atributos en CSS son una herramienta fundamental para aplicar estilos a elementos HTML basados en los valores de sus atributos. Estos selectores permiten una gran flexibilidad al diseñar páginas web, ya que pueden seleccionar elementos en función de una variedad de condiciones. Por ejemplo, se pueden utilizar para aplicar estilos a todos los elementos que tengan un atributo específico, como “href” en enlaces o “src” en imágenes. Además, los selectores de atributos pueden ser utilizados para seleccionar elementos cuyos atributos cumplan con ciertas condiciones, como valores que comiencen con ciertas letras o que contengan una cadena específica. Esto brinda a los diseñadores un control preciso sobre la apariencia de sus páginas web.

¿Qué son los ARIA States?

Los ARIA states en CSS son un conjunto de atributos de Accesibilidad en la Web (ARIA) utilizados para describir el estado actual de elementos HTML en aplicaciones web accesibles. Estos estados permiten a los diseñadores y desarrolladores web proporcionar información significativa a usuarios con discapacidades, mejorando la usabilidad y la experiencia en línea.

En Tailwind se utiliza el modificador aria-* para aplicar estilos basados en los ARIA States.

En el siguiente ejemplo se despliega/oculta un div basado en su aria-expanded.

<div aria-expanded="false" class="group is-expanded">
    <button
        onclick="void(document.querySelector('#panel').setAttribute('aria-expanded', 'true'))"
        class="p-5 bg-blue-500 text-white font-bold rounded-md"
    >
        Mostrar
    </button>

    <div class="hidden aria-expanded:block" id="panel">
        <p class="mt-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus unde
            nostrum, impedit explicabo eveniet reiciendis, aut, totam distinctio
            at dignissimos molestiae quidem omnis laboriosam aliquam! Ipsa sint
            minima iusto at!
        </p>

        <button
            onclick="void(document.querySelector('#panel').setAttribute('aria-expanded', 'false'))"
            class="b-5 bg-pink-600 text-white font-bold rounded-md mt-5 p-5"
        >
            Ocultar
        </button>
    </div>
</div>

Ejemplo

Por default tailwind incluye los modificadores mas comunes de los atributos ARIA.

• aria-checked
• aria-disabled
• aria-expanded
• aria-hidden
• aria-pressed
• aria-readonly
• aria-required
• aria-selected

¿Qué son los data attributes?

Los data attributes en HTML son atributos personalizados que permiten a los desarrolladores adjuntar información adicional a elementos HTML sin afectar su funcionalidad ni semántica. Estos atributos comienzan con “data-” y son útiles para almacenar datos personalizados que pueden ser accesibles y utilizados por scripts JavaScript o estilos CSS.

El modificador data-* permite definir estilos para los Data Attributes.

<div
    data-size="medium"
    class="data-[size=medium]:underline data-[size=medium]:underline-offset-4"
>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta.
</div>

Ejemplo

Soporte RTL

Los modificadores rtl (right-to-left) y ltr (left-to-right) permiten agregar estilos en los modos derecha-a-izquierda e izquierda-a-derecha cuando construyamos diseños multi-direccionales.

<div class="p-5 bg-white rounded-lg shadow-lg">
    <div class="grid grid-cols-2">
        <div dir="ltr">
            <h2 class="text-black ltr:text-red-600">Título columna 1</h2>
            <p>Texto de la columna 1</p>
        </div>
        <div dir="rtl">
            <h2 class="text-black rtl:text-green-600">Texto de la columna 2</h2>
            <p>Texto de la columna 2</p>
        </div>
    </div>
</div>

Estos modificadores de dirección solo son necesarios cuando estas creando un sitio web que requiere soporte de dirección en ambos sentidos. Si estas construyendo un sitio que solo no requiere este tipo de soporte solamente aplica los estilos que tengan sentido.

Estados abierto y cerrado (open/closed)

El modificador open permite aplicar estilos cuando una etiqueta <details> o <dialog> se encuentra en un estado open.

<details class="rounded-lg bg-white p-5 shadow-md open:ring-1">
    <summary>Un paso a través del tiempo</summary>
    <div class="mt-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis,
        nesciunt.
    </div>
</details>

Ejemplo