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
  • 4,450

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
  • 89,072
  • 65
  • 269
  • 311
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
0

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

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