I’ve tried analyzing my blog’s CSS in the W3C validator, yielding this W3C validator result . Are the warnings displayed by this tool reliable? If so, how should I correct them to have a valid CSS stylesheet?
Hi @argosbcn, yes these warnings are certainly legitimate. As for what you can do: in case of redefinition / same X warnings, just remove the redundancy. The other warnings actually include instructions what you can do… as for instance:
You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
This means you should explicitly set a color, since otherwise it might be set somewhere else to a color not properly readable on that background color.
1 Like
Or not set, and you dont know what the user’s default browser background is. Not everyone runs with white as standard!
1 Like
@m3g4p0p @m_hutley How can I know if making any of the suggested corrections will “break” the web design or not? For example, it says “The property font-display does not exist: swap,” but it explains its functionality here: https://fonts.google.com/knowledge/using_type/using_web_fonts. Why does it indicate that the property doesn’t exist? Or this one, “Invalid property: font-size unknown dimension 0.875rem,” and this link explains what a rem is and how to use it: [https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20“root-,1rem%20will%20also%20equal%2016px](https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20“root-,1rem%20will%20also%20equal%2016px). It’s confusing because, in my understanding, some of these warnings are about correct expressions, and the ones that aren’t depend on various elements that make the theme responsive. How do I know if they are necessary to maintain responsiveness?
(Hint: The word ‘swap’ does not appear in the Level 3 version of this module’s specification.)
rem requires your root element (html) to have a specified font size. I presume this error is because your HTML element does not have a font size, and therefore this value is incalculable.
2 Likes
@m_hutley
So, I understand that I should use another specifications module to check it, right? Which one would be the correct one in my case to analyze my CSS?
The CSS level 4 specification will never exist as far as we know. There are level 4 versions of modules, but they’re Working Drafts, rather than Specifications. I’m not surprised that the W3C validator doesn’t allow for the CSS “level 4” module entries, because its a standardization system and the modules haven’t gone beyond the Working Draft stage. (Hint: W3C moves at glacial pace. Don’t expect changes anytime soon.)
As far as I know, all modern and still supported browsers support the ‘swap’ value for font-display. (IE doesn’t, and Opera Mini doesn’t, but if you’re coding for compatibility for those… well, I wish you luck.)
If I want to check the validity of my CSS, which includes features that would be included in a future CSS4, is there any tool I can use to analyze it considering this? I wouldn’t want to remove valid things like ‘swap’ just because the tool can’t analyze beyond CSS3.
If i run your page through the one Archibald just mentioned on CSS L3+SVG, I get 1 error, which is a correct error (I think there’s a comma missing on line 240?)
@m_hutley @Archibald Yes, I have corrected the comma, and now it seems to say that it doesn’t find errors when analyzing CSS3 + SVG. Here is the link. What I don’t understand are the 576 warnings that appear below. If it says it’s correct above, what do all those warnings refer to?
I use Litespeedcache on my website, so to analyze the unmodified code without the plugin, I need to add a code at the end of the URL. The link I analyzed in the previous post is the main one containing styles for headers, text, responsive design, etc. However, when I analyze the website with the code to prevent Litespeedcache from modifying the code, I get the following result here. Where are all these errors coming from?
Warnings refer to things that arent strictly errors in your CSS code, but may still cause problems. For example, the “There is a foreground color set and no background color” warnings. According to the CSS standard, there’s nothing SYNTACTICALLY WRONG with having a foreground and no background; it doesnt violate the CSS standard (IE: The standard doesnt say “If you set a foreground, you MUST set a background”) but it may cause problems in certain situations.
The warnings are there to say “It’s not a violation of the standard, but heres some things you might want to look at.”
1 Like
Well my first response would be to use unminified versions of the CSS files to get more descriptive results of where the error is occuring - there are 3 instances of rotate:180deg in your block library CSS, and i dont know which one the validator’s flagging because the whole thing’s been condensed into one line. The Jetpack CSS is likewise throwing errors that are very difficult to trace in minified format.
The Error generated from your html on that result is “Invalid property: cursor hand is not a value of cursor : hand”
Which is true. There’s no such value “hand” for cursor. Did you perhaps mean pointer?
As I mentioned in my previous post, I have already taken this part into account before analyzing it with W3C, following the instructions of the Litespeedcache plugin: “Visit your site with optimizations disabled by appending /?LSCWP_CTRL=before_optm to the end of your URL. This ensures that you are getting a list of the original CSS files, and not the LiteSpeed-generated versions.”
Therefore, the result you can see here is the analysis of the URL of my blog with the final addition that ensures obtaining the list of original CSS files and not those generated by Litespeed. The issue is that I don’t recognize those mentioned CSS; I’m unsure if they are part of a plugin or the WordPress core itself.
In this example, would it be inline CSS? Because I can’t place it either to figure out its function and consequently its possible solution.
Your CSS files are still minified here:
https://www.fotov60.com/wp-includes/css/dist/block-library/style.min.css?ver=355b591f6d1823ab904b6b881082766d
and here:
https://www.fotov60.com/wp-content/plugins/jetpack/css/jetpack.css?ver=13.0
Yes, it is inline on line 251:
<img decoding="async" id="faaslideshowimage[7796330449]" style="width: 250px; height: 240px; border: 1px solid #666666; cursor: hand;" title="Art Prints" src="[https://www.fotov60.com/wp-content/themes/fotov60/images/Blank.jpg](view-source:https://www.fotov60.com/wp-content/themes/fotov60/images/Blank.jpg)" alt="Art Prints" /></p>
I don´t understand why is still minified, because I followed the instructions of the plugin. I analize this url https://www.fotov60.com/?LSCWP_CTRL=before_optm where you can see I add ?LSCWP_CTRL=before_optm to the end of the url as instructions sayed. `
This ensures that you are getting a list of the original CSS files, and not the LiteSpeed-generated versions.
I guess the original CSS files are minimised.
And how can I de-minimize them to view the original CSS and analyze them to get more descriptive results of where the error is occurring, as @m_hutley suggests?
The only plugin I use that minimizes CSS is Litespeed. I disabled the Jetpack option to avoid interference with the plugin, and I believe I don’t have any other plugins minimizing CSS.
I have not used Wordpress but I guess the template you are using has minified CSS.
In replying to another thread (here), I used https://unminify.com/ but there are other similar websites.
Using https://jigsaw.w3.org/css-validator/validator, I am now seeing only one error which is cursor: hand; inline on line 74 of your HTML. I am not seeing any errors in style.css.