Focus Rectangle in Firefox and Opera?

Discussion in 'other software & services' started by Rasheed187, Apr 25, 2015.

  1. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    I don't get it, I've always had this problem in Firefox, but now all of a sudden I'm getting to see it in Opera 12, more and more. This didn't used to be like this. Is it something that's coming from my own system, or is it perhaps because of changes in certain website templates? Here is an example (click on "Kaart"):

    http://frietwinkel.nl/over-ons/
     
  2. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    Sorry, it's not the best example, because on frietwinkel.nl it disappears after the page is done with loading. I will look for some others.
     
  3. gerardwil

    gerardwil Registered Member

    Joined:
    Jan 17, 2004
    Posts:
    4,748
    Location:
    The Netherlands
    Thanks anyway, I will visit frietwinkel next time I visit Utrecht :)
     
  4. luxi

    luxi Registered Member

    Joined:
    Aug 31, 2013
    Posts:
    66
    It's coming from the site's stylesheet:

    Code:
    a:focus {
      outline:thin dotted;
    }
    My guess would be Opera didn't fully support the outline CSS property until now, or maybe it was bugged.
     
  5. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    Well, then I'm out of luck, I never saw this ugly crap in Opera before. It amazes me, just how many idiots are active in web-design. And I remember why I brought this up, I often "drag and drop" or "middle-click" on links to open them in the background, so now I have to look at that ugly focus rectangle.

    Here some examples:

    http://www.techrepublic.com/blog/five-apps/five-top-apps-for-managing-inventory/
    http://www.mindspark.com/our-products/
    http://www.prnewswire.com/

    Sites where you don't get to see it, how it should be:

    https://nines.nl/
    https://www.tele2.nl/
    http://www.investopedia.com/
    https://yoast.nl/
    http://www.iex.nl/
     
  6. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    Yes, I wonder if they are really that great, FEBO is my personal favorite.
     
  7. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    BTW, is it normal that you will get to see the Focus Rectangle on almost every page (like google.com) inside Firefox?
     
  8. luxi

    luxi Registered Member

    Joined:
    Aug 31, 2013
    Posts:
    66
    It turns out it's just default Firefox behavior, probably the same with Opera. It happens when sites don't explicitly set outline: none for links. You can disable this in Firefox by going into about:config and setting browser.display.focus_ring_width to 0. I don't know if Opera allows this to be user configurable.

    Still, you could always install the Stylish extension and create a global style with the following CSS code:
    Code:
    :focus {
      outline: 0 !important;
    }
     
  9. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    You're a genius. This is exactly what I was looking for, thanks a lot! Surfing with Firefox has become a lot more pleasant now. The weird thing is that Opera never had this problem in the past, until a couple of months ago.

    And Opera 12 has not been updated in two years, same goes for the 4 extensions that I'm using. So the problem can not be caused by the browser itself. Can it be that a lot of websites use some kind of standard "template", and that some idiot decided to modify some code? BTW, I couldn't find a way to change this behavior in Opera 12, so ideas are welcome.

    http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
     
  10. luxi

    luxi Registered Member

    Joined:
    Aug 31, 2013
    Posts:
    66
    No, it's an accessibility feature as far as I know (keyboard Tab navigation). As I said, you can install the Stylish extension for Opera and with it create a custom style that applies to all websites, overriding the focus outline. The CSS code to do so is posted above.
     
  11. Rasheed187

    Rasheed187 Registered Member

    Joined:
    Jul 10, 2004
    Posts:
    8,010
    Location:
    The Netherlands
    LOL, my bad. I missed the fact that it's also available for Opera 12, this fixed the problem. Like I said, you're a genius! I should have asked about this earlier it would have saved me months of frustration. I still think it's weird that this problem popped up from no where in Opera 12.

    I also hate the "Focus Rectangle" inside the Windows OS itself. In some apps it's visible, in others it's not. I wish I could get rid of it, once and for all, it's so freaking ugly! Why did it have to be dotted lines? It wouldn't bother me this much if it were colored lines.

    A couple of examples, this is how it's how it's supposed to be in all apps (no dotted lines):

    http://www.snapfiles.com/screenshots/geekuninstaller.htm
    http://www.snapfiles.com/screenshots/fulluninstall.htm
    http://www.snapfiles.com/screenshots/vsodownloader.htm
     
Loading...