soy Kseso y esto EsCSS

Pequeños detalles Css que marcan diferencias: vol.1

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

·Por Kseso ✎ 4

detalles css que marcan diferenciasLa 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

  1. En este blog: Guiones - y puntos suspensivos...
  2. En Quirksmode: Hyphenation works!
  3. En Webmonkey: Exercise better web typography with CSS hyphens
  4. En Meyerweb: Should You Hyphenate? y su continuación: En qué elementos habilitarlo
  5. 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:

  1. Placeholders and Overflow
  2. HTML5 Placeholder Styling with CSS

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:

:-(Efecto Feo

/excepto que declaras a los tres elementos con display: inline-block. Entonces la magia se realiza:

:-)Mucho Mejor

Tienes 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:

  1. Introducción a los Filtros Css
  2. Fotos vintage o retro sólo con Css. Aplicación práctica de filter
  3. 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.

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