14 DAY TRIAL // The first encounter with a Retina Display Mac might be a little overwhelming, even for long-time Mac users if they’re upgrading from an older MacBook or iMac. And if you’re coming from a regular laptop running Windows or Linux, the increased pixel density is going to make things look like an entirely different world.
Still, Retina (HiDPI) displays don’t come without their pitfalls and, after the initial impression subsides, you may start to notice little snags, one of which would be websites looking “too big” or “zoomed in”, especially on MacBooks.
While looking for a fix, you might come across browser extensions that claim to solve this problem, only to find out they don’t allow setting a specific zoom level in terms of percentage… or they don’t work at all. Some of these extensions also meddle with the default keyboard shortcuts for zooming or include extra functionality which, in this case, is nothing more than unnecessary overhead on system resources.
The true solution is simpler, more efficient and, unlike extensions, not in the constant danger of being rendered nonfunctional whenever Safari gets updated.
At the base level, all websites are made up of three main components: HTML, which specifies the actual content of the page including references to rich content such as images and videos; JavaScript, which enables advanced user interaction, animations and dynamic features like AJAX; CSS, which defines how each page in that website looks when displayed inside a browser window.
CSS (Cascading Style Sheets) is a complex piece of web technology and enables web developers to control thousands and thousands of parameters. However, end-users can also take advantage of all that, thanks to a feature called “user style sheet”, which most web browsers support, including Safari.
A user style sheet is a file that, once loaded in the browsers settings dialog, specifies a set of rules to be applied on top of every visited website’s CSS. For example, you could make all text be written in red Comic Sans font (seriously though, please don’t do that). Another property you could modify is, you guessed it, the zoom level of the entire page.
The user style sheet
To do that, we need to place the following code in a CSS file, which is essentially a text file using a “.css” filename extension instead of “.txt”, and then add it to Safari.
This is why similar solutions that involve user style sheets won’t work with many sites, specifically those that have the zoom CSS property set explicitly in their own style sheets.
Creating a CSS file
Since the current version of TextEdit, the built-in text editor in Mac OS X, doesn’t allow saving “.txt” files in its default configuration, there are three options to go about this task. A cheat code is also provided at the very end, for the laziest of our readers.
Option 1: change TextEdit’s default document format from rich text to plain text. This lets you save files as pure text but also removes the file save dialog’s file format selection of RTF, ODT, DOC/DOCX and HTML, which means you’ll be stuck with saving text files only, save for another trip to the TextEdit preferences dialog.
If you use this option, save the file as “zoom80.css” and make sure you click the blue “use .css” button when asked.
Option 2: Install a third-party text editor that’s less restrictive when it comes to saving files. We prefer TextWrangler (freeware), but you can take your pick from our Word Processing category.
Option 3: use the command line terminal that’s built into Mac OS X to issue this instruction (just copy and paste, then press Enter)
The cheat code: as promised, there’s an even faster way - skip all three options and download a ready-made zoom80.css file from our site. Use right click to save the file to the location of your choice. Saving it on your desktop will clutter your workspace with a file that you will likely never work with again, so using a more out of the way location, like your home folder or a subfolder) is advisable.
Load the user style sheet in Safari
For the CSS file to have any effect, we must tell Safari to load it on every startup by going to the preferences dialog, advanced tab and browsing to our file from the Style Sheet field. The CSS file will have effect immediately, so you can enjoy your perfectly zoomed websites right away.
Safari can only use one such file at a time, but it will remember all your previous selections, so you can switch between them easily enough if you want to test new things or have special needs that require using multiple use styles.
If you find that 80% is not to your liking, open the CSS file and change the percentage to something more appropriate. Note that you’ll have to restart Safari this time in order to have the new CSS loaded.
