Way back in the day, long before OS X came to fruition (and even into its early days of release), when you wanted to tool around the Web on a Mac you weren’t faced with a wide variety of browser choices like you are today. (Apologies to any Web browsers I may have left out of that list!)
Back then, things were simpler. Not necessarily better, but simpler. Instead of 10 or more browsers to pick from, there were basically only three — iCab, Netscape, and Microsoft’s Internet Explorer (IE for short). IE came pre-installed and was the default browser for all Mac users, up until Apple released Safari a couple years back.
While IE had its fair share of issues with HTML and CSS standards support, one feature I really liked was IE’s “link outlines” feature. This simple visual feedback mechanism made it really easy to tell when you’d clicked on a link, and exactly which link you clicked. As soon as you clicked a link, a colored box would appear around the clicked link, like this:
This box was only visible for a second or so after you clicked the link, but it was a nice way to make sure you’d actually clicked your intended target. Here’s how to customize Safari to act in the same way.
We can add this feature to Safari thanks to the program’s Custom CSS feature. CSS stands for Cascading Style Sheets, and it’s a way of controlling how text and images appear on a Web page. You can do some amazing things with CSS, and creating Web pages that use it can prove quite complex…but what we’re going to do with it today is simple, so don’t worry!
Write Some CSS
First, quit Safari and then launch your favorite pure-text editor (for example, Apple’s TextEdit, Bare Bones Software’s free
TextWrangler, or Terminal’s vi or pico ). Start a new document, and insert this one line:
:link:active, :visited:active { outline: #C30000 solid 2px; } When you’re done, save the file somewhere where you can find it, but not where you’ll have to stare at it all day. Name it whatever you like, but make sure it ends with the extension .css . My file, for instance, is called tweaks.css , and I keep it in a Miscellaneous folder in my user’s Documents folder. Note that if you’re using TextEdit to edit the file, when you try to name it with a .css ending, TextEdit will pop up a dialog box warning that you’re not using the normal “.txt” extension. It’s very important that you click the ‘Use .css’ button—otherwise, you won’t be able to proceed with the next step.
Implement Your CSS
Next, launch Safari, open its Preferences (Safari: Preferences), and click on Advanced. Click on the Style Sheet pop-up menu, select Other and navigate to the file you just created. When you’re done, the Preferences dialog box should look like this:
That’s it, you’re done! Load a Web page, and then click-and-hold on any link, and you should see a nice, 2-pixel-wide red outline around the link. Safari is loading your custom CSS file and applying it to every page. Enjoy your newfound IE-like clicked link outlines:
If you’d like to know a bit more, keep reading….
Behind the Scene
To understand how this works, we’ll have to explain just a bit about CSS. First, you need to know that CSS itself is huge; it’s basically like a programming language for controlling the display of data on Web pages. So going into any depth on it here isn’t really possible—if you’re intrigued by CSS and would like to learn more, the World Wide Web Consortium has a great page of useful sites. I personally used the CSS Tutorial at W3Schools.com to teach myself the basics (which is about the sum of my CSS knowledge). As a way of a simple introduction, let’s break down the one-line CSS file you created above:
-
:link:active, :visited:active– This bit defines which objects the following CSS properties will affect. In this case, it’s hyperlinks, both unvisited (the first term) and visited (the second term). The:activebit means that the rule will only be applied when the link is being clicked. You wouldn’t want the outlines around every link all the time, so that modifier restricts your rule to the currently-being-clicked link. -
{ outline: #C30000 solid 2px; }– This is the actual CSS property we’re setting for the links. It’s called, somewhat obviously,outline, and it takes three values after its name: the color of the outline, the style of line to draw, and the thickness of the line to be drawn. In this case, it’s a red, solid line that’s two pixels thick.
So that’s how it works. How do you learn what all the various options are, and what’s with that weird definition of the color ‘red’ being #C30000? I’ll handle the easy one first, the color. You can, in fact, specify colors such as red, yellow, blue, etc. But you can also use something called RGB values for colors, which gives you much greater control over the exact color to be displayed. If you have a graphics program like Photoshop Elements, it will generally include an RGB color option. But for ease and speed of use, I prefer a handy little free tool called ColorTagGen. This app just pops a standard OS X color wheel on screen. Pick a color, and you can read its RGB value in an always-updated box—amazingly handy!
The other two values are trickier to explain, for they have many more options. How do you learn what the options are? Find a good CSS reference site you like, and look them up. As with the tutorial, I used the
W3Schools.com site. There are actually three distinct CSS properties that are combined (in this order) in the outline property:
outline-color, which we’ve just discussed;
outline-style, which controls the type of line used; and
outline-width, for setting the line thickness (you can also specify exact pixels, as I have done).
Feel free to play around with any combination of these settings. For example, you can make a really fat, blue, dotted outline using this code:
{ outline: blue dotted thick; } That’s really a fast overview of CSS, but hopefully it shows you some of the ways you can tweak the outlines to your liking.
Get a Bit Fancy
In the original example, we used one line to define the outline box for both new and already-visited links. But you don’t have to do it that way; if you create a two-line file, the outlines can be of different colors for each link type:
:link:active { outline: #C30000 solid 2px; } :visited:active { outline: #ADB2FF solid 2px; } By separating the two link types, each can have its own distinct look. If you use that code in your style sheet, you’ll see a light blue box when you click already-visited links and the red box when you click new links. I could just have easily changed the type and thickness of the line as well.
CSS is really powerful stuff. With just a bit of work, you can do a lot more than just change Safari’s pop-up link outlines. If you’re interested in learning more, visit some of the sites on the W3.org site for more information.