CSS :not(img){ background-color : $c ;...} img{ background-color:transparent ;...} works on SOME pag-CodePudding

I have installed a 'Developer Mode' Extension in latest chrome-dev / google-chrome-unstable which consists only of the files: '~/.config/google-chrome-unstable/User StyleSheets/Custom.css' (and the Manifest.js that lists it) :

*{
    color:#FFF !important;
    background-color:#000 !important;
}


A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}

I also tried this better version :

button,select,form,table{
    color:#FFF !important;
    background-color:#213 !important;
}

img{
    background-color:transparent !important;
}

:not(img):not(button):not(select):not(form):not(table){
    color:#FFF !important;
    background-color:#000 !important;
}


A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}

This works well to convert 99% of all webpages to a black background with white text, including input forms, etc; and I am TRYING to allow background images to display with only their default background (usually white) transparent-ed .

But with very few web-pages, such as 'workspaces.google.com/dashboard', and actually for instance the 'Format Buttons' on this website, IMG button icon images display as all black.

The URL and quoting HTML for one such image is in the 'Apps' list on the above Google WorkSpaces URL :

&lt;div  tabindex="0" jsname="hlMCCc" jscontroller="tKHFxf" jsaction="click:cOuCgd; mousedown:UX7yZ; 
&lt;div  tabindex="0" jsname="hlMCCc" jscontroller="tKHFxf" jsaction="click:cOuCgd; mousedown:UX7yZ;

mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc; touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;"&gt;

&ltimg  src="https://fonts.gstatic.com/s/i/productlogos/calendar_2020q4/v11/web-64dp/logo_calendar_2020q4_color_2x_web_64dp.png" data-atf="true" data-iml="772.3000000119209"&gt;
&lt;div &gt;&lt;div  jsname="oT6k3d"&gt;Calendar&lt;/div&gt;&lt;/div&gt;&lt;div &gt;&lt;/div&gt;/div&gt;mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc; touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;"
&gt;img  src="https://fonts.gstatic.com/s/i/productlogos/calendar_2020q4/v11/web-64dp/logo_calendar_2020q4_color_2x_web_64dp.png" data-atf="true" data-iml="772.3000000119209"&gt;
&lt;div &gt;&lt;div  jsname="oT6k3d"&gt;Calendar&lt;/div&gt;&lt;/div&gt;&lt;div &gt;&lt;/div&gt;&lt;/div&gt;

&lt;img  src="https://fonts.gstatic.com/s/i/productlogos/calendar_2020q4/v11/web-64dp/logo_calendar_2020q4_color_2x_web_64dp.png" data-atf="true" data-iml="772.3000000119209"&gt;```

So the result is I can't see ANYTHING EXCEPT BLACK for ALL 'Apps' Icons, no text alternative is displayed, I am carefully trying to exclude images from having their background-color or color set, I can replace '!img' with '*' and totally remove the 'img { }' clause in the CSS above and almost the same result happens, except that images have white background - but not the ones on the WorkSpaces dashboard!

What is it about above CSS that is making the icons on the WorkSpaces dashboard, and on the Format Button Icons on this page for that matter, display as all black (no image, no different background, just black) ?

[Site with 2nd Custom.css above installed ][1]

[default Chrome New Window, showing IMGs OK][2]

What is even worse, is with ANY version of ${PROFILE}/User\ Stylesheets/Custom.css installed, this page : https://support.google.com/a/users/answer/9389764 flashes displayably briefly, then disappears altogether (the whole page is blank) .

Occurs with latest version of Custom.css :


body:not(img){
    background-color:#000 !important;
    color:#FFF !important;
}

:not(input):not(button):not(img):not(table):not(form):not(a){
    background-color:transparent !important;
    color:#FFF !important;
}

input{
    background-color:#444 !important;
    color:#FFF !important;
}

table{
    background-color:transparent !important;
    color:#FFF !important;
}

form{
    background-color:#111 !important;
    color:#FFF !important;    
}

button{
   background-color:#214 !important;
}

A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}

and also visiting 'nasa.gov' displays no images on front page - strange, in above css I should not be affecting IMG tags at all.

OK, in response to editor's comment to make this question have a simple reproducable example, see:

https://bugs.chromium.org/p/chromium/issues/detail?id=1335663

T.HTML v(A) :

<HTML>
  <HEAD>
    <TITLE>
      Bug 1335663 Test Page
    </TITLE>
    <STYLE type="text/css">
      .wbgi{background-image:url("https://nasa.gov/sites/default/files/styles/2x2_cardfeed/public/thumbnails/image/nasa_meatball_large.jpg");
        width:740px;
        height:700px;
        align:center;
        text-align:center;
           }      
    </STYLE>
  </HEAD>
  <BODY>
    <FIGURE>
    <DIV >
      <H2> A Background Image</H2>
    </DIV>
      <FIGCAPTION>
    An Image displayed as Background Image in the same way it is on NASA's home page (thanks NASA!).
      </FIGCAPTION>
    </FIGURE>
  </BODY>
</HTML>

Displays in Chrome, with Either of these

  ${PROFILE}/User\ StyleSheets/Custom.css

installed in about:extensions -> 'Enable Developer Mode' -> 'Load Unpacked', with the manifest.json:

{ "name": "my_custom_css",
  "version": "1",
  "content_scripts": [{ "matches": ["http://*/*","https://*/*","file://*/*"],
            "css":     ["Custom.css"]
             }],
  "manifest_version": 2
}
```,

