Detect Browser потерял фокус в CSS

Я видел эту функциональность в дизайне некоторое время назад и думал «сено, это выглядит как хорошая идея». Но, глядя дальше, я не уверен, что это вполне возможно, используя «просто css».Detect Browser потерял фокус в CSS

Существовала панель навигации вниз с левой стороны:

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>

Есть ли способ, чтобы изменить это, когда окно браузера теряет фокус?

I.e. когда пользователь нажимает на браузер, чтобы изменить цвет фона этого навигатора?

только возможно (вероятно, более неэффективна способом было бы сделать что-то вроде):

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>

, что я мог думать.

Но это, очевидно

(A) не работает хорошо
(B) фактически не делают это правильно.

Это больше, что я хотел бы браузер физически «потерять фокус», прежде чем изменить CSS.

У кого-нибудь есть идеи о том, как этого достичь?

источник

2015-01-23 jbutler483

Использование CSS это невозможно. Вы открыты для других методов для достижения этого? Кроме того, я чувствую, что метод тела наведения не является хорошим, если вы хотите переместить указатель мыши вверху вашего браузера, он будет выглядеть немного дешевым и липким. – Ruddy

@ Ruddy: Я полагаю, что альтернатива JQuery? – jbutler483

Существует статья [недавняя статья (январь 2015 года) в smashingmagazine] (http://www.smashingmagazine.com/2015/01/20/creating-sites-with-the-page-visibility-api/), в которой обсуждаются предыдущие подходы к видя, есть ли табуляция рядом с предстоящим API для этой цели. (Но: это все подходы JS.) –

Вы определенно не можете определить фокус на окне в 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>

источник

2015-01-23 10:17:01

Вы можете попробовать:window-inactive:

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

Реализуется at least in firefox, и вы можете см. его работы на its test page (firefox only).

источник

2015-01-23 10:25:06 Razor

Ни текущие, ни предстоящие стандарты CSS не определяют какой-либо селектор или медиа-запрос, когда пользовательский агент не находится на переднем плане.

Page Visibility 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>

Проблема заключается в том, что это не будет работать правильно, если страница находится в IFRAME (например, в фрагменте стека, как указано выше), так как объект window iframe потеряет фокус, когда сам iframe теряет фокус.

Мне неизвестны какие-либо методы для надежного обнаружения, когда окно браузера становится активным или неактивным.

_{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>

_{WebKit имеет свой собственный :window-inactive, а именно, что на самом деле вдохновило ту же функцию в Firefox, за исключением того, что WebKit не префикс ее по какой-то странной причине, и в настоящее время она применима только к псевдоэлементам прокрутки.}

источник

2015-01-23 10:25:20 BoltClock

Detect Browser потерял фокус в CSS

ответ

Смежные вопросы