Keeping track of all this can be overwhelming. Just when you think you’re up to date on everything, you find a new spec that you didn’t know existed, or an existing spec changes in a significant way. Because specifications and implementations are often in flux, keeping up with changes to CSS can be tough. But it is possible.
The World Wide Web Consortium manages a list of current specifications and their status . One of the best ways to become a CSS expert is to carefully read specifications. Specifications explain how features are supposed to work, and can help you recognize browser bugs, or understand what may be going wrong in your CSS.
If you’d like to track the development and discussion of CSS specifications, try the CSS Working Group’s GitHub repository. It contains current drafts of specifications, and a list of issues that developers, browser vendors, and specification editors are working through .
The CSS Working Group also has a Twitter account if you’d just like to keep up with developments without getting into the proverbial weeds.
1. Tracking Browser Support
The Can I Use site is the leader in the browser support tracking space. It tracks support for a range of CSS, HTML, SVG and JavaScript features in every major browser across several versions. Can I use shares documentation with the Mozilla Developer Network , another fantastic resource for tracking features as they land.
Chrome Platform Status tracks features as they appear in Google Chrome. Because they both use Chromium, Microsoft Edge hews closely to the feature set and release cycle of Google’s Chrome. If Chrome supports a feature, there’s a good chance Edge does as well. Other Chromium-based browsers, such as Samsung Internet, have a longer release cycle. Samsung includes the version of Chrome on which the current release is based as part of its release notes .
Apple is notoriously secret about its products. Safari, the web browser for macOS and iOS, is no exception. Safari is, however, based on WebKit, an open-source web browser engine. WebKit Feature Status is a great way to keep up with what’s coming to Safari and other WebKit-based browsers.
If you prefer to weigh in on what features browsers should support, you can also follow and comment on issue tickets in the bug trackers of WebKit , Firefox , and Chromium .
Developer interest can help vendors prioritize feature development.
1. Documentation and Tutorials
The Mozilla Developer Network is an amazing resource for web development more generally. Its CSS Reference is perhaps the best on the Web. Almost every property is documented, and each property’s page includes examples of use, details whether it’s experimental or production-ready, and links to the relevant specification.
For general CSS tricks, tips, and techniques, CSS-Tricks is an excellent resource. The site includes tutorials on CSS and other front-end development topics.
Stephanie Eckles’ Modern CSS Solutions is perfect for experienced developers who are still trying to learn the CSS landscape. Its companion site SmollCSS includes snippets.
Newsletters are also a great way to keep track of new CSS features. Rachel Andrew keeps track of layout specifications and implementations in her long-running weekly CSS Layout News . Her newsletter also contains useful pointers to CSS and design-focused resources.
SitePoint.com, too, has a treasure trove of CSS-related material. Its HTML and CSS channel has lots of CSS tutorials, including topics such as Grid, CSS optimization, authoring tools, and progressive enhancement. If you need help, you can always ask a question in the SitePoint
And that’s how this book ends. Of course, just reading this book isn’t sufficient for becoming a true CSS master. The best way to achieve mastery is by putting knowledge into practice. My hope is that you’ve gained a better understanding of a range of CSS topics, including specificity, layout, and project architecture. These topics provide a solid foundation for your journey toward CSS mastery.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.