Custom.css v(A):

:not(img){ background-color:#000 !important; color:#FFF !important; }

A{ color: #AEC ! important; }

A:visited{ color: #A9E ! important; }

A:hover{ color: #F0F ! important; }


    OR, like Version B:

body:not(img){ background-color:#000 !important; color:#FFF !important; }

:not(input):not(button):not(img):not(table):not(form):not(a){ background-color:transparent !important; color:#FFF !important; }

input{ background-color:#444 !important; color:#FFF !important; }

table{ background-color:transparent !important; color:#FFF !important; }

form{ background-color:#111 !important; color:#FFF !important;
}

button{ background-color:#214 !important; }

A{ color: #AEC ! important; }

A:visited{ color: #A9E ! important; }

A:hover{ color: #F0F ! important; }




So, if that extension is enabled, with EITHER of the above v(A) or v(B) Custom.css files installed, Chrome displays T.HTML like:


[![Chrome display of T.HTML with v(B) Custom.css AND NO CSS style section in HEAD ][3]][3]

(a black screen, no image displayed, white text and caption is shown)


[![Chrome View of T.HTML with Custom.css Version (B) installed, which repeats Custom.css v(B) in HEAD][4]][4]

(a blank white screen, no text or image shown)

Firefox Display of EITHER version of T.HTML, with
default 'Dark' Theme selected, and the setting
'NEVER replace web-page colors with my colors' in effect,
showing the inline <head> <script type="text/css"> inclusion
of v(B) Custom.css:

[![firefox showing same T.HTML as in 2nd chrome screenshot above][5]][5]



  [1]: https://i.stack.imgur.com/eOJCY.png

  [2]: https://i.stack.imgur.com/3wRZy.png

  [3]: https://i.stack.imgur.com/B9f2g.png

  [4]: https://i.stack.imgur.com/4WG5A.png

  [5]: https://i.stack.imgur.com/vz8p0.png

CodePudding user response：

OK , this really does appear to be a chrome bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=1335663

I can't see how a Custom.css file of this CSS:


body:not(img){
    background-color:#000 !important;
    color:#FFF !important;
}

:not(input):not(button):not(img):not(table):not(form):not(a){
    background-color:transparent !important;
    color:#FFF !important;
}

input{
    background-color:#444 !important;
    color:#FFF !important;
}

table{
    background-color:transparent !important;
    color:#FFF !important;
}

form{
    background-color:#111 !important;
    color:#FFF !important;    
}

button{
   background-color:#214 !important;
}

A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}

affects the display of 'background-image's at all, nor why its effect should be identical to that of this Custom.css:

:not(img){
    background-color:#000 !important;
    color:#FFF !important;
}

A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}

, but it is! At least in the version of Chrome I am using ... that in itself is a bug - it is not honoring CSS correctly.

CodePudding user response：

Aha, Finally a Version of Custom.css that works with Chrome, allowing background images to be displayed ! :

html,body,canvas{
    color:#FFF !important;
    background-color:#000 !important;
}

button,select,form,table{
    color:#FFF !important;
    background-color:#213 !important;
}

input{
    color:#FFF !important;
    background-color:#444 !important;
}

img{
    background-color:transparent !important;
}


A{
    color: #AEC ! important;
}

A:visited{
    color: #A9E ! important;
}
    
A:hover{
    color: #F0F ! important;
}


:not(button):not(select):not(form):not(table):not(input):not(body):not(canvas):not(img):not(a){
    color:#FFF !important;
    background-color:transparent !important;
}

OK, I still think this version SHOULD BE functionally identical to the v(B) Custom.css shown in previous comments on Chrome as it is on Firefox, I still think my previous answer is correct that it is a bug in Chrome that this is not the case, but at last I have found a workaround that works to color the web white-foreground-on-black-background while allowing background images to be displayed with chrome.

Perhaps a CSS guru could enlighten me as to a valid CSS reason why this CSS works to display background images in chrome, while previous versions did not.