Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35377 > unrolled thread

Outline color invert

Back to article view | Back to comp.lang.javascript

Contents

  Outline color invert Andrew Poulos <ap_prog@hotmail.com> - 2018-07-08 19:40 +1000
    Re: Outline color invert "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-07-08 12:36 +0200
      Re: Outline color invert Andrew Poulos <ap_prog@hotmail.com> - 2018-07-08 21:15 +1000
    Re: Outline color invert Julio Di Egidio <julio@diegidio.name> - 2018-07-08 05:09 -0700
    Re: Outline color invert James Kirk <noneya.invalid@gmail.com> - 2018-07-08 09:47 -0400
    Re: Outline color invert Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-08 21:17 +0200
      Re: Outline color invert Andrew Poulos <ap_prog@hotmail.com> - 2018-07-09 13:31 +1000
        Re: Outline color invert Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-09 21:28 +0200

#35377 — Outline color invert

I'm working on a site that requires keyboard navigation. This is easy 
enough to do using tabindex and role but the color of the outline on the 
focussed interactive element is (by default) blue.

I can use CSS to change the color of the outline but sometimes the 
outline color too closely matches the background behind the element for 
the outline to be obvious.

MDN tells me that there's a CSS value for outline color called "invert", 
which would be ideal in my case, but it appears to be more or less 
unsupported.

How can I change the color of the outline to something appropriate 
without knowing beforehand what the color of the background might be 
currently?

Andrew Poulos

[toc] | [next] | [standalone]

#35379

Andrew Poulos <ap_prog@hotmail.com> wrote on 08 Jul 2018 in 
comp.lang.javascript:

> I'm working on a site that requires keyboard navigation. This is easy 
> enough to do using tabindex and role but the color of the outline on the 
> focussed interactive element is (by default) blue.
> 
> I can use CSS to change the color of the outline but sometimes the 
> outline color too closely matches the background behind the element for 
> the outline to be obvious.
> 
> MDN tells me that there's a CSS value for outline color called "invert", 
> which would be ideal in my case,

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert>

> but it appears to be more or less unsupported.

Not so.

<https://caniuse.com/#search=invert>

> How can I change the color of the outline to something appropriate 
> without knowing beforehand what the color of the background might be 
> currently?

Depends on what you consider appropriate.

 
> Andrew Poulos
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#35380

On 8/07/2018 8:36 PM, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 08 Jul 2018 in
> comp.lang.javascript:
> 
>> I'm working on a site that requires keyboard navigation. This is easy
>> enough to do using tabindex and role but the color of the outline on the
>> focussed interactive element is (by default) blue.
>>
>> I can use CSS to change the color of the outline but sometimes the
>> outline color too closely matches the background behind the element for
>> the outline to be obvious.
>>
>> MDN tells me that there's a CSS value for outline color called "invert",
>> which would be ideal in my case,
> 
> <https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert>

I don't need it to invert it's own color but to change its color to the 
invert of the background color it happens to be over.

>> but it appears to be more or less unsupported.
> 
> Not so.
> 
> <https://caniuse.com/#search=invert>

That's a CSS filter effect and not a color for outline.

This
   <https://caniuse.com/#search=outline-color>
indicates that only IE supports invert for outline-color.

>> How can I change the color of the outline to something appropriate
>> without knowing beforehand what the color of the background might be
>> currently?
> 
> Depends on what you consider appropriate.

Something that would be obvious to someone that relies on assistive 
technology.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35384

On Sunday, 8 July 2018 11:40:22 UTC+2, Andrew Poulos  wrote:

> How can I change the color of the outline to something appropriate 
> without knowing beforehand what the color of the background might be 
> currently?

Maybe you could use this to get the background color programmatically
and set the outline color accordingly:

<https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle>

Julio

[toc] | [prev] | [next] | [standalone]

#35388

In-Reply-To: <NK2dnc0iw8hmRtzGnZ2dnUU7-YXNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

Followup-To: comp.infosystems.www.authoring.stylesheets

> I'm working on a site that requires keyboard navigation. This is
> easy enough to do using tabindex and role but the color of the
> outline on the focussed interactive element is (by default) blue.

Depends on the UA and or user modifications.

[snip]

> How can I change the color of the outline to something
> appropriate without knowing beforehand what the color of the
> background might be currently?

Consider alternatives to modifying the outline. Perhaps: box-shadow.
<https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow>

:focus {
	box-shadow: 0 0 1px 3px white;
}

