How do I import an css file for Chrome (or webkit).
I want to do something like this for ie6:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Your best, and easiest, bet is using a server-side language that can detect the user's browser. PHP, ColdFusion, JSP, etc have built-in functions and variables that can help you determine the browser a user has.
If not, then a client-side scripting agent is your next option. JavaScript, and its efficient library option, jQuery, are good approaches.
//jQuery
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
if ($.browser.webkit) {
///Chrome-specific css here.
}
</script>
If you can't (or don't know how to) use the library, then the following works as well, but you'll need to do a few more conditional checks
//Javascript (Note: Chrome will say 'Netscape' for its name)
<script>
var browserName = window.navigator.appName;
var browserVersion = window.navigator.appVersion;
</script>
if you want to only change lines of code instead load a full css file you could use this:
http://rafael.adm.br/css_browser_selector/
Related
I am trying to call a different style sheet in the head section of my page depending on if the browser used is IE. It's "greyed" out but from what I understand, it's still supposed to work this way. The two style sheets are identical except for one line. But, it's not linking to mainIE.css and not replacing main.css. Am I doing something wrong?
<link href="examples/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
First, the conditional comments aren't supported in IE 10 and up. That may be why you are not seeing the other stylesheet load.
Second, the conditional comment won't instruct IE to replace your first stylesheet, just to load up another one. Typically in the second stylesheet you would just put in only the differences and let the C in CSS take care of it for you.
Try the following:
<!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->
Also I knew you can do the same thing within one CSS file, if only one line is the difference.
as noted, conditional comments don't work in ie10+; you need to use conditional compilation to target them...with that said, i'm not sure how to differentiate between ie10, 11 and mobile exactly, but i bet you can simply check your jscript version. here's a demo of conditional compilation
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html
The second ('commented') stylesheet for IE will NOT replace your existing stylesheet. It's added in as a comment so all other browsers ignore it, and IE tries to find comments with this [if] statement in it to display that content. Your IE stylesheet can simply overwrite that single line that's different instead of the whole stylesheet (DRY!), saving the IE user a duplicate download.
The latest versions of IE do not support them anymore (http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/), otherwise you can find more info here: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
[EDIT: here is a Javascript solution]
You could always do it with javascript if you went to target only IE users. You could do something like the following:
var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
useragent.indexOf("trident") >= 0
|| useragent.indexOf("ms") >= 0
|| useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
// do whatever you want here, like...
document.getElementById("myElement").style.height = "100px";
}
[EDIT2:] Actually, you could just write the stylesheet if its IE:
if(internetExplorer){
document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}
I am creating a website for my company's product (I am pretty new at this), and I have just realised that A LOT of the formatting I have done seems to be completely ignored by IE versions 8 and below.
Is there a way for me to make the website direct the users of these browsers to a completely different and extremely simplified version of my website?
Any advice will be greatly appreciated!
The better way is to fix the issues by using a different stylesheet for IE8 and below.
This can be done using the conditional statements.
<!--[if lte IE 8]>
// Your IE8 and below HTML code here or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie8_and_below.css" />
<![endif]-->
If you wish to have a simplified version for IE8 and below, add this script on the page for which you want to have a minimized version.
<!--[if lte IE 8]>
<script type="text/javascript">
window.location = "http://www.example.com/ie8";
</script>
<![endif]-->
Then add your HTML markup on ie8 HTML page which will be only for IE8 and below.
You can target IE versions using conditional statements to include CSS files only to be loaded by those browsers. For example, to load a stylesheet only in IE8 and below, use:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can read more about conditional statements for IE here.
Alternatively you could sniff out the browser user-agent, and redirect accordingly but this is a less ideal solution, and it would involve page duplication.
You can get the version of the browser by the DOM object. Then you can put that in a if-else and check the version to be greater or not and then according redirect your page to somewhere else. You can also check if the user is using IE or some other browser.
var ver=navigator.appVersion;
var brw=navigator.userAgent;
if(brw.equals("msie"))
{
if(ver<8)
//redirect
else
//stay or something else
}
hope this helps.
Suppose if I have a website http://somethingsomething.com
And I have 3 css file
common.css
homepage.css
inner-pages.css
homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS
my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?
Async CSS with media="bogus" and a <link> at the foot
Say we've got our HTML structured like this:
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
More at http://codepen.io/Tigt/post/async-css-without-javascript
You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.
<iframe src="loadcss.html"></iframe>
Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.
try
$.ajax({
url:'/css.css',
type:'get',
success:function(css){
$('html').append('<style>'+css+'</style>');
}
});
or
function getCss(url){
$('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}
getCss('/css.css');
ok sorry I didn't see you don't want to use javascript
how about using css #import:
<style>
#import url('/style1.css');
#import url('/style2.css');
</style>
Include your CSS in the <body> instead of <head> ... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:
head
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
<![endif]-->
</head>
body
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
by Taylor Hunt #codepen.io
As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find useful for delivering critical CSS payloads for browsers which works well even today.
Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loader you may use if you like.
I have a web page, I want to detect whether it's running on mobile safari on an ipad. If so, it should load different css files (and if it is running on websheet then it should load another css).
I am using following way for handling css but it shows only one for both:
<link rel="stylesheet" href="main.css?v=2">
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">
Are you using a programming language to dynamically generate pages? If so, you can use user-agent sent by browser and according to it, decide which css to include.
Example:
<script type="text/javascript">
$("#btn_load_css").click(function(){
var w = screen.width;
var h = screen.height;
$(document).append("<link rel='stylesheet' "
+" href='css/defaults.css.php?w="+w+"&h="+h+"' />");
});
</script>
This will cause the css to load at the end of the file.
If your main concern is the viewport size simply use media queries.
See MDN for an easier explanation and some examples.
After reading some of the other questions on here and trying their solutions, I still have this issue with XQuery.
We are using a conditional comment to see if IE is being used. We are dynamically building paths to our javascript files like so.
<!--[if lte IE]>
<script type="text/javascript" src="{$layout:cdnPath}/scripts/browser-detect-admin.js"> </script>
<![endif]-->
But it seems that the script element is being evaluated as text and not building the correct path to our javascript. It is thinking that {$layout:cdnPath}/scripts/browser-detect-admin.js is the path to the file. I can't figure out why.
I tested this in IE 7,8 and also in IE 9 compatibility mode.
That is correct. Such expression templates are not evaluated within literal comment. Use a comment constructor instead:
comment {concat('[if lte IE]>
<script type="text/javascript" src="', $layour:cdnPath, '/scripts/browser-detect-admin.js"> </script>
<![endif]')}
HTH