When I wrote Regaining focus I figured, from my past experience using user defined style sheets, things would be as straight forward as I remembered them being. Why isn’t anything as simple as the utility demands? And for the record, I know relying on memory alone is largely a sloppy move to make. And I hope to correct myself with this post today.
But I didn’t fully realize my error until I went to write up the README for a Github repository I wrote for a solution for such a problem. Using the bit of code I provided in my post I linked to above, I wrote a style sheet (FOCUS.css) that would provide a user the same experience in the same browser from one site to another.
The problem being the ways to implement user defined focus styles vary quite a bit from browser to browser. From easy to complicated.
How to define focus
Let’s start with the easy, shall we? For Safari and, for the most part, Internet Explorer it’s simply a matter of saving a style sheet to your hard drive and telling those browser’s in their “preferences” where that specific style sheet is. And in doing so you are informing each browser you wish it to obey those rules over any declared by any site you visit in that browser.
- In Safari go to Preferences > Advanced then select “Other”, navigate to where you’ve saved/ put the style sheet you’d like to use in the drop down menu beside “style sheet”.
- In Internet Explorer go to Tools > Internet Options > General and choose the Accessibility button (the last button in the General pane). And in the dialogue box that pops up check the box beside “Format documents using my style sheet”. Then you can “browse” and choose your style sheet once that checkbox is checked. Don’t forget to click “Apply” before completely exiting “Internet Options”.
Not much more to add than that. Nice and simple. I like simple.
Firefox and Chrome on the other hand are a bit more complicated than both Safari and IE. But each is the same, this one way at least.
- In Firefox (recent versions at least) install an “Add-on” named Stylish. Then go into your “Add-ons manager” (Tools > Add-ons), select “User Styles” in the left hand column and choose the “Write new style” button that is sitting in the main window. Once you choose that button you can name your new style declaration(s) anything you’d like. Then in the main window off the dialogue simply, for the purposes of this demonstration, paste in the contents of FOCUS.css (you can paste in the entire 11 lines of code, a lot of it are comments, it won’t affect how the CSS behaves). Then hit save. You should see the results of what you pasted in throughout Firefox now — though the fact that everything in Firefox that can receive focus gets styled can be jarring at first.
- In Chrome (again recent versions) you need to install an “Extension” by the same name, and developer as far as I can tell, as in Firefox. And follow the steps I outlined above.
As I alluded to above, as with a lot of things there are a few difference ways of doing the same thing. This is hardly the exception. Both Firefox and Chrome allow a user to set certain browser behaviours through “Advanced Settings”, or “Experiments” as far as Chrome seems to be concerned, by typing commands directly into the address bar.
Firefox also let’s you set custom styles through the use of setting a userContent.css style sheet in its file structure. But, and this must be said, I outlined the approach above simply for the reason these other solutions, while more permanent, doesn’t give me a headache.
There you have it, how to define custom focus styles in four modern web browsers. And if I’ve missed something, please add to this in the comments.