3

When you click on a link in Chrome to go from page x to page y, for a split-second it displays a white empty page. I want to make that page black so it won't hurt my eyes.

Now, I'm a fresh graduate of this question:

Hack Chrome to show its internal pages with black background

As the accepted answer suggests, I've customized my C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css file.

It turns out that this file is able to target the split-second loading page! Yay! I was able to make that page black by putting a simple html {background: black} in Custom.css.

Problem is... The Custom.css file is applied to all web pages. This means that now I get a black background on all pages, which is something I don't want! (Because I already have an extension that flips the colors, and black flipped becomes white.)

My question is: How do I write CSS in Custom.css that targets only the white page that Chrome shows for a split-second while loading a webpage?

Community
  • 1
Ram Rachum
  • 5,210

3 Answers3

1

To answer the question at hand, I don't think it is possible to target the page (or this state of a page) through CSS alone.

I created a quick Chrome extension to make every page background black until the page is loaded.

You can find it on GitHub and the Chrome Web Store.

Please note that I only wrote this for this specific question and have not done extensive testing. I already noticed an issue on Google Searches. I use Google Instant and it seems like the window.onload event the extension relies on is never fired. It should work pretty reliably in version 0.2 now.

Feel free to report bugs on GitHub, I'm likely to fix them.

Oliver Salzburg
  • 87,539
  • 63
  • 263
  • 308
  • However, when I use it pages still show some white when loading. I think the problem is that the extensions are loaded with some small delay, not immediately upon opening a page. – Ram Rachum May 13 '13 at 09:08
  • I have an idea on how to resolve it: Can you have your extension add a permanent class to the html element? It can be called whatever you want and it should do nothing. But when it'll exist, I could target html:not([your_class_name]) in the Custom.css file, and then I could make pages black even earlier. – Ram Rachum May 13 '13 at 09:10
  • @RamRachum: Right, the extension runs when the <html> and a few other elements are loaded. Then the extension still needs to run. So there is a certain period where you could still see white. I didn't see this happening in my testing, so I assumed it wasn't an issue. I'll add a class dark-by-default through the extension, see if that helps. – Oliver Salzburg May 13 '13 at 11:18
  • Thanks. Actually it can be an HTML attribute, which might be better. But I think a class would work as well. – Ram Rachum May 13 '13 at 15:26
  • @RamRachum: I added that feature. Please use GitHub/Chrome Web Store or email me directly for further feedback on the extension. That makes it easier to keep things organized :) – Oliver Salzburg May 13 '13 at 15:40
0

I'm fairly sure this can't be done. The "page" that you see for a split second isn't actually a separate page but merely the unconstructed page that is being downloaded. The only way around it would be for all pages you visit to explicitly specify a background that would then override the one in Custom.css.

The only way I can think to get around it would be to run some JavaScript (using something like greasemonkey) when pages are loaded to remove the black background if it isn't needed.

EDIT: Actually, after a bit of thinking this may do what you want (with a little tweaking maybe)

html {
    -webkit-animation: fadebackground 1s linear 0 1;
}

@-webkit-keyframes fadebackground {
    0% {
        background: black;
    }
    100% {
        background: none;
    }
}

This will start off with a black background and fade to none after a second. You can find a pretty thoughrough writeup of the -webkit-animation property here http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

AverageMarcus
  • 148
  • The fading background is an impressive hack. Unfortunately it doesn't work. Sometimes it's too short, and I get a blast of white, and sometimes it's too long, and then it remains black too much and the High Contrast extension flips it to white and then my eyes get blasted again. – Ram Rachum May 06 '13 at 20:06
  • I think the too short would be due to the background colour being set in the pages CSS causing it to change. You could try tweaking the timings and percentages until you get something that suits. – AverageMarcus May 06 '13 at 22:39
0

Add this to %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

body:empty {
    background: black;
}
Sam Hasler
  • 580