show focus sets border

[stevefaulkner]

currently the show focus sets the CSS border proprty, this leads to content moving when it has focus (as the addition of border effects box size) suggest setting outline property instead as this does not effect box size

[patrickhlauke]

+1 outline is layout-neutral (though still affected by z-index, so won't show when hidden behind another element, and of course if the focused element is hidden off-screen or similar)

[menovak]

hi Steve and Pat,

I'm a bit confused, the current 'show focus' script in WAT does make use of
the CSS outline property, unless it detects an older version of IE. I
borrowed this from Karl, and so far in live testing, really like it...

See below.

show_focus=javascript:(
function()
{ var ua=navigator.userAgent.toLowerCase(), ie=ua.indexOf("msie")!=-1?ua.substr(ie+5,1):0, outlineProp=ie<8?"border":"outline",activeItem; function styleFocus(e) { if(activeItem) { activeItem.style[outlineProp]=""; } activeItem=e.target||e.srcElement; if(activeItem) { activeItem.style[outlineProp]="solid 2px red"; } } if(document.addEventListener) { document.addEventListener("focus",styleFocus,true); } else { document.attachEvent("onfocusin",styleFocus); } }
()
);

Regards,

Mark

On Fri, Dec 5, 2014 at 4:03 AM, Patrick H. Lauke notifications@github.com
wrote:

+1 outline is layout-neutral (though still affected by z-index, so won't
show when hidden behind another element)

—
Reply to this email directly or view it on GitHub
#41 (comment)
.

[patrickhlauke]

The UA string sniff fails in IE11

On my Win8.1 machine, this is navigator.userAgent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; MDDCJS; rv:11.0) like Gecko

meaning that ie evaluates to 0, which is <8