I have a script which dynamically creates CSS. Currently, the CSS is not loaded in the head section, but is loaded in the middle of the document.
I receive this error at validation service:
Element link is missing required attribute itemprop.
This is the line error:
<link rel='stylesheet' href='stylemaker.php?loadstyle=65456465' type='text/css' media='all' />
What are the potential causes of this problem?
itemprop is an HTML5 attribute for adding microdata to your elements. It is not necessary.
And if you can't move it into the head (for whatever reason), you can always load it dynamically using jQuery like so...
<script type="text/javascript">
$('head').append('<link rel="stylesheet" href="stylemaker.php?loadstyle=65456465" type="text/css" media="all" />');
</script>
It's not going to validate if the css is within the body tag move
<link rel='stylesheet' href='stylemaker.php?loadstyle=65456465' type='text/css' media='all' />
to the head section
Related
I am a WordPress beginner who has taken over management of an existing WordPress site. I've established that a little problem I am seeing is to do with the order of loading of CSS files. When I view page source, I can see this towards the bottom of the head (site name changed for security):
<link rel='stylesheet' id='addtoany-css' href='https://www.mysite.co.uk/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' />
<link rel='stylesheet' id='mysite-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/mysite.css?ver=1674048874' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-style-css' href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/bootstrap.css?ver=1643275784' type='text/css' media='all' />
So the custom CSS for the theme (mysite.css) is being overridden by the next line which sets everything back to Bootstrap defaults.
Where in WordPress are such things determined, and how can I set it so that the Bootstrap CSS loads first and is then potentially overridden by theme CSS?
Try to use this in your functions.php:
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('main-style','http://website.com/styles/main.css');
}, 99);
https://developer.wordpress.org/reference/functions/add_action/
Be sure you got wp_head() in your header file.
I don't want the render blocking of declaring a custom font using #font-face, so I've tried to copy how my google font CDN font is loaded for my custom server font, arriving at this:
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" rel="stylesheet" type="text/css">
</noscript>
But it does not work.
I've tried changing href for src="../Bluu...
But that didn't work.
I've tried omitting the type, since woff2 isn't text/css.
It's important, I'm not willing to block my page load for a 35kb font file, and there's no CDN for BluuNext, so I need to find a performant way to make this work or I'll just be resigned to a beiger website.
RIGHT!
I've tried the answers below, possibly they work for other fonts but not BluuNext. Perhaps other fonts maybe come in configurations beyond bold, unlike BluuNext, so maybe that causes the issue.
It IS possible to load BluuNext font, but so far only with render blocking #font-face method, loading betwixt the tags.
Here's a minimum example including a few of the proposed solutions not working...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Bluu Next test</title>
<link rel="preload" as="style" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" />
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" media="print" onload="this.media='all'">
<link rel="stylesheet" media="print" onload="this.media='all'" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css" />
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css"/>
</noscript>
<script type="text/javascript">
// Load CSS
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<style>
h2{font-family: bluuNext; font-size: 3em;}
</style>
</head><body>
<h2>Is this Bluu Next?</h2>
</body>
</html>
You can see some fancy javascript governing the loading of id="deferred-styles", that came at the suggestion of Google lighthouse and works well for Google's CDN fonts, not working for BluuNext so far.
Here's the link to download BluuNext, a lovely gothic, serif font. CLICK THE DOWNLOAD ARROW TOP RIGHT.
I'd love some ideas. I'd love to use this particular font, which is for some reason seemingly resistant to existing solutions.
You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.
https://fonts.googleapis.com/css?family=Roboto:300,400,500
This url is a css file not a font file.
Open it and you will understand how google used #font-face to load the font.
Here is the documentation from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
The modern approach to async-style <link rel="stylesheet" /> elements is to use media="print" with onload="this.media='all'".
The media="print" attribute means browsers should still download the stylesheet, but won't block the page's loading.
The onload="this.media='all'" event-handler causes the stylesheet to become enabled when and if it does load.
Because browsers might still not download print stylesheets at all, you should also add an explicit <link rel="preload" /> version (for the same stylesheet) as a strong hint that the browser should download it anyway.
However this still depends on browsers having JavaScript enabled in order for the onload="" handler to work.
...hence the need for the duplication of code in a <noscript> wrapper element.
Also, you really should be using root-relative (i.e. "/foo"-style) URIs in your <link href="" attributes, otherwise they wont' work if the user isn't accessing a page in your site's root.
I assume your BluuNext-master directory is located in your site's root.
So change your HTML to this:
<head>
<!-- onload+media trick to defer loading these stylesheets: -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="preload" as="style" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" media="print" onload="this.media='all'" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
<!-- But if Javascript is used the <noscript> will ensure the browser will load it: -->
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css" />
<link rel="stylesheet" href="/BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" type="text/css" />
</noscript>
</head>
I do think it's silly that we need to basically repeat ourselves three times as a workaround for something that should just be a part of HTML already.
When I'm trying to edit the button style in word press theme, I am unable to locate the CSS path in cpanel directory.
When I am using inspect element, it shows the following CSS url:-
http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css,wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css
I'm getting confused about how to find the right CSS path.
Please help me.
page URL:- http://www.chivazo.com/checkout/
<link rel='stylesheet' id='brands-styles-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/woocommerce-brands/assets/css/style.css,wp-content/plugins/woocommerce-currency-converter-widget/assets/css/converter.css,wp-content/plugins/yith-woocommerce-ajax-product-filter-premium/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-ajax-search/assets/css/yith_wcas_ajax_search.css,wp-content/plugins/yith-infinite-scrolling/assets/css/frontend.css,wp-content/plugins/yith-woocommerce-compare/assets/css/colorbox.css,wp-content/themes/chivazo/css/bootstrap.min.css,wp-content/themes/chivazo/css/theme-animate.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.carousel.css,wp-content/themes/chivazo/plugins/owl-carousel/owl.transitions.css' type='text/css' media='all' />
<link rel='stylesheet' id='jackbox-group-css' href='http://www.chivazo.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/chivazo/plugins/jackbox/css/jackbox.min.css,wp-content/themes/chivazo/plugins/rs-plugin/css/settings.css,wp-content/themes/chivazo/plugins/colorpicker/colorpicker.css,wp-content/themes/chivazo/style.css,wp-content/themes/chivazo/css/responsive.css,wp-content/plugins/woocommerce-woocart-popup-lite/static/styles/frontend/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='custom-style-css' href='http://www.chivazo.com/wp-content/themes/chivazo/css/custom_style.php' type='text/css' media='all' />
You have this format for calling stylesheets so that every thing came in a single line. Keep separate lines.
Please check your viewpage source.
While having this code:
<link rel="stylesheet" type="text/css" href="externalsite.com/style.css" />
EPi-Server removes this above code when saving.
When having this code:
<![CDATA[
<link rel="stylesheet" type="text/css" href="externalsite.com/style.css" />
//]]>
it seems to work.
Is this a "correct" way of doing this (to use CDATA) ?
UPDATE
It didn't actually work. It was left in code, but the css is not applied ):
UPDATE2
In case someone stumples on this issue. use jQuery and add css to head-element (within a document ready).
$('head').append('<link rel="stylesheet" href="http://externalsite.com/style.css" type="text/css" />');
No, CDATA sections are used to exempt data from being parsed as HTML, so you would just be turning the code to visible content.
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer