Speaking of #webDev, what the #HTML and #CSS standards need is some way to style nodes based on DOM values of other modes.

[oblomov@sociale.network]

Speaking of #webDev, what the #HTML and #CSS standards need is some way to style nodes based on DOM values of other modes. Unless I'm missing something, we still need #JavaScript to achieve the following, but I'm open to recommendations or suggestions about things I might have missed, so let's make this an #askFedi

The intent here is to develop a JS-free “quick filter” over a list or table.

Here's what I've done:

1/n

[oblomov@sociale.network]

Let's say you have an #HTML table. Each `tr` has an attribute (say, `data-name`) whose value is indicative of the row contents (for the curious: this is a heavily customized Apache directory listing, and the data-name is a normalized version of the file/dir name, but it could be anything). There is also an `input` field. We want to only show the rows whose data-name contains the contents of the input field.

#webDev

2/n

[oblomov@sociale.network]

This could be achieved with something like this

#filteredtable tr { display: none }
#filteredtable tr[data-name*=dynamic-value-of(#filterInput)] { display: table-row }

where dynamic-value-of() is a (non-existent) #CSS function that returns the (string) value of #filterInput as it changes dynamically

Since there is not such function, I have to register a #JavaScript function with the keyup event to update the CSS rule whenever the input value changes.

So, can we get rid of JS here?

3/3

[pasu@metalhead.club]

@oblomov We probably will not see this due to separation of concerns. HTML should only provide the structure of the data that's displayed, not _what_ data is actually shown to the user. Same with CSS; while it /can/ show and hide content, it's not really meant to control data. Interacting with data, removing and adding rows is something left to JS, for a good reason imo.

[oblomov@sociale.network]

We could actually get pretty close here if #CSS supported #XPath selectors. Something like:

xpath(//table[@id="filteredtable"]/tr[contains(@data-name,//input[@id="filterinput"/@value)]) { display: table-row }

would work if the input value attribute was dynamically updated. But even without dynamic update, a selector this complex isn't possible in CSS.

4/3+