Google Chrome 105 Released With HTML Sanitizer API, Container Queries & More

[phoronix]

Phoronix: Google Chrome 105 Released With HTML Sanitizer API, Container Queries & More

Google engineers today promoted Chrome 105 to their stable channel across Linux, macOS, Windows, and Android platforms...

https://www.phoronix.com/news/Google-Chrome-105-Stable

[arzeth]

They've also added :has for everyone.
I've been waiting for :has ever since I learnt CSS (since IE6 era in my case).
Before :has I had to use JS, or add a backend code, or add extra CSS code.

/*:has(XX, YY) means "contains XX and/or YY" */
/*:has(~ article) means "there's another <article> among next siblings".
article:has(~ article):has(iframe, > video):has(h2):has(ul):has(:focus) ~ footer {
  display: none;
}
article:has(video):not(:has(iframe)) {
  background: #fff;
}
/* an <article> with 3 children */
article:has(> :nth-child(3):last-child) {
}
article:has(> div:nth-child(1)):has(> img:nth-child(2)):has(> img:nth-child(3):last-child) 
}

Safari already had :has since 15.4.
Only Firefox doesn't have :has by default, although since Firefox 103 (cur ver=104) it's been possible to enable :has in about:config layout.css.has-selector.enabled

[uid313]

See the New in Chrome 105 article.

[jaxa]

They've also added :has for everyone.
I've been waiting for :has ever since I learnt CSS (since IE6 era in my case).
Before :has I had to use JS, or add a backend code, or add extra CSS code.

/*:has(XX, YY) means "contains XX and/or YY" */
/*:has(~ article) means "there's another <article> among next siblings".
article:has(~ article):has(iframe, > video):has(h2):has(ul):has(:focus) ~ footer {
display: none;
}
article:has(video):not(:has(iframe)) {
background: #fff;
}
/* an <article> with 3 children */
article:has(> :nth-child(3):last-child) {
}
article:has(> div:nth-child(1)):has(> img:nth-child(2)):has(> img:nth-child(3):last-child)
}

Safari already had :has since 15.4.
Only Firefox doesn't have :has by default, although since Firefox 103 (cur ver=104) it's been possible to enable :has in about:config layout.css.has-selector.enabled

That sounds fantastic, and I vaguely remember seeing it over a decade ago.

[onlyLinuxLuvUBack]

They've also added :has for everyone.
I've been waiting for :has ever since I learnt CSS (since IE6 era in my case).
Before :has I had to use JS, or add a backend code, or add extra CSS code.

/*:has(XX, YY) means "contains XX and/or YY" */
/*:has(~ article) means "there's another <article> among next siblings".
article:has(~ article):has(iframe, > video):has(h2):has(ul):has(:focus) ~ footer {
display: none;
}
article:has(video):not(:has(iframe)) {
background: #fff;
}
/* an <article> with 3 children */
article:has(> :nth-child(3):last-child) {
}
article:has(> div:nth-child(1)):has(> img:nth-child(2)):has(> img:nth-child(3):last-child)
}

Safari already had :has since 15.4.
Only Firefox doesn't have :has by default, although since Firefox 103 (cur ver=104) it's been possible to enable :has in about:config layout.css.has-selector.enabled

you can has cheezeburgers now but will we get a phoronix benchmark ?