CODEWITHSUNDEEP
htmlcssregexflags
Jasper R.
Jasper R.

Reputation: 405

CSS regular expression flags: ignore case, global search

I have the following HTML:

<div>
    <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img>
    <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img>
</div>

And the following CSS:

img {
    height:200px;
    width:auto;
}

img[class*='i'] {
    outline:red inset;
}

img[class*='I'] {
    outline:green inset;
}

img[class*=/'i'/i] {
    outline:blue inset;
}

As you can see, in the last CSS snippet I'm trying (inexpertly) to overwrite the previous snippets as a proof of concept. The question is this:

is CSS compatible with Regexp flags such as "ignore case" and "global search?" If so, how can they be used?

On a separate note (the end goal for all this is to arrive at CSS code which removes iframes containing "autoplay=1" entirely), can CSS halt autoplayback?

Upvotes: 1

Views: 132

Answers (1)

Siguza
Siguza

Reputation: 23830

To my knowledge, you can't use actual Regex in CSS, there's only a thing called "Substring matching attribute selectors", which works like:

[attribute^='...'] /* attribute value starts with '...' */
[attribute$='...'] /* attribute value ends with '...' */
[attribute*='...'] /* attribute value contains '...' */

But you're already doing that in your second and third selector.

As for your other question

Can CSS halt autoplayback?

No, not to my knowledge.

You could make the element invisible, but that wouldn't stop audio from playing.
Additionally, with your example, it is not currently possible to "descend" into an iframe with CSS. Maybe it will be possible when Shadow DOM support advances, but I doubt that it will work cross-origin.

You would need JavaScript to detect and stop elements that are autoplaying, but that too would only work same-origin, because you can't access frames of a different origin.
And if the page is same-origin, you could also just remove the autoplaying element from that site...

The only "solution" here would probably be to fetch the iframe contents server-side, strip out all unwanted content and embed the result in your page.

Upvotes: 1

Related Questions