You are. CSS has gone "too far" the second it allowed linking to images.

I can simply background-image:url("myTrackingPixel.png") and then track whenever someone tries to load that image from my server.

It drives me crazy when I see someone has implemented Doom in CSS, but it still requires black magic to do a simple responsive three column layout without using bleeding edge features that aren't widely supported yet.

Browser support (not using Flexbox because of IE) is not that hard once you get your head around it:

view-source:http://alistapart.com/d/holygrail/example_3.html

http://alistapart.com/d/holygrail/example_3.html

Falls apart entirely on phones (tiny columns of one word wide each, AND horizontal scrolling), so you only proved OP's point...

In fairness, that was written in 2006 when people browsing the internet on their dumbphones generally got served entirely different web pages. And you could fix it with media queries. But the fact that it needed hacky stuff like arbitrarily large positive padding and negative margin values to achieve a "holy grail" of the standard way websites had been laid out using tables for the previous decade or so didn't reflect very well on CSS spec drafters or the browser vendors of the time.

To be honest, nothing ever stopped anyone from using display:table;, display:table-row; and display:table-cell;

This probably is the most robust solution now, but IE6 mattered then, and it didn't even work in the shiny new IE7

Well, of course. That's simply a three column layout example without any responsive media queries. It's the bare minimum to a three column "holy grail". If anything, you could simply add the viewport meta tag to have the user's phone zoom in automatically.

However, making this example responsive is a piece of cake:

@media only screen and (max-width: 1024px) {

    * {
    
        float: none !important;
        
        width: 100% !important;
        
        margin: 0 !important;
        
        padding: 0 !important;
        
        position: relative !important;
        
        right: auto !important;
        
        left: auto !important;
        
    }
    

}

(Terrible CSS simply to show how easy it is to make it responsive. Normally you wouldn't wildcard important everything but target the right classes. I can't be bothered, this gets the point across.)

This isn't a CSS feature, CSS does not let you select on the value of a password field (it lets you select on the value of the `value` attribute, which doesn't change when you type)

This is a React feature, where React apps specifically use the value attribute (`element.setAttribute("value", ...)`) to set the value, instead of `element.value`.

Or if that attribute was populated via props from it's parent, which is a more common implementation.

As other comments have stated, this only works if the 'value' attr is being set on the input box as you type (which React will do), so it still requires JS.

There are a lot of sites where you wouldn't need to inject the JS code for react though.