May 2022 Frontend Updates: The State of CSS, Common Accessibility Issues, Text Wrapping and SVG!
This month we cover the State of CSS as seen at Google I/O, accessibility hints from the 2022 WebAIM Million report and some text wrapping and SVG tricks and techniques
This month we cover:
The State of CSS
The annual Google I/O conference, partially in-person again since 2019, just wrapped up. Apart from the hardware announcements and the Developer Keynote, there was a really interesting talk about CSS for developers and designers in the frontend space: The State of CSS.
We already spoke about the latest CSS additions and some upcoming features here two months ago, like native nesting, new color spaces, viewport units and container queries, among others. But Adam Argyle goes much deeper in the amazing article he wrote along his keynote.
We find it an essential go-to resource; an exhaustive compilation of features with good explanations, working examples on CodePen, browser compatibility info and links to the corresponding spec.
We couldn’t choose a single thing to highlight, but it was really interesting to realise that browser teams are uniting efforts and meeting together to discuss features and priorities they intend to work on. That is what Compat 2021 was about last year, and it has borne fruit. This year the initiative is called Interop 2022, and it’s even more ambitious. Future looks promising!
Do not skip this one and tweet Adam a compliment!
Common Accessibility Issues
WebAIM, the web accessibility focused non-profit organisation, has just published his latest WebAIM Million annual report. It is a comprehensive analysis that provides an insight into the current state of web accessibility and trends over time.
It also establishes interesting correlations between web categories, domains or web development technologies and the number of accessibility errors. Unsurprisingly, .gov and .edu domains are the ones with better error averages and oldest web development libraries, like Backbone, have the worst figures.
Regarding the accessibility issues, Hidde wrote a great article that analyses the most common accessibility issues from the report and how to identify, audit and fix them as a developer or designer. This is the list of the top offenders:
- Low contrast text
- Missing alt text in
- Empty links and buttons
- Missing form labels (for=
”input_id”) - Missing language (lang attribute in
tag)
The good news is that they are easy to fix! Check out the article to learn more about each one.
Text Wrapping Explained
Normally, text flows to the next line at “soft wrap opportunities”, i.e., between words or after hyphens. But sometimes, there are long words or URLs that can cause problems. Should that word overflow the container? If not, how should the browser break it?
In Coder’s Block they’ve got answers and they have published an interesting article about text wrapping and word breaking.
Combining the CSS overflow-wrap, word-break and line-break properties,
you can fine tune browser behaviour on text wrapping and word breaking. You can also specify word break
opportunities with the Unicode
character.
Hyphenation is also an option, both automatic with the CSS hyphens property or manually specifying
opportunities to hyphenate with the Unicode soft hyphen () character.
And there is much more: Preformatted text, preventing text for wrapping, non breaking spaces… Check it out!
Fancy SVG Techniques
From generative SVG art to SVG masks, fancy grainy SVG gradients or handy SVG tools is what you can find in one of the latest articles published in Smashing Magazine: Magical SVG Techniques.
Particularly worth mentioning are the Animated SVG Debit Card Illustrations and the Generative Mountain Ridge Dividers.
Also, if you work with SVG, you must check out this compilation of SVG generation tools. From background gradient generation to patterns, section dividers, avatars, data visualisation and much more!
Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!