Geek Answers Handbook

Browser Detection Lost Focus in CSS

I saw this functionality in design a while ago and thought "hay, it looks like a good idea." But looking further, I'm not sure if this is possible using "just css".

On the left side of the screen was a navigation bar:

ul{
  background:red;
  display:inline-block;
  padding:20px;
  }
<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li>link 4</li>
</ul>
Run codeHide result

Is there a way to change this when the browser window loses focus?

those. when the user clicks on the browser to make this background color of the navigator, for example, change?

The only possible (possibly more inefficient way is to do something like):

body:hover ul {
  background: red;
}
body ul {
  display: inline-block;
  padding: 20px;
  background: blue;
}
<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li>link 4</li>
</ul>
Run codeHide result
what could I come up with.

But this is obviously

  • (A) does not work well.
  • (B) Doesn't really do it right.

This is more that I would like the browser to physically “lose focus” before changing the css.

Anyone have any ideas on how to achieve this?

+4
3

, CSS - -, . 1

API , , , , , , . , , ( API).

, , JavaScript:

window.onfocus = function() {
  document.body.className = '';
};

window.onblur = function() {
  document.body.className = 'blur';
};
ul {
  display: inline-block;
  padding: 20px;
  background: red;
}
.blur ul {
  background: blue;
}
<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li>link 4</li>
</ul>
Hide result

, , iframe (, , ), iframe window , iframe .

- , .

1 Firefox - :-moz-window-inactive, , , , , , , :

ul {
  display: inline-block;
  padding: 20px;
  background: red;
}
ul:-moz-window-inactive {
  background: blue;
}
<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li>link 4</li>
</ul>
Hide result

WebKit - :window-inactive, Firefox, , WebKit - , scrollbar -. >

+4

css, css . , body, html5 tabindex:

body:focus ul {
  background: red;
}
body ul {
  display: inline-block;
  padding: 20px;
  background: blue;
}
<body tabindex="0">
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
  </ul>
</body>
Hide result
0

:window-inactive:

::selection {
  background: hsl(136,65%,45%);
  color: white;
}
::selection:window-inactive {
  background: hsl(136,25%,65%);
}

firefox, , ( firefox).

0

More articles:


All Articles