Empalmando el ADN de HTML con selectores de atributos CSS
Publicado: 2022-03-10Durante la mayor parte de mi carrera, los selectores de atributos han sido más mágicos que científicos. Miraba, atónito, el CSS por generar un enlace en una hoja de estilo de impresión, sin entender nada. Lo copiaba obedientemente y lo pegaba en mi hoja de estilo de impresión y luego corría para sacar cualquier proyecto que fuera el montón de basura en llamas más grande.
Pero ya no tienes que quedarte boquiabierto con los selectores de atributos CSS. Al final de este artículo, los usará para ejecutar diagnósticos en su sitio, solucionar problemas que de otro modo no podrían resolverse y generar experiencias tecnológicas tan avanzadas que se sentirán como magia. Puede pensar que prometo demasiado y tiene razón, pero una vez que comprenda el poder de los selectores de atributos, es posible que tenga ganas de exagerar.
En el nivel más básico, pones un atributo HTML entre corchetes y lo llamas selector de atributos así:
[href] { color: chartreuse; } El texto de cualquier elemento que tenga un href y no tenga un selector más específico ahora se volverá chartreuse mágicamente. La especificidad del selector de atributos es la misma que las clases.
Nota : Para obtener más información sobre la combinación de jaulas que es la especificidad de CSS, puede leer "Especificidad de CSS: cosas que debe saber" o, si le gusta Star Wars: "Guerras de especificidad de CSS".
Pero puede hacer mucho más con los selectores de atributos. Al igual que su ADN, tienen una lógica integrada para ayudarlo a elegir todo tipo de combinaciones de atributos y valores. En lugar de solo hacer coincidir exactamente la forma en que lo haría una etiqueta, clase o selector de ID, pueden hacer coincidir cualquier atributo e incluso valores de cadena dentro de los atributos.
Selección de atributos
Los selectores de atributos pueden vivir solos o ser más específicos, es decir, si necesita seleccionar todas las etiquetas div que tenían un atributo de title .
div[title]Pero también puede seleccionar los hijos de divs que tienen un título haciendo lo siguiente:
div [title]Para ser claros, ningún espacio entre ellos significa que el atributo está en el mismo elemento (al igual que un elemento y una clase sin espacio), y un espacio entre ellos significa un selector descendiente, es decir, seleccionar los hijos del elemento que tienen el atributo.
Puede ser mucho más granular en la forma en que selecciona los atributos, incluidos los valores de los atributos.
div[title="dna"]Lo anterior selecciona todos los divs con un título exacto de "dna". No se seleccionaría un título de "el ADN es increíble" o "mutación del ADN", aunque existen algoritmos de selección que manejan cada uno de esos casos (y más). Llegaremos a esos pronto.
Nota : Las comillas no son necesarias en los selectores de atributos en la mayoría de los casos, pero las usaré porque creo que aumenta la claridad y garantiza que los casos límite funcionen correctamente.
Si desea seleccionar "adn" de una lista separada por espacios como "mi hermoso ADN" o "¡mutar el ADN es divertido!" puede agregar una tilde o "squiggly", como me gusta llamarlo, delante del signo igual.
div[title~="dna"]Puede seleccionar títulos como "no culpes a mi culpa" o "su estupidez es de crianza, no de ADN", luego puede usar el signo de dólar $ para que coincida con el final de un título.
[title$="dna"]Para hacer coincidir el frente de un valor de atributo, como títulos de "dnamutants" o "dna-splicing-for-all", use un signo de intercalación.
[title^="dna"]Si bien tener una coincidencia exacta es útil, puede ser una selección demasiado estrecha, y la coincidencia del frente de intercalación puede ser demasiado amplia para sus necesidades. Por ejemplo, es posible que no desee seleccionar un título de "genealogía", pero aún así seleccione tanto "gen" como "gene-data". El carácter de tubería (o barra vertical) es solo eso; hace una coincidencia exacta, pero incluye cuando la coincidencia exacta va seguida de un guión.
[title|="gene"]Por último, hay un operador de atributo de búsqueda completo que coincidirá con cualquier subcadena.
[title*="dna"]Pero utilícelo sabiamente ya que lo anterior coincidirá con "Me-gusta-mi-adn-me-gusta-mi-carne-rara" así como con "edna", "secuestro" y "equidnas" (algo que Edna realmente no debería hacer. )
Lo que hace que estos selectores de atributos sean aún más poderosos es que son apilables, lo que le permite seleccionar elementos con múltiples factores coincidentes.
¿Pero necesita encontrar a etiqueta que tenga un título y una clase que termine en "genes"? Así es cómo:
a[title][class$="genes"]No solo puede seleccionar los atributos de un elemento HTML, sino que también puede imprimir sus genes mutados usando pseudo-“ciencia” (es decir, pseudo-elementos y la declaración de contenido).
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }El código de arriba mostrará la respuesta a uno de los peores chistes jamás escritos al pasar el mouse (sí, lo escribí yo mismo, y sí, llamarlo "broma" es ser generoso).
Lo último que debe saber es que puede agregar una bandera para que las búsquedas de atributos no distingan entre mayúsculas y minúsculas. Agrega una i antes del corchete de cierre.
[title*="DNA" i]Y así coincidiría con "dna", "DNA", "dnA" y cualquier otra variación.
El único inconveniente de esto es que i solo funciona en Firefox, Chrome, Safari, Opera y algunos navegadores móviles.
Ahora que hemos visto cómo seleccionar con selectores de atributos, veamos algunos casos de uso. Los he dividido en dos categorías: usos generales y diagnósticos .
Usos generales
Estilo por tipo de entrada
Puede diseñar los tipos de entrada de forma diferente, por ejemplo, correo electrónico o teléfono.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Mostrar enlaces telefónicos
Puede ocultar un número de teléfono en ciertos tamaños y mostrar un enlace de teléfono en su lugar para facilitar las llamadas en un teléfono.
span.phone { display: none; } a[href^="tel"] { display: block; }Enlaces internos frente a externos, seguros frente a inseguros
Puede tratar los enlaces internos y externos de manera diferente y diseñar los enlaces seguros de manera diferente a los enlaces inseguros.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }Iconos de descarga
Un atributo que HTML5 nos dio fue "descargar", que le dice al navegador que, lo adivinó, descargue ese archivo en lugar de intentar abrirlo. Esto es útil para archivos PDF y DOC a los que desea que accedan las personas pero que no desea que abran en este momento. También facilita el flujo de trabajo para descargar muchos archivos seguidos. La desventaja del atributo de download es que no hay una imagen predeterminada que lo distinga de un enlace más tradicional. A menudo, esto es lo que desea, pero cuando no es así, puede hacer algo como lo siguiente.
a[download]:after { content: url(download-arrow.svg); }También puede comunicar tipos de archivos con diferentes íconos como PDF, DOCX, ODF, etc.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }También puede asegurarse de que esos íconos solo estén en enlaces descargables apilando el selector de atributos.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Anular o volver a aplicar código obsoleto/obsoleto
Todos nos hemos encontrado con sitios antiguos que tienen un código obsoleto, pero a veces actualizar el código no vale la pena el tiempo que llevaría hacerlo en seis mil páginas. Es posible que deba anular o incluso volver a aplicar un estilo implementado como un atributo antes de HTML5.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Anular estilos en línea específicos
A veces te encontrarás con estilos en línea que complican el trabajo, pero provienen de un código que está fuera de tu control. Debería decirse que si puede cambiarlos sería ideal, pero si no puede, aquí hay una solución.
Nota : Esto funciona mejor si conoce la propiedad y el valor exactos que desea anular, y si desea anularlos dondequiera que aparezcan.
Para este ejemplo, el margen del elemento se establece en píxeles, pero debe expandirse y establecerse en em s para que el elemento pueda reajustarse correctamente si el usuario cambia el tamaño de fuente predeterminado.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Nota : este enfoque debe usarse con extrema precaución, ya que si alguna vez necesita anular este estilo, caerá en una guerra !important y los gatitos morirán.
Mostrar tipos de archivos
La lista de archivos aceptables para una entrada de archivo es invisible de forma predeterminada. Por lo general, usaríamos un pseudo elemento para exponerlos y, aunque no puede hacer pseudo elementos en la mayoría de las etiquetas de input (o en Firefox o Edge), puede usarlos en las entradas de archivos.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }Menú acordeón HTML
Los details no muy publicitados y el dúo de etiquetas de summary son una forma de hacer menús expandibles/acordeón con solo HTML. Los detalles envuelven tanto la etiqueta de summary como el contenido que desea mostrar cuando el acordeón está abierto. Al hacer clic en el resumen, se expande la etiqueta de detail y se agrega un atributo abierto. El atributo abierto facilita el estilo de una etiqueta de details abierta de manera diferente a una etiqueta de details cerrada.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Imprimir enlaces
Mostrar URL en estilos de impresión me llevó por este camino para comprender los selectores de atributos. Deberías saber cómo construirlo tú mismo ahora. Simplemente selecciona todas las etiquetas con a href , agrega un pseudoelemento e imprímelas usando attr() y content .
a[href]:after { content: " (" attr(href) ") "; }Información sobre herramientas personalizada
Crear información sobre herramientas personalizada es fácil y divertido con los selectores de atributos (bueno, divertido si eres un nerd como yo, pero fácil de cualquier manera).
Nota : este código debería llevarlo a la vecindad general, pero es posible que necesite algunos ajustes en el espaciado, el relleno y la combinación de colores según el entorno de su sitio y si tiene mejor gusto que yo o no.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }Claves de acceso
Una de las mejores cosas de la web es que ofrece muchas opciones diferentes para acceder a la información. Un atributo que rara vez se usa es la capacidad de establecer una clave de accesskey para que se pueda acceder directamente a ese elemento a través de una combinación de teclas y la letra establecida por la accesskey de acceso (la combinación exacta de teclas depende del navegador). Pero no hay una manera fácil de saber qué claves se han configurado en un sitio web.
El siguiente código mostrará esas teclas en :focus . No uso on hover porque la mayoría de las veces las personas que necesitan la accesskey de acceso son aquellas que tienen problemas para usar un mouse. Puede agregar eso como una segunda opción, pero asegúrese de que no sea la única opción.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Diagnóstico
Estas opciones son para ayudarlo a identificar problemas durante el proceso de compilación o localmente mientras intenta solucionar problemas. Poner estos en su sitio de producción hará que los errores se destaquen para sus usuarios.
Audio sin controles
No uso la etiqueta audio con demasiada frecuencia, pero cuando la uso, a menudo me olvido de incluir el atributo de controls . El resultado: no se muestra nada. Si está trabajando en Firefox, este código puede ayudarlo a descubrir si tiene un elemento de audio oculto o si la sintaxis o algún otro problema impide que aparezca (solo funciona en Firefox).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Sin texto alternativo
Las imágenes sin texto alternativo son una pesadilla de logística y accesibilidad. Son difíciles de encontrar con solo mirar la página, pero si agrega esto, aparecerán de inmediato.
Nota : utilizo outline en lugar de border porque los bordes pueden aumentar el ancho del elemento y estropear el diseño. outline no agrega ancho.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Archivos Javascript asincrónicos
Las páginas web pueden ser un conglomerado de sistemas de administración de contenido, complementos, marcos y código que Ted (sentado tres cubículos más allá) escribió durante las vacaciones porque el sitio no funcionaba y le teme a su jefe. Averiguar qué JavaScript se carga de forma asincrónica y qué no puede ayudarlo a concentrarse en dónde mejorar el rendimiento de la página.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Elementos de eventos de Javascript
También puede resaltar elementos que tienen un atributo de evento JavaScript para refactorizarlos en su archivo JavaScript. Me he centrado en el atributo OnMouseOver aquí, pero funciona para cualquiera de los atributos de eventos de JavaScript.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Elementos ocultos
Si necesita ver dónde viven sus elementos ocultos o entradas ocultas, puede mostrarlos con:
[hidden], [type="hidden"] { display: block; }Pero con todas estas asombrosas capacidades crees que debe haber una trampa. Seguramente, los selectores de atributos solo deben funcionar mientras están marcados en Chrome o en las compilaciones nocturnas de Fiery Foxes en el borde de un Safari. Esto es demasiado bueno para ser verdad. Y, desafortunadamente, hay una trampa.
Si desea trabajar con selectores de atributos en el navegador más querido, es decir, IE6, no podrá hacerlo. (Está bien; deja que las lágrimas caigan. No juzgues). Prácticamente en cualquier otro lugar al que puedas ir. Los selectores de atributos son parte de la especificación CSS 2.1 y, por lo tanto, han estado en los navegadores durante la mayor parte de una década.
Por lo tanto, estos selectores ya no deberían ser mágicos para usted, sino que se revelan como una tecnología suficientemente avanzada. Son más ciencia que magia, y ahora que conoces sus secretos más profundos, depende de ti. Vaya adelante y haga maravillas desconcertantes de la ciencia en la web.