Empalmando el ADN de HTML con selectores de atributos CSS

 

 

 

  • SmashingConf Nueva York 2024
  • SmashingConf Friburgo 2024

  • Índice
    1. Selección de atributos
    2. Usos generales
      1. Estilo por tipo de entrada
      2. Mostrar enlaces telefónicos
      3. Enlaces internos versus externos, seguros versus inseguros
      4. Descargar iconos
      5. Anular o volver a aplicar código obsoleto/obsoleto
      6. Anular estilos en línea específicos
      7. Mostrar tipos de archivos
      8. Menú HTML de acordeón
      9. Enlaces de impresión
      10. Información sobre herramientas personalizada
      11. Claves de acceso
    3. Diagnóstico
      1. Audio sin controles
      2. Sin texto alternativo
      3. Archivos Javascript asincrónicos
      4. Elementos de eventos de JavaScript
      5. Artículos ocultos

    Los selectores de atributos son mágicos. Pueden sacarlo de problemas difíciles, ayudarlo a evitar agregar clases y señalar algunos problemas en su código. Pero no se preocupe, si bien los selectores de atributos son complejos y potentes, son fáciles de aprender y utilizar. En este artículo, analizaremos cómo funcionan y le daremos algunas ideas sobre cómo utilizarlos.

     

    Durante la mayor parte de mi carrera, los selectores de atributos han sido más mágicos que científicos. Me quedaba mirando, atónito, el CSS para generar un enlace en una hoja de estilo de impresión, sin entender nada. Lo copiaba y pegaba diligentemente en mi hoja de estilo de impresión y luego salía corriendo para sacar cualquier proyecto que fuera el mayor montón de basura en llamas.

    Pero ya no tienes que quedarte boquiabierto ante los selectores de atributos CSS. Al final de este artículo, los utilizará para ejecutar diagnósticos en su sitio, solucionar problemas que de otro modo no tendrían solución y generar experiencias tecnológicas tan avanzadas que parezcan mágicas. Puede pensar que estoy prometiendo 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 hrefy no tenga un selector más específico ahora mágicamente se volverá chartreuse. La especificidad del selector de atributos es la misma que la de las clases.

    Nota : Para obtener más información sobre la coincidencia de jaula 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 puedes hacer mucho más con los selectores de atributos. Al igual que su ADN, tienen una lógica incorporada para ayudarlo a elegir todo tipo de combinaciones y valores de atributos. En lugar de solo coincidir exactamente como lo haría una etiqueta, clase o selector de identificación, pueden coincidir con 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 divlas etiquetas que tenían un titleatributo.

    div[title]

    Pero también puedes seleccionar los hijos de divs que tienen título haciendo lo siguiente:

    div [title]

    Para ser claros, ningún espacio entre ellos significa que el atributo está en el mismo elemento (como un elemento y una clase sin un 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 de seleccionar atributos, incluidos los valores de los atributos.

    div[title="dna"]

    Lo anterior selecciona todos los divs con un título exacto de "adn". No se seleccionaría un título de “adn es asombroso” o “dnamutación”, aunque existen algoritmos de selección que manejan cada uno de esos casos (y más). Llegaremos a ellos pronto.

    Nota : En la mayoría de los casos, las comillas no son necesarias en los selectores de atributos, pero las usaré porque creo que aumentan la claridad y garantizan que los casos extremos funcionen correctamente.

    Si desea seleccionar "adn" de una lista separada por espacios como "mi hermoso adn" o "¡mutar el adn es divertido!" puedes agregar una tilde o "garabato", como me gusta llamarlo, delante del signo igual.

    div[title~="dna"]

    Puede seleccionar títulos como “dontblamemeblamemydna” o “su-estupidez-es-de-educación-no-adn” y 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 “dnamutantes” o “adn-splicing-for-all”, utilice un signo de intercalación.

    [title^="dna"]

    Si bien tener una coincidencia exacta es útil, puede ser una selección demasiado ajustada y la coincidencia frontal del signo 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 sí seleccionar "gen" y "datos genéticos". 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 con prudencia, ya que lo anterior coincidirá con "Me gusta-mi-adn-como-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 necesitas encontrar la aetiqueta que tiene un título y una clase que termina en “genes”? Así es cómo:

    a[title][class$="genes"]

    No sólo puede seleccionar los atributos de un elemento HTML, sino que también puede imprimir sus genes mutados utilizando pseudo-“ciencia” (es decir, pseudoelementos y la declaración de contenido).

    spanWhat’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 anterior 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 marca para que las búsquedas de atributos no distingan entre mayúsculas y minúsculas. Agrega un iantes 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 isolo 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óstico . Recetas faciles y rápidas

    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 telefónico para facilitar las llamadas desde un teléfono.

    span.phone { display: none;}a[href^="tel"] { display: block;}

    Enlaces internos versus externos, seguros versus 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);}

    Descargar iconos

    Un atributo que nos dio HTML5 fue "descargar", que le dice al navegador que, como habrá adivinado, descargue ese archivo en lugar de intentar abrirlo. Esto es útil para archivos PDF y DOC a los que desea que las personas accedan pero no desea que se abran en este momento. También facilita el flujo de trabajo para descargar muchos archivos seguidos. La desventaja del downloadatributo es que no hay un elemento visual predeterminado 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 código obsoleto, pero a veces actualizar el código no vale el tiempo que llevaría hacerlo en seis mil páginas. Es posible que necesites anular o incluso volver a aplicar un estilo implementado como atributo antes de HTML5.

    div bgcolor="#000000" color="#FFFFFF"Old, holey genes/divdiv[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 están arruinando el trabajo, pero provienen de un código fuera de tu control. Debería decirse que sería ideal si puedes cambiarlos, pero si no puedes, aquí tienes una solución.

    Nota : Esto funciona mejor si conoce la propiedad y el valor exactos que desea anular, y si desea anularlos dondequiera que aparezca.

    Para este ejemplo, el margen del elemento se establece en píxeles, pero es necesario expandirlo y establecerlo en ems para que el elemento pueda reajustarse correctamente si el usuario cambia el tamaño de fuente predeterminado.

    divTeenage Mutant Ninja Myrtle/divdiv[style*="margin: 8px"] { margin: 1em !important;}

    Nota : Este enfoque debe usarse con extrema precaución, ya que si alguna vez necesitas anular este estilo, caerás en una !important guerra y los gatitos morirán.

    Mostrar tipos de archivos

    La lista de archivos aceptables para la entrada de un archivo es invisible de forma predeterminada. Normalmente, usamos un pseudoelemento para exponerlos y, aunque no puedes usar pseudoelementos en la mayoría de inputlas etiquetas (o en absoluto en Firefox o Edge), puedes usarlos en las entradas de archivos.

    input type="file" accept="pdf,doc,docx"[accept]:after { content: "Acceptable file types: " attr(accept);}

    detailsEl dúo de etiquetas y no muy publicitado summaryes una forma de crear menús expandibles/de acordeón con solo HTML. Los detalles envuelven tanto la summaryetiqueta como el contenido que desea mostrar cuando el acordeón está abierto. Al hacer clic en el resumen, se expande la detailetiqueta y se agrega un atributo abierto. El atributo abierto facilita el diseño de una detailsetiqueta abierta de manera diferente a una detailsetiqueta cerrada.

     

    details summaryList of Genes/summary Roddenberry Hackman Wilder Kelly Luen Yang Simmons/details
    details[open] { background-color: hotpink;}

    Enlaces de impresión

    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 seleccione todas alas etiquetas con href, agregue un pseudoelemento e imprímalas usando attr()y content.

    a[href]:after { content: " (" attr(href) ") ";}

    Información sobre herramientas personalizada

    Crear información sobre herramientas personalizada es divertido y fácil con selectores de atributos (está bien, divertido si eres un nerd como yo, pero fácil de cualquier manera).

    Nota : Este código debería guiarlo en los alrededores generales, pero puede necesitar algunos ajustes en el espaciado, el relleno y la combinación de colores dependiendo del entorno de su sitio y de 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 utiliza es la capacidad de configurar un accesskeypara que se pueda acceder a ese elemento directamente mediante una combinación de teclas y la letra establecida por accesskey(la combinación de teclas exacta depende del navegador). Pero no existe una manera fácil de saber qué claves se han configurado en un sitio web.

    El siguiente código mostrará esas claves en :focus. No lo uso hoverporque la mayoría de las veces las personas que lo necesitan accesskeyson aquellas que tienen problemas para usar el mouse. Puedes agregar eso como una segunda opción, pero asegúrate de que no sea la única opción.

    a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey);}

    Diagnóstico

    Estas opciones sirven para ayudarle a identificar problemas durante el proceso de compilación o localmente mientras intenta solucionarlos. Ponerlos en su sitio de producción hará que los errores se destaquen para sus usuarios.

    Audio sin controles

    No uso la audioetiqueta con demasiada frecuencia, pero cuando la uso, a menudo me olvido de incluir el controlsatributo. El resultado: no se muestra nada. Si estás trabajando en Firefox, este código puede ayudarte a descubrir si tienes 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 agregas esto, aparecerán de inmediato.

     

    Nota : lo uso outline en lugar de border porque los bordes podrían 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 gestión de contenidos, complementos, marcos y códigos que Ted (sentado tres cubículos más allá) escribió durante las vacaciones porque el sitio no funcionaba y 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 de JavaScript para refactorizarlos en su archivo JavaScript. Me he centrado en el OnMouseOveratributo aquí, pero funciona para cualquiera de los atributos de eventos de JavaScript.

    [OnMouseOver] { color: burlywood;}[OnMouseOver]:after { content: "JS: " attr(OnMouseOver);}

    Artículos ocultos

    Si necesita ver dónde se encuentran sus elementos ocultos o entradas ocultas, puede mostrarlos con:

    [hidden], [type="hidden"] { display: block;}

    Pero con todas estas increíbles capacidades, crees que debe haber un problema. Seguramente los selectores de atributos solo deben funcionar mientras están marcados en Chrome o en las versiones nocturnas de Fiery Foxes on the Edge of a Safari. Esto es demasiado bueno para ser verdad. Y, lamentablemente, hay un problema.

    Si desea trabajar con selectores de atributos en el navegador más querido, es decir, IE6, no podrá hacerlo. (Está bien; deja caer las lágrimas. Sin juicios.) En casi todos los demás lugares puedes 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 revelarse como una tecnología suficientemente avanzada. Son más ciencia que magia, y ahora que conoces sus secretos más profundos, depende de ti. Continúe y realice maravillas desconcertantes de la ciencia en la web.

    (dm, ra, yk, il)Explora más en

    • CSS
    • HTML
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Empalmando el ADN de HTML con selectores de atributos CSS

    Empalmando el ADN de HTML con selectores de atributos CSS

    Estilo por tipo de entradaMostrar enlaces telefónicosEnlaces internos versus externos, seguros versus insegurosDescargar iconosAnular o volver a aplicar códi

    programar

    es

    https://pseint.es/static/images/programar-empalmando-el-adn-de-html-con-selectores-de-atributos-css-955-0.jpg

    2024-05-20

     

    Empalmando el ADN de HTML con selectores de atributos CSS
    Empalmando el ADN de HTML con selectores de atributos CSS

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences