CSS: Then and Now
CSS first appeared in the mid 90s as CSS version 1 which later replaced by version 2 and then 2.1. These were monolithic specifications so all of CSS was either version 1 or version 2/2.1. Later, CSS was split into various modules under the umbrella of CSS3 which made it more flexible because different modules could have different version numbers and it was possible to update modules without needing to update the entire specification. For reference, you can find the specifications for each of these on the w3.org website - links below.
On the specification page for CSS3, you can see that a variety of modules are listed and they are at different stages of development. There is also a colour code denoting the status of each from First Public Working Draft to Superseded Recommendation and these are listed towards the bottom of the page.
The page is very useful as a reference but is also an interesting source of information on the future of CSS.
Available CSS Resources
The CSS3 Specifications on the w3.org site provides much more detailed on the various modules. For example, we can click on one of the module links under the Table of Specifications. Let's take Selectors Level 3 as an example. There is some brief data regarding the version followed by an abstract. Further down, there is a list of all the recognized patterns, effectively a list of possible selectors and to the right of these is a level indicating which level of CSS they belong to. For instance, the element selector is part of the CSS1 specification. However, it is important to remember that these specifications are intended to be used by developers (that is, browser developers for instance) so they are a little on the technical side. So, it may be useful to know that the specifications exist and there is some useful there. It can also be useful if you are interested in the history of CSS or Web Development in general.
Fortunately, there are other resources which are intended to be used by web developers or people, like myself, who are learning Web Development. A very good example of this is the CSS tutorial on the W3 Schools website. There is a menu on the left hand side with links to tutorials on various aspects of CSS such as tables. This provides some example tables and a 'Try it Yourself' button. Clicking it opens a new tab with the CSS styles for that page displayed next to the table. This is interactive so you can amend this CSS and see what effect that has on the table.
Further down the page, there is also a series of reference pages which provide a list of CSS properties, CSS selectors and so on.
A couple of other examples of useful websites which provide the same sort of information as is found in the W3 Schools tutorial. One example is the Codrops CSS Reference on tympanus.net
Another example is the CSS Reference on htmldog.com. Just as an aside, the htmldog.com site also has a link to an HTML Reference.
There are many other online resources, but those listed above are useful, particularly for beginners and it is nice to have some alternatives which may provide the same information, but organize it differently so you may find one easier to use than the others.
Checking Browser Support
When you are developing your CSS, particularly if you are using experimental or just new styles, there are a couple of questions you may want to ask. The first is what the status is of the CSS and the second is what browser support there is for it. For this, we will go back to the CSS3 Specification.
A good starting point here is the snapshots which shows you where the specification was at a particular time. The most useful is obviously the most recent which was CSS Snapshot 2017 at the time the video was recorded nearly 4 years ago. There are two further snapshots since then, the CSS Snapshot 2018 and the latest iteration which is the CSS Snapshot 2020.
A couple of other useful things on the W3 site, if you are interested in what might be coming up in CSS, the specifications home page for CSS3 has a link labelled PARTICIPDATE/DRAFTS, near the top of the page. Here, you can find information on modules that are being worked on. There are also some links to pages providing additional information on how to read W3C Specifications.
There is also a handy Cheatsheet where you can, for instance, search for a specific CSS property and get a quick summary along with a link to the specification for that property. Note that this is not limited to CSS, but can also be used to as a reference for HTML, JavaScript and a couple of others. There are also some recommendations for accessibility, internationalization and typography.
You can use the W3 references for information on browser support, but a more user-friendly alternative is the Can I User website. Again, this is not a site that is specific to CSS, but also covers HTML and JavaScript as well and perhaps others. Essentially, it is geared towards front-end technologies.
To see how this works, we can type in a CSS property such as gradient. The site provides a graphical representation of the support for this property provided by a range of browsers. For example, we can see that gradients we were supported in IE versions 6 to 9, but was supported in versions 10 and 11. Note that in this graphic, the current version for each browser has a black outline so you can easily see which this is.
If we look at another property, background-blend-mode, we can see that this is less well-supported. It is not supported at all in IE and was only partially supported by Safari in 2017 but is now fully supported. At the top right of the background-blend-mode pane, there is a figure for Global support which shows (in 2017) 73,33% of browsers offer full support and 12.13% offer partial support so in total, more than 85% of browsers do provide some form of support for this property.
In June 2021, this has increased to 96.44% in total (including 96.04% of browsers offering full support). If support is less than 100%, you may need to make a decision based on a number of factors such as which browsers do and do not support a property and who your audience is, which browsers do they tend to use. AS an example, if you know that 90% of your users are using IE, it's probably not a good idea to include a property it doesn't support unless you are able to provide a fallback option.
Another similar site is QuirksMode.org. The page has a table of contents and you can click on one of the links to get a quick overview of browser support.
Another useful service is provided by BrowserStack.com which allows you to test your page in a variety of simulated browsers and platforms. They do have a charged service, but you can sign up for free and I'm not entirely sure whether this is for a limited trial period or if there is a reduced service provided for free.
In practice, many of the issues with cross-browser compatibility have disappeared since most browsers offer pretty good support for CSS nowadays. As a result, you don't need to check every property you use, but you may consider using some of these tools when you are testing your site in preparation for final release or if you are using features of CSS that either very advanced or new.