Chorra

Le robé a Korochi, quien le robó a Mini-d, este estilo de help. Me parece súper piola, porque permite un nivel de lectura más, aunque es medio pesado andar tipeando tanto código.
El secreto está en crear un estilo (sigo la huella de los muchachos y lo nombro help) y definirle el borde inferior punteado y el cursor de ayuda, así:

.help {
border-bottom: 1px dashed #6C8F01;
cursor: help;
}

Mini-d lo explica con más detalle.

Etiquetas:

2 comentarios

  • Guille says:

    Si te aburre andar tipeando «tanto», en vez de usar [span class=»help»] podés reutilizar alguno de los elementos HTML que normalmente no necesites, como [em] o [s]. Tenés que definirlo distinto que con las clases:

    em {
    font-style: normal;
    border-bottom: 1px dashed #6C8F01;
    cursor: help;
    }

    (ojo que va em, no .em)

    Luego, se usa parecido a como lo estás usando vos:

    El texto aclarado es [em title=»Aclaración»]éste[/em].

    El font-style: normal; viene porque normalmente em es itálico. Al redefinirlo, no deseamos que cumpla más la función de poner itálico. Si en vez de [em] utilizaras [s], entonces le tenés que quitar el strike-through (text-decoration: none;).

    Otros tags que son suceptibles de ser redefinidos son cite (cita), dfn (definición), ins (texto insertado), etc.

  • mini-d says:

    El uso del CSS help no es más que una mejora para los acrónimos y las abreviaturas… por que semánticamente son mejores que poner un <span class=»…»>.

    Un Span básicamente es «nulo» no tiene ningún valor semántico, por ejemplo… si quieres decir el significado de una palabra, puedes usar dependiendo del modelo de XHTML que estás usando usar tags como def, dd, dl, var, abbr, acronym.

    Es mejor eso que usar span, usa span cuando sea algo inexplicable como por ejemplo, la palabra chabón, que no sale en el diccionario.

    Además si quieres explorar más en la semántica, puedes agregar atributos de lang=»es-ar» si la palabra es de idioma español de argentina.

    Es todo un mundo por explorar y divertirse.