Consider choosing a selector that would be more specific then :focus.

-- 
James Kirk

[toc] | [prev] | [next] | [standalone]

#35391

Andrew Poulos wrote:
> I'm working on a site that requires keyboard navigation. This is easy 
> enough to do using tabindex and role but the color of the outline on the 
> focussed interactive element is (by default) blue.
> 
> I can use CSS to change the color of the outline but sometimes the 
> outline color too closely matches the background behind the element for 
> the outline to be obvious.
>  
> MDN tells me that there's a CSS value for outline color called "invert", 
> which would be ideal in my case, but it appears to be more or less 
> unsupported.

“invert” is a value for the “filter” property MSHTML, e.g. in Internet Explorer.

<http://users.fred.net/dhark//demos/css/css_filter_examples.html>

In standard CSS (as far as standards go there), it is _not_ a CSS value
itself, but the identifier of a filter *function*, to be used like this:

  filter: invert(1);

That is specified in CSS Filter Effects Module Level 1 since 2014 and is
documented to be supported in all listed browsers except Internet Explorer:

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter>

It is supported in navigator.userAgent === "Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36".

IE might still provide the same functionality with DirectX filters.  So you
can try

  .foo {
    filter: invert;
    filter: invert(1); /* or 100% */
  }

and the like.

> How can I change the color of the outline to something appropriate 
> without knowing beforehand what the color of the background might be 
> currently?

As a Web site should not use (too) many colors in the first place, you
should know the original color, so you can use LESS or SCSS to generate a
rule for a suitable highlighting color.

However, if that is not an option, and neither are filter functions, you
can look up e.g. in Wikipedia, and implement in ECMAScript, algorithms to
calculate the value for a suitable color.

There are also a number of third-party libraries that implement those
algorithms and allow one to manipulate color values.  For implementations of
sRGB, HSV and HSL colors, including sRGB-to-HSL/HSV conversion and
vice-versa, see also jsx.dom.css.Color:

<https://github.com/PointedEars/JSX/blob/master/dom/css/color.js>

In general, Google is your friend.  [psf 6.1]

Note that the complementary color is probably the one with the best
contrast, but not necessarily the most user-friendly one.


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

[toc] | [prev] | [next] | [standalone]

#35406

On 9/07/2018 5:17 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>> I'm working on a site that requires keyboard navigation. This is easy
>> enough to do using tabindex and role but the color of the outline on the
>> focussed interactive element is (by default) blue.
>>
>> I can use CSS to change the color of the outline but sometimes the
>> outline color too closely matches the background behind the element for
>> the outline to be obvious.
>>   
>> MDN tells me that there's a CSS value for outline color called "invert",
>> which would be ideal in my case, but it appears to be more or less
>> unsupported.
> 
> “invert” is a value for the “filter” property MSHTML, e.g. in Internet Explorer.
> 
> <http://users.fred.net/dhark//demos/css/css_filter_examples.html>
> 
> In standard CSS (as far as standards go there), it is _not_ a CSS value
> itself

It can be a value for outline-color. See the 'Syntax' section here:
<https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color>

>> How can I change the colour of the outline to something appropriate
>> without knowing beforehand what the color of the background might be
>> currently?
> 
> As a Web site should not use (too) many colors in the first place, you
> should know the original color, so you can use LESS or SCSS to generate a
> rule for a suitable highlighting color.

It's all getting "too hard". Users will also be able to set background 
images and the like so I'm now tending towards allowing users to 
select/change the outline to a colour of their choosing.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35415

Andrew Poulos wrote:

> On 9/07/2018 5:17 AM, Thomas 'PointedEars' Lahn wrote:
>> “invert” is a value for the “filter” property MSHTML, e.g. in Internet
>> Explorer.
>> 
>> <http://users.fred.net/dhark//demos/css/css_filter_examples.html>
>> 
>> In standard CSS (as far as standards go there), it is _not_ a CSS value
>> itself [but a filter function]
> 
> It can be a value for outline-color. See the 'Syntax' section here:
> <https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color>

ACK.
 
>> As a Web site should not use (too) many colors in the first place, you
>> should know the original color, so you can use LESS or SCSS to generate a
>> rule for a suitable highlighting color.
> 
> It's all getting "too hard". Users will also be able to set background
> images and the like so I'm now tending towards allowing users to
> select/change the outline to a colour of their choosing.

Yes, now that you have let the genie out of the bottle, you should do just 
that.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web