Prácticas Css (a olvidar) que marcan diferencias: vol.2 27.12.12
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
Continuació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
.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:
- 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. - Esconder el texto, con cualquiera de los dos métodos anteriores (display: none // text-indent: -9999px)
Aplica los puntos anteriores.
Las alternativas
- Las dos anteriores del display: none o la del text-indent.
- 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. - 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:
- Conoce la propiedad outline a fondo para sacarle todo el partido.
- 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:
- Usa box-sizing: border-box. Pero en según qué circustancias puede darse un aumento de la altura.
- Crea los bordes con box-shadow
- Recurre a la propiedad outline, enlazada antes, que no aumenta el tamaño.
- Usa márgenes negativos al :hover. Pero también pueden surgir imprevistos.
Kseso
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
Wow, leo esto y me siento como si todo lo que hago esta mal XD Gracias por los datos Kseso.
ResponderEliminarNo, Lucas, tampoco seas tan exagerado xD
ResponderEliminarSólo es una cuestión de evolución y adaptación. Son detalles que dan respuesta a los nuevos escenarios que se crean con la aparición de nuevos dispositivos y/o usos de la red.
Como pasa con todo, habrá a quien resulte útil y quienes no lo necesiten.
Un saludo
excelente recopilación, incluye para un tercer volumen si lo tienes en mente, la opción de añadir flechas antes o después de un elemento con puro Css y sin imágenes. Esta técnica también mola bastante.
ResponderEliminarGracias Kseso, un saludo.
Yo añadiría el no usar todas las cosas molonas que sepas de css en tu blog, por que lo hace innavegable.
ResponderEliminarEn Firefox directamente se bloquea el navegador.
Lo del paginado infinito es un invento del diablo. Si estoy bajando y veo una entrada que me interesa, y entro en ella, al volver a atrás tengo que volver a hacer el scroll infinito de nuevo.
Me encanta esta web por es muy interesante lo que se dice, pero no suelo poder verla por que es un engorro navegar por ella... :(
No sabes cuanto siento, Carlos, tus inconvenientes con este blog.
EliminarTanto como el inicio de tu comentario y lo que parece y creo que subyace en él.
"cosas molonas que sepas de css en tu blog" dices. No más de las que expongo en el blog y que por lo tanto son las que tú mismo y cualquier lector sabe.
"En Firefox directamente se bloquea el navegador.": Te contesto con tus propias palabras de aquí No es excusa, ya lo se, pero dice mucho, especialmente de mi desconocimineto de js.
"Lo del paginado infinito es un invento del diablo... un engorro navegar por ella... :(" Aquí si puedo ayudarte recomendando el uso del botón derecho del ratón y abrir en una nueva pestaña. Así no tendrás que volver a hacer scroll. O mejor aún. No uses el index del blog como buscador, mejor google con el operador de búsqueda "site:".
Gracias por tu opinión, Carlos. Más, si cabe, por el sobreesfuerzo que ha debido suponerte el localizar un artículo de hace 5 meses con las dificultades que has indicado. Veo que ellas te impidieron acceder al post de hace 15 días donde presentaba este tema.
Un saludo