soy Kseso y esto EsCSS

Á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.

avatar del Editor del blog

the obCSServer ᛯ 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 Kseso