Determine if window is active in webkit

问题

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!

回答1:

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;
}

回答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?

回答3:

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.

来源：https://stackoverflow.com/questions/6158415/determine-if-window-is-active-in-webkit

标签

javascript

css

macos

webkit

titanium