In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and not coming to the point. Well, the reason being if you don't use these new advancements (which I wonder why you wouldn't), you might not have ever come across the question. The biggest question today that a web developer faces is will the code they write actually work on all the browsers. And hence the title.
What is tor and tor browser?
Tor is a software program that helps you stay protected on the web in numerous different ways. The main idea is to keep your internet activities anonymous by not allowing the web pages to learn your exact web identity. It also protects you from people who are watching your internet activity (yup, you are being watched) by keeping them unaware of the sites you visit.
Tor browser is a web browser that helps you use tor on various different operating systems. So as you can understand since privacy is a very important thing, so checking if the front-end you are making for a website, works in tor browser is also pretty important.
Tor browser and Firefox
Quoting Ethan Tseng and Richard Barnes from the blog Tor at the Heart: Firefox,
If you’ve used Tor, you’ve probably used Tor Browser, and if you’ve used Tor Browser you’ve used Firefox. By lines of code, Tor Browser is mostly Firefox -- there are some modifications and some additions, but around 95% of the code in Tor Browser comes from Firefox.So, basically, Tor Browser is built on top of firefox after applying some Privacy and Security patches. But this also means, to update Tor Browser, everytime a new firefox version comes means update the Privacy and Security patch codes to make them compatible with the new version of the browser. The latest version of Tor Browser is thus often not built on top of the latest version of Firefox. So how do you know if a feature is compatible with tor or not?
Will it work in Tor browser?
This question first came to my mind when I was writing some hobby code to make a Batman swiping animation. I used various CSS Masking properties. But then someone reported that it wasn't working on Tor browser. Which is when the question hit me, that it does work in firefox then why not on Tor browser? So what I found was the latest version of Tor Browser is built on top of Firefox 52.5.0esr while the latest version of Firefox is 57. So I delved into this question a little deeper and this is the steps you too can follow to know whether a certain HTML, CSS or Javascript feature is supported in Tor browser.
- Start your tor browser. Open About section and there you can find the version of Firefox which is being used.
- Alternatively, You can check the release notes for Tor browser to know about the Firefox version. So right now according to the release blog of the latest Tor browser till date, it is built on top of Firefox 52.5.0
- Go to website https://caniuse.com/
- Search for the feature you are wanting to use.
- Then, click on show all to get the compatibility over all the versions of the common browser.
- Now, to understand whether a feature is compatible, check for the Firefox version on top of which the Tor Browser is built, latest being 52.5
- So, I, for example, checked Firefox 52 for the compatibility of CSS Masking properties, which reveals that before Firefox 53, there was only partial support for CSS Masking.
Note: This is not any official way of finding how it works, but this technique works just fine.