soy Kseso y esto EsCSS

Prácticas Css (a olvidar) que marcan diferencias: vol.2

Una pequeña lista de detalles Css que quizás utilices y que deberías plantearte cambiar, ya que marcan la diferencia entre una página buena y una buena página.

Prácticas Css (a olvidar) que marcan diferencias: vol.2

·Por Kseso ✎ 5

imagen para ilustrar el postContinuación del artículo Pequeños detalles Css que marcan diferencias: vol.1 centrado en aquellas que deberías evitar hoy día.

Pese al uso muy extendido de alguna práctica, compresibles pues provienen de tiempos donde muchos de los dispositivos y formas de conectarse actuales ni se imaginaban, hoy su uso reporta más problemas que los que pretenden arreglar.

Display: none

La forma más extendida y casi universal de ocultar elementos para mostrarlos tras alguna acción del usuario. Por ejemplo en menús desplegables o en la navegación por tabs o pestañas. Vete olvidando su uso.

Contras

Dos son las razones principales que desaconsejan esta práctica:

  • Lo ocultado con display: none; es inaccesible para los lectores de pantalla.
  • Los bots de los buscadores ignoraran el elemento y todo lo contenido en él. Como si no existiese.

La alternativa

La solución de html5-boilerplate

.oculto { position: absolute; width: 1px; /* Si es 0 queda inaccesible a los lectores de pantalla */ height: 1px; /* Si es 0 queda inaccesible a los lectores de pantalla */ margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }

position: absolute; left: -9999px
text-indent: -9999px

Otro clásico para ocultar, cuando tenemos un elemento con una imagen (ya sea como fondo o src) y un texto que no queremos que se muestre: lo mandamos hasta el infinito y más allá indentándolo.

Contras

Aquí el problema radica en que obligamos al navegador a "dibujar" semejante caja

La alternativa

El método Kellum:

.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

Más sencillo y limpio es difícil de encontrar. Y si quieres algo más de info, mira este artículo.

h1 que es imagen + texto

Una situación muy habitual es que el h1 de la página esté formado por una imagen representativa acompañada de un texto. El "logo y el nombre del producto", por ejemplo.

Dos suelen ser los errores:

  1. Colocar la imagen vía css: background: url(ruta);.
    En este caso la imagen es parte de la información, es relevante, por lo tanto debe ir en el html, como img con su src.
  2. Esconder el texto, con cualquiera de los dos métodos anteriores (display: none // text-indent: -9999px)
    Aplica los puntos anteriores.

Las alternativas

  1. Las dos anteriores del display: none o la del text-indent.
  2. Para ocultar el texto es la conocida como técnica de reemplazo de imágenes. También efectiva y utilizada para botones o el típico enlace "leer más", "ir a".

    .mi-clase { font: 0/0 a; text-shadow: none; color: transparent; } Tienes una explicación detallada en mi artículo sobre esta técnica.
  3. Posicionar el texto de forma absoluta y colocarlo tapado por la imagen con z-index

* {Outline: none}

Típica regla que suele encontrarse en algunos minireset. Quitar el outline de todos los elementos. O también declararlo exprofeso en los enlaces.

Contras

Recuerda que esta propiedad tiene una carga muy fuerte de accesibilidad. Sirve, entre otras cosas, para identificar al elemento que recibe el foco, especialmente útil en la navegación por teclado.
Al inhibirla es imposible saber qué elemento se activará si se da intro.

La alternativa

Si el borde punteado tanto te molesta o rompe la estética de tu realización, se creativo:

  1. Conoce la propiedad outline a fondo para sacarle todo el partido.
  2. Usa la pseudoclase :focus y demuestra tu ingenio o imaginación.

Elementos desactivados

Si por alguna razón necesitas desactivar algo, un botón, un input, un campo de texto... no necesitas recurrir a complicadas realizaciones y mucho menos a desactivar el botón derecho del ratón.
O incluso como alternativa para indicar un texto obsoleto, en lugar del tachado text-decoration: line-through

.inactivo { pointer-events: none; opacity: 0.4; }

Más sobre pointer-events

Y lo que nunca deberías usar es la no-propiedad hace tiempo enterrada y que hay quien pretende haber descubierto ahora user-select.

Bordes al :hover

Si utilizas el modelo de caja estandar de Css2 y quieres o necesitas añadir un borde tras alguna acción, como hacer :hover, verás que se produce una recolocación y movimiento de los elementos que siguen al afectado.

No sólo es molesto a la vista, que lo es. También incide en el reflow del css y repintado del layout. O lo que es lo mismo, más carga de trabajo para el navegador/SO.

Las alternativas

Son varias las formas de evitar esos efectos no deseados:

  1. Usa box-sizing: border-box. Pero en según qué circustancias puede darse un aumento de la altura.
  2. Crea los bordes con box-shadow
  3. Recurre a la propiedad outline, enlazada antes, que no aumenta el tamaño.
  4. Usa márgenes negativos al :hover. Pero también pueden surgir imprevistos.

avatar del Editor del blog

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