Pequeños detalles Css que marcan diferencias: vol.1 14.12.12
Una pequeña lista de detalles Css que, posiblemente conozcas pero que quizás no utilices, y que marcan la diferencia entre una página buena y una buena página.
Pequeños detalles Css que marcan diferencias: vol.1
La diferencia entre una página buena y una "buena página" que destaca generalmente está en unos pocos detalles. Y esos detalles suelen ser una o dos declaraciones de Css de más o de menos.
Vamos con una pequeña lista de detalles que posíblemente ya conozcas pero que quizás no te hayas planteado utilizar.
Para conocer el soporte de los navegadores a las siguientes propiedades te recomiendo consultar alguna página como caniuse
text-overflow: ellipsis
Si un texto queda cortado, nada como indicarlo con sus tres puntos suspensivos dinales. Hoy ya es posible y muy sencillo de lograr usando sólo Css. Pincha y verás:
Insertando puntos suspensivos automáticamente con CSS
p.test {
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow: ellipsis; /*otras hornamentales*/
}
p.test:hover {
text-overflow:inherit;
overflow:visible;
width: auto;
cursor: pointer;
}
hyphens: auto; Corte de palabras entre líneas y su guión
O de cómo repartir una palabra al final de una línea y principio de la siguiente añadiendo un guión indicativo del corte:
“Contaba mi abuela Manuela, "queenciertaocasiónunavez", cuando el Egido Nuevo era todavía "unamatademontequequetevoyacontaratí" llegaba "porlomenosalhuertosuyo", "unanochecerradacuandomásbrillabaelsol" de Cabeza Caballo regresaba "eltamborilerodelpueblode" Villasbuenas.
hyphens:auto;/*añade los prefijos privativos*/
word-wrap:break-word;
Sobre la propiedad hyphens: hay autores que indican la obligatoriedad de declarar el idioma de la página o el elemento para que funcione correctamente en algún navegador. Yo, pese a lo que indican, en mi versión de Chrome (23.) no lo veo.
<!-- en el doctype -->
<html lang="es">
<!-- en su meta -->
<meta http-equiv="Content-Language" content="en,fr,es" />
<!-- en un elemento del body -->
<p lang="es">Un texto en español</p>
Artículos para ampliar info sobre estas dos propiedades
- En este blog: Guiones - y puntos suspensivos...
- En Quirksmode: Hyphenation works!
- En Webmonkey: Exercise better web typography with CSS hyphens
- En Meyerweb: Should You Hyphenate? y su continuación: En qué elementos habilitarlo
- En la dicumentación del W3c: CSS Text Module Level 3
::selection Resalta el elemento seleccionado
El pseudoelemento ::selection se utiliza para resaltar una parte del elemento que haya sido descatada por el usuario. Por ejemplo al seleccionarla con el ratón (pinchar y arrastrar).
/* Cualquier parte de cualquier elemento resaltada */
::-moz-selection { color: #fff; background: #666690; }
::selection { color: #fff; background: #666690; }
/* Sólo para la parte resaltada de un párrafo */
p::-moz-selection { color: #fff; background: #666690; }
p::selection { color: #fff; background: #666690; }
Advertencia:
A día de hoy el pseudoelemento ::selection de Css no es estándar. Está desaprobado (deprecated) y fuera de los documentos en desarrollo por el W3c.
Más información este blog: ::selection "Strike out"
Estilos a los campos de texto vía placeholder
Si has notado que en dispositivos móviles el contenido de los campos de texto (cuadros de búsqueda, inputs u otros campos de formularios) se corta abruptamente puedes poner remedio con placeholder y text-overflow: ellipsis:
<input type="search" id="campo2" placeholder="Texto a Mostrar">
::-webkit-input-placeholder {
text-overflow: ellipsis;
/* otras propiedades */
}
input:-moz-placeholder {
text-overflow: ellipsis;
/* otras propiedades */
}
Vía David Walsh en su blog:
Anular el text-decoration "heredado"
Un enlace con un span o/y un pseudoelemento que tenga declarado text-decoration afecta tanto al propio enlace como al span y al pseuodelemento. Y por más que lo intentes contradeclar no hay forma:
/excepto que declaras a los tres elementos con display: inline-block. Entonces la magia se realiza:
:-)Mucho MejorTienes una explicación detallada en este artículo del blog.
Usa :focus
Con la proliferación de dispositivos táctiles, no es buena idea confiar sólo en la pseudoclase :hover. Mucho menos si no sólo se aplican estilos ornamentales, si no que también están implicadas la aceesibilidad de contenidos o el funcionamiento de algún elemento.
Además de lo anterior, en algunas circunstancias puede sustituir a la pseudoclase :checked y hacks basados en ésta.
:focus, pese a que no sea tan persistente como :checked tiene un mejor soporte en navegadores/versiones.
Como ejemplo mira esta demo de Joshua Hibbert en codepen:
Y como complemento a esto, si no tienes una razón muy poderosa no anules el outline de forma general y por defecto. Mucho menos después de la ampliación de esta propiedad: La propiedad outline y outline-offset a fondo
:target sin sobresaltos
El principal inconveniente, por molesto, que tiene el uso de :target nace de sus propias características: el salto que conlleva. Al seleccionar un elemento el navegador desplaza los contenidos para colocar al target en la parte superior de la ventana.
El método para evitarlo es sencillo. Basta con fijar al elemento destino de :target y ocultarlo. Así:
.diana {
position: fixed;
display: none;
}
En el artículo ...:target sin salto... lo tienes explicado en detalle además de una demo con un sistema de navegación por pestañas basada en :target sin ese salto o desplazamiento propio
Más efectos que una película de Hollywood
Si necesitas o quieres sorprender, puedes recurrir a los filtros Css. Sabiendo que sólo son soportados, de momento, por webkit, pero que su uso ni degrada ni interfiere para mal en los navegadores que no los soportan.
Explicación y ejemplos:
- Introducción a los Filtros Css
- Fotos vintage o retro sólo con Css. Aplicación práctica de filter
- Diferencias: box-shadow frente al filtro Css drop-shadow
OjO a tus textos
Un artículo de estas características no podía terminar sin una llamada de atención para que seas cuidadoso en extremo con tus textos.
Si Utilizas @font-face debes estar atento a los posibles problemas y sus solucciones
Además a estas alturas no sólo deberías estar utilizando en valor em para los tamaños de las tipografías, sino que deberías plantearte ir migrando a rem (de Ems y Rems) y conociendo lo más nuevo: el font-size en función del tamaño de las cajas que lo contiene: "viewport-percentage"
Y más importante que estos aspectos de los textos y las tipografías es el asegurarse que, por encima de todo, sean legibles
N.B.: Complemento
Si te resultó interesante este artículo puede ver la segunda parte: Prácticas Css (a olvidar) que marcan diferencias: vol.2.
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
buenas sugerencias, gracias.
ResponderEliminarExcelente articulo 10/10
ResponderEliminarHola Kseso,
ResponderEliminargracias una vez por el magnífico tutorial, incluiría también una mejora de la usabilidad en formularios, como es mostrar el cursor pointer en vez de la flecha cuando el usuario sitúe el mouse encima de inputs.
Sí, también es buen apunte no sólo el tema de los cursores, sino todo aquello que afecta a la accesibilidad (outlines, colores/fondos, font-size y tantas otras).
ResponderEliminarSólo un pequeño apunte. Creo que quisiste decir "cursor: text;" en vez de pointer (la manita típica de los enlaces).
Un saludo