5 Essential CSS Rules For Any Squarespace Website
From a CSS perspective, Squarespace covers almost everything. However, here are five CSS rules you should consider adding to your Squarespace Custom CSS boilerplate to enhance accessibility, text rendering, and user experience.
1) Scroll behavior
The scroll-behavior property defines whether a browser jumps instantly to a fragment identifier (ID) or scrolls to it smoothly when someone presses a link. There are two value options: auto and smooth. …
auto is the default and jumps instantly between elements
smooth is a transition between elements
html:focus-within {
scroll-behavior: smooth; }2) Reduced motion
It’s essential we remember that not everyone wants to experience a website the same way. Some people think animations or transitions are slick and stylish, while others might find them annoying or distracting, so respecting their preferences is important. …
With these rules, smooth scrolling behaviour will revert to default, animation duration is reduced to a barely perceptible 1ms, and looping animations will stop after 1 iteration:
@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; }
}reduced-motion doesn’t mean there’ll be no motion at all; it just means animations and transitions are reduced for people who choose that option on their device.
3) Text rendering
CSS gives you the choice between text rendering quality or rendering speed or vice versa. There are four available values, but only two I regularly use: optimizeLegibility or optimizeSpeed. It’s important to know that optimizeSpeed disables a font’s kerning and ligatures which may be critical to a typographic design. …
body {
text-rendering: optimizeLegibility; }Some browsers have implemented a font-smooth property with values including auto, always, and never. WebKit and Mozilla have implemented similar properties with the values auto, none, antialiased, and subpixel-antialiased. These are non-standard properties, and you should only use them for specific applications:
body {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
font-smooth: auto; }The font-feature-settings property controls typographic settings, including ligatures, numerals, small caps, and swashes. To activate properties, declare them in quotes followed by either 1 or on. To disable them, use either 0 or off. There are over 20 settings, but only five I use regularly:
frac: fractions
liga: standard ligatures
lnum: lining numerals
tnum: tabular numerals
zero: slashed zero
body {
font-feature-settings: "liga" 1, "tnum" 1; }The hanging-punctuation CSS property defines whether punctuation sits inside a line box or outside in a margin, which looks better and is is the typographically correct position. …
body {
hanging-punctuation: first allow-end last; }4) Scroll margin
scroll-margin-top adds extra margin above an element when it’s snap scrolled to, for example, by pressing a link to a fragment identifier (ID) above or below a link. …
[id] {
scroll-margin-top: 1.5rem; }5) Wrapping text
The text-wrap CSS property is a shorthand for controlling how text wraps inside an element. Its values include balance, pretty, stable, nowrap, and wrap. With balance, a browser will calculate the number of words and divide them equally between multiple lines, instantly making headlines look better. …
h1, h2, h3, h4 {
text-wrap: balance; }Hint: You can see the effects of these settings and more on my demonstration page for this article.
Adding CSS rules to Squarespace
Adding these five CSS rules to your Custom CSS boilerplate will instantly enhance the accessibility, text rendering, and user experience of your Squarespace website. You can copy the styles below or from my regularly updated Gist on GitHub.
Do you have different CSS rules in your Squarespace Custom CSS boilerplate? Let me know in the comments or on social media.
/*
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
Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.
Andy’s written several industry-leading books, including ‘Transcending CSS,’ ‘Hardboiled Web Design,’ and ‘Art Direction for the Web.’ He’s also worked with businesses of all sizes and industries to achieve their goals through design.
Visit Andy’s studio, Stuff & Nonsense, and check out his limited edition Premium templates for Squarespace.