There are situations where you might want a hyperlink leading to a file to trigger a “Save As” dialog in browser instead of having the browser trying to read/open that file.

This usually reigns true for PDF downloads or just obscure file types, such as files generated from various computer games.

For my case, I had some game generated file types I wanted to force download on them because a lot of users were reporting trouble getting the files as their browser was trying to read the files. I had to keep asking them to right-click on the download link and “save target/link as” for that to work properly.

The Apache Solution

So today I just got tired of advising for right-clicking and did a quick research how to force download those files on single left click for any modern browser. My sites are all using Apache, so the solution is cropping up to adding one line in the .htaccess file.

Here’s the code you need to add in your .htaccess:

AddType application/octet-stream .pdf

Replace .pdf with the file type in question. If you want to add multiple file types to this rule, you can either add a new line of the same and change the file extension or there’s a shortcut:

AddType application/octet-stream .pdf .doc .etc

Source: CSS-Tricks

The PHP Solution

You could have a PHP wrapper for download links that takes an argument and then reads the file (assuming local files) and before outputting the file to the user you send headers with the file type.

Example:

// We'll be outputting a PDF
header('Content-type: application/pdf');

// The PDF source is in original.pdf
readfile('original.pdf');
?>


Source: PHP.net

The HTTP Header Solution

You have to include the following header in HTTP response of the file to be downloaded:

Content-Disposition: attachment; filename=filename.ext

Where filename.ext is the filename you want to appear in “Save As” dialog (eg. mycv.pdf).

You have to keep the following in mind:

• The filename should be in US-ASCII charset.
• The filename should not have any directory path information specified.
• The filename should not be enclosed in double quotes even though most browsers will support it.
• Content-Type header should be before Content-Disposition.
• Content-Type header should refer to an unknown MIME type (at least until the older browsers go away).

Source: JTricks

Choose what’s best for you

Alright, I’ve presented you with the different ways you can achieve forcing download of files from links leading to them. If there’s a way I’ve missed please comment and I’ll update the post.

Happy coding!

The issue of dotted outline

Webmasters (specifically semantic coders) usually get annoyed by the dotted outline that appears while clicking on a link (text or image) or a form element (button or other input fields such as radio). This can get ugly on the header part of a design, especially with coding that involves text indent.
You can try it for yourself by clicking on a link and mousing off of that link before letting go. This is done for accessibility (and usability), because when you are navigating with the keyboard, those outlines show you where your cursor is!

There is a series of solutions for this issue, but we should carefully decide what’s best as an overall value for price, as some solutions can hurt our site’s accessibility. Some of you might just don’t care, but I do.

So, let’s see what W3C says about outlines to help us get a backstage understanding, before we list the possible solutions.

W3C introduction to the outline property

By default browsers create outlines around visual objects such as links, buttons, active form fields.

Outlines behave similar to borders, but they differ from borders in the following ways:

1. Outlines do not take up space.
2. Outlines may be non-rectangular.

Let’s explain that.

1. The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

2. Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element’s boxes. In contrast to borders, the outline is not open at the line box’s end or start, but is always fully connected if possible.

Which are the outline properties and how do they behave?

The ‘outline-width‘ property accepts the same values as ‘border-width‘.

The ‘outline-style‘ property accepts the same values as ‘border-style‘, except that ‘hidden’ is not a legal outline style.

The ‘outline-color‘ accepts all colors, as well as the keyword ‘invert‘. ‘Invert’ is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.

If the browser does not support the ‘invert’ value, then the initial value of the ‘outline-color’ property is the value of the ‘color’ property, similar to the initial value of the ‘border-top-color’ property.

The ‘outline’ property is a shorthand property, and sets all three of ‘outline-style’, ‘outline-width’, and ‘outline-color’.

The outline is the same on all sides, so no outline-top or outline-left. And since the outline does not affect formatting, it may well overlap other elements on the page.

Outlines and focus

Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus. These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow. The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).

Users must keep track of where the focus lies and must also represent the focus. This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.

Example:

For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

:focus { outline: thick solid black; }
:active { outline: thick solid red; }

The solutions

The nitty gritty part of the article now. Tested in modern browsers, so please share your experience with your browser.

Just remove the damn thing

Gone from every link (kills accessibility):
a { outline: none; }
We could apply this to specific CSS selectors instead of the whole site. For example to our header (still kills accessibility a little):
#header a { outline: none; }

Oh, wait! We can save the day, using active/focus statuses without losing the accessibility.
Or we can apply outline:none to the active state or use overflow:hidden for text-indent situations:
a:active { outline: none; }
or
a{ overflow: hidden; }

Gone from every flash object (to be honest I see no accessibility drawback here):
object { outline: none; }

Gone from submit buttons or input elements that behave as such (not so bad for accessibility, but not valid):
/* FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border: 0; }
/* IE8 */
input[type="submit"]:focus, input[type="button"]:focus { outline: none; }
Source: Stack Overflow

There’s an alternative javascript way, 1st line for links 2nd for input element (which kills all possibility of keyboard use with that input element):
onfocus="this.hideFocus=true;"
onfocus="this.blur()"

A quick jQuery kill for links:
$('a').each(function(){this.onmouseup = this.blur();});

A longer jQuery kill for links:
$('a').live('mousedown', function(e) {
e.target.blur();
e.target.hideFocus = true;
e.target.style.outline = 'none'
}).live('mouseout', function(e) {
e.target.blur();
e.target.hideFocus = false;
e.target.style.outline = null;
});

A long javascript kill:
var runOnLoad = new Array(); // for queuing multiple onLoad event functions
window.onload = function() { for(var i=0; i
// hide dotted :focus outlines when mouse is used
// but NOT when tab key is used
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('A')) {
a[i].onmousedown = function() {
this.blur(); // most browsers
this.hideFocus = true; // ie
this.style.outline = 'none'; // mozilla
}
a[i].onmouseout = a[i].onmouseup = function() {
this.blur(); // most browsers
this.hideFocus = false; // ie
this.style.outline = null; // mozilla
}
}
Source: Mike Smullin

I think I saw a CSS way to remove the outline for older IE versions, not sure if it works; but certainly is not valid (in this example for links):
a { noFocusLine:expression(this.onFocus=this.blur()) }

Style it, don’t kill it

Instead of killing it, we could just style it (IE6 and IE7 don’t support this, as they are not modern browsers):
:focus { outline: 4px solid green; }
Notice that I used :focus instead of a:focus to make it global, so it applies to form buttons as well and not just links.
Source: haslayout.net

Putting all together, deciding on best solution

Personally, I dislike the dotted outlines, but I have to admit accessibility (and usability) should not be ignored. My recommendation after looking at the solutions above would be to do a bit of both; let me call this kill in style.
As I don’t like javascript options, I’d only use CSS that’s valid for modern browsers and wait for any comments from you regarding non-modern ones.

Alright! I’d remove the outlines from specific areas of a design, get rid of them for things that has no use for, and then style it for the areas that would be nice to have it there. For the form buttons, I’m using a code by Stu Nicholls. Here’s my final code:

#header a:active, object { outline: none; }
:focus { outline: 2px solid green; }
.button { width: your_button_width_in_px; height: your_button_height_in_px; background:url('path_to/your_initial_image'); position: relative; }
.button a img { display: none; }
.button a:hover { background:url('path_to/your_hover_image'); }
.button a:active, .button a:focus { position: absolute; width: 0; height: 0; top: 0; left: 0; }
.button a:active img, .button a:focus img { display: block; width:your_button_width_in_px; height: your_button_height_in_px;}