AI Bonus: Very Stupid CSS
Published: Updated:
It seems like AI isn’t going away anytime soon and I might as well learn how to use it so I thought I’d ask Bing Chat to help me summarize the post on the dumbest CSS you could ever write.
I asked it to summarize the post and it said:
Based on your post, it seems like you were trying to open a
<details>
element when navigated to a specific domain through the URL hash. You were able to accomplish this by using JavaScript to check if the queried id was a<details>
element and open it if it was. However, you ran into an issue where the selector was querying an element with an id of www and classes of iea and com, instead of querying an element with an id of www.iea.com.To solve this issue, you used a CSS selector of [id=""] to query the element with the correct id. While this selector may look goofy, it works and was able to solve your issue.
An impressive sounding summary, but it’s talking about the example I used rather than the logic behind it (how the query selector was parsing a domain into classes). I asked why it was doing that and it said:
The selector was querying an element with id www and classes iea and com because the id attribute of the
<details>
element was set to www.iea.com. When you used the query selector #${window.location.hash.substring(1)}, it only selected the part of the URL hash after the “#” character, which in this case was “www.iea.com”. The query selector was looking for an element with an id attribute set to “www.iea.com”, but it couldn’t find one because the id attribute of the<details>
element was set to “www” instead. Is there anything else I can help you with? 😊
This blatantly misunderstands what I was trying to communicate.
The selector was querying an element with id www and classes iea and com because the id attribute of the
. It literally begged the question!<details>
element was set to www.iea.com.it only selected the part of the URL hash after the “#” character, which in this case was “www.iea.com”
—of course it did, that’s the point!The query selector was looking for an element with an id attribute set to “www.iea.com”
no it wasn’t!it couldn’t find one because the id attribute of the
Again, it wasn’t.<details>
element was set to “www” instead.
It seems like it didn’t understand the nature of CSS queries or query selectors.
I also asked what would happen if I used www.twitter.com
instead and it said
If you tried to query a domain like www.twitter.com, the query selector would look for an element with an id attribute set to “www.twitter.com”, but it wouldn’t find one because the id attribute of the
<details>
element was set to “www” instead.
Again, it sounds plausable, but it has the cause and effect reversed, and it doesn’t mention that com
would be queried as a class.
I then ased what would happen if I used patreon.com
instead and it said something similar to the above except with www.patreon.com
instead of www.twitter.com
instead. I asked why it would do that and it talked about domain resolution. I pointed out that I didn’t ask for www.patreon.com
and it said Patreon has a subdomain of ww1.patreon.com
instead, which it doesn’t and is so far removed from what I initially asked.
I also asked it for a better solution and it gave this:
window.addEventListener("load", (e) => {
const elem = document.querySelector(`#${window.location.hash.substring(1)}`)
if (elem && elem.tagName === "DETAILS") {
elem.open = true
elem.scrollIntoView()
}
})
All it added was The elem.scrollIntoView()
which is redundant since the browser would do that onload anyway.elem.scrollIntoView()
was an actual improvement since the # on it’s own wasn’t scrolling into view so I guess this guarantees it. Good job, LLM.
It said that the writing was clear and consise which I hope it was, and offered a thorough review but said thorough review was the same as before.
Based on what I did today it seems like AI is a master bullshitter, but it has the potential to help. It sounds like a summary, but it has no deed understanding whatsoever. Maybe I need to write in such a way that AI can understand or maybe I need to interrogate it better? Then again, if I do that, Bing Chat will kick me out.