La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

Por 2 Comentarios
La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

Ya en ocasiones anteriores he traído al blog propiedades Css (o aspectos que le atañen) que se encuentran recogidas fuera de lo que podría considerarse el corpus de Css. O lo que es lo mismo, su definición se encuentran en documentos "no css".

Como por ejemplo la propiedad pointer-events o las del grupo *-rendering. Ambas desarrolladas en la especificación relativa al SVG.

En esta ocasión la protagonista del artículo es la propiedad Css touch-action. Propiedad que se encuentra en el documento Pointer-events (no confundir con la propiedad mencionada anteriormente).

Este documento, que ha alcanzado recientemente el status de Recomendación, se centra en lo relativo al manejo de los eventos con independencia del dispositivo señalador y su hardware usado (gestos, "toques", clicks... con independencia del dispositivo: ratón, puntero, dedo..).

Leer: La propiedad Css "touch-action": controla la respuesta a los gestos y elimina su retraso de 300ms

Javascript con Furoya: agregar etiquetas a cada letra de un texto para aplicarles estilos CSS

Por 0 Comentarios
Javascript con Furoya: agregar etiquetas a cada letra de un texto para aplicar estilos CSS

Seguimos arruinando complementando un blog de CSS con apuntes de javascript.

Y ahora tampoco vamos a ver un ejemplo donde el JS modifica el CSS o lo complementa; pero aún así creo que a más de uno le va a gustar la propuesta.

Pongámonos en situación : tenemos un texto en un título, y queremos destacar la primera letra con un formato distinto al resto, ¿cómo hacemos?. Sí, con el pseudoelemento CSS ::first-letter tenemos muchos estilos disponibles. Y lo mismo si queremos modificar la primera línea (habiendo más de una), porque existe ::first-line.

Pero volvamos al primer caso. ¿Qué ocurre si queremos modificar la segunda y quinta letras?. Tenemos a los selectores :nth-algo, pero son para elementos HTML reales, y conseguir el efecto con ellos nos obliga a meter cada caracter en un span (por ejemplo) y así apuntarle no a la letra sino a la caja que la contiene.

El método en realidad no está mal, salvo por un pequeño detalle : provocaríamos suicidios en masa entre expertos en SEO y puristas de la semántica. Porque hay que destrozar las palabras en el código fuente.

Leer: Javascript con Furoya: agregar etiquetas a cada letra de un texto para aplicarles estilos CSS

Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading... (V)

Por 0 Comentarios
Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading

Hoy día, año 2015, el uso de tipografías de autor en la web es algo tan normalizado como el uso de colores e imágenes. Pero como en estas últimas, imágenes, al usarlas hay que tener presente algunas cuestiones para que su uso no penalice el funcionamiento y apariencia de la web.

Al usar la regla @font-face se suelen presentar algunos problemas. Unos, como el renderizado de los textos, son de sobra conocidos y hay soluciones más o menos efectivas. Sin embargo hay un segundo grupo de incidencias que no han tenido la misma difusión y sobre las que aún se está en proceso de halla una solucción óptima.

Entre estos últimos encontramos, entre otros, el conocido como FOIT (Flash of Invisible Text) asociado al tiempo de carga de las tipografías (Font loading).

Y entre los primeros suelen estar todos los relacionados con el aspecto que presentan los textos (renderizado).

Leer: Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading... (V)

Distribución de bloques en 1 sola fila y navegación horizontal sin anchura declarada

Por 9 Comentarios
Distribución y navegación horizontal sin anchuras definidas puro Css

Una de las características de Css en nuestro sistema de escritura es que los contenidos fuerzan el crecimiento de su caja padre en la vertical o altura. Esto supone que lo natural, si no se altera por declaración expresa, es que llegados a un punto aparece el scroll vertical para navegar por la página de arriba a aabajo.

Si deseas cambiar este comportamiento típico hay que declarar un Css para cada caso. Pero casi siempre eso supone tener que crear un sistema de al menos dos cajas enlazadas: La exterior de medidas contenidas (aunque sea en vw/vh) y overflow en X y para la interior (que contendrá la información) calcular su anchura para que quepan sus elementos en una línea sin que se quede ni corta ni larga. Como por ejemplo en este Slider RWD.

Esto no supone problema cuando el contenido (lo alojado en la caja hija anterior) es conocido de antemano. Pero el problema surge cuando ese contenido es variable de caso a caso o se genera dinámicamente.

Leer: Distribución de bloques en 1 sola fila y navegación horizontal sin anchura declarada