Is it ever necessary or advisable to use both <link> tags and the #import command to import a stylesheet? In particular, I'm looking at lines 14-15 of this page, where it appears both commands are used to import the same stylesheet. Why did the author do this?
EDIT: For posterity, here's the code in question:
<link rel='stylesheet' type='text/css' media='all' href='http://socialmediaclassroom.com/index.php?css=site/site_css.v.1223354306' />
<style type='text/css' media='screen'>#import "http://socialmediaclassroom.com/index.php?css=site/site_css.v.1223354306";</style>
Here's why.
I must say that using the same css is a bit confusing.
I can't think of a single reason to do this:
<link rel='stylesheet' type='text/css' media='all' href='site_css.v.1223354306' />
<style type='text/css' media='screen'>#import "site_css.v.1223354306";</style>
In fact, it seems retarded. If there's some obscure reason to do this, someone please tell me :)
The author should get rid of the #import line, because it can cause slow downs in initial page rendering.
See here for why: don’t use #import, or the Yahoo recommendations document.
Related
Today I noticed that font on my website mstem.net changed. I don't know why yet this font changed. In my main CSS file I have imported Google Fonts like:
#import url('https://fonts.googleapis.com/css?family=Oswald:400,900');
#import url('https://fonts.googleapis.com/css?family=Lato:400,900');
I checked for CSS code from Google Chrome Console and I noticed there is CSS rule added like:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
I don't know where this line of code came from. When I uncheck it font comes back to normal.
Could you write me how to disable this CSS rule permanently?
I must add that I use Google Chrome Browser at Macbook with OSX 10.13.6.
Thank you for your help.
Cheers.
That CSS is coming from bootstrap.
In your header you have
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
...
...
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
Move your my-styles CSS below bootstrap for it to take precedence.
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
I managed to solve that problem.
I installed Insert Header and Footers WordPress Plugin and paste in the header section this Google Fonts code:
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;900&family=Oswald:wght#400;700&display=swap" rel="stylesheet">
I looked up to a file which was the problem and I found out that problem was with the normilze.css file. I don't know if it was added with the newest WP version automatically or in some other way but it has broken my website.
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.
I'm using the Roboto font in my website and it's rendering like the following in Chrome (Windows)
The font renders OK in iOS.
How can I fix this? Any help is appreciated :)
I had a similar problem.
Instead using the standard code provided by google,
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
I added a crossorigin="anonymous" property tag.
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' crossorigin="anonymous">
Sincerely, I don't know the real reason, but it worked. Hope that works for you too.
i have a website and i have multiple css style sheet for print, tv, screen, handheld etc...
i want to know which one of these method is better to use (performance, usability, etc...)
<link href="all.css" media="all" type="text/css" />
<link href="handheld.css" media="handheld" type="text/css" />
<link href="tv_print.css" media="tv, print" type="text/css" />
or
<style type="text/css">
#import url("all.css") all;
#import url("handheld.css") handheld;
#import url("tv_print.css") tv, print;
</style>
thank you
The first method (link) is the best.
The main reason is that there is a bug in IE 6,7 and 8 (not sure about 9 or higher) means that when you use #import in conjunction with link the files are loading in series rather than in parallel. This can slow things down a lot when using more than one style sheet.
Just using #import downloads in series, but the order isn't guaranteed, meaning that if there is a reset for instance, that may or may not be applied first.
This article has a good summary: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
I'm just curious how most people make their ASP.NET pages printer-friendly? Do you create a separate printer-friendly version of the ASPX page, use CSS or something else? How do you handle situations like page breaks and wide tables?
Is there one elegant solution that works for the majority of the cases?
You basically make another CSS file that hide things or gives simpler "printer-friendly" style to things then add that with a media="print" so that it only applies to print media (when it is printed)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Our gracious host wrote a good blog post on this topic:
Coding Horror: Stylesheets for Print and Handheld
I am a php user, but the point must be that the result no matter what is HTML and HTML is styled with CSS and there is an option for your style sheets for just using the style for printing. This should be the way to do it, imho. About big tables, there isnt really a magic "fix" for that. Page will break where it breaks, dont really understand the problem here either.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />