Ácratas del Css y Html. Cómo usar tus propios tags y que funcionen

Cómo usar etiquetas de autor o inventadas en el html y como selectores en el CSS y que funcionen perfectamente.

Ácratas del Css y Html. Cómo usar tus propios tags y que funcionen

Por Kseso ✎ 9

Cubierta de una reedición de Le Sabotage, obra del revolucionario y sindicalista francés Émile Pouget. Origen: wikipediaDespués de este artículo, posíblemente me gane un par de velas negras por parte de los puristas del css y html.
Porque vas a descubrir cómo puedes usar las etiquetas que quieras en el html y utilizarlas como selectores en tus estilos.

Esto es, que puedas hacer una página donde llames cabecera al header, por ejemplo, o cualquier otro que quieras o necesites. Y funciona, al menos en navegadores (incluido ie9). En antiguallas (ie8 y menores) no.

Sólo es una curiosidad y un detalle para ampliar conocimientos y romper prejuicios e ideas preconcebidas ( y erradas).

¡OjO! que no estoy diciendo que lo utilices. Sólo que es posible

La propiedad Display

Propiedad de css básica y un poco más compleja de lo que a simple vista pueda parecer. De ella dice el consorcio:

Esta propiedad, en combinación con float y position, determina el tipo de caja o cajas que es generada por un elemento.

Y como puedes ver en el enlace anterior, admite muchos valores. Pero básicamente, podríamos decir que son uno de tres los que suele tener por defecto los elementos del html:

  1. Block: Los elementos que son o pueden ser contenedores de otros elementos, como div, article, section... y todos los h1...h6. Se dice que la caja generada es de bloque
  2. Inline: Generan cajas de línea, fluyen (inmersos en) con lo que le rodea. Los típicos span, q, em...
  3. None: directamente no generan ningún tipo de caja. No existen en el flujo. Son invisibles.

Cambiando el tipo de caja

Los navegadores actuales cuando se encuentran un elemento (etiqueta) en el html "desconocido" lo muestran, pero generan una caja de tipo "inline". Con todo lo que conlleva.

Esta es la razón por la que en los reset css para html5 si te has fijado, incluyen algo como:

article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }

El cambio del valor que tiene por defecto display a un elemento suele ser una práctica común. Pero hay algunos aspectos "sorprendentes" por inesperados según en qué elemento lo apliquemos. Ya en alguna ocasión he jugado en este blog con ello.

Volviendo a lo nuestro

imagen ilustrativaDejemos la digresión teórica y volvamos a lo que has venido buscando xD aunque supongo que ahora ya ves por dónde van los tiros hoy.

Si alguna vez has intentando usar (por curiosidad o error de tipeo) etiquetas "de autor" habrás observado lo que te decía antes. Cosas como la de la imagen son las normales.

El navegador lo muestra, pero el css funciona a medias. Hay propiedades que sí y otras que no. ¿Nunca te sentiste intrigado?

El porqué ya te lo adelanté: esas "etiquetas de autor" tan imaginativas son tratadas como elementos de línea, display: inline.

Así que todo pasa por hacer como en los reset Css para Html5, declararlas como elementos de bloque. En el ejemplo de la imagen quedaría:

cabecera, hgordo, cuerpo, pie, digo { display: block; }

Y eureka, ya tengo un html en versión española. Cada cosa en su sitio y con todas las propiedades definidas en el css aplicadas a mis etiquetas "personales"

imagen ilustrativa

Bonus final

Como era de esperar, el validador de html te dirá que nanay, que él no compra y te pone la escarapela de "no válido".

Pero en el apartado de Css sin problemas, como es lógico. Esos elementos inventados usados como selectores al validador no le suponen ningún quebranto. Te llevas el sello.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 9

  1. El cabecera, hgordo, cuerpo, pie, digo {
    display: block;
    } solo funcionaria para navegadores que trabajen con HTML5 ?

    ResponderEliminar
  2. Hola Lenin:
    Como es sólo un juego o divertimento nada recomendable, no he hecho más pruebas que verificar en qué navegadores se muestran. IE8 y menores no.

    Desconozco las razones y si apoyado por algún js de los que hace que soporten las etiquetas de html5 se corregirá o no.

    Un saludo

    ResponderEliminar
    Respuestas
    1. De la misma forma que las etiquetas de HTML5 se agregan al DOM se puede agregar cualquier etiqueta inventada

      Eliminar
    2. Sí, "inventada" por el Consortium, no por nosotros. En XML creo que sí es válido, pero en HTML ya está explicado que no pasan la validación, no tiene sentido usarlas, y van a llevar el mismo formato por omisión.
      Si es por organizar el código visualmente, ya existe el atributo 'data-algo' que nos puede servir de referencia.

      Eliminar
  3. Sergio22/11/12

    Es útil crear tus propias etiquetas para aplicaciones internas en las que no se priorice tanto la compatibilidad entre navegadores y si la separación de cada dato.

    ResponderEliminar
  4. Eso crea páginas HTML no válidas :/

    ResponderEliminar
  5. Sí, claro, Carlos. Me alegra ver que compartes mi opinión expresada en el Bonus final con el que cierro el artículo.
    Quizás, como es lo último, te pasó desapercibido.

    Un saludo y gracias por la visita y compartir tu opinión.

    ResponderEliminar
  6. Buena manera de traducir el lenguaje a otro idioma, para los negados con el "espiqueninglis" como el menda.

    ResponderEliminar
  7. Las directivas en angularjs usan etiquetas propias.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap