5 reglas CSS imprescindibles para cualquier página web de Squarespace
Desde el punto de vista del CSS, Squarespace cubre prácticamente todo. No obstante, a continuación te presentamos cinco reglas CSS que deberías plantearte añadir a tu plantilla de CSS personalizado de Squarespace para mejorar la accesibilidad, la visualización del texto y la experiencia del usuario.
1) Comportamiento del desplazamiento
La propiedad «scroll-behavior» define si un navegador salta al instante a un identificador de fragmento (ID) o se desplaza hasta él de forma suave cuando se pulsa un enlace. Hay dos opciones de valor: «auto» y «smooth». …
«auto» es el valor predeterminado y permite saltar al instante entre los elementos
«smooth» es una transición entre elementos
html:focus-within {
scroll-behavior: smooth; }
2) Movimiento reducido
Es fundamental que recordemos que no todo el mundo quiere interactuar con una página web de la misma manera. Hay quienes piensan que las animaciones o las transiciones son elegantes y con estilo, mientras que a otros les pueden resultar molestas o les distraen, por lo que es importante respetar sus preferencias. …
Con estas reglas, el comportamiento de desplazamiento fluido volverá a los valores predeterminados, la duración de la animación se reducirá a 1 ms —apenas perceptible— y las animaciones en bucle se detendrán tras una iteración:
@media screen and (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important; }
}
«Movimiento reducido» no significa que no haya movimiento en absoluto; solo significa que las animaciones y las transiciones se reducen para las personas que eligen esa opción en su dispositivo.
3) Representación del texto
CSS te permite elegir entre la calidad de visualización del texto o la velocidad de visualización, o viceversa. Hay cuatro valores disponibles, pero solo utilizo dos habitualmente: «optimizeLegibility» u «optimizeSpeed». Es importante saber que «optimizeSpeed» desactiva el kerning y las ligaduras de una fuente, lo cual puede resultar fundamental para un diseño tipográfico. …
body {
text-rendering: optimizeLegibility; }
Algunos navegadores han implementado la propiedad «font-smooth» con valores como «auto», «always» y «never». WebKit y Mozilla han implementado propiedades similares con los valores «auto», «none», «antialiased» y «subpixel-antialiased». Se trata de propiedades no estándar, por lo que solo debes utilizarlas para aplicaciones específicas:
body {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
font-smooth: auto; }
La propiedad `font-feature-settings` controla los ajustes tipográficos, entre los que se incluyen las ligaduras, los números, las versalitas y los trazos decorativos. Para activar estas propiedades, hay que declararlas entre comillas, seguidas de «1» u «on». Para desactivarlas, hay que utilizar «0» u «off». Hay más de 20 ajustes, pero solo utilizo cinco de forma habitual:
frac: fracciones
liga: ligaduras estándar
lnum: números de alineación
tnum: números en formato tabular
cero: cero barrado
body {
font-feature-settings: "liga" 1, "tnum" 1; }
La propiedad CSS «hanging-punctuation» define si los signos de puntuación se sitúan dentro del recuadro de la línea o fuera, en el margen, lo cual queda mejor y es la posición tipográficamente correcta. …
body {
hanging-punctuation: first allow-end last; }
4) Margen de desplazamiento
La propiedad `scroll-margin-top` añade un margen adicional por encima de un elemento cuando se desplaza hasta él de forma brusca, por ejemplo, al pulsar un enlace que lleva a un identificador de fragmento (ID) situado por encima o por debajo de dicho enlace. …
[id] {
scroll-margin-top: 1.5rem; }
5) Ajuste de texto
La propiedad CSS «text-wrap» es una forma abreviada de controlar cómo se distribuye el texto dentro de un elemento. Sus valores son «balance», «pretty», «stable», «nowrap» y «wrap». Con «balance», el navegador calculará el número de palabras y las repartirá de forma equitativa entre varias líneas, lo que mejora al instante el aspecto de los titulares. …
h1, h2, h3, h4 {
text-wrap: balance; }
Sugerencia: Puedes ver los efectos de estos ajustes y mucho más en mi página de demostración dedicada a este artículo.
Añadir reglas CSS a Squarespace
Si añades estas cinco reglas CSS a tu plantilla de CSS personalizado, mejorarás al instante la accesibilidad, la visualización del texto y la experiencia del usuario en tu página web de Squarespace. Puedes copiar los estilos que aparecen a continuación o desde mi Gist en GitHub, que actualizo periódicamente.
¿Tienes reglas CSS diferentes en tu plantilla de CSS personalizado de Squarespace? Cuéntamelo en los comentarios o en las redes sociales.
/*
5 essential CSS rules to add to any Squarespace website
Author: Andy Clarke
Studio: https://stuffandnonsense.co.uk
Template store: https://stuffandnonsense.store
*/
html:focus-within {
scroll-behavior: smooth; }
@media screen and (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important; }
}
body {
min-height: 100vh;
font-feature-settings: "liga" 1, "tnum" 1;
hanging-punctuation: first allow-end last;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
font-smooth: auto; }
[id] {
scroll-margin-top: var(--spacing-r); }
h1, h2, h3, h4 {
text-wrap: balance; }
Andy Clarke
A menudo considerado uno de los pioneros del diseño web, Andy Clarke ha desempeñado un papel fundamental a la hora de ampliar los límites de esta disciplina y es conocido por sus diseños creativos y visualmente impresionantes. Su trabajo ha inspirado a innumerables diseñadores a explorar todo el potencial del diseño de productos y páginas web.
Andy ha escrito varios libros de referencia en el sector, entre los que se incluyen «Transcending CSS», «Hardboiled Web Design» y «Art Direction for the Web». Además, ha colaborado con empresas de todos los tamaños y sectores para ayudarles a alcanzar sus objetivos a través del diseño.
Visita el estudio de Andy, «Stuff & Nonsense», y echa un vistazo a sus plantillas Premium de edición limitada para Squarespace.