1

Is there some css selector or something of the like that allows you to apply different styles to elements in an inactive page/window in webkit? There is for scrollbars: http://www.webkit.org/blog/363/styling-scrollbars/ I'm using this to make a Titanium desktop application feel more native on Mac OS X. Thanks!

penguinrob
  • 1,431
  • 3
  • 17
  • 39

3 Answers3

4

See: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

These events work in every major browser (Firefox, Internet Explorer 6/7, Safari & Opera).

Demo: http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/

function onBlur() {
    document.body.className = 'blurred';
};
function onFocus(){
    document.body.className = 'focused';
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • You'd think there would be something that could do it, there is for scrollbars, why not other things? Thanks for the answer though. – penguinrob May 27 '11 at 23:02
  • 1
    I changed my answer after checking Google. It turns out there is a way after all. Sorry about that. – thirtydot May 27 '11 at 23:02
2

Since you is focusing only WebKit, you theoricaly could use :window-inactive pseudo-selector, which is supposed to work with scrollbars. I haven't tested it on MacOS X, but you can try it.

But if you want something more cross-browser, use JavaScript to define a CSS class based on the window activity. See this thread: Is there a way to detect if a browser window is not currently active?

Community
  • 1
  • 1
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
  • 1
    I didn't notice that question you've linked. It's got exactly the same accepted answer as my answer here. Oh well. – thirtydot May 27 '11 at 23:16
0

unfortunately :window-inactive is not standardized and only works on scrollbars and text selection using ::selection as far as I know. You'd have to use javascript to get what you want.

pthurlow
  • 1,091
  • 7
  • 11