Source is based on established and modern web standards that are well supported in all modern browsers. Source makes use of CSS Grid, Flexbox and CSS variables. It also makes use of ES6 javascript for the Navigation stack. (In fact it is only the Navigation stack that uses any javascript at all, everything else simply uses CSS). All of this makes Source extremely powerful and extremely lightweight.
(At the time of writing) around 92% of global internet usage occurs on modern browsers that support all of these standards (and this number is increasing rapidly). Even higher numbers support some of these features.
We have reached a stage where you only need to worry about any of this if your primary audience (e.g. in a work/institution/corporate setting) are tied to the use of (most likely) Internet Explorer (a browser that Microsoft themselves do not want people to use any more). If that describes your situation then Source will not be the best solution for you. For everyone else, Source lets you exploit these latest web standards to build stunning, lightweight websites in RapidWeaver.
Read on for more specific information about all of this.
CSS Grid / Flexbox
Our 2 Grid stacks enable us to create stunning layouts and also make use of powerful alignment options. They do this using CSS Grid (Grid Plus) and Flexbox (Grid and Grid Plus).
You can see that there is very widespread browser support for each of these things on the following web pages:
CSS Variables
CSS variables are a great way of setting up things (like colours) and having these readily available to use (via a variable name) wherever we want to on our site. (See how to use the Source colour variables here). It is a really simple and efficient approach, for example to set up a colour once and have it cascade across wherever that variable is used. CSS variables also have very widespread browser support.
Dark Mode
In addition to all of this, the Source Addon pack allows you to present a Dark Mode version of your web pages. To do this we use the 'prefers-dark-mode' media query. This media query is the new and therefore has less browser support (it is still supported in the latest versions of all the main browsers though!). The lack of support however has absolutely no impact in unsupported browsers as visitors to the page will simply see the 'light / normal' version of your site.
Fallback code for unsupported browsers
Source deliberately offers only very limited 'fallback' code for browsers that cannot support these elements of CSS. Adding support not only adds more code to the page but it also it's often argued (example, other example) that implementing support actually accentuates the problem as it enables people to stay with old browsers much longer than they should and limits what we as web designers are able to achieve. And lets not forget, it is not good for the users either for them to still be using these browsers (slow, security issues etc). Microsoft don't even want people using Internet Explorer any more and see it more as a 'compatibility solution' (article here).
We have added some fallback support so that pages should still be largely displayed in a readable format.
What does this mean for me?
If you know that a significant section of your audience do use older browsers (perhaps Internet Explorer in a workplace institution) then Source will likely not be the best choice of framework for you.
If you have a normal distribution of old browser users then it is nearing a stage where the numbers are almost negligible.
It is good practice to display an advisory message to people visiting your page on an older browser. As such, there is an optional setting in the main Source stack that you can set so that a message will display for anyone using an unsupported browser. You can also change the text of this and set whether it should be dismissible or not.
