An Event Apart: Full-Featured Art Direction for the Web
by Laurence Hughes
At An Event Apart Chicago 2018, Mina Markham, Senior Engineer at Slack, showed us how we can take advantage of semantic HTML and modern CSS for better localisation. Here are my notes and to-dos.
This is about building pages that are progressively enhanced, localised, and accessible/inclusive.
Start with an MVP version that will work for everyone. Semantic HTML, a simple CSS layout using flex (for vertical centring) and floats, plus some basic typography.
Wraps enhancements in feature queries, i.e. @supports. (good browser support except IE 11)
Used CSS variables (actually called custom properties) for defining colours and setting up “modular scale” typography.
Remove float layout and introduce grid layout.
Localisation: set lang attribute appropriately on html element and this will not only automatically cause various layout and typographical elements to follow language conventions but also allow you to use the :lang pseudo class as a styling hook for locale-specific styles.
Remember that not just text strings but photos of people, typefaces and decorative elements may benefit from localisation (ref Japan).
Don’t remove default behaviour such as the :focus outline; since this could have accessibility implications. Instead, modify and fit better with your design.
Slack: on some pages there’s no logical main title, just same-hierarchy-level h2s, in which case they make the logo an h1.
My next actions
Try out CSS variables. These may resolve some of my current Sass bugbears in that you can reuse a variable, so I could have just one $base-font-size rather than one for each breakpoint.
Try out the writing-mode CSS property
Consider using the selector :root in place of html; they’re equivalent except the former has greater specificity.
Install Feature Queries Manager which aids testing fallbacks by toggling @supports and @supports not.
