CSS import or <link rel...> with "media" attribute - html

What's the best method to include CSS in page and why?
for eg.:
<style type="text/css">
#import "style.css" screen, tv;
#import "print.css" print;
#import "iphone.css" iphone;
</style>
or
<LINK rel="stylesheet" media="screen" href="style.css" type="text/css" />
<LINK rel="stylesheet" media="print" href="print.css" type="text/css" />
<LINK rel="stylesheet" media="iphone" href="iphone.css" type="text/css" />
From what i know #import doesn't work in ancient browsers, this might be a advantage because these browsers will only show text instead of a unreadable CSS mess (when using link).

It has been discussed many times, you can read more here:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Difference between #import and link in CSS
http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
to mention some...
Personally I never use #import as for the performance impact.

Realistically both accomplish the same goal, but there are a few minor differences. Namely:
#import is not supported in IE6 and older and Netscape 4
#import allows multiple style sheets to be imported in a single link or style element, if desired
link allows specifying an alternate stylesheet, which browsers like FireFox, Safari, and Opera can allow users to switch to. IE also supports this if using a JavaScript switcher. This is most often used for accessibility.

Related

CSS classes not loading

I am trying to play around with this css package: https://github.com/elrumordelaluz/csshake
I followed the directions, but for some reason the animations aren't available on my page.
here's my head:
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" href="css/csshake.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
and then in the body I'm trying:
<div class="shake shake-constant">shake!</div>
If I inspect that element with Chrome dev tools, I can see that none of the css classes are applied to the div. If I change the header to <link type="text/css" rel="stylesheet" href="css/csshake.css">, then the classes appear in dev tools, but they are listed as invalid property values.
I'm sure I'm missing something really basic, but I don't know where to look.
If you look at the CSS file, it doesn't natively support cross browsers - you'll have to add relevant browser prefixes yourself
For example, animation-name: shake-base; only works in browsers that allow un-prefixed values (like new versions of FireFox). To serve Chrome you'd have to add -webkit-animation-name: shake-base;
You can use the following tools to let your computer do most of the work for you
CSSPrefixer (manually)
AutoPrefixer (automatic)
Prefixr (manual)
PrefixFree (automatic)
There are others as well

Parallax Website - fix Background images for Interent Explorer 10 mobile

For iPad and other devices I disabled the scrolling of background images, because of performance problems. All works fine.
How can I disable scrolling for IE10 and IE10 mobile (Tablet)?
Use conditional commenting in your HTML file.
If the browser agent is/is not equal to IE10 then include/exclude a CSS File
<head>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="nonIE.css" />
<![endif]>
[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
Then within each browser specific css file, you can enable any features as required.
Or use a "display:none;" on an css element, to completely hide it from a browser within your conditional css.
Note: Conditional comments are an IE-only feature, other browsers treat them as ordinary HTML tags.
The above snippet borrowed from here: http://codebox.org.uk/pages/articles/conditional-comments and the article goes in to much more detail than I have. It's a good little read.

Stylesheet not loading in Mozilla Firefox

I'm stumped. Working on a site that isn't loading properly in FireFox. It loads great in Chrome and even IE, but for some reason the stylesheet isn't loading in FireFox.
The site: http://gregsonaccounting.com
I'm using html5 code and have used the basic resets and such from html5 Boiler Plate. Not sure if the problem is in my html or CSS.
Any insight is extremely helpful.
Many thanks.
Your problem comes from style.css which begins by #charset "IBM437"
Replace it with #charset "UTF-8"; and it will be better !
It seams this charset IBM437 is auto added by SASS:
CSS pseudo element ▼ becomes gibberish in IE
A stylesheet should be defined in the format;
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
You may also include media attribute, that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
In your page, it is;
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />//Here is the problem
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
So that line may be modified like;
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
Try changing:
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />
to
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
My CSS code worked well on Chrome, but it kept crashing on IE and Firefox. Then i found out the problem was in a badly preprocessed CSS.
Just copy paste your CSS to http://csslint.net/ and if you get any error, just fix it and you are good :)
Worth trying!
insert this inside your html documents. I am not writing in code just giving u the key words so you know and can put it in.
link rel="stylesheet" type="text/css" href="stylesheet.css"
it works so make sure you have this correctly or else your html document will not load with your stylesheet. best of luck to you and keep working brah.

css link format, styles

Why most developers use the
<link href="/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css" type="text/css" />
<link href="/css/main.css" type="text/css" />
<link href="/css/table.css" type="text/css" />
instead of
<style type="text/css">
#import "/js/jquery-ui/css/flick/jquery-ui-1.8.23.custom.css";
#import "/css/main.css";
#import "/css/tables.css";
</style>
even in autogenrated code in html markup ? What is disadvantages of last method ?
Below are the few disadvantages that I know
Old browsers doesn't support #import
We can not take advantage of rel and title attributes with #import where we can take advantage of those attributes
link method is known as its simplicity
In order to learn more disadvantages with #import please go through http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
The biggest disadvantage is that CSS #import loads every CSS file seperately instead of loading files at once. This means the browser has to wait for every single imported CSS file to finish loading until it can start loading the next one. This slows down your website significantly, especially if you have a lot of imported CSS files.

effective difference between html head for css tags?: #import url vs. link href

Is there a effective difference between
<style type="text/css">#import url(/css/layout.css) all;</style>
and
<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">
Do browser behave different ?
What is recommended from w3c etc. ?
There are several reasons that you should use <link> instead of #import, 2 of them are:
Using #import may cause unexpected ordering in how they are downloaded.
The #import may cause blank white screen problem.
for more information about performance of websites, pls refer High Performance Web Sites.
I had the same question in mind . I had a clear idea when i went through this blog by Jennifer Kyrnin,
To know more you can have a look here
Begin with two stylesheets: simple.css (only simple rules for early browsers) modern.css (advanced CSS2, rules to override rules in simple.css)
Create a third stylesheet "import.css" containing only:
#import "modern.css";
Link the simple.css and import.css in the HEAD of the document:
<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />
All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the #import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily.
Alternate Syntax
Different versions of the import rule have varying levels of support from older browsers.
#import "style.css"; /* hidden from nearly all v4 browsers */
#import url('style.css'); /* IE4 can understand, but not NN4 */
...
We should not put #import at the bottom of simple.css....
According to the CSS specs, #import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.