CSS property with no value in cdn file

[Ricardo-a11y]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have in CSS file this:
--bs-btn-font-family: ;

It's without any value. This bug appers in several places, arround 16.

When I pass some test for web accesibility it brings me some problems.

I'm using https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css but it also happend with lastest version
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

Source about no value in css property-> https://stackoverflow.com/questions/11639536/css-property-with-no-value

Thanks in advance.

Reduced test cases

https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2

[julien-deramond]

Duplicate of #36595

[Ricardo-a11y]

Hi again,

I'm think is not an duplicate issue.

In #36595 thread is trying to solve it compliling with scss again. My problem is not that. Problem is that I'm catching or downloading what is in a a cdn server. I can complile by myself but if I want to use what bootstrap has, it comes with this bug.

How should be solved in my humble opinion? Bootstrap should compile again it's scss without empty values and after share it in every cdn server.

This bug is already active, you can see in this files, searching by: "--bs-btn-font-family: ;"

https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

It's a bug in what Bootstrap is offering in an easy start.

Thanks in advance.

[julien-deramond]

This is the same thing as #36595, at least in the same spirit. In this issue, OP is trying to rebuild bootstrap.css but we have the same thing in our own bootstrap.css. It's perfectly valid in our bootstrap.css (which is uploaded to cdn.jsdelivr.net) to have empty custom properties.
We'll try to get rid of them if possible but that's not mandatory.

[Ricardo-a11y]

"To be absolutely clear, properties must have a value according to the rules. A property without a value is an error and will be ignored."

Problem is with web accesibility readers. I don't care about your bootstrap.css, problem is when I use this css on CDN servers.

In issue #36595 says: "This isn't exactly broken, it's that the Sass variables are null and do not compile to anything"

This is not right, Sass variables that are null are compiles not to anything, These null compiles to "--bs-btn-font-family: ;" for example. Sass is not removing the property: null line during compilation. It's still there and empty.

It happend only 16 times in https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css and 16 times in https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

It's seems easy to fix it, doesn't it?

[ffoodd]

To be crystal clear, there's nothing to fix as mentioned in the related issue. This is valid CSS.

This is is not a property but a custom property, meant to be called somewhere at computed time. An empty value can even be used to implement conditional CSS using a trick called Space Toggle. The Stack Overflow discussion you linked is 10 years old, custom properties didn't even exist at that time.

Empty custom property does not have any effect on screen readers or any other technology by itself. Whichever tool currently asserting you this is an issue is wrong and you should probably report an issue to them instead.